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
2025-09-25 08:50:18 +00:00 · 2023-05-08 18:42:57 +05:30 · 2023-05-08 18:42:57 +05:30 · 890433a8d6
commit 890433a8d6
parent 3bef880dca
9 changed files with 191 additions and 182 deletions
--- 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>
  );
 };
--- 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}>
--- 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}
--- 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();

--- 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
--- 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">
--- 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
--- 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) => (
--- 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) => (