fix(ui): entity header title should be clickable instead just displayName (#11140)

* fix(ui): entire entity title is link

* fix bigquery selector

* fix data test id missing for entity displayName

* fix data test id missing for entity displayName

* remove underline from name for links

* fix unit tests

openmetadata-ui/src/main/resources/ui/cypress/e2e/AddNewService/bigquery.spec.js

@@ -39,7 +39,7 @@ describe('BigQuery Ingestion', () => {
       cy.get('.form-group > #root\\/type')
         .scrollIntoView()
         .type('service_account');
-      cy.get(':nth-child(3) > .form-group > #root\\/projectId')
+      cy.get('#root\\/projectId')
         .scrollIntoView()
         .type(Cypress.env('bigqueryProjectId'));
       cy.get('#root\\/privateKeyId')

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx

@@ -35,6 +35,7 @@ interface Props {
   titleIsLink?: boolean;
   openEntityInNewPage?: boolean;
   gutter?: 'default' | 'large';
+  serviceName: string;
 }
 
 export const EntityHeader = ({
@@ -46,6 +47,7 @@ export const EntityHeader = ({
   entityType,
   openEntityInNewPage,
   gutter = 'default',
+  serviceName,
 }: Props) => {
   return (
     <Row className="w-full" gutter={0} justify="space-between">
@@ -73,6 +75,7 @@ export const EntityHeader = ({
           }
           name={entityData.name}
           openEntityInNewPage={openEntityInNewPage}
+          serviceName={serviceName}
         />
       </Col>
       <Col>{extra}</Col>

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx

@@ -25,11 +25,16 @@ const EntityHeaderTitle = ({
   link,
   openEntityInNewPage,
   deleted = false,
+  serviceName,
 }: EntityHeaderTitleProps) => {
   const { t } = useTranslation();
 
-  return (
+  const content = (
-    <Row align="middle" gutter={8} wrap={false}>
+    <Row
+      align="middle"
+      data-testid={`${serviceName}-${name}`}
+      gutter={8}
+      wrap={false}>
       <Col>{icon}</Col>
       <Col>
         <div>
@@ -38,13 +43,11 @@ const EntityHeaderTitle = ({
             data-testid="entity-header-name">
             {name}
           </Typography.Text>
-          {link ? (
+
-            <Link
+          <Typography.Text
             className="m-b-0 d-block entity-header-display-name text-lg font-bold"
             data-testid="entity-header-display-name"
-              target={openEntityInNewPage ? '_blank' : '_self'}
+            ellipsis={{ tooltip: true }}>
-              to={link}>
-              <Typography.Text ellipsis={{ tooltip: true }}>
             {displayName ?? name}
             {openEntityInNewPage && (
               <IconExternalLink
@@ -54,15 +57,6 @@ const EntityHeaderTitle = ({
               />
             )}
           </Typography.Text>
-            </Link>
-          ) : (
-            <Typography.Text
-              className="m-b-0 d-block entity-header-display-name text-lg font-bold"
-              data-testid="entity-header-display-name"
-              ellipsis={{ tooltip: true }}>
-              {displayName ?? name}
-            </Typography.Text>
-          )}
         </div>
       </Col>
       {deleted && (
@@ -75,6 +69,18 @@ const EntityHeaderTitle = ({
       )}
     </Row>
   );
+
+  return link ? (
+    <Link
+      className="tw-no-underline"
+      data-testid="entity-link"
+      target={openEntityInNewPage ? '_blank' : '_self'}
+      to={link}>
+      {content}
+    </Link>
+  ) : (
+    content
+  );
 };
 
 export default EntityHeaderTitle;

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts

@@ -17,4 +17,5 @@ export interface EntityHeaderTitleProps {
   link?: string;
   openEntityInNewPage?: boolean;
   deleted?: boolean;
+  serviceName: string;
 }

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.test.tsx

@@ -22,6 +22,7 @@ describe('EntityHeaderTitle', () => {
         displayName="Test DisplayName"
         icon="test-icon"
         name="test-name"
+        serviceName="sample-data"
       />
     );
 
@@ -34,6 +35,7 @@ describe('EntityHeaderTitle', () => {
         displayName="Test DisplayName"
         icon="test-icon"
         name="test-name"
+        serviceName="sample-data"
       />
     );
 
@@ -46,6 +48,7 @@ describe('EntityHeaderTitle', () => {
         displayName="Test DisplayName"
         icon="test-icon"
         name="test-name"
+        serviceName="sample-data"
       />
     );
 
@@ -59,11 +62,12 @@ describe('EntityHeaderTitle', () => {
         icon="test-icon"
         link="test-link"
         name="test-name"
+        serviceName="sample-data"
       />,
       { wrapper: MemoryRouter }
     );
 
-    expect(screen.getByTestId('entity-header-display-name')).toHaveProperty(
+    expect(screen.getByTestId('entity-link')).toHaveProperty(
       'href',
       'http://localhost/test-link'
     );

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

@@ -107,6 +107,7 @@ export default function EntitySummaryPanel({
           entityData={entityDetails.details}
           entityType={entityDetails.details.entityType as EntityType}
           icon={icon}
+          serviceName={entityDetails.details.serviceType ?? ''}
         />
       }
       width="100%">

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx

@@ -122,6 +122,7 @@ const GlossaryHeader = ({
                 />
               )
             }
+            serviceName=""
           />
         </Col>
       </Row>

openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx

@@ -413,6 +413,7 @@ const EntityPageInfo = ({
             <img className="h-8" src={serviceTypeLogo(serviceType)} />
           )
         }
+        serviceName={serviceType ?? ''}
       />
 
       <Space wrap className="justify-between w-full" size={16}>

openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx

@@ -163,6 +163,7 @@ const TableDataCardV2: React.FC<TableDataCardPropsV2> = forwardRef<
           }
           icon={serviceIcon}
           openEntityInNewPage={openEntityInNewPage}
+          serviceName={source.serviceType ?? ''}
         />
 
         <div className="tw-pt-3">

openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx

@@ -811,6 +811,7 @@ const DatabaseDetails: FunctionComponent = () => {
                               src={serviceTypeLogo(serviceType ?? '')}
                             />
                           }
+                          serviceName={database.service.name ?? ''}
                         />
                       )}
                     </Col>

openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx

@@ -1033,6 +1033,7 @@ const ServicePage: FunctionComponent = () => {
                       src={serviceTypeLogo(serviceDetails.serviceType)}
                     />
                   }
+                  serviceName={serviceDetails.name}
                 />
               )}
               <Col span={24}>