refactor: minor improvements

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Action } from '../../../composables/useAccountSetupStore'
+import {Action} from '../../../composables/useAccountSetupStore'
 
 const props = defineProps<{
   id: string
@@ -29,7 +29,7 @@ const pluginTypeMap = {
   Password: FormBuilderInputType.Password,
 }
 
-const { formState, validate } = useProvideFormBuilderHelper({
+const {formState, validate} = useProvideFormBuilderHelper({
   formSchema: [
     ...plugin.value.formDetails.items.map((item) => ({
       type: pluginTypeMap[item.type] || FormBuilderInputType.Input,
@@ -50,6 +50,7 @@ const doAction = async (action: Action) => {
         await validate()
         pluginFormData.value = formState.value
         await saveSettings()
+        vOpen.value = false
         break
       case Action.Test:
         await validate()
@@ -66,43 +67,44 @@ const doAction = async (action: Action) => {
 </script>
 
 <template>
-  <NcModal :visible="vOpen" centered width="70rem" wrap-class-name="nc-modal-create-source" @keydown.esc="vOpen = false">
+  <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" />
+        <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]' : '']"
+            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" />
+          <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-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)"
+              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 }}
+            {{ 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" />
+          <a-spin size="large"/>
         </div>
 
         <div v-else class="flex">
-          <NcFormBuilder class="w-500px mx-auto" />
+          <NcFormBuilder class="w-500px mx-auto"/>
         </div>
       </div>
     </div>

packages/nc-gui/components/nc/Modal.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import {Action} from "../../composables/useAccountSetupStore";
-
 const props = withDefaults(
   defineProps<{
     visible: boolean
@@ -10,6 +8,7 @@ const props = withDefaults(
     maskClosable?: boolean
     showSeparator?: boolean
     wrapClassName?: string
+    closable?: boolean
   }>(),
   {
     size: 'medium',
@@ -17,6 +16,7 @@ const props = withDefaults(
     maskClosable: true,
     showSeparator: true,
     wrapClassName: '',
+    closable: false,
   },
 )
 
@@ -91,7 +91,7 @@ const slots = useSlots()
     :class="{ active: visible }"
     :width="width"
     :centered="true"
-    :closable="false"
+    :closable="closable"
     :wrap-class-name="newWrapClassName"
     :footer="null"
     :mask-closable="maskClosable"