From 890433a8d6a2fa6105a80461d690b6c47e833fd3 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Mon, 8 May 2023 18:42:57 +0530
Subject: [PATCH] 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
---
 .../EntityHeader/EntityHeader.component.tsx   | 62 ++++++--------
 .../EntityHeaderTitle.component.tsx           |  8 +-
 .../EntitySummaryPanel.component.tsx          | 44 +++++-----
 .../EntitySummaryPanel.test.tsx               | 15 ++--
 .../GlossaryHeader.component.tsx              | 80 +++++++++----------
 .../common/entityPageInfo/EntityPageInfo.tsx  | 38 +++++----
 .../table-data-card-v2/TableDataCardV2.tsx    | 32 ++++----
 .../ui/src/pages/database-details/index.tsx   | 57 ++++++-------
 .../resources/ui/src/pages/service/index.tsx  | 37 +++++----
 9 files changed, 191 insertions(+), 182 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx
index 39332c5819c..f4eb7493110 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx
+++ b/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,39 +47,32 @@ export const EntityHeader = ({
   serviceName,
 }: Props) => {
   return (
-    <Row
-      className="w-full font-medium"
-      gutter={0}
-      justify="space-between"
-      wrap={false}>
-      <Col>
-        <div
-          className={classNames(
-            'tw-text-link tw-text-base glossary-breadcrumb',
-            gutter === 'large' ? 'm-b-sm' : 'm-b-xss'
-          )}
-          data-testid="category-name">
-          <TitleBreadcrumb titleLinks={breadcrumb} />
-        </div>
+    <div className="w-full font-medium">
+      <div
+        className={classNames(
+          'tw-text-link tw-text-base glossary-breadcrumb',
+          gutter === 'large' ? 'm-b-sm' : 'm-b-xss'
+        )}
+        data-testid="category-name">
+        <TitleBreadcrumb titleLinks={breadcrumb} />
+      </div>
 
-        <EntityHeaderTitle
-          deleted={entityData.deleted}
-          displayName={getEntityName(entityData)}
-          icon={icon}
-          link={
-            titleIsLink && entityData.fullyQualifiedName && entityType
-              ? getEntityLinkFromType(
-                  getEncodedFqn(entityData.fullyQualifiedName),
-                  entityType
-                )
-              : undefined
-          }
-          name={entityData.name}
-          openEntityInNewPage={openEntityInNewPage}
-          serviceName={serviceName}
-        />
-      </Col>
-      <Col>{extra}</Col>
-    </Row>
+      <EntityHeaderTitle
+        deleted={entityData.deleted}
+        displayName={getEntityName(entityData)}
+        icon={icon}
+        link={
+          titleIsLink && entityData.fullyQualifiedName && entityType
+            ? getEntityLinkFromType(
+                getEncodedFqn(entityData.fullyQualifiedName),
+                entityType
+              )
+            : undefined
+        }
+        name={entityData.name}
+        openEntityInNewPage={openEntityInNewPage}
+        serviceName={serviceName}
+      />
+    </div>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx
index 9fecdc6f055..366508848a0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx
+++ b/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 span={20}>
+      <Col flex="45px">{icon}</Col>
+      <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}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx
index 4daef22b824..20c33dc9711 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx
+++ b/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 { EntityHeader } from 'components/Entity/EntityHeader/EntityHeader.component';
+import { Drawer, Typography } from 'antd';
 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 { getEntityBreadcrumbs } from 'utils/EntityUtils';
-import { getServiceIcon } from 'utils/TableUtils';
+import { Link, useParams } from 'react-router-dom';
+import { getEntityLinkFromType, getEntityName } from 'utils/EntityUtils';
+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(() => {
-    return getServiceIcon(entityDetails.details);
-  }, [entityDetails]);
+  const entityLink = useMemo(
+    () =>
+      (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">
-          <EntityHeader
-            titleIsLink
-            breadcrumb={getEntityBreadcrumbs(
-              entityDetails.details,
-              entityDetails.details.entityType as EntityType
-            )}
-            entityData={entityDetails.details}
-            entityType={entityDetails.details.entityType as EntityType}
-            icon={icon}
-            serviceName={entityDetails.details.serviceType ?? ''}
-          />
-        </div>
+        <Link
+          className="no-underline"
+          data-testid="entity-link"
+          to={entityLink}>
+          <Typography.Text className="m-b-0 d-block entity-header-display-name">
+            {getEntityName(entityDetails.details)}
+          </Typography.Text>
+        </Link>
       }
       width="100%">
       {summaryComponent}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.test.tsx
index 17e87bff408..3c79c90ab8f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.test.tsx
+++ b/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' })),
-}));
-
-jest.mock('components/Entity/EntityHeader/EntityHeader.component', () => ({
-  EntityHeader: jest.fn().mockImplementation(() => <p>EntityHeader</p>),
+  Link: jest.fn().mockImplementation(({ children }) => <>{children}</>),
 }));
 
 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();
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx
index 91124759360..39b7d15d120 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx
@@ -362,50 +362,12 @@ const GlossaryHeader = ({
 
   return (
     <>
-      <Row gutter={[0, 16]}>
-        <Col span={24}>
+      <Row gutter={[0, 16]} justify="space-between" wrap={false}>
+        <Col>
           <EntityHeader
             breadcrumb={breadcrumb}
             entityData={selectedData}
             entityType={EntityType.GLOSSARY_TERM}
-            extra={
-              <div style={{ textAlign: 'right' }}>
-                <div>
-                  {createButtons}
-                  {selectedData && selectedData.version && (
-                    <VersionButton
-                      className="m-l-xs tw-px-1.5"
-                      selected={Boolean(version)}
-                      version={toString(selectedData.version)}
-                      onClick={handleVersionClick}
-                    />
-                  )}
-
-                  {permissions.Delete && (
-                    <Dropdown
-                      align={{ targetOffset: [-12, 0] }}
-                      className="m-l-xs"
-                      menu={{
-                        items: manageButtonContent,
-                      }}
-                      open={showActions}
-                      overlayStyle={{ width: '350px' }}
-                      placement="bottomRight"
-                      trigger={['click']}
-                      onOpenChange={setShowActions}>
-                      <Tooltip placement="right">
-                        <Button
-                          className="glossary-manage-dropdown-button tw-px-1.5"
-                          data-testid="manage-button"
-                          onClick={() => setShowActions(true)}>
-                          <IconDropdown className="anticon self-center manage-dropdown-icon" />
-                        </Button>
-                      </Tooltip>
-                    </Dropdown>
-                  )}
-                </div>
-              </div>
-            }
             gutter="large"
             icon={
               isGlossary ? (
@@ -427,6 +389,44 @@ const GlossaryHeader = ({
             serviceName=""
           />
         </Col>
+        <Col>
+          <div style={{ textAlign: 'right' }}>
+            <div>
+              {createButtons}
+              {selectedData && selectedData.version && (
+                <VersionButton
+                  className="m-l-xs tw-px-1.5"
+                  selected={Boolean(version)}
+                  version={toString(selectedData.version)}
+                  onClick={handleVersionClick}
+                />
+              )}
+
+              {permissions.Delete && (
+                <Dropdown
+                  align={{ targetOffset: [-12, 0] }}
+                  className="m-l-xs"
+                  menu={{
+                    items: manageButtonContent,
+                  }}
+                  open={showActions}
+                  overlayStyle={{ width: '350px' }}
+                  placement="bottomRight"
+                  trigger={['click']}
+                  onOpenChange={setShowActions}>
+                  <Tooltip placement="right">
+                    <Button
+                      className="glossary-manage-dropdown-button tw-px-1.5"
+                      data-testid="manage-button"
+                      onClick={() => setShowActions(true)}>
+                      <IconDropdown className="anticon self-center manage-dropdown-icon" />
+                    </Button>
+                  </Tooltip>
+                </Dropdown>
+              )}
+            </div>
+          </div>
+        </Col>
       </Row>
       {selectedData && (
         <EntityDeleteModal
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
index cc42f423414..cf9daace9f9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
@@ -366,15 +366,25 @@ const EntityPageInfo = ({
       className="w-full"
       data-testid="entity-page-info"
       direction="vertical">
-      <EntityHeader
-        breadcrumb={titleLinks}
-        entityData={{
-          displayName: entityName,
-          name: entityName,
-          deleted,
-        }}
-        entityType={(entityType as EntityType) ?? EntityType.TABLE}
-        extra={
+      <Row>
+        <Col span={18}>
+          <EntityHeader
+            breadcrumb={titleLinks}
+            entityData={{
+              displayName: entityName,
+              name: entityName,
+              deleted,
+            }}
+            entityType={(entityType as EntityType) ?? EntityType.TABLE}
+            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>
-        }
-        icon={
-          serviceType && (
-            <img className="h-8" src={serviceTypeLogo(serviceType)} />
-          )
-        }
-        serviceName={serviceType ?? ''}
-      />
+        </Col>
+      </Row>
 
       <Space wrap className="justify-between w-full" size={16}>
         <Space direction="vertical">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx
index 2ee49a5bd09..92541815fef 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx
+++ b/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);
         }}>
-        <EntityHeader
-          titleIsLink
-          breadcrumb={breadcrumbs}
-          entityData={source}
-          entityType={source.entityType as EntityType}
-          extra={
-            showCheckboxes && (
+        <Row>
+          <Col span={23}>
+            <EntityHeader
+              titleIsLink
+              breadcrumb={breadcrumbs}
+              entityData={source}
+              entityType={source.entityType as EntityType}
+              icon={serviceIcon}
+              openEntityInNewPage={openEntityInNewPage}
+              serviceName={source.serviceType ?? ''}
+            />
+          </Col>
+          <Col className="d-flex justify-end" span={1}>
+            {showCheckboxes && (
               <Checkbox checked={checked} className="m-l-auto" />
-            )
-          }
-          icon={serviceIcon}
-          openEntityInNewPage={openEntityInNewPage}
-          serviceName={source.serviceType ?? ''}
-        />
+            )}
+          </Col>
+        </Row>
 
         <div className="tw-pt-3">
           <TableDataCardBody
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
index 3513b14ccab..2018e393962 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
@@ -846,34 +846,35 @@ const DatabaseDetails: FunctionComponent = () => {
               />
             ) : (
               <>
-                <Col span={24}>
-                  {database && (
-                    <EntityHeader
-                      breadcrumb={slashedDatabaseName}
-                      entityData={database}
-                      entityType={EntityType.DATABASE}
-                      extra={
-                        <ManageButton
-                          isRecursiveDelete
-                          allowSoftDelete={false}
-                          canDelete={databasePermission.Delete}
-                          entityFQN={databaseFQN}
-                          entityId={databaseId}
-                          entityName={databaseName}
-                          entityType={EntityType.DATABASE}
-                        />
-                      }
-                      icon={
-                        <img
-                          className="h-8"
-                          src={serviceTypeLogo(serviceType ?? '')}
-                        />
-                      }
-                      serviceName={database.service.name ?? ''}
-                    />
-                  )}
-                </Col>
-
+                {database && (
+                  <Row className="p-x-xs">
+                    <Col span={23}>
+                      <EntityHeader
+                        breadcrumb={slashedDatabaseName}
+                        entityData={database}
+                        entityType={EntityType.DATABASE}
+                        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}
+                        canDelete={databasePermission.Delete}
+                        entityFQN={databaseFQN}
+                        entityId={databaseId}
+                        entityName={databaseName}
+                        entityType={EntityType.DATABASE}
+                      />
+                    </Col>
+                  </Row>
+                )}
                 <Col className="m-t-xs" span={24}>
                   <Space wrap align="center" data-testid="extrainfo" size={4}>
                     {extraInfo.map((info, index) => (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
index 96f8c570e04..687af8cabc9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
+++ b/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 && (
-                <EntityHeader
-                  breadcrumb={slashedTableName}
-                  entityData={serviceDetails}
-                  extra={
-                    serviceDetails?.serviceType !==
+                <Row className="w-full m-b-xs">
+                  <Col span={22}>
+                    <EntityHeader
+                      breadcrumb={slashedTableName}
+                      entityData={serviceDetails}
+                      icon={
+                        <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) => (