From 3892505930d32536e3967e4736bc906da6073442 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 17 May 2024 09:35:48 +0000
Subject: [PATCH] refactor: ui spacing corrections

---
 .../dashboard/settings/DataSources.vue        | 650 ++++++++++--------
 .../components/dashboard/settings/Modal.vue   |   2 +-
 packages/nc-gui/lang/en.json                  |   1 +
 3 files changed, 354 insertions(+), 299 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 96da8bbac9..be017b44ec 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -306,342 +306,396 @@ 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-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-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"
+            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
+          class="overflow-y-auto nc-scrollbar-md"
+          :style="{
+            maxHeight: 'calc(100vh - 200px)',
+          }"
         >
-          <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
-        class="overflow-y-auto nc-scrollbar-md"
-        :style="{
-          maxHeight: 'calc(100vh - 200px)',
-        }"
-      >
-        <div class="ds-table-head">
-          <div class="ds-table-row">
-            <div class="ds-table-col ds-table-enabled cursor-pointer">{{ $t('general.visibility') }}</div>
-            <div class="ds-table-col ds-table-name">{{ $t('general.name') }}</div>
-            <div class="ds-table-col ds-table-type">{{ $t('general.type') }}</div>
-            <div class="ds-table-col ds-table-actions -ml-13">{{ $t('labels.actions') }}</div>
-            <div class="ds-table-col ds-table-crud"></div>
+          <div class="ds-table-head">
+            <div class="ds-table-row">
+              <div class="ds-table-col ds-table-enabled cursor-pointer">{{ $t('general.visibility') }}</div>
+              <div class="ds-table-col ds-table-name">{{ $t('general.name') }}</div>
+              <div class="ds-table-col ds-table-type">{{ $t('general.type') }}</div>
+              <div class="ds-table-col ds-table-actions -ml-13">{{ $t('labels.actions') }}</div>
+              <div class="ds-table-col ds-table-crud"></div>
+            </div>
           </div>
-        </div>
-        <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 class="ds-table-col ds-table-enabled">
-                  <div class="flex items-center gap-1">
-                    <div v-if="sources.length > 2" class="ds-table-handle" />
-                    <a-tooltip>
-                      <template #title>
-                        <template v-if="sources[0].enabled">{{ $t('activity.hideInUI') }}</template>
-                        <template v-else>{{ $t('activity.showInUI') }}</template>
-                      </template>
-                      <a-switch
-                        :checked="sources[0].enabled ? true : false"
-                        class="cursor-pointer"
-                        size="small"
-                        @change="toggleBase(sources[0], $event)"
-                      />
-                    </a-tooltip>
+          <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" @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" />
+                      <a-tooltip>
+                        <template #title>
+                          <template v-if="sources[0].enabled">{{ $t('activity.hideInUI') }}</template>
+                          <template v-else>{{ $t('activity.showInUI') }}</template>
+                        </template>
+                        <a-switch
+                          :checked="sources[0].enabled ? true : false"
+                          class="cursor-pointer"
+                          size="small"
+                          @change="toggleBase(sources[0], $event)"
+                        />
+                      </a-tooltip>
+                    </div>
                   </div>
-                </div>
-                <div class="ds-table-col ds-table-name font-medium">
-                  <div class="flex items-center gap-1">
-                    <!-- <GeneralBaseLogo :base-type="sources[0].type" /> -->
-                    {{ $t('general.default') }}
+                  <div class="ds-table-col ds-table-name font-medium">
+                    <div class="flex items-center gap-1">
+                      <!-- <GeneralBaseLogo :base-type="sources[0].type" /> -->
+                      {{ $t('general.default') }}
+                    </div>
                   </div>
-                </div>
 
-                <div class="ds-table-col ds-table-type">
-                  <div class="flex items-center gap-1">-</div>
-                </div>
+                  <div class="ds-table-col ds-table-type">
+                    <div class="flex items-center gap-1">-</div>
+                  </div>
 
-                <div class="ds-table-col ds-table-actions">
-                  <div class="flex items-center gap-2">
-                    <NcTooltip v-if="!sources[0].is_meta && !sources[0].is_local">
-                      <template #title>
-                        {{ $t('tooltip.metaSync') }}
-                      </template>
-                      <NcButton
-                        class="nc-action-btn cursor-pointer outline-0"
-                        type="text"
-                        data-testid="nc-data-sources-view-meta-sync"
-                        size="small"
-                        @click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
-                      >
-                        <div class="flex items-center gap-2 text-gray-600">
-                          <GeneralIcon icon="sync" class="group-hover:text-accent" />
-                        </div>
-                      </NcButton>
-                    </NcTooltip>
-                    <NcTooltip>
-                      <template #title>
-                        {{ $t('title.relations') }}
-                      </template>
-                      <NcButton
-                        size="small"
-                        class="nc-action-btn cursor-pointer outline-0"
-                        type="text"
-                        data-testid="nc-data-sources-view-erd"
-                        @click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
-                      >
-                        <div class="flex items-center gap-2 text-gray-600">
-                          <GeneralIcon icon="erd" class="group-hover:text-accent" />
-                        </div>
-                      </NcButton>
-                    </NcTooltip>
-                    <NcTooltip>
-                      <template #title>
-                        {{ $t('labels.uiAcl') }}
-                      </template>
-                      <NcButton
-                        size="small"
-                        class="nc-action-btn cursor-pointer outline-0"
-                        type="text"
-                        data-testid="nc-data-sources-view-ui-acl"
-                        @click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
-                      >
-                        <div class="flex items-center gap-2 text-gray-600">
-                          <GeneralIcon icon="acl" class="group-hover:text-accent" />
-                        </div>
-                      </NcButton>
-                    </NcTooltip>
-                    <NcTooltip>
-                      <template #title>
-                        {{ $t('title.audit') }}
-                      </template>
-                      <NcButton
-                        size="small"
-                        class="nc-action-btn cursor-pointer outline-0"
-                        type="text"
-                        data-testid="nc-data-sources-view-audit"
-                        @click="baseAction(sources[0].id, DataSourcesSubTab.Audit)"
-                      >
-                        <div class="flex items-center gap-2 text-gray-600">
-                          <GeneralIcon icon="book" class="group-hover:text-accent" />
-                        </div>
-                      </NcButton>
-                    </NcTooltip>
+                  <div class="ds-table-col ds-table-actions">
+                    <div class="flex items-center gap-2">
+                      <NcTooltip v-if="!sources[0].is_meta && !sources[0].is_local">
+                        <template #title>
+                          {{ $t('tooltip.metaSync') }}
+                        </template>
+                        <NcButton
+                          class="nc-action-btn cursor-pointer outline-0"
+                          type="text"
+                          data-testid="nc-data-sources-view-meta-sync"
+                          size="small"
+                          @click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
+                        >
+                          <div class="flex items-center gap-2 text-gray-600">
+                            <GeneralIcon icon="sync" class="group-hover:text-accent" />
+                          </div>
+                        </NcButton>
+                      </NcTooltip>
+                      <NcTooltip>
+                        <template #title>
+                          {{ $t('title.relations') }}
+                        </template>
+                        <NcButton
+                          size="small"
+                          class="nc-action-btn cursor-pointer outline-0"
+                          type="text"
+                          data-testid="nc-data-sources-view-erd"
+                          @click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
+                        >
+                          <div class="flex items-center gap-2 text-gray-600">
+                            <GeneralIcon icon="erd" class="group-hover:text-accent" />
+                          </div>
+                        </NcButton>
+                      </NcTooltip>
+                      <NcTooltip>
+                        <template #title>
+                          {{ $t('labels.uiAcl') }}
+                        </template>
+                        <NcButton
+                          size="small"
+                          class="nc-action-btn cursor-pointer outline-0"
+                          type="text"
+                          data-testid="nc-data-sources-view-ui-acl"
+                          @click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
+                        >
+                          <div class="flex items-center gap-2 text-gray-600">
+                            <GeneralIcon icon="acl" class="group-hover:text-accent" />
+                          </div>
+                        </NcButton>
+                      </NcTooltip>
+                      <NcTooltip>
+                        <template #title>
+                          {{ $t('title.audit') }}
+                        </template>
+                        <NcButton
+                          size="small"
+                          class="nc-action-btn cursor-pointer outline-0"
+                          type="text"
+                          data-testid="nc-data-sources-view-audit"
+                          @click="baseAction(sources[0].id, DataSourcesSubTab.Audit)"
+                        >
+                          <div class="flex items-center gap-2 text-gray-600">
+                            <GeneralIcon icon="book" class="group-hover:text-accent" />
+                          </div>
+                        </NcButton>
+                      </NcTooltip>
+                    </div>
                   </div>
-                </div>
-                <div class="ds-table-col ds-table-crud">
-                  <NcButton
-                    v-if="!sources[0].is_meta && !sources[0].is_local"
-                    size="small"
-                    class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg"
-                    type="text"
-                    @click="baseAction(sources[0].id, DataSourcesSubTab.Edit)"
-                  >
-                    <GeneralIcon icon="edit" class="text-gray-600" />
-                  </NcButton>
-                </div>
-              </div>
-            </template>
-            <template #item="{ element: source, index }">
-              <div v-if="index !== 0" class="ds-table-row border-gray-200">
-                <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" />
-                    <a-tooltip>
-                      <template #title>
-                        <template v-if="source.enabled">{{ $t('activity.hideInUI') }}</template>
-                        <template v-else>{{ $t('activity.showInUI') }}</template>
-                      </template>
-                      <a-switch
-                        :checked="source.enabled ? true : false"
-                        class="cursor-pointer"
-                        size="small"
-                        @change="toggleBase(source, $event)"
-                      />
-                    </a-tooltip>
+                  <div class="ds-table-col ds-table-crud">
+                    <NcButton
+                      v-if="!sources[0].is_meta && !sources[0].is_local"
+                      size="small"
+                      class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg"
+                      type="text"
+                      @click="baseAction(sources[0].id, DataSourcesSubTab.Edit)"
+                    >
+                      <GeneralIcon icon="edit" class="text-gray-600" />
+                    </NcButton>
                   </div>
                 </div>
-                <div class="ds-table-col ds-table-name font-medium w-full">
-                  <div v-if="source.is_meta || source.is_local">-</div>
-                  <span v-else class="truncate">
-                    {{ source.is_meta || source.is_local ? $t('general.base') : source.alias }}
-                  </span>
-                </div>
+              </template>
+              <template #item="{ element: source, index }">
+                <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" />
+                      <a-tooltip>
+                        <template #title>
+                          <template v-if="source.enabled">{{ $t('activity.hideInUI') }}</template>
+                          <template v-else>{{ $t('activity.showInUI') }}</template>
+                        </template>
+                        <a-switch
+                          :checked="source.enabled ? true : false"
+                          class="cursor-pointer"
+                          size="small"
+                          @change="toggleBase(source, $event)"
+                        />
+                      </a-tooltip>
+                    </div>
+                  </div>
+                  <div class="ds-table-col ds-table-name font-medium w-full">
+                    <div v-if="source.is_meta || source.is_local">-</div>
+                    <span v-else class="truncate">
+                      {{ source.is_meta || source.is_local ? $t('general.base') : source.alias }}
+                    </span>
+                  </div>
 
-                <div class="ds-table-col ds-table-type">
-                  <div class="flex items-center gap-2">
-                    <GeneralBaseLogo :source-type="source.type" />
-                    <span class="text-gray-700 capitalize">{{ source.type }}</span>
+                  <div class="ds-table-col ds-table-type">
+                    <div class="flex items-center gap-2">
+                      <GeneralBaseLogo :source-type="source.type" />
+                      <span class="text-gray-700 capitalize">{{ source.type }}</span>
+                    </div>
                   </div>
-                </div>
 
-                <div class="ds-table-col ds-table-actions">
-                  <div class="flex items-center gap-2">
-                    <NcTooltip>
-                      <template #title>
-                        {{ $t('title.relations') }}
-                      </template>
-                      <NcButton
-                        size="small"
-                        class="nc-action-btn cursor-pointer outline-0"
-                        type="text"
-                        data-testid="nc-data-sources-view-erd"
-                        @click="baseAction(source.id, DataSourcesSubTab.ERD)"
-                      >
-                        <div class="flex items-center gap-2 text-gray-600">
-                          <GeneralIcon icon="erd" class="group-hover:text-accent" />
-                        </div>
-                      </NcButton>
-                    </NcTooltip>
+                  <div class="ds-table-col ds-table-actions">
+                    <div class="flex items-center gap-2">
+                      <NcTooltip>
+                        <template #title>
+                          {{ $t('title.relations') }}
+                        </template>
+                        <NcButton
+                          size="small"
+                          class="nc-action-btn cursor-pointer outline-0"
+                          type="text"
+                          data-testid="nc-data-sources-view-erd"
+                          @click="baseAction(source.id, DataSourcesSubTab.ERD)"
+                        >
+                          <div class="flex items-center gap-2 text-gray-600">
+                            <GeneralIcon icon="erd" class="group-hover:text-accent" />
+                          </div>
+                        </NcButton>
+                      </NcTooltip>
+                      <NcTooltip>
+                        <template #title>
+                          {{ $t('labels.uiAcl') }}
+                        </template>
+                        <NcButton
+                          size="small"
+                          type="text"
+                          class="nc-action-btn cursor-pointer outline-0"
+                          data-testid="nc-data-sources-view-ui-acl"
+                          @click="baseAction(source.id, DataSourcesSubTab.UIAcl)"
+                        >
+                          <div class="flex items-center gap-2 text-gray-600">
+                            <GeneralIcon icon="acl" class="group-hover:text-accent" />
+                          </div>
+                        </NcButton>
+                      </NcTooltip>
+                      <NcTooltip v-if="!isEeUI">
+                        <template #title>
+                          {{ $t('title.audit') }}
+                        </template>
+                        <NcButton
+                          size="small"
+                          class="nc-action-btn cursor-pointer outline-0"
+                          type="text"
+                          data-testid="nc-data-sources-view-audit"
+                          @click="baseAction(source.id, DataSourcesSubTab.Audit)"
+                        >
+                          <div class="flex items-center gap-2 text-gray-600">
+                            <GeneralIcon icon="book" class="group-hover:text-accent" />
+                          </div>
+                        </NcButton>
+                      </NcTooltip>
+                      <NcTooltip>
+                        <template #title>
+                          {{ $t('tooltip.metaSync') }}
+                        </template>
+                        <NcButton
+                          v-if="!source.is_meta && !source.is_local"
+                          size="small"
+                          type="text"
+                          data-testid="nc-data-sources-view-meta-sync"
+                          class="nc-action-btn cursor-pointer outline-0"
+                          @click="baseAction(source.id, DataSourcesSubTab.Metadata)"
+                        >
+                          <div class="flex items-center gap-2 text-gray-600">
+                            <GeneralIcon icon="sync" class="group-hover:text-accent" />
+                          </div>
+                        </NcButton>
+                      </NcTooltip>
+                    </div>
+                  </div>
+                  <div class="ds-table-col ds-table-crud justify-end gap-x-1">
                     <NcTooltip>
                       <template #title>
-                        {{ $t('labels.uiAcl') }}
-                      </template>
-                      <NcButton
-                        size="small"
-                        type="text"
-                        class="nc-action-btn cursor-pointer outline-0"
-                        data-testid="nc-data-sources-view-ui-acl"
-                        @click="baseAction(source.id, DataSourcesSubTab.UIAcl)"
-                      >
-                        <div class="flex items-center gap-2 text-gray-600">
-                          <GeneralIcon icon="acl" class="group-hover:text-accent" />
-                        </div>
-                      </NcButton>
-                    </NcTooltip>
-                    <NcTooltip v-if="!isEeUI">
-                      <template #title>
-                        {{ $t('title.audit') }}
+                        {{ $t('general.edit') }}
                       </template>
                       <NcButton
+                        v-if="!source.is_meta && !source.is_local"
                         size="small"
-                        class="nc-action-btn cursor-pointer outline-0"
+                        class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg"
                         type="text"
-                        data-testid="nc-data-sources-view-audit"
-                        @click="baseAction(source.id, DataSourcesSubTab.Audit)"
+                        @click="baseAction(source.id, DataSourcesSubTab.Edit)"
                       >
-                        <div class="flex items-center gap-2 text-gray-600">
-                          <GeneralIcon icon="book" class="group-hover:text-accent" />
-                        </div>
+                        <GeneralIcon icon="edit" class="text-gray-600" />
                       </NcButton>
                     </NcTooltip>
                     <NcTooltip>
                       <template #title>
-                        {{ $t('tooltip.metaSync') }}
+                        {{ $t('general.remove') }}
                       </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"
-                        data-testid="nc-data-sources-view-meta-sync"
-                        class="nc-action-btn cursor-pointer outline-0"
-                        @click="baseAction(source.id, DataSourcesSubTab.Metadata)"
+                        @click="openDeleteBase(source)"
                       >
-                        <div class="flex items-center gap-2 text-gray-600">
-                          <GeneralIcon icon="sync" class="group-hover:text-accent" />
-                        </div>
+                        <GeneralIcon icon="delete" class="text-red-500" />
                       </NcButton>
                     </NcTooltip>
                   </div>
                 </div>
-                <div class="ds-table-col ds-table-crud justify-end gap-x-1">
-                  <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="baseAction(source.id, DataSourcesSubTab.Edit)"
-                    >
-                      <GeneralIcon icon="edit" class="text-gray-600" />
-                    </NcButton>
-                  </NcTooltip>
-                  <NcTooltip>
-                    <template #title>
-                      {{ $t('general.remove') }}
-                    </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="openDeleteBase(source)"
-                    >
-                      <GeneralIcon icon="delete" class="text-red-500" />
-                    </NcButton>
-                  </NcTooltip>
-                </div>
-              </div>
-            </template>
-          </Draggable>
-        </div>
-      </div>
-      <LazyDashboardSettingsDataSourcesCreateBase
-        v-model:open="isNewBaseModalOpen"
-        :connection-type="clientType"
-        @source-created="loadBases(true)"
-      />
-      <GeneralModal v-model:visible="isErdModalOpen" size="large">
-        <div class="h-[80vh]">
-          <LazyDashboardSettingsErd :source-id="activeBaseId" :show-all-columns="false" />
-        </div>
-      </GeneralModal>
-      <GeneralModal v-model:visible="isMetaDataModal" size="medium">
-        <div class="p-6">
-          <LazyDashboardSettingsMetadata :source-id="activeBaseId" @source-synced="loadBases(true)" />
-        </div>
-      </GeneralModal>
-      <GeneralModal v-model:visible="isUIAclModalOpen" class="!w-[60rem]">
-        <div class="p-6">
-          <LazyDashboardSettingsUIAcl :source-id="activeBaseId" />
-        </div>
-      </GeneralModal>
-      <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>
-      <GeneralModal v-model:visible="isBaseAuditModalOpen" class="!w-[70rem]">
-        <div class="p-6">
-          <LazyDashboardSettingsBaseAudit :source-id="activeBaseId" @close="isBaseAuditModalOpen = false" />
+              </template>
+            </Draggable>
+          </div>
         </div>
-      </GeneralModal>
-      <GeneralDeleteModal
-        v-model:visible="isDeleteBaseModalOpen"
-        :entity-name="$t('general.datasource')"
-        :on-delete="deleteBase"
-        :delete-label="$t('general.remove')"
-      >
-        <template #entity-preview>
-          <div v-if="toBeDeletedBase" class="flex flex-row items-center py-2 px-3.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
-            <GeneralBaseLogo :source-type="toBeDeletedBase.type" />
-            <div
-              class="capitalize text-ellipsis overflow-hidden select-none w-full pl-3"
-              :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
-            >
-              {{ toBeDeletedBase.alias }}
-            </div>
+        <LazyDashboardSettingsDataSourcesCreateBase
+          v-model:open="isNewBaseModalOpen"
+          :connection-type="clientType"
+          @source-created="loadBases(true)"
+        />
+        <GeneralModal v-model:visible="isErdModalOpen" size="large">
+          <div class="h-[80vh]">
+            <LazyDashboardSettingsErd :source-id="activeBaseId" :show-all-columns="false" />
           </div>
-        </template>
-      </GeneralDeleteModal>
+        </GeneralModal>
+        <GeneralModal v-model:visible="isMetaDataModal" size="medium">
+          <div class="p-6">
+            <LazyDashboardSettingsMetadata :source-id="activeBaseId" @source-synced="loadBases(true)" />
+          </div>
+        </GeneralModal>
+        <GeneralModal v-model:visible="isUIAclModalOpen" class="!w-[60rem]">
+          <div class="p-6">
+            <LazyDashboardSettingsUIAcl :source-id="activeBaseId" />
+          </div>
+        </GeneralModal>
+        <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>
+        <GeneralModal v-model:visible="isBaseAuditModalOpen" class="!w-[70rem]">
+          <div class="p-6">
+            <LazyDashboardSettingsBaseAudit :source-id="activeBaseId" @close="isBaseAuditModalOpen = false" />
+          </div>
+        </GeneralModal>
+        <GeneralDeleteModal
+          v-model:visible="isDeleteBaseModalOpen"
+          :entity-name="$t('general.datasource')"
+          :on-delete="deleteBase"
+          :delete-label="$t('general.remove')"
+        >
+          <template #entity-preview>
+            <div v-if="toBeDeletedBase" class="flex flex-row items-center py-2 px-3.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
+              <GeneralBaseLogo :source-type="toBeDeletedBase.type" />
+              <div
+                class="capitalize text-ellipsis overflow-hidden select-none w-full pl-3"
+                :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+              >
+                {{ toBeDeletedBase.alias }}
+              </div>
+            </div>
+          </template>
+        </GeneralDeleteModal>
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index ddcc2d8788..8dbc5f942a 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/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 = ''">
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index c481dcfce5..ce0165f540 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": {
+    "metaSync": "Meta Sync",
     "today": "Today",
     "workspace": "Workspace",
     "txt": "TXT Record value",