fix(nc-gui): Added relation modal for base/source node in sidebar

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -289,22 +289,21 @@ const onProjectClick = async (base: NcProject, ignoreNavigation?: boolean, toggl
 }
 
 function openErdView(source: SourceType) {
-  activeBaseId.value = source.id
-  isErdModalOpen.value = !isErdModalOpen.value
-}
+  $e('c:project:relation')
 
-async function openProjectErdView(_project: BaseType) {
-  if (!_project.id) return
+  const isOpen = ref(true)
 
-  if (!basesStore.isProjectPopulated(_project.id)) {
-    await loadProject(_project.id)
-  }
+  const { close } = useDialog(resolveComponent('DlgProjectErd'), {
+    'modelValue': isOpen,
+    'sourceId': source!.id,
+    'onUpdate:modelValue': () => closeDialog(),
+  })
 
-  const base = bases.value.get(_project.id)
+  function closeDialog() {
+    isOpen.value = false
 
-  const source = base?.sources?.[0]
-  if (!source) return
-  openErdView(source)
+    close(1000)
+  }
 }
 
 const reloadTables = async () => {
@@ -545,7 +544,7 @@ const projectDelete = () => {
                     key="erd"
                     v-e="['c:base:erd']"
                     data-testid="nc-sidebar-base-relations"
-                    @click="openProjectErdView(base)"
+                    @click="openErdView(base?.sources?.[0]!)"
                   >
                     <GeneralIcon icon="erd" />
                     {{ $t('title.relations') }}

packages/nc-gui/components/dlg/ProjectErd.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  sourceId: string
+  modelValue: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = useVModel(props, 'modelValue', emit)
+
+const activeSourceId = computed(() => props.sourceId)
+</script>
+
+<template>
+  <GeneralModal v-model:visible="isOpen" size="large">
+    <div class="h-[80vh]">
+      <LazyDashboardSettingsErd :source-id="activeSourceId" />
+    </div>
+  </GeneralModal>
+</template>