From bbb6b09d08e8ff576008212b7f4180c58c44cf33 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 27 Aug 2024 07:23:43 +0000
Subject: [PATCH] refactor: form builder changes

---
 .../components/account/setup/Config.vue       | 65 ++++++++++---------
 .../components/nc/form-builder/index.vue      | 30 ++++++---
 packages/nc-gui/lang/en.json                  |  1 +
 packages/nocodb/src/plugins/smtp/index.ts     | 36 +++++-----
 4 files changed, 74 insertions(+), 58 deletions(-)

diff --git a/packages/nc-gui/components/account/setup/Config.vue b/packages/nc-gui/components/account/setup/Config.vue
index 0fb79d7795..185526a24f 100644
--- a/packages/nc-gui/components/account/setup/Config.vue
+++ b/packages/nc-gui/components/account/setup/Config.vue
@@ -1,14 +1,4 @@
 <script setup lang="ts">
-import { ClientType, SSLUsage } from 'nocodb-sdk'
-import { Action } from '../../../composables/useAccountSetupStore'
-import type {
-  CertTypes,
-  DatabricksConnection,
-  DefaultConnection,
-  SQLiteConnection,
-  SnowflakeConnection,
-} from '../../../utils/baseCreateUtils'
-
 const props = defineProps<{
   id: string
   modelValue?: boolean
@@ -39,14 +29,22 @@ const pluginTypeMap = {
 
 const { formState, validate, validateInfos } = 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,
-    })),
+    ...plugin.value.formDetails.items.flatMap((item, i) => [
+      {
+        type: pluginTypeMap[item.type] || FormBuilderInputType.Input,
+        label: item.label,
+        placeholder: item.placeholder,
+        model: item.key,
+        required: item.required,
+        helpText: item.help_text,
+        width: '47',
+        border: true,
+      },
+      ...(i % 2 ? [] : [{
+        type: FormBuilderInputType.Space,
+        width: '6',
+      }] ),
+    ]),
   ],
   initialState: pluginFormData,
 })
@@ -82,23 +80,25 @@ const isValid = computed(() => {
   <div class="flex flex-col h-full h-[calc(100vh_-_40px)]" data-test-id="nc-setup">
     <NcPageHeader>
       <template #title>
-        <span data-rec="true">
-          {{ plugin.title }}
-        </span>
-      </template>
-    </NcPageHeader>
-    <div class="h-full flex  h-[calc(100%_-_48px)]">
-      <div class="nc-config-left-panel nc-scrollbar-thin relative h-full flex flex-col">
-        <div class="w-full flex items-center gap-3 border-b-1 border-gray-200 h-12 py-2 px-3">
+        <div class="flex gap-3 items-center">
           <div
-            v-if="plugin.logo"
+            v-if="plugin.logo || plugin.title === 'SMTP'"
             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" />
+            <GeneralIcon v-if="plugin.title === 'SMTP'" class="h-8 w-8" icon="mail" />
+            <img v-else :alt="plugin.title || 'plugin'" :src="plugin.logo" class="h-8 w-8" />
           </div>
-
-          <span class="font-semibold text-lg">{{ plugin.formDetails.title }}</span>
+          <span data-rec="true">
+            {{ plugin.title }}
+          </span>
+        </div>
+      </template>
+    </NcPageHeader>
+    <div class="h-full flex h-[calc(100%_-_48px)]">
+      <div class="nc-config-left-panel nc-scrollbar-thin relative h-full flex flex-col">
+        <div class="w-full flex items-center gap-3 border-b-1 border-gray-200 h-12 py-2 px-3">
+          <span class="font-semibold text-lg">{{ $t('labels.configuration') }}</span>
           <div class="flex-grow" />
 
           <div class="flex gap-2">
@@ -116,13 +116,13 @@ const isValid = computed(() => {
             </NcButton>
           </div>
         </div>
-        <div class="h-[calc(100%_-_48px)] flex py-4 flex-col p-6  overflow-auto">
+        <div class="h-[calc(100%_-_48px)] flex py-4 flex-col p-6 overflow-auto">
           <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-150 mx-auto" />
+            <NcFormBuilder class="w-225 mx-auto" />
           </div>
         </div>
       </div>
@@ -148,6 +148,7 @@ const isValid = computed(() => {
 .nc-config-left-panel {
   @apply w-full flex-1 flex justify-stretch;
 }
+
 .nc-config-right-panel {
   @apply p-5 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
 }
diff --git a/packages/nc-gui/components/nc/form-builder/index.vue b/packages/nc-gui/components/nc/form-builder/index.vue
index eabcce36f4..25535bbf64 100644
--- a/packages/nc-gui/components/nc/form-builder/index.vue
+++ b/packages/nc-gui/components/nc/form-builder/index.vue
@@ -38,13 +38,31 @@ const setFormState = (path: string, value: any) => {
                 ></div>
                 <a-form-item
                   v-else
-                  :label="[FormBuilderInputType.Switch].includes(field.type) ? undefined : field.label"
                   v-bind="validateInfos[field.model]"
                   class="nc-form-item"
                   :style="`width:${+field.width || 100}%`"
+                  :required="false"
                 >
+                  <template v-if="![FormBuilderInputType.Switch].includes(field.type)" #label>
+                    <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">
+                        <template #title>
+                          <div class="text-xs">
+                            {{ field.helpText }}
+                          </div>
+                        </template>
+                        <GeneralIcon icon="info" class="text-gray-500 h-4" />
+                      </NcTooltip>
+                    </div>
+                  </template>
                   <template v-if="field.type === FormBuilderInputType.Input">
-                    <a-input :value="deepReference(field.model)" @update:value="setFormState(field.model, $event)" />
+                    <a-input
+                      class="!w-full"
+                      :value="deepReference(field.model)"
+                      @update:value="setFormState(field.model, $event)"
+                    />
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.Password">
                     <a-input-password :value="deepReference(field.model)" @update:value="setFormState(field.model, $event)" />
@@ -57,19 +75,16 @@ const setFormState = (path: string, value: any) => {
                     />
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.Switch">
-                    <div class="flex flex-col p-2" :class="field.border ? 'border-1 rounded-lg' : ''">
+                    <div class="flex flex-col p-2" :class="field.border ? 'border-1 rounded-lg shadow' : ''">
                       <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>
                       </div>
-                      <div v-if="field.helpText" class="w-full mt-1 ml-[35px]">
+                      <div v-if="field.helpText" 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" class="w-full mt-1">
-                    <div class="text-xs text-gray-500">{{ field.helpText }}</div>
-                  </div>
                 </a-form-item>
               </template>
             </div>
@@ -87,7 +102,6 @@ const setFormState = (path: string, value: any) => {
 
 <style lang="scss" scoped>
 .nc-form-item {
-  padding-right: 24px;
   margin-bottom: 12px;
 }
 
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index d00c1daa09..9bcd9474a0 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -617,6 +617,7 @@
     "categories": "Categories"
   },
   "labels": {
+    "configuration": "Configuration",
     "setup": "Setup",
     "setupLabel": "Setup {label}",
     "switchToProd": "Switch to a production-ready app database",
diff --git a/packages/nocodb/src/plugins/smtp/index.ts b/packages/nocodb/src/plugins/smtp/index.ts
index 65e4587ba5..5e14c1b4cc 100644
--- a/packages/nocodb/src/plugins/smtp/index.ts
+++ b/packages/nocodb/src/plugins/smtp/index.ts
@@ -52,6 +52,24 @@ const config: XcPluginConfig = {
         help_text:
           'Enter the port number used by the SMTP server (e.g., 587 for TLS, 465 for SSL, or 25 for non-secure connections).',
       },
+      {
+        key: 'username',
+        label: 'Username',
+        placeholder: 'Username',
+        type: XcType.SingleLineText,
+        required: false,
+        help_text:
+          'Enter the username required to authenticate with the SMTP server. This is usually your email address.',
+      },
+      {
+        key: 'password',
+        label: 'Password',
+        placeholder: 'Password',
+        type: XcType.Password,
+        required: false,
+        help_text:
+          'Enter the password associated with the SMTP server username. Click the eye icon to view the password as you type',
+      },
       {
         key: 'secure',
         label: 'Use Secure Connection',
@@ -79,24 +97,6 @@ const config: XcPluginConfig = {
         help_text:
           'Enable this on to reject emails that fail authentication checks, ensuring only authorized emails are sent.',
       },
-      {
-        key: 'username',
-        label: 'Username',
-        placeholder: 'Username',
-        type: XcType.SingleLineText,
-        required: false,
-        help_text:
-          'Enter the username required to authenticate with the SMTP server. This is usually your email address.',
-      },
-      {
-        key: 'password',
-        label: 'Password',
-        placeholder: 'Password',
-        type: XcType.Password,
-        required: false,
-        help_text:
-          'Enter the password associated with the SMTP server username. Click the eye icon to view the password as you type',
-      },
     ],
     actions: [
       {