Fix #4016 UI Support updated EntityReference for dataset details page. (#4018)

openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.component.tsx

@@ -57,7 +57,7 @@ const EntityInfoDrawer = ({
     switch (selectedNode.type) {
       case EntityType.TABLE: {
         setIsLoading(true);
-        getTableDetailsByFQN(selectedNode.name, [
+        getTableDetailsByFQN(selectedNode.fqn, [
           'tags',
           'owner',
           'columns',
@@ -80,7 +80,7 @@ const EntityInfoDrawer = ({
       }
       case EntityType.PIPELINE: {
         setIsLoading(true);
-        getPipelineByFqn(selectedNode.name, ['tags', 'owner'])
+        getPipelineByFqn(selectedNode.fqn, ['tags', 'owner'])
           .then((res: AxiosResponse) => {
             getServiceById('pipelineServices', res.data.service?.id)
               .then((serviceRes: AxiosResponse) => {
@@ -106,7 +106,7 @@ const EntityInfoDrawer = ({
       }
       case EntityType.DASHBOARD: {
         setIsLoading(true);
-        getDashboardByFqn(selectedNode.name, ['tags', 'owner'])
+        getDashboardByFqn(selectedNode.fqn, ['tags', 'owner'])
           .then((res: AxiosResponse) => {
             getServiceById('dashboardServices', res.data.service?.id)
               .then((serviceRes: AxiosResponse) => {
@@ -147,7 +147,7 @@ const EntityInfoDrawer = ({
           <span className="tw-mr-2">{getEntityIcon(selectedNode.type)}</span>
           {getHeaderLabel(
             selectedNode.displayName ?? selectedNode.name,
-            selectedNode.name,
+            selectedNode.fqn,
             selectedNode.type,
             isMainNode
           )}

openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx

@@ -190,7 +190,12 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
         ) : null}
         <p className="tw-flex">
           <span className="tw-mr-2">{getEntityIcon(node.type)}</span>
-          {getDataLabel(node.displayName, node.name, false, node.type)}
+          {getDataLabel(
+            node.displayName,
+            node.fullyQualifiedName,
+            false,
+            node.type
+          )}
         </p>
       </Fragment>
     );
@@ -480,6 +485,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
     if (!expandButton.current) {
       selectNodeHandler(true, {
         name: node?.name as string,
+        fqn: node?.fullyQualifiedName as string,
         id: el.id,
         displayName: node?.displayName,
         type: node?.type as string,
@@ -846,12 +852,14 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
               </ReactFlow>
             </ReactFlowProvider>
           </div>
-          <EntityInfoDrawer
+          {!isEmpty(selectedNode) ? (
-            isMainNode={selectedNode.name === lineageData.entity?.name}
+            <EntityInfoDrawer
-            selectedNode={selectedNode}
+              isMainNode={selectedNode.name === lineageData.entity?.name}
-            show={isDrawerOpen && !isEditMode}
+              selectedNode={selectedNode}
-            onCancel={closeDrawer}
+              show={isDrawerOpen && !isEditMode}
-          />
+              onCancel={closeDrawer}
+            />
+          ) : null}
           <EntityLineageSidebar newAddedNode={newAddedNode} show={isEditMode} />
           {showdeleteModal ? (
             <ConfirmationModal

openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.interface.ts

@@ -20,6 +20,7 @@ import {
 export interface SelectedNode {
   name: string;
   type: string;
+  fqn: string;
   displayName?: string;
   id?: string;
   entityId: string;

openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx

@@ -466,7 +466,7 @@ const Explore: React.FC<ExploreProps> = ({
   const handleFilterChange = (filtersObj: FilterObject) => {
     const params = prepareQueryParams(filtersObj);
 
-    const explorePath = getExplorePathWithSearch(searchQuery);
+    const explorePath = getExplorePathWithSearch(searchQuery, tab);
 
     history.push({
       pathname: explorePath,

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx

@@ -257,8 +257,10 @@ const DatabaseSchemaPage: FunctionComponent = () => {
               imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined,
             },
             {
-              name: getPartialNameFromTableFQN(database.name, ['database']),
+              name: getPartialNameFromTableFQN(database.fullyQualifiedName, [
-              url: getDatabaseDetailsPath(database.name),
+                'database',
+              ]),
+              url: getDatabaseDetailsPath(database.fullyQualifiedName),
             },
             {
               name: name,

openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx

@@ -313,12 +313,19 @@ const DatasetDetailsPage: FunctionComponent = () => {
               imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined,
             },
             {
-              name: getPartialNameFromTableFQN(database.name, ['database']),
+              name: getPartialNameFromTableFQN(database.fullyQualifiedName, [
-              url: getDatabaseDetailsPath(database.name),
+                'database',
+              ]),
+              url: getDatabaseDetailsPath(database.fullyQualifiedName),
             },
             {
-              name: getPartialNameFromTableFQN(databaseSchema.name, ['schema']),
+              name: getPartialNameFromTableFQN(
-              url: getDatabaseSchemaDetailsPath(databaseSchema.name),
+                databaseSchema.fullyQualifiedName,
+                ['schema']
+              ),
+              url: getDatabaseSchemaDetailsPath(
+                databaseSchema.fullyQualifiedName
+              ),
             },
             {
               name: name,

openmetadata-ui/src/main/resources/ui/src/pages/EntityVersionPage/EntityVersionPage.component.tsx

@@ -173,14 +173,19 @@ const EntityVersionPage: FunctionComponent = () => {
                 imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined,
               },
               {
-                name: getPartialNameFromTableFQN(database.name, ['database']),
+                name: getPartialNameFromTableFQN(database.fullyQualifiedName, [
-                url: getDatabaseDetailsPath(database.name),
+                  'database',
+                ]),
+                url: getDatabaseDetailsPath(database.fullyQualifiedName),
               },
               {
-                name: getPartialNameFromTableFQN(databaseSchema.name, [
+                name: getPartialNameFromTableFQN(
-                  'schema',
+                  databaseSchema.fullyQualifiedName,
-                ]),
+                  ['schema']
-                url: getDatabaseSchemaDetailsPath(databaseSchema.name),
+                ),
+                url: getDatabaseSchemaDetailsPath(
+                  databaseSchema.fullyQualifiedName
+                ),
               },
               {
                 name: name,
@@ -387,16 +392,20 @@ const EntityVersionPage: FunctionComponent = () => {
                       : undefined,
                   },
                   {
-                    name: getPartialNameFromTableFQN(database.name, [
+                    name: getPartialNameFromTableFQN(
-                      'database',
+                      database.fullyQualifiedName,
-                    ]),
+                      ['database']
-                    url: getDatabaseDetailsPath(database.name),
+                    ),
+                    url: getDatabaseDetailsPath(database.fullyQualifiedName),
                   },
                   {
-                    name: getPartialNameFromTableFQN(databaseSchema.name, [
+                    name: getPartialNameFromTableFQN(
-                      'schema',
+                      databaseSchema.fullyQualifiedName,
-                    ]),
+                      ['schema']
-                    url: getDatabaseSchemaDetailsPath(databaseSchema.name),
+                    ),
+                    url: getDatabaseSchemaDetailsPath(
+                      databaseSchema.fullyQualifiedName
+                    ),
                   },
                   {
                     name: name,

openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx

@@ -58,8 +58,8 @@ import { isLeafNode } from './EntityUtils';
 import { getEntityLink } from './TableUtils';
 
 export const getHeaderLabel = (
-  v = '',
+  name = '',
-  fqn: string,
+  fqn = '',
   type: string,
   isMainNode: boolean
 ) => {
@@ -69,14 +69,14 @@ export const getHeaderLabel = (
         <span
           className="tw-break-words description-text tw-self-center tw-font-medium"
           data-testid="lineage-entity">
-          {prepareLabel(type, v, false)}
+          {name || prepareLabel(type, fqn, false)}
         </span>
       ) : (
         <span
           className="tw-break-words description-text tw-self-center link-text tw-font-medium"
           data-testid="lineage-entity">
           <Link to={getEntityLink(type, fqn)}>
-            {prepareLabel(type, v, false)}
+            {name || prepareLabel(type, fqn, false)}
           </Link>
         </span>
       )}
@@ -421,18 +421,18 @@ export const getLineageData = (
 
 export const getDataLabel = (
   displayName?: string,
-  name = '',
+  fqn = '',
   isTextOnly = false,
   type?: string
 ) => {
-  const databaseName = getPartialNameFromTableFQN(name, ['database']);
+  const databaseName = getPartialNameFromTableFQN(fqn, ['database']);
-  const schemaName = getPartialNameFromTableFQN(name, ['schema']);
+  const schemaName = getPartialNameFromTableFQN(fqn, ['schema']);
 
   let label = '';
   if (displayName) {
     label = displayName;
   } else {
-    label = prepareLabel(type as string, name);
+    label = prepareLabel(type as string, fqn);
   }
 
   if (isTextOnly) {