fix(ui): fix the icon squeezing issue in entity headers and only name in right panel header (#11480)

* fix the icon squeezing issue in service pages

* minor fixes

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

@@ -11,7 +11,6 @@
  *  limitations under the License.
  */
 
-import { Col, Row } from 'antd';
 import classNames from 'classnames';
 import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from 'components/common/title-breadcrumb/title-breadcrumb.interface';
@@ -22,7 +21,6 @@ import { getEncodedFqn } from 'utils/StringsUtils';
 import EntityHeaderTitle from '../EntityHeaderTitle/EntityHeaderTitle.component';
 
 interface Props {
-  extra?: ReactNode;
   breadcrumb: TitleBreadcrumbProps['titleLinks'];
   entityData: {
     displayName?: string;
@@ -41,7 +39,6 @@ interface Props {
 export const EntityHeader = ({
   breadcrumb,
   entityData,
-  extra,
   icon,
   titleIsLink = false,
   entityType,
@@ -50,12 +47,7 @@ export const EntityHeader = ({
   serviceName,
 }: Props) => {
   return (
-    <Row
+    <div className="w-full font-medium">
-      className="w-full font-medium"
-      gutter={0}
-      justify="space-between"
-      wrap={false}>
-      <Col>
       <div
         className={classNames(
           'tw-text-link tw-text-base glossary-breadcrumb',
@@ -81,8 +73,6 @@ export const EntityHeader = ({
         openEntityInNewPage={openEntityInNewPage}
         serviceName={serviceName}
       />
-      </Col>
+    </div>
-      <Col>{extra}</Col>
-    </Row>
   );
 };

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

@@ -43,11 +43,11 @@ const EntityHeaderTitle = ({
       data-testid={`${serviceName}-${name}`}
       gutter={8}
       wrap={false}>
-      <Col>{icon}</Col>
+      <Col flex="45px">{icon}</Col>
-      <Col span={20}>
+      <Col flex="auto">
         <div>
           <Typography.Text
-            className="m-b-0 d-block tw-text-xs tw-text-grey-muted"
+            className="m-b-0 d-block text-grey-muted text-md font-medium"
             data-testid="entity-header-name">
             {stringToHTML(name)}
           </Typography.Text>
@@ -80,7 +80,7 @@ const EntityHeaderTitle = ({
 
   return link && !isTourRoute ? (
     <Link
-      className="tw-no-underline"
+      className="no-underline"
       data-testid="entity-link"
       target={openEntityInNewPage ? '_blank' : '_self'}
       to={link}>

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

@@ -12,8 +12,7 @@
  */
 
 import { CloseOutlined } from '@ant-design/icons';
-import { Drawer } from 'antd';
+import { Drawer, Typography } from 'antd';
-import { EntityHeader } from 'components/Entity/EntityHeader/EntityHeader.component';
 import { EntityType } from 'enums/entity.enum';
 import { Tag } from 'generated/entity/classification/tag';
 import { Container } from 'generated/entity/data/container';
@@ -22,9 +21,9 @@ import { GlossaryTerm } from 'generated/entity/data/glossaryTerm';
 import { Table } from 'generated/entity/data/table';
 import { get } from 'lodash';
 import React, { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
-import { getEntityBreadcrumbs } from 'utils/EntityUtils';
+import { getEntityLinkFromType, getEntityName } from 'utils/EntityUtils';
-import { getServiceIcon } from 'utils/TableUtils';
+import { getEncodedFqn } from 'utils/StringsUtils';
 import { Mlmodel } from '../../../generated/entity/data/mlmodel';
 import { Pipeline } from '../../../generated/entity/data/pipeline';
 import { Topic } from '../../../generated/entity/data/topic';
@@ -78,9 +77,17 @@ export default function EntitySummaryPanel({
     }
   }, [tab, entityDetails]);
 
-  const icon = useMemo(() => {
+  const entityLink = useMemo(
-    return getServiceIcon(entityDetails.details);
+    () =>
-  }, [entityDetails]);
+      (entityDetails.details.fullyQualifiedName &&
+        entityDetails.details.entityType &&
+        getEntityLinkFromType(
+          getEncodedFqn(entityDetails.details.fullyQualifiedName),
+          entityDetails.details.entityType as EntityType
+        )) ??
+      '',
+    [entityDetails, getEntityLinkFromType, getEncodedFqn]
+  );
 
   return (
     <Drawer
@@ -98,19 +105,14 @@ export default function EntitySummaryPanel({
       headerStyle={{ padding: 16 }}
       mask={false}
       title={
-        <div className="d-grid">
+        <Link
-          <EntityHeader
+          className="no-underline"
-            titleIsLink
+          data-testid="entity-link"
-            breadcrumb={getEntityBreadcrumbs(
+          to={entityLink}>
-              entityDetails.details,
+          <Typography.Text className="m-b-0 d-block entity-header-display-name">
-              entityDetails.details.entityType as EntityType
+            {getEntityName(entityDetails.details)}
-            )}
+          </Typography.Text>
-            entityData={entityDetails.details}
+        </Link>
-            entityType={entityDetails.details.entityType as EntityType}
-            icon={icon}
-            serviceName={entityDetails.details.serviceType ?? ''}
-          />
-        </div>
       }
       width="100%">
       {summaryComponent}

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

@@ -48,6 +48,14 @@ jest.mock('./DashboardSummary/DashboardSummary.component', () =>
     ))
 );
 
+jest.mock('utils/EntityUtils', () => ({
+  getEntityLinkFromType: jest.fn().mockImplementation(() => 'link'),
+  getEntityName: jest.fn().mockImplementation(() => 'displayName'),
+}));
+jest.mock('utils/StringsUtils', () => ({
+  getEncodedFqn: jest.fn().mockImplementation((fqn) => fqn),
+}));
+
 jest.mock('./PipelineSummary/PipelineSummary.component', () =>
   jest
     .fn()
@@ -66,10 +74,7 @@ jest.mock('./MlModelSummary/MlModelSummary.component', () =>
 
 jest.mock('react-router-dom', () => ({
   useParams: jest.fn().mockImplementation(() => ({ tab: 'table' })),
-}));
+  Link: jest.fn().mockImplementation(({ children }) => <>{children}</>),
-
-jest.mock('components/Entity/EntityHeader/EntityHeader.component', () => ({
-  EntityHeader: jest.fn().mockImplementation(() => <p>EntityHeader</p>),
 }));
 
 describe('EntitySummaryPanel component tests', () => {
@@ -83,11 +88,9 @@ describe('EntitySummaryPanel component tests', () => {
       />
     );
 
-    const entityHeader = screen.getByText('EntityHeader');
     const tableSummary = screen.getByTestId('TableSummary');
     const closeIcon = screen.getByTestId('summary-panel-close-icon');
 
-    expect(entityHeader).toBeInTheDocument();
     expect(tableSummary).toBeInTheDocument();
     expect(closeIcon).toBeInTheDocument();
 

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

@@ -362,13 +362,34 @@ const GlossaryHeader = ({
 
   return (
     <>
-      <Row gutter={[0, 16]}>
+      <Row gutter={[0, 16]} justify="space-between" wrap={false}>
-        <Col span={24}>
+        <Col>
           <EntityHeader
             breadcrumb={breadcrumb}
             entityData={selectedData}
             entityType={EntityType.GLOSSARY_TERM}
-            extra={
+            gutter="large"
+            icon={
+              isGlossary ? (
+                <IconFolder
+                  color={DE_ACTIVE_COLOR}
+                  height={36}
+                  name="folder"
+                  width={32}
+                />
+              ) : (
+                <IconFlatDoc
+                  color={DE_ACTIVE_COLOR}
+                  height={36}
+                  name="doc"
+                  width={32}
+                />
+              )
+            }
+            serviceName=""
+          />
+        </Col>
+        <Col>
           <div style={{ textAlign: 'right' }}>
             <div>
               {createButtons}
@@ -405,27 +426,6 @@ const GlossaryHeader = ({
               )}
             </div>
           </div>
-            }
-            gutter="large"
-            icon={
-              isGlossary ? (
-                <IconFolder
-                  color={DE_ACTIVE_COLOR}
-                  height={36}
-                  name="folder"
-                  width={32}
-                />
-              ) : (
-                <IconFlatDoc
-                  color={DE_ACTIVE_COLOR}
-                  height={36}
-                  name="doc"
-                  width={32}
-                />
-              )
-            }
-            serviceName=""
-          />
         </Col>
       </Row>
       {selectedData && (

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

@@ -366,6 +366,8 @@ const EntityPageInfo = ({
       className="w-full"
       data-testid="entity-page-info"
       direction="vertical">
+      <Row>
+        <Col span={18}>
           <EntityHeader
             breadcrumb={titleLinks}
             entityData={{
@@ -374,7 +376,15 @@ const EntityPageInfo = ({
               deleted,
             }}
             entityType={(entityType as EntityType) ?? EntityType.TABLE}
-        extra={
+            icon={
+              serviceType && (
+                <img className="h-8" src={serviceTypeLogo(serviceType)} />
+              )
+            }
+            serviceName={serviceType ?? ''}
+          />
+        </Col>
+        <Col className="d-flex justify-end item-start" span={6}>
           <Space align="center" id="version-and-follow-section">
             {!isUndefined(version) && (
               <VersionButton
@@ -437,14 +447,8 @@ const EntityPageInfo = ({
               />
             )}
           </Space>
-        }
+        </Col>
-        icon={
+      </Row>
-          serviceType && (
-            <img className="h-8" src={serviceTypeLogo(serviceType)} />
-          )
-        }
-        serviceName={serviceType ?? ''}
-      />
 
       <Space wrap className="justify-between w-full" size={16}>
         <Space direction="vertical">

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

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Checkbox } from 'antd';
+import { Checkbox, Col, Row } from 'antd';
 import classNames from 'classnames';
 import { EntityHeader } from 'components/Entity/EntityHeader/EntityHeader.component';
 import { isString, startCase, uniqueId } from 'lodash';
@@ -151,20 +151,24 @@ const TableDataCardV2: React.FC<TableDataCardPropsV2> = forwardRef<
         onClick={() => {
           handleSummaryPanelDisplay && handleSummaryPanelDisplay(source, tab);
         }}>
+        <Row>
+          <Col span={23}>
             <EntityHeader
               titleIsLink
               breadcrumb={breadcrumbs}
               entityData={source}
               entityType={source.entityType as EntityType}
-          extra={
-            showCheckboxes && (
-              <Checkbox checked={checked} className="m-l-auto" />
-            )
-          }
               icon={serviceIcon}
               openEntityInNewPage={openEntityInNewPage}
               serviceName={source.serviceType ?? ''}
             />
+          </Col>
+          <Col className="d-flex justify-end" span={1}>
+            {showCheckboxes && (
+              <Checkbox checked={checked} className="m-l-auto" />
+            )}
+          </Col>
+        </Row>
 
         <div className="tw-pt-3">
           <TableDataCardBody

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

@@ -846,13 +846,23 @@ const DatabaseDetails: FunctionComponent = () => {
               />
             ) : (
               <>
-                <Col span={24}>
                 {database && (
+                  <Row className="p-x-xs">
+                    <Col span={23}>
                       <EntityHeader
                         breadcrumb={slashedDatabaseName}
                         entityData={database}
                         entityType={EntityType.DATABASE}
-                      extra={
+                        icon={
+                          <img
+                            className="h-8"
+                            src={serviceTypeLogo(serviceType ?? '')}
+                          />
+                        }
+                        serviceName={database.service.name ?? ''}
+                      />
+                    </Col>
+                    <Col className="d-flex justify-end" span={1}>
                       <ManageButton
                         isRecursiveDelete
                         allowSoftDelete={false}
@@ -862,18 +872,9 @@ const DatabaseDetails: FunctionComponent = () => {
                         entityName={databaseName}
                         entityType={EntityType.DATABASE}
                       />
-                      }
-                      icon={
-                        <img
-                          className="h-8"
-                          src={serviceTypeLogo(serviceType ?? '')}
-                        />
-                      }
-                      serviceName={database.service.name ?? ''}
-                    />
-                  )}
                     </Col>
-
+                  </Row>
+                )}
                 <Col className="m-t-xs" span={24}>
                   <Space wrap align="center" data-testid="extrainfo" size={4}>
                     {extraInfo.map((info, index) => (

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

@@ -1088,13 +1088,24 @@ const ServicePage: FunctionComponent = () => {
             entity: getEntityName(serviceDetails),
           })}>
           {servicePermission.ViewAll || servicePermission.ViewBasic ? (
-            <Row data-testid="service-page" gutter={[0, 12]}>
+            <Row data-testid="service-page">
               {serviceDetails && (
+                <Row className="w-full m-b-xs">
+                  <Col span={22}>
                     <EntityHeader
                       breadcrumb={slashedTableName}
                       entityData={serviceDetails}
-                  extra={
+                      icon={
-                    serviceDetails?.serviceType !==
+                        <img
+                          className="h-8"
+                          src={serviceTypeLogo(serviceDetails.serviceType)}
+                        />
+                      }
+                      serviceName={serviceDetails.name}
+                    />
+                  </Col>
+                  <Col className="d-flex justify-end" span={2}>
+                    {serviceDetails?.serviceType !==
                       MetadataServiceType.OpenMetadata && (
                       <Tooltip
                         placement="topRight"
@@ -1120,17 +1131,11 @@ const ServicePage: FunctionComponent = () => {
                           {t('label.delete')}
                         </Button>
                       </Tooltip>
-                    )
-                  }
-                  icon={
-                    <img
-                      className="h-8"
-                      src={serviceTypeLogo(serviceDetails.serviceType)}
-                    />
-                  }
-                  serviceName={serviceDetails.name}
-                />
                     )}
+                  </Col>
+                </Row>
+              )}
+
               <Col span={24}>
                 <Space>
                   {extraInfo.map((info) => (