refactor: config page design changes

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

@@ -1,5 +1,13 @@
 <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
@@ -29,7 +37,7 @@ const pluginTypeMap = {
   Password: FormBuilderInputType.Password,
 }
 
-const { formState, validate } = useProvideFormBuilderHelper({
+const { formState, validate, validateInfos } = useProvideFormBuilderHelper({
   formSchema: [
     ...plugin.value.formDetails.items.map((item) => ({
       type: pluginTypeMap[item.type] || FormBuilderInputType.Input,
@@ -64,10 +72,14 @@ const doAction = async (action: Action) => {
     loadingAction.value = null
   }
 }
+
+const isValid = computed(() => {
+  return Object.values(validateInfos || {}).every((info) => info.validateStatus !== 'error')
+})
 </script>
 
 <template>
-  <div class="flex flex-col" data-test-id="nc-setup">
+  <div class="flex flex-col h-full h-[calc(100vh_-_40px)]" data-test-id="nc-setup">
     <NcPageHeader>
       <template #title>
         <span data-rec="true">
@@ -75,10 +87,9 @@ const doAction = async (action: Action) => {
         </span>
       </template>
     </NcPageHeader>
-    <div class="flex gap-30">
+    <div class="h-full flex  h-[calc(100%_-_48px)]">
-      <div class="flex-grow" />
+      <div class="nc-config-left-panel nc-scrollbar-thin relative h-full flex flex-col">
-      <div>
+        <div class="w-full flex items-center gap-3 border-b-1 border-gray-200 h-12 py-2 px-3">
-        <div class="mt-4 pb-4 w-150 mx-auto flex items-center gap-3 border-b-1 border-gray-200">
           <div
             v-if="plugin.logo"
             class="mr-1 flex items-center justify-center"
@@ -98,14 +109,14 @@ const doAction = async (action: Action) => {
               :loading="loadingAction === action.key"
               :type="action.key === Action.Save ? 'primary' : 'default'"
               size="small"
-              :disabled="!!loadingAction"
+              :disabled="!!loadingAction || !isValid"
               @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 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>
@@ -115,7 +126,8 @@ const doAction = async (action: Action) => {
           </div>
         </div>
       </div>
-      <div class="flex-grow mt-15 flex flex-col gap-3">
+      <div class="nc-config-right-panel">
+        <div class="flex-grow flex flex-col gap-3">
           <div class="text-gray-500 text-capitalize">Documentation</div>
 
           <div>
@@ -129,4 +141,14 @@ const doAction = async (action: Action) => {
         </div>
       </div>
     </div>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.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;
+}
+</style>

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

@@ -65,7 +65,8 @@ const closeResetModal = () => {
               }"
               :src="app.logo"
             />
-            <GeneralIcon v-else icon="mail" />
+            <GeneralIcon v-else
+                         class="icon" icon="mail" />
             <span class="title">{{ app.title }}</span>
             <div class="flex-grow" />
 
@@ -128,10 +129,10 @@ const closeResetModal = () => {
   @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-3 border-1 border-gray-200 py-3 px-6 rounded-xl items-center cursor-pointer hover:(shadow bg-gray-50);
+    @apply text-base w-296px max-w-296px flex gap-3 border-1 border-gray-200 py-4 px-5 rounded-xl items-center cursor-pointer hover:(shadow bg-gray-50);
 
     .icon {
-      @apply max-w-32px max-h-32px;
+      @apply !w-8 !h-8 object-contain
     }
 
     .title {