From 560694fdac187eea90faf7577af2e8d4becf3e8a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:41:39 +0000
Subject: [PATCH] feat(nc-gui): all integration icon support

---
 .../settings/data-sources/CreateBase.vue      |  6 +----
 .../settings/data-sources/EditBase.vue        |  6 +----
 .../components/general/IntegrationIcon.vue    | 27 +++++++++++++++++++
 .../workspace/integrations/ConnectionsTab.vue | 15 +++--------
 4 files changed, 32 insertions(+), 22 deletions(-)
 create mode 100644 packages/nc-gui/components/general/IntegrationIcon.vue

diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index 0951ed4d51..82994ec697 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -518,11 +518,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
                         >
                           <a-select-option v-for="integration in integrations" :key="integration.id" :value="integration.id">
                             <div class="w-full flex gap-2 items-center" :data-testid="integration.title">
-                              <GeneralBaseLogo
-                                v-if="integration?.sub_type"
-                                :source-type="integration.sub_type"
-                                class="flex-none h-4 w-4"
-                              />
+                              <GeneralIntegrationIcon v-if="integration?.sub_type" :type="integration.sub_type" />
                               <NcTooltip class="flex-1 truncate" show-on-truncate-only>
                                 <template #title>
                                   {{ integration.title }}
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
index 6cfe6d8ebf..c0add24bce 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -413,11 +413,7 @@ function handleAutoScroll(scroll: boolean, className: string) {
                       >
                         <a-select-option v-for="integration in integrations" :key="integration.id" :value="integration.id">
                           <div class="w-full flex gap-2 items-center" :data-testid="integration.title">
-                            <GeneralBaseLogo
-                              v-if="integration.type"
-                              :source-type="integration.sub_type"
-                              class="flex-none h-4 w-4"
-                            />
+                            <GeneralIntegrationIcon v-if="integration?.sub_type" :type="integration.sub_type" />
                             <NcTooltip class="flex-1 truncate" show-on-truncate-only>
                               <template #title>
                                 {{ integration.title }}
diff --git a/packages/nc-gui/components/general/IntegrationIcon.vue b/packages/nc-gui/components/general/IntegrationIcon.vue
new file mode 100644
index 0000000000..48613e69bf
--- /dev/null
+++ b/packages/nc-gui/components/general/IntegrationIcon.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    type: keyof typeof allIntegrationsMapByValue
+    size: 'sx' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  }>(),
+  {
+    size: 'sm',
+  },
+)
+</script>
+
+<template>
+  <component
+    v-if="allIntegrationsMapByValue[props.type]?.icon"
+    :is="allIntegrationsMapByValue[props.type]?.icon"
+    class="stroke-transparent flex-none"
+    :class="{
+      'w-3.5 h-3.5': size === 'sx',
+      'w-4 h-4': size === 'sm',
+      'w-5 h-5': size === 'md',
+      'w-6 h-6': size === 'lg',
+      'w-7 h-7': size === 'xl',
+      'w-8 h-8': size === 'xxl',
+    }"
+  />
+</template>
diff --git a/packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue b/packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue
index 215c26c42a..72713b25a0 100644
--- a/packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue
+++ b/packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue
@@ -398,14 +398,9 @@ onKeyStroke('ArrowDown', onDown)
                   </div>
                 </td>
                 <td class="cell-type">
-                  <div>
+                  <div :title="integration.sub_type">
                     <NcBadge rounded="lg" class="flex items-center gap-2 px-0 py-1 !h-7 truncate !border-transparent">
-                      <WorkspaceIntegrationsIcon
-                        v-if="integration.sub_type"
-                        :integration-type="integration.sub_type"
-                        size="xs"
-                        class="!p-0 !bg-transparent"
-                      />
+                      <GeneralIntegrationIcon :type="integration.sub_type" />
                       <NcTooltip placement="bottom" show-on-truncate-only class="text-sm truncate">
                         <template #title> {{ clientTypesMap[integration?.sub_type]?.text || integration?.sub_type }}</template>
 
@@ -604,11 +599,7 @@ onKeyStroke('ArrowDown', onDown)
         </template>
         <div v-else-if="toBeDeletedIntegration" class="w-full flex flex-col text-gray-800">
           <div class="flex flex-row items-center py-2 px-3.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
-            <WorkspaceIntegrationsIcon
-              :integration-type="toBeDeletedIntegration.sub_type"
-              size="xs"
-              class="!p-0 !bg-transparent"
-            />
+            <GeneralIntegrationIcon :type="toBeDeletedIntegration.sub_type" />
             <div
               class="text-ellipsis overflow-hidden select-none w-full pl-3"
               :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"