feat: integrations UI improvement #3775

emlimlf · 2026-01-23T07:04:45Z

In this PR

Removed the github toggle on the project integrations list page
Clicking on the connect button for github will now open up a dropdown to choose the v1 and v2
Changed the integrations sorting
Made various UI changes to update the design

Ticket

Note

Medium Risk
Mostly UI/UX changes, but it also alters integration connect/disconnect flows (GitHub v1/v2 selection, Git/Gerrit validation and mirrored-repo blocking) which could impact user ability to manage integrations if regressions occur.

Overview
Integrations UI refresh across the admin project list and drawers. The integrations list page is redesigned (new lfx tabs with hash syncing, updated card layout, reordered integrations, added “Learn more” docs links) and removes the old GitHub version toggle; GitHub connect is now a dropdown offering v1 vs v2, with new v1/v2 tags.

Integration drawers are standardized with a new DrawerDescription (shows integration description + docs link), updated drawer/header/footer styling, and widespread button style changes (new outline and danger-ghost button types, rounded inputs/selects). Git/Gerrit settings drawers gain empty states, improved remote URL entry (including labeled inputs), mirrored-repo awareness (separating native vs mirrored repos), “revert changes”, and disconnect flows guarded by a new typed confirmation modal and tooltips when Git is mirroring repos.

^{Written by Cursor Bugbot for commit d223e93. This will update automatically on new commits. Configure here.}

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

…tDev/crowd.dev into feat/integrations-ui-improvement

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

github-actions

Conventional Commits FTW!

github-actions · 2026-01-23T07:04:57Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

github-actions · 2026-01-23T07:04:57Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

github-actions · 2026-01-23T07:05:01Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

github-actions · 2026-01-23T07:05:21Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

github-actions · 2026-01-23T07:11:47Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

frontend/config/styles/components/button.scss

frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue

gaspergrom

General observations from the code review.

gaspergrom · 2026-01-23T11:26:19Z

frontend/src/config/integrations/git/components/git-params.vue


+// Track mirrored repos (sourceIntegrationId != gitIntegrationId)
+const mirroredRepoUrls = ref<string[]>([]);
+const reposNoMirrored = computed(() => repositories.value.filter((r) => !mirroredRepoUrls.value.includes(r)));


Variable naming could be more descriptive - consider nonMirroredRepos or nativeRepos instead of reposNoMirrored.

gaspergrom · 2026-01-23T11:28:40Z

frontend/src/config/integrations/github/components/github-connect.vue

+  if (code && !source && state !== 'noconnect') {
+    isFinishingModalOpen.value = true;
+    doGithubConnect({
+      code,


Function name has a typo: finallizeGithubConnect should be finalizeGithubConnect (double 'l').

gaspergrom · 2026-01-23T11:28:40Z

frontend/src/modules/admin/modules/integration/components/integration-confirmation-modal.vue

+
+const emit = defineEmits<{(e: 'update:modelValue', value: boolean): void}>();
+
+const disconnectConfirm = ref('');


Consider resetting disconnectConfirm when the modal closes to avoid stale state if the user reopens it.

gaspergrom · 2026-01-23T11:28:40Z

frontend/src/ui-kit/lfx/tabs/tab.vue

+  const instance = getCurrentInstance();
+  return instance?.parent;
+});
+


This could throw if parent is null. Add optional chaining: parent.value?.props?.modelValue to avoid potential runtime errors.

gaspergrom · 2026-01-23T11:28:40Z

frontend/config/styles/components/button.scss

+  // Active
+  --lf-btn-outline-active-text: var(--lf-color-gray-900);
+  --lf-btn-outline-active-background: var(--lf-color-white);
+  --lf-btn-outline-active-border: var(--lf-color-gray-200);


Copy-paste issue here - the disabled and loading variables for 'outline' are using secondary-link prefixed variables instead of outline. Should be --lf-btn-outline-disabled-* and --lf-btn-outline-loading-*.

gaspergrom · 2026-01-23T11:28:40Z

frontend/src/modules/admin/modules/integration/components/drawer-description.vue

+  integrationKey: string;
+}>();
+
+const integration = computed(() => lfIntegrations()[props.integrationKey]);


This calls lfIntegrations() on every component render since it's inside a computed property. Consider memoizing this or passing the integration config as a prop from the parent to avoid repeated object instantiation.

gaspergrom · 2026-01-23T11:28:40Z

frontend/src/config/integrations/github/components/github-mapped-repos.vue

 const repoNameFromUrl = (url: string) => url.split('/').at(-1);

 onMounted(() => {
+  // mappedReposWithOtherProject.value = {"project":"Project Test","repositories":[{"url":"https://github.com/emlim23/array-flattener"}]};


Commented debug code should be removed before merging.

gaspergrom · 2026-01-23T11:30:09Z

frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue

+const hasChanges = computed(() => repositories.value.length !== initialRepositories.value.length
+    || JSON.stringify(repoMappings.value) !== JSON.stringify(initialRepoMappings.value));

 // Drawer visibility


The hasChanges comparison using JSON.stringify works but can be fragile if object key order changes. For shallow objects like this it's probably fine, but consider using a utility like lodash's isEqual for more robust deep comparison if this becomes more complex.

gaspergrom · 2026-01-23T11:30:09Z

frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue

+    required: (value: string[]) => value.length > 0 && value.every((v) => v.trim() !== ''),
+  },
+}, form, { $stopPropagation: true });



The validation for repoNames checks if every value is non-empty, but the form initializes with repoNames: ['']. This will immediately fail validation when the empty state toggle adds a repo. You might want to either initialize with an empty array or adjust the validation to skip empty strings during initial state.

gaspergrom · 2026-01-23T11:30:28Z

frontend/src/modules/admin/modules/integration/components/integration-list-item.vue

-          <h6 class="mb-0.5">
-            {{ props.config.name }}
+          <h6 v-if="isV2" class="mb-0.5 flex items-center gap-2">
+            Github


Hardcoded 'Github' string here instead of using props.config.name. Should probably be 'GitHub' (capital H) for consistency with branding.

gaspergrom · 2026-01-23T11:30:28Z

frontend/src/modules/admin/modules/integration/components/integration-list-item.vue

+//   inte.status = 'done';
+//   return inte;
+// });
 const status = computed(() => getIntegrationStatus(integration.value));


Commented debug code should be removed before merging.

github-actions · 2026-01-26T06:06:56Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

github-actions · 2026-01-26T06:27:06Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

frontend/config/styles/components/button.scss

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

github-actions · 2026-01-26T07:34:03Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

github-actions · 2026-01-27T04:47:32Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue

github-actions · 2026-01-28T07:05:24Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

frontend/src/shared/drawer/drawer.vue

github-actions · 2026-01-29T04:13:15Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

frontend/src/config/integrations/github/components/github-mappings-display.vue

cursor · 2026-01-29T04:21:54Z

frontend/src/config/integrations/git/components/git-settings-empty.vue

+export default {
+  name: 'LfGitSettingsEmpty',
+};
+</script>


Nearly identical empty state components for Git and Gerrit

Low Severity

The new git-settings-empty.vue and gerrit-settings-empty.vue components are nearly identical, differing only in the platform name ("Git" vs "Gerrit") in the title and description text. Both components have the same structure, styling, icon, button, and emit behavior. This could be a single reusable component that accepts the platform name as a prop, reducing duplication and ensuring consistent empty state UI across integrations.

Additional Locations (1)

frontend/src/config/integrations/gerrit/components/gerrit-settings-empty.vue#L1-L32

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

github-actions · 2026-01-29T07:51:23Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

github-actions · 2026-01-29T07:51:34Z

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

feat: add user authentication (CM-123)
feat: add user authentication (IN-123)

Projects:

CM: Community Data Platform
IN: Insights

Please add a Jira issue key to your PR title.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

cursor · 2026-01-29T08:02:15Z

frontend/src/ui-kit/lfx/tabs/tabs.vue

+export default {
+  name: 'LfxTabs',
+};
+</script>


New LfxTabs duplicates existing LfTabs component logic

Low Severity

The new LfxTabs and LfxTab components duplicate the existing LfTabs and LfTab components almost entirely. Both implementations share identical props, computed properties, watchers, route fragment handling, and event emission logic. The only differences are CSS class names (c-tabs vs lfx-c-tabs). This duplicates all the tab management logic unnecessarily and creates two parallel implementations to maintain.

Additional Locations (1)

frontend/src/ui-kit/lfx/tabs/tab.vue#L1-L30

emlimlf added 20 commits January 20, 2026 15:26

feat: update header and tabs

61b5675

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

feat: update card borders and github integration status

4baaea1

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

fix: github mapping display

125bcdb

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

chore: changed integration description text

cc69c20

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

feat: update header and tabs

4e23589

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

feat: update card borders and github integration status

1549c4e

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

fix: github mapping display

265e3c0

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

chore: changed integration description text

ce60eab

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

Merge branch 'feat/integrations-ui-improvement' of github.com:CrowdDo…

fd3a0c4

…tDev/crowd.dev into feat/integrations-ui-improvement

chore: revert to previous status display

83c3057

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

fix: github footer display

2125949

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

feat: changed github mapping drawer to match new design

56f9f73

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

fix: git footer display

e2ab9b1

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

chore: changed all button drawers to rounded

bdfc015

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

chore: fix all integration drawwers

4f600c7

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

feat: changed UI for git and gerrit drawers

35cc253

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

chore: reorder integrations list

9332d57

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

Merge branch 'main' into feat/integrations-ui-improvement

571615a

feat: changed git drawer ui design

57ba316

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

feat: added disabled tooltip to git drawer disconnect

c103160

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

emlimlf requested a review from gaspergrom January 23, 2026 07:04

github-actions bot reviewed Jan 23, 2026

View reviewed changes

emlimlf changed the title ~~Feat/integrations UI improvement~~ feat: integrations UI improvement Jan 23, 2026

cursor bot reviewed Jan 23, 2026

View reviewed changes

frontend/config/styles/components/button.scss Outdated Show resolved Hide resolved

frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

gaspergrom reviewed Jan 23, 2026

View reviewed changes

Merge branch 'main' into feat/integrations-ui-improvement

d9a1f47

cursor bot reviewed Jan 26, 2026

View reviewed changes

frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue Show resolved Hide resolved

chore: address PR comments

1ea079c

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

cursor bot reviewed Jan 26, 2026

View reviewed changes

frontend/config/styles/components/button.scss Show resolved Hide resolved

feat: added connected repo message to drawers

a11edb5

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

cursor bot reviewed Jan 26, 2026

View reviewed changes

frontend/src/config/integrations/gitlab/components/gitlab-settings-drawer.vue Outdated Show resolved Hide resolved

fix: notification text for gerrit and gitlab

a282333

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

emlimlf requested a review from gaspergrom January 27, 2026 04:47

cursor bot reviewed Jan 27, 2026

View reviewed changes

frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue Show resolved Hide resolved

gaspergrom approved these changes Jan 27, 2026

View reviewed changes

Merge branch 'main' into feat/integrations-ui-improvement

a240262

cursor bot reviewed Jan 28, 2026

View reviewed changes

frontend/src/shared/drawer/drawer.vue Show resolved Hide resolved

Merge branch 'main' into feat/integrations-ui-improvement

2d7b032

cursor bot reviewed Jan 29, 2026

View reviewed changes

emlimlf and others added 2 commits January 29, 2026 15:50

feat: redesign gerrit drawer

47d4eb2

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

Merge branch 'main' into feat/integrations-ui-improvement

d223e93

cursor bot reviewed Jan 29, 2026

View reviewed changes


		const emit = defineEmits<{(e: 'update:modelValue', value: boolean): void}>();

		const disconnectConfirm = ref('');

feat: integrations UI improvement #3775

Are you sure you want to change the base?

feat: integrations UI improvement #3775

Uh oh!

Conversation

emlimlf commented Jan 23, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

In this PR

Ticket

Uh oh!

github-actions bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 23, 2026

Uh oh!

github-actions bot commented Jan 23, 2026

Uh oh!

github-actions bot commented Jan 23, 2026

Uh oh!

github-actions bot commented Jan 23, 2026

Uh oh!

github-actions bot commented Jan 23, 2026

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

gaspergrom left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 26, 2026

Uh oh!

Uh oh!

github-actions bot commented Jan 26, 2026

Uh oh!

Uh oh!

github-actions bot commented Jan 26, 2026

Uh oh!

Uh oh!

github-actions bot commented Jan 27, 2026

Uh oh!

Uh oh!

github-actions bot commented Jan 28, 2026

Uh oh!

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Nearly identical empty state components for Git and Gerrit

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

cursor bot left a comment

emlimlf commented Jan 23, 2026 •

edited by cursor bot

Loading

github-actions bot left a comment •

edited

Loading