From 2dbc3013f00541ed096e3160aa327f5d70b47f18 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 17 May 2024 09:35:49 +0000
Subject: [PATCH] refactor: move edit connection to tabs

---
 .../dashboard/settings/DataSources.vue        | 153 ++++++------------
 .../components/dashboard/settings/Modal.vue   |  45 +-----
 .../components/dashboard/settings/UIAcl.vue   |   2 +-
 packages/nc-gui/lang/en.json                  |   1 +
 4 files changed, 54 insertions(+), 147 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index cd8246eabb..1a90cbe0da 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -253,67 +253,13 @@ const isNewBaseModalOpen = computed({
   },
 })
 
-const isErdModalOpen = computed({
-  get: () => {
-    return [DataSourcesSubTab.ERD].includes(vState.value as any)
-  },
-  set: (val) => {
-    if (!val) {
-      vState.value = ''
-    }
-  },
-})
-
-const isMetaDataModal = computed({
-  get: () => {
-    return [DataSourcesSubTab.Metadata].includes(vState.value as any)
-  },
-  set: (val) => {
-    if (!val) {
-      vState.value = ''
-    }
-  },
-})
-
-const isUIAclModalOpen = computed({
-  get: () => {
-    return [DataSourcesSubTab.UIAcl].includes(vState.value as any)
-  },
-  set: (val) => {
-    if (!val) {
-      vState.value = ''
-    }
-  },
-})
-const isBaseAuditModalOpen = computed({
-  get: () => {
-    return [DataSourcesSubTab.Audit].includes(vState.value as any)
-  },
-  set: (val) => {
-    if (!val) {
-      vState.value = ''
-    }
-  },
-})
-
-const isEditBaseModalOpen = computed({
-  get: () => {
-    return [DataSourcesSubTab.Edit].includes(vState.value as any)
-  },
-  set: (val) => {
-    if (!val) {
-      vState.value = ''
-    }
-  },
-})
-
 const activeSource = ref<SourceType>(null)
 const openedTab = ref('erd')
 </script>
 
 <template>
   <div class="flex flex-col h-full">
-    <div class="px-4 py-2">
+    <div class="px-4 py-2 flex justify-between">
       <a-breadcrumb separator=">" class="w-full cursor-pointer font-weight-bold">
         <a-breadcrumb-item @click="activeSource = null">
           <a class="!no-underline">Data Sources</a>
@@ -322,6 +268,19 @@ const openedTab = ref('erd')
           <span class="capitalize">{{ activeSource.alias || 'Default Source' }}</span>
         </a-breadcrumb-item>
       </a-breadcrumb>
+
+      <NcButton
+        v-if="!isDataSourceLimitReached && !activeSource"
+        size="large"
+        class="z-10 !px-2"
+        type="primary"
+        @click="vState = DataSourcesSubTab.New"
+      >
+        <div class="flex flex-row items-center w-full gap-x-1">
+          <component :is="iconMap.plus" />
+          <div class="flex">{{ $t('activity.newSource') }}</div>
+        </div>
+      </NcButton>
     </div>
     <div data-testid="nc-settings-datasources" class="flex flex-row w-full h-full nc-data-sources-view flex-grow">
       <template v-if="activeSource">
@@ -332,26 +291,42 @@ const openedTab = ref('erd')
                 <div>{{ $t('title.erdView') }}</div>
               </div>
             </template>
-            <div class="h-[80vh]">
+            <div class="h-[300vh]">
               <LazyDashboardSettingsErd class="mt-4 overflow-scroll" :source-id="activeSource.id" :show-all-columns="false" />
             </div>
           </a-tab-pane>
-          <a-tab-pane key="acl">
+          <a-tab-pane v-if="activeSource.is_meta || activeSource.is_local" key="audit">
             <template #tab>
-              <div class="tab" data-testid="nc-acl-tab">
-                <div>{{ $t('labels.uiAcl') }}</div>
+              <div class="tab" data-testid="nc-audit-tab">
+                <div>{{ $t('title.auditLogs') }}</div>
               </div>
             </template>
-            <LazyDashboardSettingsUIAcl class="mt-4" :source-id="activeSource.id" />
+
+            <LazyDashboardSettingsBaseAudit class="mt-4" :source-id="activeSource.id" />
           </a-tab-pane>
-          <a-tab-pane v-if="activeSource.is_meta || activeSource.is_local" key="audit">
+          <a-tab-pane v-if="!activeSource.is_meta && !activeSource.is_local" key="audit">
             <template #tab>
               <div class="tab" data-testid="nc-audit-tab">
-                <div>{{ $t('title.audit') }}</div>
+                <div>{{ $t('labels.connectionDetails') }}</div>
               </div>
             </template>
+            <div class="p-6 mt-4 flex">
+              <LazyDashboardSettingsDataSourcesEditBase
+                class="w-600px"
+                :source-id="activeSource.id"
+                @source-updated="loadBases(true)"
+                @close="activeSource = null"
+              />
+            </div>
+          </a-tab-pane>
 
-            <LazyDashboardSettingsBaseAudit class="mt-4" :source-id="activeSource.id" />
+          <a-tab-pane key="acl">
+            <template #tab>
+              <div class="tab" data-testid="nc-acl-tab">
+                <div>{{ $t('labels.uiAcl') }}</div>
+              </div>
+            </template>
+            <LazyDashboardSettingsUIAcl class="mt-4" :source-id="activeSource.id" />
           </a-tab-pane>
           <a-tab-pane key="meta-sync">
             <template #tab>
@@ -359,25 +334,12 @@ const openedTab = ref('erd')
                 <div>{{ $t('labels.metaSync') }}</div>
               </div>
             </template>
-            <LazyDashboardSettingsMetadata class="mt-4" :source-id="activeSource.id" @source-synced="loadBases(true)" />
+            <LazyDashboardSettingsMetadata class="mt-4 w-full" :source-id="activeSource.id" @source-synced="loadBases(true)" />
           </a-tab-pane>
+
         </NcTabs>
       </template>
-      <div v-else class="flex flex-col w-full overflow-auto">
-        <div class="flex flex-row w-full justify-end mt-6.5 mb-2">
-          <NcButton
-            v-if="!isDataSourceLimitReached"
-            size="large"
-            class="z-10 !px-2"
-            type="primary"
-            @click="vState = DataSourcesSubTab.New"
-          >
-            <div class="flex flex-row items-center w-full gap-x-1">
-              <component :is="iconMap.plus" />
-              <div class="flex">{{ $t('activity.newSource') }}</div>
-            </div>
-          </NcButton>
-        </div>
+      <div v-else class="flex flex-col w-full overflow-auto mt-1">
         <div
           class="overflow-y-auto nc-scrollbar-md"
           :style="{
@@ -440,8 +402,7 @@ const openedTab = ref('erd')
               <template #item="{ element: source, index }">
                 <div v-if="index !== 0" class="ds-table-row border-gray-200 cursor-pointer" @click="activeSource = source">
                   <div class="ds-table-col ds-table-enabled">
-                    <div class="flex items-center gap-1"
-                         @click.stop>
+                    <div class="flex items-center gap-1" @click.stop>
                       <GeneralIcon v-if="sources.length > 2" icon="dragVertical" small class="ds-table-handle" />
                       <a-tooltip>
                         <template #title>
@@ -470,21 +431,7 @@ const openedTab = ref('erd')
                       <span class="text-gray-700 capitalize">{{ source.type }}</span>
                     </div>
                   </div>
-                  <div class="ds-table-col  justify-end gap-x-1  ds-table-actions">
-                    <NcTooltip>
-                      <template #title>
-                        {{ $t('general.edit') }}
-                      </template>
-                      <NcButton
-                        v-if="!source.is_meta && !source.is_local"
-                        size="small"
-                        class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg"
-                        type="text"
-                        @click.stop="baseAction(source.id, DataSourcesSubTab.Edit)"
-                      >
-                        <GeneralIcon icon="edit" class="text-gray-600" />
-                      </NcButton>
-                    </NcTooltip>
+                  <div class="ds-table-col justify-end gap-x-1 ds-table-actions">
                     <NcTooltip>
                       <template #title>
                         {{ $t('general.remove') }}
@@ -510,16 +457,6 @@ const openedTab = ref('erd')
           :connection-type="clientType"
           @source-created="loadBases(true)"
         />
-
-        <GeneralModal v-model:visible="isEditBaseModalOpen" closable :mask-closable="false" size="medium">
-          <div class="p-6">
-            <LazyDashboardSettingsDataSourcesEditBase
-              :source-id="activeBaseId"
-              @source-updated="loadBases(true)"
-              @close="isEditBaseModalOpen = false"
-            />
-          </div>
-        </GeneralModal>
         <GeneralDeleteModal
           v-model:visible="isDeleteBaseModalOpen"
           :entity-name="$t('general.datasource')"
@@ -586,4 +523,8 @@ const openedTab = ref('erd')
 .ds-table-body .ds-table-row:hover {
   @apply bg-gray-50/60;
 }
+
+:deep(.ant-tabs-content){
+  @apply !h-full !overflow-auto;
+}
 </style>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 03fc204863..79bee46666 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -155,12 +155,13 @@ watch(
     :class="{ active: vModel }"
     :footer="null"
     width="max(90vw, 600px)"
-    height="80vh"
     :closable="false"
     wrap-class-name="nc-modal-settings"
     @cancel="emits('update:modelValue', false)"
   >
-    <!--    Settings -->
+         <div class="min-h-[75vh]">
+
+  <!--    Settings -->
     <div class="flex flex-row justify-between w-full items-center mb-1">
       <a-typography-title class="ml-4 select-none" type="secondary" :level="5">
         {{ $t('activity.settings') }}
@@ -176,7 +177,7 @@ watch(
       </a-button>
     </div>
 
-    <a-layout class="mt-3 h-[75vh] overflow-y-auto flex">
+    <a-layout class="mt-3 overflow-y-auto flex">
       <!-- Side tabs -->
       <a-layout-sider>
         <a-menu v-model:selected-keys="selectedTabKeys" class="tabs-menu h-full" :open-keys="[]">
@@ -209,43 +210,6 @@ watch(
             {{ tab.title }}
           </a-menu-item>
         </a-menu>
-        <div v-else-if="false">
-          <div class="flex items-center">
-            <a-breadcrumb class="w-full cursor-pointer">
-              <a-breadcrumb-item v-if="vDataState !== ''" @click="vDataState = ''">
-                <a class="!no-underline">Data Sources</a>
-              </a-breadcrumb-item>
-              <a-breadcrumb-item v-else @click="vDataState = ''">Data Sources</a-breadcrumb-item>
-              <a-breadcrumb-item v-if="vDataState !== ''">{{ vDataState }}</a-breadcrumb-item>
-            </a-breadcrumb>
-            <div v-if="vDataState === ''" class="flex flex-row justify-end items-center w-full gap-1">
-              <a-button
-                v-if="!isDataSourceLimitReached"
-                type="primary"
-                class="self-start !rounded-md nc-btn-new-datasource"
-                @click="vDataState = DataSourcesSubTab.New"
-              >
-                <div v-if="vDataState === ''" class="flex items-center gap-2 font-light">
-                  <component :is="iconMap.plusCircle" class="group-hover:text-accent" />
-                  New
-                </div>
-              </a-button>
-              <!--        Reload -->
-              <a-button
-                v-e="['a:proj-meta:data-sources:reload']"
-                type="text"
-                class="self-start !rounded-md nc-btn-metasync-reload"
-                @click="dataSourcesReload = true"
-              >
-                <div class="flex items-center gap-2 text-gray-600 font-light">
-                  <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin !text-success': dataSourcesReload }" />
-                  {{ $t('general.reload') }}
-                </div>
-              </a-button>
-            </div>
-          </div>
-          <a-divider style="margin: 10px 0" />
-        </div>
 
         <div class="h-[600px]">
           <component
@@ -267,6 +231,7 @@ watch(
         </div>
       </a-layout-content>
     </a-layout>
+  </div>
   </a-modal>
 </template>
 
diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index 24645fdf8f..711f116685 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -131,7 +131,7 @@ const toggleSelectAll = (role: Role) => {
 
 <template>
   <div class="flex flex-row w-full items-center justify-center">
-    <div class="flex flex-col w-[900px]">
+    <div class="flex flex-col">
       <NcTooltip class="mb-4 first-letter:capital font-bold max-w-100 truncate" show-on-truncate-only>
         <template #title>{{ base.title }}</template>
         <span> UI ACL : {{ base.title }} </span>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index ce0165f540..670dc102e9 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -448,6 +448,7 @@
     "noResultsMatchedYourSearch": "Your search did not yield any matching results"
   },
   "labels": {
+    "connectionDetails": "Connection Details",
     "metaSync": "Meta Sync",
     "today": "Today",
     "workspace": "Workspace",