refactor: minor corrections

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

@@ -11,13 +11,11 @@ const openedCategory = ref<string | null>(null)
 
 const configs = computed(() => [
   {
-    title: t('labels.setupLabel', { label: t('labels.email') }),
+    title: t('labels.configLabel', { label: t('labels.email') }),
     key: 'email',
     description: 'Configure an email account to send system notifications to your organisation’s users.',
-    docsLink: '',
+    docsLink: 'https://docs.nocodb.com',
     buttonClick: () => {
-      // listModalDlg.value = true
-      // openedCategory.value = 'Email'
       navigateTo(`/account/setup/email${emailConfigured.value ? `/${emailConfigured.value.title}` : ''}`)
     },
     itemClick: () => {
@@ -26,14 +24,11 @@ const configs = computed(() => [
     configured: emailConfigured.value,
   },
   {
-    title: t('labels.setupLabel', { label: t('labels.storage') }),
+    title: t('labels.configLabel', { label: t('labels.storage') }),
     key: 'storage',
     description: 'Configure a storage service to store your organisation’s data.',
-    docsLink: '',
+    docsLink: 'https://docs.nocodb.com',
     buttonClick: () => {
-      // listModalDlg.value = true
-      // openedCategory.value = 'Storage'
-
       navigateTo(`/account/setup/storage${storageConfigured.value ? `/${storageConfigured.value.title}` : ''}`)
     },
     itemClick: () => {
@@ -45,7 +40,7 @@ const configs = computed(() => [
     title: t('labels.switchToProd'),
     key: 'switchToProd',
     description: 'Configure a production-ready app database to port from the existing built-in application database.',
-    docsLink: '',
+    docsLink: 'https://docs.nocodb.com',
     buttonClick: () => {
       //  TODO: Implement the logic to switch to production
     },

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

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import { Action } from '../../../composables/useAccountSetupStore'
-
-const props = defineProps<{
-  id: string
-  modelValue?: boolean
-}>()
-const emit = defineEmits(['saved', 'close', 'update:modelValue'])
-
-const vOpen = useVModel(props, 'modelValue', emit)
-
-const {
-  readPluginDetails,
-  activePluginFormData: pluginFormData,
-  activePlugin: plugin,
-  isLoading,
-  loadingAction,
-  testSettings,
-  saveSettings,
-} = useAccountSetupStoreOrThrow()
-
-await readPluginDetails(props.id)
-
-const pluginTypeMap = {
-  Input: FormBuilderInputType.Input,
-  Select: FormBuilderInputType.Select,
-  Checkbox: FormBuilderInputType.Switch,
-  LongText: FormBuilderInputType.Input,
-  Password: FormBuilderInputType.Password,
-}
-
-const { formState, validate } = useProvideFormBuilderHelper({
-  formSchema: [
-    ...plugin.value.formDetails.items.map((item) => ({
-      type: pluginTypeMap[item.type] || FormBuilderInputType.Input,
-      label: item.label,
-      placeholder: item.placeholder,
-      model: item.key,
-      required: item.required,
-      helpText: item.help_text,
-    })),
-  ],
-  initialState: pluginFormData,
-})
-
-const doAction = async (action: Action) => {
-  try {
-    switch (action) {
-      case Action.Save:
-        await validate()
-        pluginFormData.value = formState.value
-        await saveSettings()
-        vOpen.value = false
-        break
-      case Action.Test:
-        await validate()
-        pluginFormData.value = formState.value
-        await testSettings()
-        break
-    }
-  } catch (e: any) {
-    console.log(e)
-  } finally {
-    loadingAction.value = null
-  }
-}
-</script>
-
-<template>
-  <NcModal :visible="vOpen" centered width="70rem" wrap-class-name="nc-modal-create-source" @keydown.esc="vOpen = false">
-    <div class="flex-1 flex flex-col max-h-full min-h-400px">
-      <div class="px-4 pb-4 w-full flex items-center gap-3 border-b-1 border-gray-200">
-        <GeneralIcon icon="arrowLeft" class="cursor-pointer flex-none text-[20px]" @click="vOpen = false" />
-        <div
-          v-if="plugin.logo"
-          class="mr-1 flex items-center justify-center"
-          :class="[plugin.title === 'SES' ? 'p-2 bg-[#242f3e]' : '']"
-        >
-          <img :alt="plugin.title || 'plugin'" :src="plugin.logo" class="h-3" />
-        </div>
-
-        <span class="font-semibold text-lg">{{ plugin.formDetails.title }}</span>
-        <div class="flex-grow" />
-
-        <div class="flex gap-2">
-          <NcButton
-            v-for="(action, i) in plugin.formDetails.actions"
-            :key="i"
-            class="!px-5"
-            :loading="loadingAction === action.key"
-            :type="action.key === Action.Save ? 'primary' : 'default'"
-            size="small"
-            :disabled="!!loadingAction"
-            @click="doAction(action.key)"
-          >
-            {{ action.label === 'Save' ? 'Save configuration' : action.label }}
-          </NcButton>
-        </div>
-      </div>
-      <div class="h-[calc(100%_-_58px)] flex py-4 flex-col">
-        <div v-if="isLoading || !plugin" class="flex flex-row w-full justify-center items-center h-52">
-          <a-spin size="large" />
-        </div>
-
-        <div v-else class="flex">
-          <NcFormBuilder class="w-500px mx-auto" />
-        </div>
-      </div>
-    </div>
-  </NcModal>
-</template>

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

@@ -53,7 +53,7 @@ const closeResetModal = () => {
     </NcPageHeader>
     <div class="h-[calc(100%_-_58px)] flex">
       <div class="w-full">
-        <div class="w-950px px-4 mt-3 mx-auto text-lg font-weight-bold">{{ category }}</div>
+        <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

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

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  category: string
-  modelValue?: boolean
-}>()
-
-const emit = defineEmits(['update:modelValue'])
-
-const vOpen = useVModel(props, 'modelValue', emit)
-
-const selectedApp = ref<string | null>(null)
-
-const { categorizeApps, configModalDlg } = useAccountSetupStoreOrThrow()
-
-const selectApp = (app: any) => {
-  selectedApp.value = app
-  configModalDlg.value = true
-}
-</script>
-
-<template>
-  <NcModal :visible="vOpen" centered width="70rem" wrap-class-name="nc-modal-create-source">
-    <div class="flex-1 flex flex-col max-h-full min-h-400px overflow-auto">
-      <div class="px-4 pb-4 w-full flex items-center gap-3 border-b-1 border-gray-200">
-        <div class="flex-1 text-base font-weight-700">Setup {{ category }}</div>
-        <div class="flex-grow" />
-        <GeneralIcon icon="close" class="cursor-pointer" @click="vOpen = false" />
-      </div>
-      <div class="h-[calc(100%_-_58px)] flex">
-        <div class="w-full">
-          <div class="container">
-            <div v-for="app in categorizeApps[category] || []" :key="app.title" class="item" @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 icon="mail" />
-              <span class="title">{{ app.title }}</span>
-              <div class="flex-grow" />
-              <GeneralIcon v-if="app.active" icon="circleCheckSolid" class="text-primary min-w-6 h-6 bg-white-500" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <AccountSetupConfigModal v-if="selectedApp && configModalDlg" :id="selectedApp.id" v-model="configModalDlg" />
-  </NcModal>
-</template>
-
-<style scoped lang="scss">
-.container {
-  @apply p-4 w-950px gap-5 mx-auto my-2 grid grid-cols-3;
-
-  .item {
-    @apply text-base w-296px max-w-296px flex gap-6 border-1 border-gray-100 py-3 px-6 rounded items-center cursor-pointer hover:(shadow bg-gray-50);
-
-    .icon {
-      @apply max-w-32px max-h-32px;
-    }
-
-    .title {
-      @apply font-weight-bold;
-    }
-  }
-}
-</style>

packages/nc-gui/lang/en.json

@@ -619,7 +619,7 @@
   "labels": {
     "configuration": "Configuration",
     "setup": "Setup",
-    "setupLabel": "Setup {label}",
+    "configLabel": "Configure {label}",
     "switchToProd": "Switch to a production-ready app database",
     "fieldID": "Field ID",
     "addDescription": "Add description",

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

@@ -116,6 +116,12 @@ const config: XcPluginConfig = {
       'Successfully installed and email notification will use SMTP configuration',
     msgOnUninstall: '',
   },
+  docs: [
+    {
+      title: 'SMTP',
+      url: 'https://docs.nocodb.com/plugins
+    }
+  ],
 };
 
 export default config;

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

@@ -3,6 +3,11 @@ 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;
@@ -17,6 +22,7 @@ export default interface XcPluginConfig {
   migrations?: XcPluginMigration[];
   msgOnInstall?: string;
   msgOnUninstall?: string;
+  docs?: XcPluginDoc[];
 }
 
 type Constructor<T extends XcPlugin> = {