Merge branch 'main' into copilot/add-hyperlink-support

Author: aniketkatkar97

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/EntitySummaryPanel.spec.ts

@@ -13,8 +13,13 @@
 import { expect, Page, test } from '@playwright/test';
 import { ENTITY_TYPES } from '../../constant/entity';
 import { SidebarItem } from '../../constant/sidebar';
+import { TableClass } from '../../support/entity/TableClass';
 import { EntityType } from '../../support/entity/EntityDataClass.interface';
-import { redirectToHomePage } from '../../utils/common';
+import { createNewPage, redirectToHomePage, uuid } from '../../utils/common';
+import {
+  editDisplayNameFromPanel,
+  navigateToExploreAndSelectTable,
+} from '../../utils/entityPanel';
 import { selectDataAssetFilter } from '../../utils/explore';
 import { sidebarClick } from '../../utils/sidebar';
 
@@ -176,3 +181,46 @@ test.describe('Entity Summary Panel', () => {
     }
   });
 });
+
+test.describe('Entity Title Section - Edit Display Name', () => {
+  const table = new TableClass();
+
+  test.beforeAll('Setup', async ({ browser }) => {
+    const { apiContext, afterAction } = await createNewPage(browser);
+    await table.create(apiContext);
+    await afterAction();
+  });
+
+  test('should edit display name from entity summary panel', async ({
+    page,
+  }) => {
+    const newDisplayName = `Updated Table ${uuid()}`;
+
+    await navigateToExploreAndSelectTable(page, table.entityResponseData.name);
+
+    const summaryPanel = page.locator('.entity-summary-panel-container');
+    await expect(summaryPanel).toBeVisible();
+
+    await editDisplayNameFromPanel(page, newDisplayName);
+
+    const entityLink = summaryPanel.getByTestId('entity-link').first();
+    await expect(entityLink).toContainText(newDisplayName);
+  });
+
+  test('should cancel edit display name modal', async ({ page }) => {
+    await navigateToExploreAndSelectTable(page, table.entityResponseData.name);
+
+    const summaryPanel = page.locator('.entity-summary-panel-container');
+    await expect(summaryPanel).toBeVisible();
+
+    const editButton = summaryPanel.getByTestId('edit-displayName-button');
+    await editButton.click();
+
+    const modal = page.locator('.ant-modal');
+    await expect(modal).toBeVisible();
+
+    await modal.getByRole('button', { name: 'Cancel' }).click();
+
+    await expect(modal).not.toBeVisible();
+  });
+});

openmetadata-ui/src/main/resources/ui/playwright/utils/entityPanel.ts

@@ -518,3 +518,28 @@ export const removeTierFromPanel = async (page: Page) => {
   await clearButton.click();
   await patchPromise;
 };
+
+export const editDisplayNameFromPanel = async (
+  page: Page,
+  newDisplayName: string
+) => {
+  const summaryPanel = page.locator('.entity-summary-panel-container');
+  const editButton = summaryPanel.getByTestId('edit-displayName-button');
+
+  await editButton.waitFor({ state: 'visible' });
+  await editButton.click();
+
+  const modal = page.locator('.ant-modal');
+  await modal.waitFor({ state: 'visible' });
+
+  const displayNameInput = modal.locator('#displayName');
+  await displayNameInput.waitFor({ state: 'visible' });
+  await displayNameInput.clear();
+  await displayNameInput.fill(newDisplayName);
+
+  const patchPromise = waitForPatchResponse(page);
+  await modal.getByTestId('save-button').click();
+  await patchPromise;
+
+  await modal.waitFor({ state: 'hidden' });
+};

openmetadata-ui/src/main/resources/ui/src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx

@@ -17,13 +17,20 @@ import {
   ChevronUp,
   XClose,
 } from '@untitledui/icons';
-import { Card, Drawer, Space, Tooltip, Typography } from 'antd';
+import { Button, Card, Drawer, Space, Tooltip, Typography } from 'antd';
 import { AxiosError } from 'axios';
+import { isString } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ReactComponent as IconEdit } from '../../../assets/svg/edit-new.svg';
 import { ReactComponent as ColumnIcon } from '../../../assets/svg/ic-column-new.svg';
 import { ReactComponent as KeyIcon } from '../../../assets/svg/icon-key.svg';
-import { ENTITY_PATH, PAGE_SIZE_LARGE } from '../../../constants/constants';
+import {
+  DE_ACTIVE_COLOR,
+  ENTITY_PATH,
+  ICON_DIMENSION,
+  PAGE_SIZE_LARGE,
+} from '../../../constants/constants';
 import { EntityType } from '../../../enums/entity.enum';
 import { Column, TableConstraint } from '../../../generated/entity/data/table';
 import { Type } from '../../../generated/entity/type';
@@ -60,6 +67,8 @@ import CustomPropertiesSection from '../../Explore/EntitySummaryPanel/CustomProp
 import DataQualityTab from '../../Explore/EntitySummaryPanel/DataQualityTab/DataQualityTab';
 import { LineageTabContent } from '../../Explore/EntitySummaryPanel/LineageTab';
 import { LineageData } from '../../Lineage/Lineage.interface';
+import EntityNameModal from '../../Modals/EntityNameModal/EntityNameModal.component';
+import { EntityName } from '../../Modals/EntityNameModal/EntityNameModal.interface';
 import {
   ColumnDetailPanelProps,
   ColumnFieldUpdate,
@@ -92,6 +101,7 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
   const { permissions } = useGenericContext();
   const [isDescriptionLoading, setIsDescriptionLoading] = useState(false);
   const [isTestCaseLoading, setIsTestCaseLoading] = useState(false);
+  const [isDisplayNameEditing, setIsDisplayNameEditing] = useState(false);
 
   const hasEditPermission = useMemo(
     () => ({
@@ -103,6 +113,8 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
       viewAllPermission: permissions.ViewAll,
       customProperties:
         (permissions.EditCustomFields || permissions.EditAll) && !deleted,
+      displayName:
+        (permissions.EditDisplayName || permissions.EditAll) && !deleted,
     }),
     [permissions, deleted]
   );
@@ -433,6 +445,36 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
     [performColumnFieldUpdate, t]
   );
 
+  const handleDisplayNameUpdate = useCallback(
+    async (data: EntityName) => {
+      try {
+        const response = await performColumnFieldUpdate(
+          { displayName: data.displayName },
+          'label.display-name'
+        );
+        if (response) {
+          setActiveColumn(
+            (prev) =>
+              ({
+                ...prev,
+                displayName: response.displayName,
+              } as T)
+          );
+        }
+      } catch (error) {
+        showErrorToast(
+          error as AxiosError,
+          t('server.entity-updating-error', {
+            entity: t('label.display-name'),
+          })
+        );
+      } finally {
+        setIsDisplayNameEditing(false);
+      }
+    },
+    [performColumnFieldUpdate, t]
+  );
+
   const previousFqnRef = useRef<string | undefined>();
 
   useEffect(() => {
@@ -675,16 +717,56 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
           title={getEntityName(activeColumn)}
           trigger="hover">
           <div className="d-flex items-center justify-between w-full">
-            <div className="d-flex items-center">
-              <span className="entity-icon">
+            <div className="d-flex items-center w-full">
+              <span className="entity-icon margin-right-xs">
                 <ColumnIcon />
               </span>
-              <Typography.Text
-                className="entity-title-link"
-                data-testid="entity-link"
-                ellipsis={{ tooltip: true }}>
-                {stringToHTML(getEntityName(activeColumn))}
-              </Typography.Text>
+              <div className="d-flex flex-column w-full overflow-hidden">
+                <div className="d-flex items-center gap-2 w-full">
+                  <Typography.Text
+                    className="entity-title-link"
+                    data-testid="entity-link"
+                    ellipsis={{ tooltip: true }}>
+                    {stringToHTML(
+                      (activeColumn as any).displayName || activeColumn.name
+                    )}
+                  </Typography.Text>
+                  {hasEditPermission.displayName &&
+                    (entityType === EntityType.TABLE ||
+                      entityType === EntityType.DASHBOARD_DATA_MODEL) && (
+                      <Tooltip placement="top" title={t('label.edit')}>
+                        <Button
+                          ghost
+                          className="hover-cell-icon flex-center"
+                          data-testid="edit-displayName-button"
+                          icon={
+                            <IconEdit
+                              color={DE_ACTIVE_COLOR}
+                              {...ICON_DIMENSION}
+                            />
+                          }
+                          style={{
+                            width: '24px',
+                            height: '24px',
+                          }}
+                          type="text"
+                          onClick={() => setIsDisplayNameEditing(true)}
+                        />
+                      </Tooltip>
+                    )}
+                </div>
+                {(activeColumn as any).displayName &&
+                  (activeColumn as any).displayName !== activeColumn.name &&
+                  (entityType === EntityType.TABLE ||
+                    entityType === EntityType.DASHBOARD_DATA_MODEL) && (
+                    <Typography.Text
+                      className="text-grey-muted text-xs"
+                      data-testid="entity-name"
+                      ellipsis={{ tooltip: true }}>
+                      {stringToHTML(activeColumn.name || '')}
+                    </Typography.Text>
+                  )}
+              </div>
             </div>
             <div>
               <IconButton data-testid="close-button" onClick={onClose}>
@@ -835,6 +917,22 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
           </div>
         </div>
       </div>
+      {isDisplayNameEditing && activeColumn && (
+        <EntityNameModal
+          entity={{
+            name: isString(activeColumn.name) ? activeColumn.name : '',
+            displayName: isString((activeColumn as any).displayName)
+              ? (activeColumn as any).displayName
+              : undefined,
+          }}
+          title={t('label.edit-entity', {
+            entity: t('label.display-name'),
+          })}
+          visible={isDisplayNameEditing}
+          onCancel={() => setIsDisplayNameEditing(false)}
+          onSave={handleDisplayNameUpdate}
+        />
+      )}
     </Drawer>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/Database/SchemaTable/SchemaTable.component.tsx

@@ -704,10 +704,7 @@ const SchemaTable = () => {
                   })}
                   <Typography.Text
                     className={classNames(
-                      'm-b-0 d-block break-word cursor-pointer text-link-color',
-                      {
-                        'text-grey-600': !isEmpty(displayName),
-                      }
+                      'm-b-0 d-block break-word cursor-pointer text-link-color'
                     )}
                     data-testid="column-name">
                     {stringToHTML(highlightSearchText(name, searchText))}

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

@@ -307,7 +307,7 @@ export default function EntitySummaryPanel({
           fullyQualifiedName: entityDetails.details.fullyQualifiedName,
           id: entityDetails.details.id,
           description: data.description ?? entityDetails.details.description,
-          displayName: entityDetails.details.displayName,
+          displayName: data.displayName,
           name: entityDetails.details.name,
           deleted: entityDetails.details.deleted,
           serviceType: (entityDetails.details as any).serviceType,
@@ -470,6 +470,13 @@ export default function EntitySummaryPanel({
     [updateEntityData]
   );
 
+  const handleDisplayNameUpdate = useCallback(
+    (updatedDisplayName: string) => {
+      updateEntityData({ displayName: updatedDisplayName });
+    },
+    [entityData, updateEntityData]
+  );
+
   const handleExtensionUpdate = useCallback(
     async (updatedExtension: Record<string, unknown> | undefined) => {
       if (onEntityUpdate) {
@@ -698,7 +705,14 @@ export default function EntitySummaryPanel({
               <EntityTitleSection
                 className="title-section"
                 entityDetails={entityDetails.details}
+                entityDisplayName={entityData?.displayName}
                 entityLink={entityLink}
+                entityType={entityType}
+                hasEditPermission={getPrioritizedEditPermission(
+                  entityPermissions,
+                  Operation.EditDisplayName
+                )}
+                onDisplayNameUpdate={handleDisplayNameUpdate}
               />
             )}
             <div className="overview-tab-content">{summaryComponentV1}</div>
@@ -732,6 +746,12 @@ export default function EntitySummaryPanel({
                 className="title-section"
                 entityDetails={entityDetails.details}
                 entityLink={entityLink}
+                entityType={entityType}
+                hasEditPermission={getPrioritizedEditPermission(
+                  entityPermissions,
+                  Operation.EditDisplayName
+                )}
+                onDisplayNameUpdate={handleDisplayNameUpdate}
               />
             )}
             <div className="entity-summary-panel-tab-content">
@@ -802,9 +822,16 @@ export default function EntitySummaryPanel({
           <EntityTitleSection
             className="drawer-title-section"
             entityDetails={entityDetails.details}
+            entityDisplayName={entityData?.displayName}
             entityLink={entityLink}
+            entityType={entityType}
+            hasEditPermission={getPrioritizedEditPermission(
+              entityPermissions,
+              Operation.EditDisplayName
+            )}
             testId="entity-header-title"
             tooltipPlacement="bottomLeft"
+            onDisplayNameUpdate={handleDisplayNameUpdate}
           />
           <Button
             aria-label={t('label.close')}