From 5e90661a0848290e755c0ff18895bb024f3bd8f5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 27 Aug 2024 07:23:44 +0000
Subject: [PATCH] refactor: review comments

---
 packages/nc-gui/components/account/Setup.vue       | 14 +++++++++++---
 .../nc-gui/components/account/setup/Config.vue     | 12 +-----------
 packages/nc-gui/components/account/setup/List.vue  | 14 ++++++++++++--
 .../nc-gui/composables/useAccountSetupStore.ts     |  3 +++
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/account/Setup.vue b/packages/nc-gui/components/account/Setup.vue
index 922d81014c..ebc2007bb9 100644
--- a/packages/nc-gui/components/account/Setup.vue
+++ b/packages/nc-gui/components/account/Setup.vue
@@ -15,7 +15,7 @@ const configs = computed(() => [
     key: 'email',
     description:
       'Configure your preferred email service to manage how your application sends alerts, notifications and other essential emails.',
-    docsLink: 'https://docs.nocodb.com',
+    docsLink: 'https://docs.nocodb.com/account-settings/oss-specific-details#configure-email',
     buttonClick: () => {
       navigateTo(`/account/setup/email${emailConfigured.value ? `/${emailConfigured.value.title}` : ''}`)
     },
@@ -28,7 +28,7 @@ const configs = computed(() => [
     title: t('labels.configLabel', { label: t('labels.storage') }),
     key: 'storage',
     description: 'Set up and manage your preferred storage solution for securely handling and storing your application’s data.',
-    docsLink: 'https://docs.nocodb.com',
+    docsLink: 'https://docs.nocodb.com/account-settings/oss-specific-details#configure-storage',
     buttonClick: () => {
       navigateTo(`/account/setup/storage${storageConfigured.value ? `/${storageConfigured.value.title}` : ''}`)
     },
@@ -98,7 +98,15 @@ onMounted(async () => {
           <div class="text-gray-600 text-sm">{{ config.description }}</div>
 
           <div class="flex justify-between mt-4">
-            <NcButton size="small" type="text">
+            <NcButton
+              size="small"
+              type="text"
+              :href="config.docsLink"
+              target="_blank"
+              class="!flex items-center !no-underline"
+              rel="noopener noreferer"
+              @click.stop
+            >
               <div class="flex gap-2 items-center">
                 Go to docs
                 <GeneralIcon icon="ncExternalLink" />
diff --git a/packages/nc-gui/components/account/setup/Config.vue b/packages/nc-gui/components/account/setup/Config.vue
index b207c130d9..1a6f8705cc 100644
--- a/packages/nc-gui/components/account/setup/Config.vue
+++ b/packages/nc-gui/components/account/setup/Config.vue
@@ -86,7 +86,7 @@ const docLinks = computed(() => {
   return [
     {
       title: 'Application Setup',
-      url: `https://docs.nocodb.com/account-settings/oss-specific-details#configure-${plugin.value?.categor?.toLowerCase()}`,
+      url: `https://docs.nocodb.com/account-settings/oss-specific-details#configure-${plugin.value?.category?.toLowerCase()}`,
     },
     ...(plugin.value?.formDetails?.docs || []),
   ]
@@ -140,16 +140,6 @@ const docLinks = computed(() => {
       <div class="nc-config-right-panel">
         <div class="flex-grow flex flex-col gap-3">
           <div class="text-gray-500 text-capitalize">{{ $t('labels.documentation') }}</div>
-
-          <!--          <a -->
-          <!--            :href="defDocLink" -->
-          <!--            rel="noopener noreferrer" -->
-          <!--            target="_blank" -->
-          <!--            class="!no-underline !text-current flex gap-2 items-center" -->
-          <!--          > -->
-          <!--            <GeneralIcon icon="bookOpen" class="text-gray-500" /> -->
-          <!--            Application Setup -->
-          <!--          </a> -->
           <a
             v-for="doc of docLinks"
             :key="doc.title"
diff --git a/packages/nc-gui/components/account/setup/List.vue b/packages/nc-gui/components/account/setup/List.vue
index 033614e07a..4a2962a412 100644
--- a/packages/nc-gui/components/account/setup/List.vue
+++ b/packages/nc-gui/components/account/setup/List.vue
@@ -6,6 +6,8 @@ const props = defineProps<{
 const { categorizeApps, resetPlugin: _resetPlugin, showPluginUninstallModal, activePlugin } = useAccountSetupStoreOrThrow()
 
 const apps = computed(() => categorizeApps.value?.[props.category?.toLowerCase()] || [])
+const configuredApp = computed(() => apps.value.find((app: any) => app.active))
+
 const showResetActiveAppMsg = ref(false)
 const switchingTo = ref(null)
 
@@ -71,10 +73,18 @@ const closeResetModal = () => {
               icon="delete"
               class="text-error min-w-6 h-6 bg-white-500 !hidden !group-hover:!inline cursor-pointer"
             />
-            <GeneralIcon v-if="app.active" icon="circleCheckSolid" class="text-success min-w-5 h-5 bg-white-500 nc-configured" />
+            <GeneralIcon
+              v-if="app === configuredApp"
+              icon="circleCheckSolid"
+              class="text-success min-w-5 h-5 bg-white-500 nc-configured"
+            />
 
             <NcDropdown :trigger="['click']" overlay-class-name="!rounded-md" @click.stop>
-              <GeneralIcon v-if="app.active" icon="threeDotVertical" class="min-w-5 h-5 bg-white-500 nc-setup-plugin-menu" />
+              <GeneralIcon
+                v-if="app.active"
+                icon="threeDotVertical"
+                class="min-w-5 h-5 bg-white-500 text-gray-500 hover:text-current nc-setup-plugin-menu"
+              />
 
               <template #overlay>
                 <NcMenu class="min-w-20">
diff --git a/packages/nc-gui/composables/useAccountSetupStore.ts b/packages/nc-gui/composables/useAccountSetupStore.ts
index 40c06a14d6..3cb338d3a9 100644
--- a/packages/nc-gui/composables/useAccountSetupStore.ts
+++ b/packages/nc-gui/composables/useAccountSetupStore.ts
@@ -4,6 +4,7 @@ export enum Action {
   Save = 'save',
   Test = 'test',
 }
+
 const [useProvideAccountSetupStore, useAccountSetupStore] = createInjectionState(() => {
   const apps = ref<(PluginType & { parsedInput?: Record<string, any>; tags?: string[] })[]>([])
 
@@ -62,6 +63,8 @@ const [useProvideAccountSetupStore, useAccountSetupStore] = createInjectionState
 
       // Plugin settings saved successfully
       message.success(activePlugin.value?.formDetails.msgOnInstall || t('msg.success.pluginSettingsSaved'))
+      // load all apps again to update the pending status
+      loadSetupApps().catch(console.error)
     } catch (e: any) {
       message.error(await extractSdkResponseErrorMsg(e))
     } finally {