feat: team & settings modal data sources tab revised

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -4,7 +4,7 @@ import { UITypes } from 'nocodb-sdk'
 import type { ERDConfig } from './utils'
 import { reactive, ref, useMetas, useProject, watch } from '#imports'
 
-const { table } = defineProps<{ table?: TableType }>()
+const props = defineProps<{ table?: TableType; baseId?: string }>()
 
 const { tables: projectTables } = useProject()
 
@@ -18,7 +18,7 @@ const config = reactive<ERDConfig>({
   showPkAndFk: true,
   showViews: false,
   showAllColumns: true,
-  singleTableMode: !!table,
+  singleTableMode: !!props.table,
   showMMTables: false,
   showJunctionTableNames: false,
 })
@@ -34,14 +34,13 @@ const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => {
 }
 
 const populateTables = async () => {
-  let localTables: TableType[]
-
-  if (table) {
+  let localTables: TableType[] = []
+  if (props.table) {
     // if table is provided only get the table and its related tables
     localTables = projectTables.value.filter(
       (t) =>
-        t.id === table.id ||
-        table.columns?.find(
+        t.id === props.table.id ||
+        props.table.columns?.find(
           (column) =>
             column.uidt === UITypes.LinkToAnotherRecord &&
             (column.colOptions as LinkToAnotherRecordType)?.fk_related_model_id === t.id,
@@ -59,7 +58,7 @@ const populateTables = async () => {
         config.showMMTables ||
         (!config.showMMTables && !t.mm) ||
         // Show mm table if it's the selected table
-        t.id === table?.id,
+        t.id === props.table?.id,
     )
     .filter((t) => config.singleTableMode || (!config.showViews && t.type !== 'view') || config.showViews)
 
@@ -76,6 +75,8 @@ watch(config, populateTables, {
   deep: true,
 })
 
+const filteredTables = computed(() => tables.value.filter((t) => !props.baseId || t.base_id === props.baseId))
+
 watch(
   () => config.showAllColumns,
   () => {
@@ -87,7 +88,7 @@ watch(
 <template>
   <div class="w-full" style="height: inherit" :class="[`nc-erd-vue-flow${config.singleTableMode ? '-single-table' : ''}`]">
     <div class="relative h-full">
-      <LazyErdFlow :tables="tables" :config="config">
+      <LazyErdFlow :tables="filteredTables" :config="config">
         <GeneralOverlay v-model="isLoading" inline class="bg-gray-300/50">
           <div class="h-full w-full flex flex-col justify-center items-center">
             <a-spin size="large" />