From 9d17af1e86819e4d5dc8040a873d592197d11ed6 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 17 Oct 2022 17:17:20 +0200
Subject: [PATCH] chore(nc-gui): cleanup

---
 .../components/dashboard/settings/AppStore.vue     |  1 +
 packages/nc-gui/components/erd/Flow.vue            |  4 ++--
 packages/nc-gui/components/erd/RelationEdge.vue    |  2 +-
 packages/nc-gui/components/erd/View.vue            | 14 +++++++-------
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/AppStore.vue b/packages/nc-gui/components/dashboard/settings/AppStore.vue
index 56fb84b2ce..0c8d0acbde 100644
--- a/packages/nc-gui/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui/components/dashboard/settings/AppStore.vue
@@ -77,6 +77,7 @@ onMounted(async () => {
     min-height="300"
     :footer="null"
     wrap-class-name="nc-modal-plugin-install"
+    v-bind="$attrs"
   >
     <LazyDashboardSettingsAppInstall
       v-if="pluginApp && showPluginInstallModal"
diff --git a/packages/nc-gui/components/erd/Flow.vue b/packages/nc-gui/components/erd/Flow.vue
index f38541eae0..4592dd1100 100644
--- a/packages/nc-gui/components/erd/Flow.vue
+++ b/packages/nc-gui/components/erd/Flow.vue
@@ -83,12 +83,12 @@ onScopeDispose($destroy)
       position="bottom-right"
     >
       <div class="flex flex-col divide-y-1">
-        <div class="flex items-center gap-1 px-2 py-1">
+        <div class="flex items-center gap-1 p-2">
           <MdiTableLarge class="text-primary" />
           <div>{{ $t('objects.table') }}</div>
         </div>
 
-        <div class="flex items-center gap-1 px-2 py-1">
+        <div class="flex items-center gap-1 p-2">
           <MdiEyeCircleOutline class="text-primary" />
           <div>{{ $t('objects.sqlVIew') }}</div>
         </div>
diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index e81009d0bb..cf14350a3a 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -95,7 +95,7 @@ export default {
       v-if="data.label?.length > 0 && (selected || isHovering)"
       :key="`edge-text-${id}.${showSkeleton}`"
       :class="[
-        showSkeleton ? '!text-5xl' : '!text-xs',
+        showSkeleton ? '!text-6xl' : '!text-xs',
         `nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`,
       ]"
       :x="edgePath[1]"
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 2916c98b97..a1d8f6c026 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -3,7 +3,7 @@ import { Panel } from '@vue-flow/additional-components'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { ErdFlowConfig } from './utils'
-import { ref, useGlobal, useMetas, useProject, watch } from '#imports'
+import { reactive, ref, useGlobal, useMetas, useProject, watch } from '#imports'
 
 const { table } = defineProps<{ table?: TableType }>()
 
@@ -19,7 +19,7 @@ let isLoading = $ref(true)
 
 const showAdvancedOptions = ref(false)
 
-const config = ref<ErdFlowConfig>({
+const config = reactive<ErdFlowConfig>({
   showPkAndFk: true,
   showViews: false,
   showAllColumns: true,
@@ -61,12 +61,12 @@ const populateTables = async () => {
   tables.value = localTables
     .filter(
       (t) =>
-        config.value.showMMTables ||
-        (!config.value.showMMTables && !t.mm) ||
+        config.showMMTables ||
+        (!config.showMMTables && !t.mm) ||
         // Show mm table if it's the selected table
         t.id === table?.id,
     )
-    .filter((t) => (!config.value.showViews && t.type !== 'view') || config.value.showViews)
+    .filter((t) => config.singleTableMode || (!config.showViews && t.type !== 'view') || config.showViews)
 
   isLoading = false
 }
@@ -82,9 +82,9 @@ watch(config, populateTables, {
 })
 
 watch(
-  () => config.value.showAllColumns,
+  () => config.showAllColumns,
   () => {
-    config.value.showPkAndFk = config.value.showAllColumns
+    config.showPkAndFk = config.showAllColumns
   },
 )
 </script>