feat: integrations UI improvement

backend/src/services/integrationService.ts

@@ -28,8 +28,8 @@ import {
   softDeleteRepositories,
 } from '@crowd/data-access-layer/src/repositories'
 import {
+  getMappedAllWithSegmentName,
   getMappedRepos,
-  getMappedWithSegmentName,
   hasMappedRepos,
 } from '@crowd/data-access-layer/src/segments'
 import {
@@ -2683,10 +2683,10 @@ export default class IntegrationService {
       getMappedRepos(qx, segmentId, PlatformType.GITHUB_NANGO),
       getMappedRepos(qx, segmentId, PlatformType.GITLAB),
     ])
-    const project = await getMappedWithSegmentName(qx, segmentId, githubPlatforms)
+    const projects = await getMappedAllWithSegmentName(qx, segmentId, githubPlatforms)
 
     return {
-      project,
+      projects,
       repositories: [...githubMappedRepos, ...githubNangoMappedRepos, ...gitlabMappedRepos],
     }
   }

frontend/config/styles/components/button.scss

@@ -180,6 +180,27 @@
   --lf-btn-secondary-ghost-loading-background: var(--lf-color-transparent);
   --lf-btn-secondary-ghost-loading-border: var(--lf-color-transparent);
 
+  /* Danger Ghost */
+  --lf-btn-danger-ghost-text: var(--lf-color-red-500);
+  --lf-btn-danger-ghost-background: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-border: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-shadow: var(--shadow-none);
+  // Hover
+  --lf-btn-danger-ghost-hover-text: var(--lf-color-red-500);
+  --lf-btn-danger-ghost-hover-background: var(--lf-color-red-100);
+  --lf-btn-danger-ghost-hover-border: var(--lf-color-red-100);
+  // Active
+  --lf-btn-danger-ghost-active-text: var(--lf-color-red-500);
+  --lf-btn-danger-ghost-active-background: var(--lf-color-red-100);
+  --lf-btn-danger-ghost-active-border: var(--lf-color-red-100);
+  // Disabled
+  --lf-btn-danger-ghost-disabled-text: var(--lf-color-red-200);
+  --lf-btn-danger-ghost-disabled-background: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-disabled-border: var(--lf-color-transparent);
+  // Loading
+  --lf-btn-danger-ghost-loading-text: var(--lf-color-red-200);
+  --lf-btn-danger-ghost-loading-background: var(--lf-color-transparent);
+  --lf-btn-danger-ghost-loading-border: var(--lf-color-transparent);
 
   /* Secondary Gray */
   --lf-btn-secondary-gray-text: var(--lf-color-primary-500);
@@ -272,4 +293,27 @@
   --lf-btn-secondary-link-loading-text: var(--lf-color-gray-400);
   --lf-btn-secondary-link-loading-background: var(--lf-color-transparent);
   --lf-btn-secondary-link-loading-border: var(--lf-color-transparent);
+
+  /* Outline */
+  --lf-btn-outline-text: var(--lf-color-neutral-900);
+  --lf-btn-outline-background: var(--lf-color-white);
+  --lf-btn-outline-border: var(--lf-color-neutral-200);
+  --lf-btn-outline-shadow: var(--shadow-none);
+  // Hover
+  --lf-btn-outline-hover-text: var(--lf-color-neutral-900);
+  --lf-btn-outline-hover-background: var(--lf-color-neutral-50);
+  --lf-btn-outline-hover-border: var(--lf-color-neutral-200);
+  // Active
+  --lf-btn-outline-active-text: var(--lf-color-neutral-900);
+  --lf-btn-outline-active-background: var(--lf-color-neutral-50);
+  --lf-btn-outline-active-border: var(--lf-color-neutral-200);
+  // Disabled
+  --lf-btn-outline-disabled-text: var(--lf-color-neutral-400);
+  --lf-btn-outline-disabled-background: var(--lf-color-white);
+  --lf-btn-outline-disabled-border: var(--lf-color-neutral-200);
+  // Loading
+  --lf-btn-outline-loading-text: var(--lf-color-neutral-400);
+  --lf-btn-outline-loading-background: var(--lf-color-white);
+  --lf-btn-outline-loading-border: var(--lf-color-neutral-200);
+
 }

frontend/config/styles/components/switch.scss

@@ -24,19 +24,9 @@
 
   // Disabled Unchecked
   --lf-switch-disabled-unchecked-handle: var(--lf-color-white);
-
-  // Disabled Checked
+  --lf-switch-disabled-background: var(--lf-color-gray-200);
   --lf-switch-disabled-checked-handle: var(--lf-color-white);
-
-  /* ---------------------------------- *\
-           Switch sizes
-  \* ---------------------------------- */
-
-  /* Tiny */
-  --lf-switch-tiny-height: #{rem(16)};
-  --lf-switch-tiny-width: #{rem(30)};
-  --lf-switch-tiny-font-size: #{rem(12)};
-  --lf-switch-tiny-line-height: #{rem(15)};
+  --lf-switch-disabled-checked-background: var(--lf-color-primary-500);
 
   /* Small */
   --lf-switch-small-height: #{rem(20)};

frontend/config/styles/variables/_colors.scss

@@ -31,6 +31,18 @@
   --lf-color-secondary-200: #99AFC9;
   --lf-color-secondary-100: #CCD7E4;
   --lf-color-secondary-50: #E6EBF2;
+
+  // Brand
+  --lf-color-brand-900: #000816;
+  --lf-color-brand-800: #002648;
+  --lf-color-brand-700: #004880;
+  --lf-color-brand-600: #006DBE;
+  --lf-color-brand-500: #0094FF;
+  --lf-color-brand-400: #54ABFF;
+  --lf-color-brand-300: #83C1FF;
+  --lf-color-brand-200: #ADD6FF;
+  --lf-color-brand-100: #D6EBFF;
+  --lf-color-brand-50: #EBF5FF;
 
   // Gray
   --lf-color-gray-900: #111827;
@@ -45,6 +57,19 @@
   --lf-color-gray-100: #F3F4F6;
   --lf-color-gray-50: #F9FAFB;
 
+  // Neutral
+  --lf-color-neutral-900: #0F172B;
+  --lf-color-neutral-800: #1D293D;
+  --lf-color-neutral-700: #314158;
+  --lf-color-neutral-600: #45556C;
+  --lf-color-neutral-500: #62748E;
+  --lf-color-neutral-400: #90A1B9;
+  --lf-color-neutral-300: #CAD5E2;
+  --lf-color-neutral-250: #e6e6e6;
+  --lf-color-neutral-200: #E2E8F0;
+  --lf-color-neutral-100: #F1F5F9;
+  --lf-color-neutral-50: #F8FAFC;
+
   // Red
   --lf-color-red-900: #7F1D1D;
   --lf-color-red-800: #991B1B;

frontend/src/assets/scss/drawer.scss

@@ -1,7 +1,8 @@
 .el-drawer {
   @apply opacity-100;
-  --el-drawer-padding-primary: 24px;
+  --el-drawer-padding-primary: 20px 24px;
   box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.05);
+  overflow: unset;
 
   &__header {
     @apply mb-4;
@@ -12,7 +13,25 @@
   }
 
   &__footer {
-    @apply p-6 bg-gray-50 border-t border-gray-200;
+    @apply px-6 py-5 bg-gray-50 border-t border-gray-100 bg-white;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -20px;
+      left: 0;
+      right: 0;
+      height: 20px;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.06), transparent);
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+  }
+
+  &.has-scroll .el-drawer__footer::before {
+    opacity: 1;
   }
 
   &__close-btn {

frontend/src/assets/scss/form/input.scss

@@ -48,6 +48,22 @@
       border: 1px solid var(--el-input-focus-border-color);
     }
   }
+
+  &.is-rounded .el-input__wrapper{
+    @apply rounded-full;
+  }
+}
+
+.input-label-container {
+  @apply border border-solid border-gray-200 rounded-full flex items-stretch;
+
+  span {
+    @apply text-gray-900 text-small px-3 bg-gray-50 border-r border-r-gray-200 flex items-center
+    rounded-l-full;
+  }
+  .el-input__wrapper{
+    @apply border-none rounded-l-none rounded-r-full #{!important};
+  }
 }
 
 // Inner input/textarea color

frontend/src/assets/scss/form/select.scss

@@ -138,3 +138,15 @@
     }
   }
 }
+
+.el-select.el-select--pill {
+  .el-select__wrapper {
+    &.el-tooltip__trigger {
+      @apply rounded-full;
+    }
+
+    .el-select__suffix i{
+      @apply text-gray-900;
+    }
+  }
+}

frontend/src/assets/scss/layout.scss

@@ -102,3 +102,7 @@ input:-webkit-autofill:active {
   transition: background-color 5000s ease-in-out 0s;
   -webkit-text-fill-color: #000 !important;
 }
+
+.el-overlay .el-splitter-panel{
+  overflow: unset;
+}

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

@@ -1,6 +1,6 @@
 <template>
   <lf-button
-    type="secondary"
+    type="outline"
     @click="isConfluenceSettingsDrawerVisible = true"
   >
     <lf-icon name="link-simple" />

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

@@ -2,14 +2,20 @@
   <app-drawer
     v-model="isVisible"
     custom-class="integration-confluence-drawer"
+    size="600px"
     title="Confluence"
     pre-title="Integration"
     has-border
+    close-on-click-modal="true"
+    :close-function="canClose"
     @close="cancel"
   >
     <template #beforeTitle>
       <img class="min-w-6 h-6 mr-2" :src="logoUrl" alt="Confluence logo" />
     </template>
+    <template #belowTitle>
+      <drawer-description integration-key="confluence" />
+    </template>
     <template #content>
       <div class="text-gray-900 text-sm font-medium">
         Authentication
@@ -110,29 +116,19 @@
     </template>
 
     <template #footer>
-      <div>
-        <lf-button
-          type="secondary-gray"
-          size="medium"
-          class="mr-4"
-          :disabled="loading"
-          @click="cancel"
-        >
-          Cancel
-        </lf-button>
-        <lf-button
-          id="confluenceConnect"
-          type="primary"
-          size="medium"
-          :disabled="$v.$invalid || loading"
-          :loading="loading"
-          @click="connect"
-        >
-          {{ integration?.settings ? 'Update' : 'Connect' }}
-        </lf-button>
-      </div>
+      <drawer-footer-buttons
+        :integration="props.integration"
+        :is-edit-mode="!!props.integration"
+        :has-form-changed="hasFormChanged"
+        :is-loading="loading"
+        :is-submit-disabled="$v.$invalid || !hasFormChanged || loading"
+        :cancel="cancel"
+        :revert-changes="revertChanges"
+        :connect="connect"
+      />
     </template>
   </app-drawer>
+  <changes-confirmation-modal ref="changesConfirmationModalRef" />
 </template>
 
 <script setup lang="ts">
@@ -153,6 +149,9 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfButton from '@/ui-kit/button/Button.vue';
 import AppArrayInput from '@/shared/form/array-input.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import DrawerDescription from '@/modules/admin/modules/integration/components/drawer-description.vue';
+import DrawerFooterButtons from '@/modules/admin/modules/integration/components/drawer-footer-buttons.vue';
+import ChangesConfirmationModal from '@/modules/admin/modules/integration/components/changes-confirmation-modal.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -175,6 +174,7 @@ const props = defineProps({
 });
 
 const { trackEvent } = useProductTracking();
+const changesConfirmationModalRef = ref<InstanceType<typeof ChangesConfirmationModal> | null>(null);
 
 const loading = ref(false);
 const form = reactive({
@@ -186,7 +186,7 @@ const form = reactive({
   spaces: [''],
 });
 
-const { formSnapshot } = formChangeDetector(form);
+const { formSnapshot, hasFormChanged } = formChangeDetector(form);
 const $v = useVuelidate({
   url: { required },
   username: { required },
@@ -198,6 +198,22 @@ const $v = useVuelidate({
   },
 }, form, { $stopPropagation: true });
 
+const revertChanges = () => {
+  if (props.integration?.settings) {
+    form.url = props.integration.settings.url;
+    form.username = props.integration.settings.username || '';
+    form.apiToken = props.integration.settings.apiToken || '';
+    form.orgAdminApiToken = props.integration.settings.orgAdminApiToken || '';
+    form.orgAdminId = props.integration.settings.orgAdminId || '';
+    if (props.integration?.settings.space) {
+      form.spaces = [props.integration?.settings.space.key];
+    } else {
+      form.spaces = [...(props.integration?.settings.spaces || [])];
+    }
+    formSnapshot();
+  }
+};
+
 const { doConfluenceConnect } = mapActions('integration');
 const isVisible = computed({
   get() {
@@ -228,7 +244,7 @@ onMounted(() => {
     if (props.integration?.settings.space) {
       form.spaces = [props.integration?.settings.space.key];
     } else {
-      form.spaces = props.integration?.settings.spaces;
+      form.spaces = [...(props.integration?.settings.spaces || [])];
     }
   }
   formSnapshot();
@@ -238,6 +254,21 @@ const cancel = () => {
   isVisible.value = false;
 };
 
+const canClose = (done: (value: boolean) => void) => {
+  if (hasFormChanged.value) {
+    changesConfirmationModalRef.value?.open().then((discardChanges: boolean) => {
+      if (discardChanges) {
+        revertChanges();
+        done(false);
+      } else {
+        done(true);
+      }
+    });
+  } else {
+    done(false);
+  }
+};
+
 const connect = async () => {
   loading.value = true;
 

frontend/src/config/integrations/confluence/config.ts

@@ -10,7 +10,7 @@ const confluence: IntegrationConfig = {
   key: 'confluence',
   name: 'Confluence',
   image,
-  description: 'Connect Confluence to sync documentation activities from your repos.',
+  description: 'Sync documentation activities from your spaces.',
   connectComponent: ConfluenceConnect,
   connectedParamsComponent: ConfluenceParams,
   dropdownComponent: ConfluenceDropdown,