feat/Added ERD view to grid toolbar and cleanups

packages/nc-gui/components.d.ts

@@ -173,6 +173,7 @@ declare module '@vue/runtime-core' {
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
+    MdiOpenInNewIcon: typeof import('~icons/mdi/open-in-new-icon')['default']
     MdiPencil: typeof import('~icons/mdi/pencil')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusCircleOutline: typeof import('~icons/mdi/plus-circle-outline')['default']

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

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import Erd from '~/components/erd/Erd.vue'
-
 const { tables } = useProject()
 
 const { metas, getMeta } = useMetas()
@@ -33,18 +31,24 @@ const localTables = computed(() =>
 </script>
 
 <template>
-  <div v-if="isLoading" style="height: 650px"></div>
-  <div v-else class="relative" style="height: 650px">
-    <Erd :key="JSON.stringify(config)" :tables="localTables" :config="config" />
-
-    <div class="absolute top-4 right-4 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
-      <div class="flex flex-row items-center">
-        <a-checkbox v-model:checked="config.showPkAndFk" />
-        <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
+  <div class="w-full" style="height: 70vh">
+    <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
+      <div class="flex flex-row justify-center">
+        <a-spin size="large" />
       </div>
-      <div class="flex flex-row items-center">
-        <a-checkbox v-model:checked="config.showViews" />
-        <span class="ml-2" style="font-size: 0.65rem">Show views</span>
+    </div>
+    <div v-else class="relative h-full">
+      <ErdView :key="JSON.stringify(config)" :tables="localTables" :config="config" />
+
+      <div class="absolute top-4 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showPkAndFk" />
+          <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
+        </div>
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showViews" />
+          <span class="ml-2" style="font-size: 0.65rem">Show views</span>
+        </div>
       </div>
     </div>
   </div>

packages/nc-gui/components/erd/View.vue

@@ -119,7 +119,7 @@ onBeforeMount(async () => {
 
 <template>
   <VueFlow :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true">
-    <Controls :show-fit-view="false" :show-interactive="false" />
+    <Controls class="!left-auto right-2 !top-2 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
 
     <template #node-custom="props">
       <TableNode :data="props.data" />

packages/nc-gui/components/smartsheet-toolbar/Erd.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { UITypes } from 'nocodb-sdk'
+
+const { tables } = useProject()
+
+const { metas, getMeta } = useMetas()
+const meta = inject(MetaInj)
+
+let isLoading = $ref(true)
+
+const config = ref({
+  showPkAndFk: true,
+  showViews: false,
+})
+
+const relatedTables = computed(() =>
+  tables.value.filter(
+    (table) =>
+      meta?.value.columns &&
+      meta.value.columns.find(
+        (column) => column.uidt === UITypes.LinkToAnotherRecord && column?.colOptions?.fk_related_model_id === table.id,
+      ),
+  ),
+)
+
+const loadMetaOfTablesNotInMetas = async () => {
+  await Promise.all(
+    relatedTables.value
+      .filter((table) => !metas.value[table.id!])
+      .map(async (table) => {
+        await getMeta(table.id!)
+      }),
+  )
+}
+
+onMounted(async () => {
+  await loadMetaOfTablesNotInMetas()
+  isLoading = false
+})
+
+const localTables = computed(() => (meta ? [meta.value, ...relatedTables.value] : []))
+</script>
+
+<template>
+  <div class="w-full" style="height: 70vh">
+    <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
+      <div class="flex flex-row justify-center">
+        <a-spin size="large" />
+      </div>
+    </div>
+    <div v-else class="relative h-full">
+      <ErdView :key="JSON.stringify(config)" :tables="localTables" :config="config" />
+
+      <div class="absolute top-3 right-11 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showPkAndFk" />
+          <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue

@@ -18,6 +18,7 @@ import { LockType } from '~/lib'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
 import MdiAccountIcon from '~icons/mdi/account'
 import MdiAccountGroupIcon from '~icons/mdi/account-group'
+import AcountTreeRoundedIcon from '~icons/material-symbols/account-tree-rounded'
 
 const { t } = useI18n()
 
@@ -37,6 +38,8 @@ const showWebhookDrawer = ref(false)
 
 const showApiSnippetDrawer = ref(false)
 
+const showErd = ref(false)
+
 const quickImportDialog = ref(false)
 
 const { isUIAllowed } = useUIPermission()
@@ -212,6 +215,12 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
                 {{ $t('activity.getApiSnippet') }}
               </div>
             </a-menu-item>
+            <a-menu-item>
+              <div v-t="['c:erd:open']" class="py-2 flex gap-2 items-center" @click="showErd = true">
+                <AcountTreeRoundedIcon class="text-gray-500" />
+                {{ $t('title.erdView') }}
+              </div>
+            </a-menu-item>
           </a-menu-item-group>
         </a-menu>
       </template>
@@ -221,6 +230,10 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
+    <a-modal v-model:visible="showErd" size="small" :title="$t('title.erdView')" :footer="null" width="max(900px,60vw)">
+      <SmartsheetToolbarErd />
+    </a-modal>
+
     <a-modal
       v-model:visible="sharedViewListDlg"
       :title="$t('activity.listSharedView')"

packages/nc-gui/lang/en.json

@@ -158,6 +158,7 @@
   },
   "title": {
     "erd": "ERD",
+    "erdView": "ERD View",
     "newProj": "New Project",
     "myProject": "My Projects",
     "formTitle": "Form Title",