From 33319a1ba5f8c767930556caec40936cab548074 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:41:40 +0000
Subject: [PATCH] fix(nc-gui): grayed out disabled option select icon

---
 .../settings/data-sources/CreateBase.vue      | 21 ++++++++++++++++---
 .../settings/data-sources/EditBase.vue        |  8 ++++++-
 2 files changed, 25 insertions(+), 4 deletions(-)

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 c7e04d7e59..416043ee4d 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -540,10 +540,25 @@ const isIntgrationDisabled = (integration: IntegrationType = {}) => {
                             :disabled="isIntgrationDisabled(integration).isDisabled"
                           >
                             <div class="w-full flex gap-2 items-center" :data-testid="integration.title">
-                              <GeneralIntegrationIcon v-if="integration?.sub_type" :type="integration.sub_type" />
-                              <NcTooltip class="flex-1 truncate" :show-on-truncate-only="!isIntgrationDisabled(integration).isDisabled">
+                              <GeneralIntegrationIcon
+                                v-if="integration?.sub_type"
+                                :type="integration.sub_type"
+                                :style="{
+                                  filter: isIntgrationDisabled(integration).isDisabled
+                                    ? 'grayscale(100%) brightness(115%)'
+                                    : undefined,
+                                }"
+                              />
+                              <NcTooltip
+                                class="flex-1 truncate"
+                                :show-on-truncate-only="!isIntgrationDisabled(integration).isDisabled"
+                              >
                                 <template #title>
-                                  {{ isIntgrationDisabled(integration).isDisabled ? isIntgrationDisabled(integration).msg : integration.title }}
+                                  {{
+                                    isIntgrationDisabled(integration).isDisabled
+                                      ? isIntgrationDisabled(integration).msg
+                                      : integration.title
+                                  }}
                                 </template>
                                 {{ integration.title }}
                               </NcTooltip>
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 83d26067b7..2a822c8143 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -415,7 +415,13 @@ 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">
-                            <GeneralIntegrationIcon v-if="integration?.sub_type" :type="integration.sub_type" />
+                            <GeneralIntegrationIcon
+                              v-if="integration?.sub_type"
+                              :type="integration.sub_type"
+                              :style="{
+                                filter: 'grayscale(100%) brightness(115%)',
+                              }"
+                            />
                             <NcTooltip class="flex-1 truncate" show-on-truncate-only>
                               <template #title>
                                 {{ integration.title }}