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

CM-892

Note

Major integrations UX refresh with new components, styles, and flows.

Add outline and danger-ghost button variants; migrate connect/cancel actions to outline, round primary actions, and tweak shadows/layout
Introduce DrawerDescription (with docs links) and apply across integration drawers; add disconnect confirmation modal
New LFX Tabs and styling updates; refine inputs/selects (pill/rounded)
Git: redesigned settings (empty state, native vs mirrored repos, revert changes), disable disconnect when mirroring, improved params display
Gerrit: revamped settings with empty state and validation; updated actions/icons
GitHub: replace single connect with dropdown to choose v1/v2; update v2 settings drawer (version tag, revert, disconnect); unify mapped repos/mappings display
Integration list page: new header/breadcrumbs and tabbed filtering; remove GitHub version toggle
Copy cleanups in multiple integration configs (shorter descriptions) and assorted SCSS/Tailwind tweaks

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

Signed-off-by: Efren Lim <[email protected]>

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

Signed-off-by: Efren Lim <[email protected]>

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 <[email protected]>

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 <[email protected]>

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 <[email protected]>

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.

cursor · 2026-01-27T04:54:01Z

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

+const isDisconnectIntegrationModalOpen = ref(false);
+
+const hasChanges = computed(() => repositories.value.length !== initialRepositories.value.length
+    || !isEqual(repoMappings.value, initialRepoMappings.value));


hasChanges computed ignores organization sync state changes

Low Severity

The hasChanges computed only compares repositories.value.length and repoMappings.value, but ignores changes to organizations.value. When a user toggles an organization's full sync status, the organizations array changes but hasChanges remains false. This causes the "Revert changes" button to not appear, even though revertChanges() does revert organization changes and buildSettings() uses the organizations array to set the fullSync flag.

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.

cursor

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

cursor · 2026-01-28T07:16:18Z

frontend/src/shared/drawer/drawer.vue

+                  @click="close"
+                >
+                  <lf-icon name="xmark" :size="20" class="text-gray-900 group-hover:text-primary-500" />
+                </lf-button>


Drawer close icon hover effect broken by missing group class

Low Severity

The close button icon uses group-hover:text-primary-500 to change color on hover, but this requires a parent element with the group class. The old code had class="... group" on the button wrapper, but the refactored code removed this class while keeping the group-hover utility on the icon. Without a group class parent, the Tailwind group-hover utility has no effect, and the icon will remain text-gray-900 on hover instead of changing to text-primary-500.

emlimlf added 20 commits January 20, 2026 15:26

feat: update header and tabs

61b5675

Signed-off-by: Efren Lim <[email protected]>

feat: update card borders and github integration status

4baaea1

Signed-off-by: Efren Lim <[email protected]>

fix: github mapping display

125bcdb

Signed-off-by: Efren Lim <[email protected]>

chore: changed integration description text

cc69c20

Signed-off-by: Efren Lim <[email protected]>

feat: update header and tabs

4e23589

Signed-off-by: Efren Lim <[email protected]>

feat: update card borders and github integration status

1549c4e

Signed-off-by: Efren Lim <[email protected]>

fix: github mapping display

265e3c0

Signed-off-by: Efren Lim <[email protected]>

chore: changed integration description text

ce60eab

Signed-off-by: Efren Lim <[email protected]>

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 <[email protected]>

fix: github footer display

2125949

Signed-off-by: Efren Lim <[email protected]>

feat: changed github mapping drawer to match new design

56f9f73

Signed-off-by: Efren Lim <[email protected]>

fix: git footer display

e2ab9b1

Signed-off-by: Efren Lim <[email protected]>

chore: changed all button drawers to rounded

bdfc015

Signed-off-by: Efren Lim <[email protected]>

chore: fix all integration drawwers

4f600c7

Signed-off-by: Efren Lim <[email protected]>

feat: changed UI for git and gerrit drawers

35cc253

Signed-off-by: Efren Lim <[email protected]>

chore: reorder integrations list

9332d57

Signed-off-by: Efren Lim <[email protected]>

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

571615a

feat: changed git drawer ui design

57ba316

Signed-off-by: Efren Lim <[email protected]>

feat: added disabled tooltip to git drawer disconnect

c103160

Signed-off-by: Efren Lim <[email protected]>

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 <[email protected]>

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 <[email protected]>

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 <[email protected]>

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

cursor bot reviewed Jan 27, 2026

View reviewed changes

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


		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!

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

hasChanges computed ignores organization sync state changes

Uh oh!

github-actions bot commented Jan 28, 2026

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 28, 2026

Choose a reason for hiding this comment

Drawer close icon hover effect broken by missing group class

Uh oh!

Reviewers

Assignees

Labels

emlimlf commented Jan 23, 2026 •

edited by cursor bot

Loading

github-actions bot left a comment •

edited

Loading