fix(ui): table data issue in entity table lineage sidebar (#13893)

* fix table data issue in entity table lineage sidebar

* optimize code

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);

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" />
 

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'];
+}