From 066c167d34313dcf7b512667452e23662a40d42d Mon Sep 17 00:00:00 2001 From: Pranita Fulsundar Date: Mon, 2 Jun 2025 10:36:30 +0530 Subject: [PATCH] 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 --- .../ModelTab/ModelTab.component.tsx | 9 --- .../SchemaTable/SchemaTable.component.tsx | 5 +- .../DisplayName/DisplayName.interface.ts | 2 +- .../common/DisplayName/DisplayName.test.tsx | 49 ++++++++++++++++ .../common/DisplayName/DisplayName.tsx | 56 ++++++++++++------- .../main/resources/ui/src/styles/fonts.less | 3 + 6 files changed, 93 insertions(+), 31 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModels/ModelTab/ModelTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModels/ModelTab/ModelTab.component.tsx index 73039cc89f2..525d352e32b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModels/ModelTab/ModelTab.component.tsx +++ b/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} /> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/SchemaTable/SchemaTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/SchemaTable/SchemaTable.component.tsx index c0634642abb..9b46da007c4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/SchemaTable/SchemaTable.component.tsx +++ b/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, })} {stringToHTML(highlightSearchText(name, searchText))} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.interface.ts index 20e04e0d293..b305a806fce 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.interface.ts +++ b/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; allowRename?: boolean; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.test.tsx index 5f6322bd41b..bcb680ed85b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.test.tsx +++ b/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( + + + + ); + + 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( + + + + ); + + 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( + + + + ); + + const nameElement = screen.getByTestId('Sample Entity'); + + expect(nameElement).toBeInTheDocument(); + expect(nameElement).toHaveTextContent('Sample Entity'); + }); + }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.tsx index ea59ef13593..e61d1b3eef9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/DisplayName/DisplayName.tsx +++ b/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 = ({ } }; + // function to render text with optional link + const renderNameWithOptionalLink = (displayText: ReactNode) => { + return link ? ( + + {displayText} + + ) : ( + + {displayText} + + ); + }; + + const renderMainContent = useMemo(() => { + if (isEmpty(displayName)) { + return renderNameWithOptionalLink(name); + } + + // Show both name and displayName when displayName exists + return ( + <> + + {name} + + + {renderNameWithOptionalLink(displayName)} + + + ); + }, [displayName, name, renderNameWithOptionalLink]); + return (
- - {isEmpty(displayName) ? ( - - {name} - - ) : ( - <> - {name} - - - {displayName} - - - - )} + + {renderMainContent} {allowRename ? ( diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/fonts.less b/openmetadata-ui/src/main/resources/ui/src/styles/fonts.less index beb18d0d5ea..82329f60dfd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/fonts.less +++ b/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; }