refactor: suggested changes

packages/nc-gui/components/account/Setup.vue

@@ -13,7 +13,8 @@ const configs = computed(() => [
   {
     title: t('labels.configLabel', { label: t('labels.email') }),
     key: 'email',
-    description: 'Configure an email account to send notifications to your organisation’s users.',
+    description:
+      'Configure your preferred email service to manage how your application sends alerts, notifications and other essential emails.',
     docsLink: 'https://docs.nocodb.com',
     buttonClick: () => {
       navigateTo(`/account/setup/email${emailConfigured.value ? `/${emailConfigured.value.title}` : ''}`)
@@ -26,7 +27,7 @@ const configs = computed(() => [
   {
     title: t('labels.configLabel', { label: t('labels.storage') }),
     key: 'storage',
-    description: 'Configure a storage service to store your organisation’s data.',
+    description: 'Set up and manage your preferred storage solution for securely handling and storing your application’s data.',
     docsLink: 'https://docs.nocodb.com',
     buttonClick: () => {
       navigateTo(`/account/setup/storage${storageConfigured.value ? `/${storageConfigured.value.title}` : ''}`)
@@ -87,7 +88,7 @@ onMounted(async () => {
                   {{ $t('activity.pending') }}
                 </span>
               </template>
-              <GeneralIcon icon="warning" class="text-orange-500 -mt-1 w-6 h-6" />
+              <GeneralIcon icon="ncAlertCircle" class="text-orange-500 -mt-1 w-6 h-6" />
             </NcTooltip>
             <GeneralIcon v-else icon="circleCheckSolid" class="text-success w-6 h-6 bg-white-500" />
 

packages/nc-gui/components/account/setup/AppIcon.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+  app: {
+    title: string
+    logo: string
+  }
+}>()
+</script>
+
+<template>
+  <img v-if="app.title !== 'SMTP'" class="icon" :alt="app.title" :src="app.logo" />
+  <GeneralIcon v-else class="text-gray-500" icon="mail" />
+</template>
+
+<style scoped lang="scss"></style>

packages/nc-gui/components/account/setup/Config.vue

@@ -39,6 +39,7 @@ const { formState, validate, validateInfos } = useProvideFormBuilderHelper({
         helpText: item.help_text,
         width: '48',
         border: false,
+        showHintAsTooltip: true,
       },
       ...(i % 2
         ? []
@@ -85,14 +86,8 @@ const isValid = computed(() => {
     <NcPageHeader>
       <template #title>
         <div class="flex gap-3 items-center">
-          <div
-            v-if="plugin.logo || plugin.title === 'SMTP'"
-            class="mr-1 flex items-center justify-center"
-            :class="[plugin.title === 'SES' ? 'p-2 bg-[#242f3e]' : '']"
-          >
-            <GeneralIcon v-if="plugin.title === 'SMTP'" class="h-8 w-8 text-gray-500" icon="mail" />
-            <img v-else :alt="plugin.title || 'plugin'" :src="plugin.logo" class="h-8 w-8" />
-          </div>
+          <AccountSetupAppIcon :app="plugin" class="h-8 w-8" />
+
           <span data-rec="true">
             {{ plugin.title }}
           </span>
@@ -134,14 +129,21 @@ const isValid = computed(() => {
         <div class="flex-grow flex flex-col gap-3">
           <div class="text-gray-500 text-capitalize">Documentation</div>
 
-          <div>
+          <a href="httpd://docs.nocodb.com" rel="noopener noreferrer" target="_blank" class="!no-underline !text-current">
             <GeneralIcon icon="bookOpen" class="text-gray-500" />
             Workspace Setup
-          </div>
-          <div>
+          </a>
+          <a
+            v-for="doc of plugin.formDetails?.docs || []"
+            :key="doc.title"
+            :href="doc.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="!no-underline !text-current"
+          >
             <GeneralIcon icon="bookOpen" class="text-gray-500" />
-            Setting up SMTP as email service
-          </div>
+            {{ doc.title }}
+          </a>
         </div>
       </div>
     </div>

packages/nc-gui/components/account/setup/List.vue

@@ -56,16 +56,7 @@ const closeResetModal = () => {
         <div class="w-950px px-4 mt-3 mx-auto text-lg font-weight-bold">{{ category }} Services</div>
         <div class="container">
           <div v-for="app in apps" :key="app.title" class="item group" @click="selectApp(app)">
-            <img
-              v-if="app.title !== 'SMTP'"
-              class="icon"
-              :alt="app.title"
-              :style="{
-                backgroundColor: app.title === 'SES' ? '#242f3e' : '',
-              }"
-              :src="app.logo"
-            />
-            <GeneralIcon v-else class="icon" icon="mail" />
+            <AccountSetupAppIcon :app="app" class="icon" />
             <span class="title">{{ app.title }}</span>
             <div class="flex-grow" />
 
@@ -107,10 +98,10 @@ const closeResetModal = () => {
         <div v-else class="text-base font-weight-bold">Reset {{ activePlugin && activePlugin.title }} Configuration</div>
         <div class="flex flex-row mt-2 w-full">
           <template v-if="showResetActiveAppMsg">
-            Switching to {{ switchingTo && switchingTo.title }} will reset your {{ activePlugin && activePlugin.title }} settings.
-            Continue?
+            Switching to {{ switchingTo && switchingTo.title }} will reset your {{ activePlugin && activePlugin.title }}
+            settings. Continue?
           </template>
-          <template v-else>Resetting will erase your current configuration. </template>
+          <template v-else>Resetting will erase your current configuration.</template>
         </div>
         <div class="flex mt-6 justify-end space-x-2">
           <NcButton size="small" type="secondary" @click="closeResetModal"> {{ $t('general.cancel') }}</NcButton>

packages/nc-gui/components/nc/form-builder/index.vue

@@ -47,7 +47,7 @@ const setFormState = (path: string, value: any) => {
                     <div class="flex items-center gap-1">
                       <span>{{ field.label }}</span>
                       <span v-if="field.required" class="text-red-500">*</span>
-                      <NcTooltip v-if="field.helpText">
+                      <NcTooltip v-if="field.helpText && field.showHintAsTooltip">
                         <template #title>
                           <div class="text-xs">
                             {{ field.helpText }}
@@ -79,12 +79,26 @@ const setFormState = (path: string, value: any) => {
                       <div class="flex items-center">
                         <NcSwitch :checked="!!deepReference(field.model)" @update:checked="setFormState(field.model, $event)" />
                         <span class="ml-[6px] font-bold">{{ field.label }}</span>
+                        <NcTooltip v-if="field.helpText">
+                          <template #title>
+                            <div class="text-xs">
+                              {{ field.helpText }}
+                            </div>
+                          </template>
+                          <GeneralIcon icon="info" class="text-gray-500 h-4 ml-1" />
+                        </NcTooltip>
                       </div>
-                      <div v-if="field.helpText" class="w-full mt-1 pl-[35px]">
+                      <div v-if="field.helpText && !field.showHintAsTooltip" class="w-full mt-1 pl-[35px]">
                         <div class="text-xs text-gray-500">{{ field.helpText }}</div>
                       </div>
                     </div>
                   </template>
+                  <div
+                    v-if="field.helpText && field.type !== FormBuilderInputType.Switch && !field.showHintAsTooltip"
+                    class="w-full mt-1"
+                  >
+                    <div class="text-xs text-gray-500">{{ field.helpText }}</div>
+                  </div>
                 </a-form-item>
               </template>
             </div>

packages/nc-gui/lib/formBuilder.ts

@@ -20,6 +20,7 @@ export interface FormBuilderElement {
   options?: { value: string; label: string }[]
   // used for styling switch
   border?: boolean
+  showHintAsTooltip?: boolean
 }
 
 export type FormDefinition = FormBuilderElement[]

packages/nocodb/src/plugins/smtp/index.ts

@@ -115,13 +115,13 @@ const config: XcPluginConfig = {
     msgOnInstall:
       'Successfully installed and email notification will use SMTP configuration',
     msgOnUninstall: '',
+    docs: [
+      {
+        title: 'Setting up SMTP as email service',
+        url: 'https://docs.nocodb.com/plugins',
+      },
+    ],
   },
-  docs: [
-    {
-      title: 'SMTP',
-      url: 'https://docs.nocodb.com/plugins',
-    },
-  ],
 };
 
 export default config;

packages/nocodb/src/types/nc-plugin/common/XcUIBuilder.ts

@@ -1,9 +1,14 @@
+export interface XcPluginDoc {
+  title: string;
+  url: string;
+}
 interface XcForm {
   title: string;
   items: XcItem[];
   actions: XcButton[];
   msgOnInstall: string;
   msgOnUninstall: string;
+  docs?: XcPluginDoc[];
   [key: string]: any;
 }
 declare enum XcType {

packages/nocodb/src/types/nc-plugin/lib/XcPluginConfig.ts

@@ -3,11 +3,6 @@ import type { XcForm } from '~/types/nc-plugin';
 import type XcPlugin from './XcPlugin';
 import type XcPluginMigration from './XcPluginMigration';
 
-export interface XcPluginDoc{
-  title: string;
-  url: string;
-}
-
 export default interface XcPluginConfig {
   title: string;
   logo?: string;
@@ -22,7 +17,6 @@ export default interface XcPluginConfig {
   migrations?: XcPluginMigration[];
   msgOnInstall?: string;
   msgOnUninstall?: string;
-  docs?: XcPluginDoc[];
 }
 
 type Constructor<T extends XcPlugin> = {