From 212c79276d3c32430b3edab00d35567179c2c50c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 20 Sep 2022 17:38:01 +0530
Subject: [PATCH] feat(nc-gui): Removed unnecassry icon import and fixed
 reactivity issue in RelationEdge

---
 packages/nc-gui/components.d.ts                 |  1 +
 packages/nc-gui/components/erd/RelationEdge.vue | 12 ++++++------
 packages/nc-gui/components/erd/TableNode.vue    |  4 +---
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 64752f681a..0775cfde06 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -190,6 +190,7 @@ declare module '@vue/runtime-core' {
     MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
+    MdiTableLarge: typeof import('~icons/mdi/table-large')['default']
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index 5cda21a107..fec3122b9d 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -53,12 +53,12 @@ const props = defineProps({
   },
 })
 
-const { column, isSelfRelation, label } = toRefs(props.data)
+const data = toRef(props, 'data')
 
-const isManyToMany = computed(() => column.value?.colOptions?.type === 'mm')
+const isManyToMany = computed(() => data.value.column?.colOptions?.type === 'mm')
 
 const edgePath = computed(() => {
-  if (isSelfRelation.value) {
+  if (data.value.isSelfRelation) {
     const { sourceX, sourceY, targetX, targetY } = props
     const radiusX = (sourceX - targetX) * 0.6
     const radiusY = 50
@@ -112,11 +112,11 @@ export default {
   />
 
   <EdgeText
-    v-if="label?.length > 0"
-    :class="`nc-erd-table-label-${label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
+    v-if="data.label?.length > 0"
+    :class="`nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
     :x="center[0]"
     :y="center[1]"
-    :label="label"
+    :label="data.label"
     :label-style="{ fill: 'white' }"
     :label-show-bg="true"
     :label-bg-style="{ fill: '#10b981' }"
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 6b901ef041..0c753e9856 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -4,8 +4,6 @@ import { Handle, Position } from '@braks/vue-flow'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import MdiView from '~icons/mdi/eye-circle-outline'
-import MdiTableLarge from '~icons/mdi/table-large'
 
 interface Props extends NodeProps {
   data: TableType & { showPkAndFk: boolean; showAllColumns: boolean }
@@ -54,7 +52,7 @@ const relatedColumnId = (col: Record<string, any>) =>
         class="text-gray-600 text-md py-2 border-b-1 border-gray-200 rounded-t-lg w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
       >
         <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
-        <MdiView v-else class="text-primary" />
+        <MdiEyeCircleOutline v-else class="text-primary" />
         <div class="flex pl-1.5">
           {{ data.title }}
         </div>