fix(ui): dashboard data model name column should not be link (#21470)

* fix: dashboard data model name should not be link

* minor refactor

* add tests

* style: name and displayName color

* refactor code

* style: name/displayName color change

openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModels/ModelTab/ModelTab.component.tsx

@@ -40,7 +40,6 @@ import {
   getColumnSorter,
   getEntityName,
 } from '../../../../../utils/EntityUtils';
-import { getEntityDetailsPath } from '../../../../../utils/RouterUtils';
 import { columnFilterIcon } from '../../../../../utils/TableColumn.util';
 import {
   getAllTags,
@@ -209,14 +208,6 @@ const ModelTab = () => {
               allowRename={editDisplayNamePermission}
               displayName={displayName}
               id={record.fullyQualifiedName ?? ''}
-              link={
-                record.fullyQualifiedName
-                  ? getEntityDetailsPath(
-                      EntityType.DASHBOARD_DATA_MODEL,
-                      record.fullyQualifiedName
-                    )
-                  : ''
-              }
               name={record.name}
               onEditDisplayName={handleEditColumnData}
             />

openmetadata-ui/src/main/resources/ui/src/components/Database/SchemaTable/SchemaTable.component.tsx

@@ -14,6 +14,7 @@
 import { Button, Col, Form, Row, Select, Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { ExpandableConfig } from 'antd/lib/table/interface';
+import classNames from 'classnames';
 import {
   cloneDeep,
   groupBy,
@@ -416,7 +417,9 @@ const SchemaTable = () => {
                   tableConstraints,
                 })}
                 <Typography.Text
-                  className="m-b-0 d-block break-word"
+                  className={classNames('m-b-0 d-block break-word', {
+                    'text-grey-600': !isEmpty(displayName),
+                  })}
                   data-testid="column-name">
                   {stringToHTML(highlightSearchText(name, searchText))}
                 </Typography.Text>

openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.interface.ts

@@ -17,7 +17,7 @@ export interface DisplayNameProps {
   id: string;
   name?: ReactNode;
   displayName?: ReactNode;
-  link: string;
+  link?: string;
   onEditDisplayName?: (data: EntityName, id?: string) => Promise<void>;
   allowRename?: boolean;
 }

openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.test.tsx

@@ -99,4 +99,53 @@ describe('Test DisplayName Component', () => {
       expect(displayNameField).toBeInTheDocument();
     });
   });
+
+  it('Should render a link when link prop is provided', async () => {
+    await act(async () => {
+      render(
+        <MemoryRouter>
+          <DisplayName {...mockProps} />
+        </MemoryRouter>
+      );
+
+      const linkElement = screen.getByTestId('Sample Entity');
+
+      expect(linkElement.tagName).toBe('SPAN');
+      expect(linkElement).toHaveTextContent('Sample Display Name');
+    });
+  });
+
+  it('Should render plain text when link prop is not provided', async () => {
+    const propsWithoutLink = { ...mockProps, link: undefined };
+
+    await act(async () => {
+      render(
+        <MemoryRouter>
+          <DisplayName {...propsWithoutLink} />
+        </MemoryRouter>
+      );
+
+      const nameElement = screen.getByTestId('Sample Entity');
+
+      expect(nameElement.tagName).toBe('SPAN');
+      expect(nameElement).toHaveTextContent('Sample Display Name');
+    });
+  });
+
+  it('Should render name as a link when displayName is empty and link is provided', async () => {
+    const props = { ...mockProps, displayName: '', link: '/entity/1' };
+
+    await act(async () => {
+      render(
+        <MemoryRouter>
+          <DisplayName {...props} />
+        </MemoryRouter>
+      );
+
+      const nameElement = screen.getByTestId('Sample Entity');
+
+      expect(nameElement).toBeInTheDocument();
+      expect(nameElement).toHaveTextContent('Sample Entity');
+    });
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.tsx

@@ -13,7 +13,7 @@
 import { Button, Tooltip, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { isEmpty, isString } from 'lodash';
-import React, { useState } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ReactComponent as IconEdit } from '../../../assets/svg/edit-new.svg';
@@ -46,27 +46,43 @@ const DisplayName: React.FC<DisplayNameProps> = ({
     }
   };
 
-  return (
+  // function to render text with optional link
-    <div className="flex-column hover-icon-group w-max-full">
+  const renderNameWithOptionalLink = (displayText: ReactNode) => {
-      <Typography.Text
+    return link ? (
-        className="m-b-0 d-block text-grey-muted break-word"
-        data-testid="column-name">
-        {isEmpty(displayName) ? (
       <Link className="break-word" data-testid={name} to={link}>
-            {name}
+        {displayText}
       </Link>
     ) : (
+      <span className="break-word" data-testid={name}>
+        {displayText}
+      </span>
+    );
+  };
+
+  const renderMainContent = useMemo(() => {
+    if (isEmpty(displayName)) {
+      return renderNameWithOptionalLink(name);
+    }
+
+    // Show both name and displayName when displayName exists
+    return (
       <>
+        <Typography.Text className="break-word text-grey-600">
           {name}
+        </Typography.Text>
         <Typography.Text
-              className="m-b-0 d-block break-word"
+          className="d-block break-word"
           data-testid="column-display-name">
-              <Link className="break-word" data-testid={name} to={link}>
+          {renderNameWithOptionalLink(displayName)}
-                {displayName}
-              </Link>
         </Typography.Text>
       </>
-        )}
+    );
+  }, [displayName, name, renderNameWithOptionalLink]);
+
+  return (
+    <div className="flex-column hover-icon-group w-max-full">
+      <Typography.Text className="m-b-0 d-block" data-testid="column-name">
+        {renderMainContent}
       </Typography.Text>
 
       {allowRename ? (

openmetadata-ui/src/main/resources/ui/src/styles/fonts.less

@@ -103,6 +103,9 @@ pre {
 .text-gray-400 {
   color: @grey-7;
 }
+.text-grey-600 {
+  color: @grey-600;
+}
 .text-red-3 {
   color: @red-3;
 }