From 2935c1d67bbfcfe85c56c5bcbf6d7ffb111ab2dc Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Wed, 8 Nov 2023 14:57:17 +0530
Subject: [PATCH] fix(ui): table data issue in entity table lineage sidebar
 (#13893)

* fix table data issue in entity table lineage sidebar

* optimize code
---
 .../EntityInfoDrawer.component.tsx            |  2 +-
 .../TableSummary/TableSummary.component.tsx   | 61 ++++++++++---------
 .../TableSummary/TableSummary.interface.ts    |  5 ++
 3 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EntityInfoDrawer.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EntityInfoDrawer.component.tsx
index d3ca7991fe8..a222db652d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EntityInfoDrawer.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EntityInfoDrawer.component.tsx
@@ -254,7 +254,7 @@ const EntityInfoDrawer = ({
       default:
         return null;
     }
-  }, [entityDetail, fetchEntityDetail, tags, selectedNode]);
+  }, [entityDetail, fetchEntityDetail, tags, selectedNode, isLoading]);
 
   useEffect(() => {
     fetchEntityDetail(selectedNode);
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.component.tsx
index 0a98e9bd803..b37ac2d1869 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.component.tsx
@@ -50,7 +50,10 @@ import CommonEntitySummaryInfo from '../CommonEntitySummaryInfo/CommonEntitySumm
 import SummaryList from '../SummaryList/SummaryList.component';
 import { BasicEntityInfo } from '../SummaryList/SummaryList.interface';
 import './table-summary.less';
-import { TableSummaryProps } from './TableSummary.interface';
+import {
+  TableProfileDetails,
+  TableSummaryProps,
+} from './TableSummary.interface';
 
 function TableSummary({
   entityDetails,
@@ -62,23 +65,29 @@ function TableSummary({
   const location = useLocation();
   const isTourPage = location.pathname.includes(ROUTES.TOUR);
   const { getEntityPermission } = usePermissionProvider();
-  const [tableDetails, setTableDetails] = useState<Table>(entityDetails);
+
+  const [profileData, setProfileData] = useState<TableProfileDetails>();
   const [testSuiteSummary, setTestSuiteSummary] = useState<TestSummary>();
   const [tablePermissions, setTablePermissions] = useState<OperationPermission>(
     DEFAULT_ENTITY_PERMISSION
   );
 
+  const tableDetails: Table = useMemo(
+    () => ({ ...entityDetails, ...profileData }),
+    [entityDetails, profileData]
+  );
+
   const viewProfilerPermission = useMemo(
     () => tablePermissions.ViewDataProfile || tablePermissions.ViewAll,
     [tablePermissions]
   );
 
-  const isTableDeleted = useMemo(() => entityDetails.deleted, [entityDetails]);
+  const isTableDeleted = useMemo(() => tableDetails.deleted, [tableDetails]);
 
   const fetchAllTests = async () => {
     try {
       const res = await getTableDetailsByFQN(
-        getEncodedFqn(entityDetails.fullyQualifiedName ?? ''),
+        getEncodedFqn(tableDetails.fullyQualifiedName ?? ''),
         'testSuite'
       );
 
@@ -92,23 +101,14 @@ function TableSummary({
 
   const fetchProfilerData = useCallback(async () => {
     try {
-      const profileResponse = await getLatestTableProfileByFqn(
-        entityDetails?.fullyQualifiedName || ''
+      const { profile, tableConstraints } = await getLatestTableProfileByFqn(
+        tableDetails?.fullyQualifiedName ?? ''
       );
-
-      const { profile, tableConstraints } = profileResponse;
-
-      setTableDetails((prev) => {
-        if (prev) {
-          return { ...prev, profile, tableConstraints };
-        } else {
-          return {} as Table;
-        }
-      });
+      setProfileData({ profile, tableConstraints });
     } catch (error) {
       // Error
     }
-  }, [entityDetails]);
+  }, [tableDetails]);
 
   const profilerSummary = useMemo(() => {
     if (!viewProfilerPermission) {
@@ -163,8 +163,6 @@ function TableSummary({
     );
   }, [tableDetails, testSuiteSummary, viewProfilerPermission]);
 
-  const { columns } = tableDetails;
-
   const entityInfo = useMemo(
     () => getEntityOverview(ExplorePageTabs.TABLES, tableDetails),
     [tableDetails]
@@ -174,22 +172,22 @@ function TableSummary({
     () =>
       getFormattedEntityData(
         SummaryEntityType.COLUMN,
-        columns,
+        tableDetails.columns,
         tableDetails.tableConstraints
       ),
-    [columns, tableDetails]
+    [tableDetails]
   );
 
   const init = useCallback(async () => {
-    if (entityDetails.id && !isTourPage) {
+    if (tableDetails.id && !isTourPage) {
       const tablePermission = await getEntityPermission(
         ResourceEntity.TABLE,
-        entityDetails.id
+        tableDetails.id
       );
       setTablePermissions(tablePermission);
       const shouldFetchProfilerData =
         !isTableDeleted &&
-        entityDetails.service?.type === 'databaseService' &&
+        tableDetails.service?.type === 'databaseService' &&
         !isTourPage &&
         tablePermission;
 
@@ -200,11 +198,18 @@ function TableSummary({
     } else {
       setTablePermissions(mockTablePermission as OperationPermission);
     }
-  }, [entityDetails.fullyQualifiedName, isTourPage, isTableDeleted]);
+  }, [
+    tableDetails,
+    isTourPage,
+    isTableDeleted,
+    fetchProfilerData,
+    fetchAllTests,
+    getEntityPermission,
+  ]);
 
   useEffect(() => {
     init();
-  }, [entityDetails.id]);
+  }, [tableDetails.id]);
 
   return (
     <SummaryPanelSkeleton loading={isLoading || isEmpty(tableDetails)}>
@@ -234,8 +239,8 @@ function TableSummary({
         <Divider className="m-y-xs" />
 
         <SummaryTagsDescription
-          entityDetail={entityDetails}
-          tags={tags ?? entityDetails.tags ?? []}
+          entityDetail={tableDetails}
+          tags={tags ?? tableDetails.tags ?? []}
         />
         <Divider className="m-y-xs" />
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.interface.ts
index 1359de0f99b..3b04c86a02d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.interface.ts
@@ -30,3 +30,8 @@ export interface BasicTableInfo {
   Queries: string;
   Columns: string;
 }
+
+export interface TableProfileDetails {
+  profile: Table['profile'];
+  tableConstraints: Table['tableConstraints'];
+}