fix(ui): displayName as optional field (#11685)

* fix(ui): displayName as optional field * fix cypress * fix cypress * fixed cypress * fix glossary spec --------- Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
2025-10-27 16:55:06 +00:00 · 2023-05-19 23:29:54 +05:30 · 2023-05-19 23:29:54 +05:30 · cd464c4272
commit cd464c4272
parent cf603812fd
13 changed files with 29 additions and 38 deletions
--- a/openmetadata-ui/src/main/resources/ui/cypress/common/common.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/common/common.js
@ -359,7 +359,7 @@ export const deleteCreatedService = (
    .should('be.visible')
    .click();

-  cy.get(`[data-testid="entity-header-name"]`)
+  cy.get(`[data-testid="entity-header-display-name"]`)
    .should('exist')
    .should('be.visible')
    .invoke('text')
--- a/openmetadata-ui/src/main/resources/ui/cypress/common/serviceUtils.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/common/serviceUtils.js
@ -38,7 +38,7 @@ export const visitServiceDetailsPage = (service, verifyHeader = true) => {
    .click();

  if (verifyHeader) {
-    cy.get(`[data-testid="entity-header-name"]`)
+    cy.get(`[data-testid="entity-header-display-name"]`)
      .should('exist')
      .should('be.visible')
      .invoke('text')
--- a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Features/UpdateDisplayName.spec.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Features/UpdateDisplayName.spec.js
@ -43,8 +43,6 @@ const updateDisplayName = (displayName, apiPath) => {
  cy.get('#name').should('be.visible').should('be.disabled');
  cy.get('#displayName').should('be.visible').should('not.be.disabled').clear();
  cy.get('.ant-modal-footer').should('contain', 'Cancel');
-  cy.get('[data-testid="save-button"]').should('be.visible').click();
-  cy.get('.ant-modal-body').should('contain', 'Display Name is required');
  cy.get('#displayName').type(displayName);
  cy.get('[data-testid="save-button"]').should('be.visible').click();

--- a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataQualityAndProfiler.spec.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataQualityAndProfiler.spec.js
@ -588,7 +588,7 @@ describe('Data Quality and Profiler should work properly', () => {
    const { term, entity, serviceName, testCaseName } =
      DATA_QUALITY_SAMPLE_DATA_TABLE;
    visitEntityDetailsPage(term, serviceName, entity);
-    cy.get('[data-testid="entity-header-name"]')
+    cy.get('[data-testid="entity-header-display-name"]')
      .should('be.visible')
      .contains(term);
    cy.get('[data-testid="Profiler & Data Quality"]')
@ -643,7 +643,7 @@ describe('Data Quality and Profiler should work properly', () => {
    );
    visitEntityDetailsPage(term, serviceName, entity);
    verifyResponseStatusCode('@waitForPageLoad', 200);
-    cy.get('[data-testid="entity-header-name"]')
+    cy.get('[data-testid="entity-header-display-name"]')
      .should('be.visible')
      .contains(term);
    cy.get('[data-testid="Profiler & Data Quality"]')
--- a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Glossary.spec.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Glossary.spec.js
@ -386,14 +386,12 @@ describe('Glossary page should work properly', () => {
    cy.wait('@createGlossary').then(({ request }) => {
      expect(request.body).to.have.all.keys(
        'description',
-        'displayName',
        'mutuallyExclusive',
        'name',
        'owner',
        'reviewers',
        'tags'
      );
-      expect(request.body.displayName).equals(NEW_GLOSSARY.name);
      expect(request.body.name).equals(NEW_GLOSSARY.name);
      expect(request.body.description).equals(NEW_GLOSSARY.description);
      expect(request.body.mutuallyExclusive).equals(true);
@ -430,14 +428,14 @@ describe('Glossary page should work properly', () => {
    cy.wait('@createGlossary').then(({ request }) => {
      expect(request.body).to.have.all.keys(
        'description',
-        'displayName',
+
        'mutuallyExclusive',
        'name',
        'owner',
        'reviewers',
        'tags'
      );
-      expect(request.body.displayName).equals(NEW_GLOSSARY_1.name);
+
      expect(request.body.name).equals(NEW_GLOSSARY_1.name);
      expect(request.body.description).equals(NEW_GLOSSARY_1.description);
      expect(request.body.mutuallyExclusive).equals(false);
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
@ -66,7 +66,7 @@ const AddGlossary = ({
    };
    const data: CreateGlossary = {
      name: name.trim(),
-      displayName: (displayName || name).trim(),
+      displayName: displayName?.trim(),
      description: description,
      reviewers:
        reviewer.map((d) => toString(d.fullyQualifiedName)).filter(Boolean) ??
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTermForm/AddGlossaryTermForm.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTermForm/AddGlossaryTermForm.component.tsx
@ -122,7 +122,7 @@ const AddGlossaryTermForm = ({

    const data = {
      name: name.trim(),
-      displayName: (displayName || name).trim(),
+      displayName: displayName?.trim(),
      description: description,
      reviewers: reviewer,
      relatedTerms: updatedTerms.length > 0 ? updatedTerms : undefined,
--- 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
@ -16,7 +16,7 @@ import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb
 import { TitleBreadcrumbProps } from 'components/common/title-breadcrumb/title-breadcrumb.interface';
 import { EntityType } from 'enums/entity.enum';
 import React, { ReactNode } from 'react';
-import { getEntityLinkFromType, getEntityName } from 'utils/EntityUtils';
+import { getEntityLinkFromType } from 'utils/EntityUtils';
 import { getEncodedFqn } from 'utils/StringsUtils';
 import EntityHeaderTitle from '../EntityHeaderTitle/EntityHeaderTitle.component';

@ -59,7 +59,7 @@ export const EntityHeader = ({

      <EntityHeaderTitle
        deleted={entityData.deleted}
-        displayName={getEntityName(entityData)}
+        displayName={entityData.displayName}
        icon={icon}
        link={
          titleIsLink && entityData.fullyQualifiedName && entityType
--- 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
@ -14,6 +14,7 @@ import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Col, Row, Typography } from 'antd';
 import { ReactComponent as IconExternalLink } from 'assets/svg/external-link-grey.svg';
 import { ROUTES } from 'constants/constants';
+import { isEmpty } from 'lodash';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
@ -46,17 +47,21 @@ const EntityHeaderTitle = ({
      wrap={false}>
      <Col>{icon}</Col>
      <Col className={deleted || badge ? 'w-max-full-140' : 'w-max-full-45'}>
-        <Typography.Text
-          className="m-b-0 d-block text-grey-muted text-md font-medium"
-          data-testid="entity-header-name">
-          {stringToHTML(name)}
-        </Typography.Text>
+        {/* If we do not have displayName name only be shown in the bold from the below code */}
+        {!isEmpty(displayName) ? (
+          <Typography.Text
+            className="m-b-0 d-block text-grey-muted text-md font-medium"
+            data-testid="entity-header-name">
+            {stringToHTML(name)}
+          </Typography.Text>
+        ) : null}

+        {/* It will render displayName fallback to name */}
        <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 }}>
-          {stringToHTML(displayName ?? name)}
+          {stringToHTML(displayName || name)}
          {openEntityInNewPage && (
            <IconExternalLink
              className="anticon vertical-baseline m-l-xss"
@ -67,14 +72,14 @@ const EntityHeaderTitle = ({
        </Typography.Text>
      </Col>
      {deleted && (
-        <Col className="self-end text-xs">
+        <Col className="text-xs">
          <div className="deleted-badge-button" data-testid="deleted-badge">
            <ExclamationCircleFilled className="m-r-xss font-medium text-xs" />
            {t('label.deleted')}
          </div>
        </Col>
      )}
-      {badge && <Col className="self-end">{badge}</Col>}
+      {badge && <Col>{badge}</Col>}
    </Row>
  );

--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts
@ -13,7 +13,7 @@
 export interface EntityHeaderTitleProps {
  icon: React.ReactNode;
  name: string;
-  displayName: string;
+  displayName?: string;
  link?: string;
  openEntityInNewPage?: boolean;
  deleted?: boolean;
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/RelatedTerms.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/RelatedTerms.tsx
@ -18,10 +18,11 @@ import { ReactComponent as IconFlatDoc } from 'assets/svg/ic-flat-doc.svg';
 import TagButton from 'components/TagButton/TagButton.component';
 import { NO_PERMISSION_FOR_ACTION } from 'constants/HelperTextUtil';
 import { t } from 'i18next';
-import { cloneDeep, debounce, includes, toString } from 'lodash';
+import { cloneDeep, debounce, includes } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { searchData } from 'rest/miscAPI';
+import { getEntityName } from 'utils/EntityUtils';
 import { getGlossaryPath } from 'utils/RouterUtils';
 import { ReactComponent as PlusIcon } from '../../../assets/svg/plus-primary.svg';
 import {
@ -178,7 +179,7 @@ const RelatedTerms = ({
              className="cursor-pointer"
              icon={<IconFlatDoc height={12} name="folder" />}
              key={entity.fullyQualifiedName}
-              label={toString(entity.displayName)}
+              label={getEntityName(entity)}
              tooltip={
                <div className="p-xss">
                  <strong>{entity.fullyQualifiedName}</strong>
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityNameModal/EntityNameModal.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityNameModal/EntityNameModal.component.tsx
@ -85,17 +85,7 @@ const EntityNameModal: React.FC<EntityNameModalProps> = ({
            })}
          />
        </Form.Item>
-        <Form.Item
-          label={t('label.display-name')}
-          name="displayName"
-          rules={[
-            {
-              required: true,
-              message: `${t('label.field-required', {
-                field: t('label.display-name'),
-              })}`,
-            },
-          ]}>
+        <Form.Item label={t('label.display-name')} name="displayName">
          <Input placeholder={t('message.enter-display-name')} />
        </Form.Item>
      </Form>
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
@ -792,13 +792,12 @@ const TagsPage = () => {
                    badge={
                      currentClassification.provider === ProviderType.System ? (
                        <AppBadge
-                          className="m--t-xss"
                          icon={<LockIcon height={12} />}
                          label={capitalize(currentClassification.provider)}
                        />
                      ) : null
                    }
-                    displayName={getEntityName(currentClassification)}
+                    displayName={currentClassification.displayName}
                    icon={
                      <IconTag
                        className="h-9"