refactor: ui spacing corrections

packages/nc-gui/components/dashboard/settings/DataSources.vue

@@ -306,11 +306,64 @@ const isEditBaseModalOpen = computed({
     }
   },
 })
+
+const activeSource = ref<SourceType>(null)
+const openedTab = ref('erd')
 </script>
 
 <template>
-  <div class="flex flex-row w-full h-full nc-data-sources-view">
-    <div class="flex flex-col w-full overflow-auto">
+  <div class="flex flex-col h-full">
+    <div class="px-4 py-2">
+      <a-breadcrumb separator=">" class="w-full cursor-pointer font-weight-bold">
+        <a-breadcrumb-item @click="activeSource = null">
+          <a class="!no-underline">Data Sources</a>
+        </a-breadcrumb-item>
+        <a-breadcrumb-item v-if="activeSource">
+          <span class="capitalize">{{ activeSource.alias || 'Default Source' }}</span>
+        </a-breadcrumb-item>
+      </a-breadcrumb>
+    </div>
+    <div class="flex flex-row w-full h-full nc-data-sources-view flex-grow">
+      <template v-if="activeSource">
+        <NcTabs v-model:activeKey="openedTab" class="nc-source-tab w-full">
+          <a-tab-pane key="erd">
+            <template #tab>
+              <div class="tab" data-testid="nc-erd-tab">
+                <div>{{ $t('title.erdView') }}</div>
+              </div>
+            </template>
+            <div class="h-[80vh]">
+              <LazyDashboardSettingsErd class="mt-4 overflow-scroll" :source-id="activeSource.id" :show-all-columns="false" />
+            </div>
+          </a-tab-pane>
+          <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 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>
+            </template>
+
+            <LazyDashboardSettingsBaseAudit class="mt-4" :source-id="activeSource.id" />
+          </a-tab-pane>
+          <a-tab-pane key="meta-sync">
+            <template #tab>
+              <div class="tab" data-testid="nc-meta-sync-tab">
+                <div>{{ $t('labels.metaSync') }}</div>
+              </div>
+            </template>
+            <LazyDashboardSettingsMetadata class="mt-4" :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"
@@ -343,7 +396,7 @@ const isEditBaseModalOpen = computed({
           <div class="ds-table-body">
             <Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase">
               <template #header>
-              <div v-if="sources[0]" class="ds-table-row border-gray-200">
+                <div v-if="sources[0]" class="ds-table-row border-gray-200" @click="activeSource = sources[0]">
                   <div class="ds-table-col ds-table-enabled">
                     <div class="flex items-center gap-1">
                       <div v-if="sources.length > 2" class="ds-table-handle" />
@@ -454,7 +507,7 @@ const isEditBaseModalOpen = computed({
                 </div>
               </template>
               <template #item="{ element: source, index }">
-              <div v-if="index !== 0" class="ds-table-row border-gray-200">
+                <div v-if="index !== 0" class="ds-table-row border-gray-200" @click="activeSource = source">
                   <div class="ds-table-col ds-table-enabled">
                     <div class="flex items-center gap-1">
                       <GeneralIcon v-if="sources.length > 2" icon="dragVertical" small class="ds-table-handle" />
@@ -644,6 +697,7 @@ const isEditBaseModalOpen = computed({
         </GeneralDeleteModal>
       </div>
     </div>
+  </div>
 </template>
 
 <style>

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

@@ -208,7 +208,7 @@ watch(
             {{ tab.title }}
           </a-menu-item>
         </a-menu>
-        <div v-else>
+        <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 = ''">

packages/nc-gui/lang/en.json

@@ -448,6 +448,7 @@
     "noResultsMatchedYourSearch": "Your search did not yield any matching results"
   },
   "labels": {
+    "metaSync": "Meta Sync",
     "today": "Today",
     "workspace": "Workspace",
     "txt": "TXT Record value",