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>

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')

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')

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();
 

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"]')

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);

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) ??

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,

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

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
+        {/* If we do not have displayName name only be shown in the bold from the below code */}
-          className="m-b-0 d-block text-grey-muted text-md font-medium"
+        {!isEmpty(displayName) ? (
-          data-testid="entity-header-name">
+          <Typography.Text
-          {stringToHTML(name)}
+            className="m-b-0 d-block text-grey-muted text-md font-medium"
-        </Typography.Text>
+            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>
   );
 

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;

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>

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
+        <Form.Item label={t('label.display-name')} name="displayName">
-          label={t('label.display-name')}
-          name="displayName"
-          rules={[
-            {
-              required: true,
-              message: `${t('label.field-required', {
-                field: t('label.display-name'),
-              })}`,
-            },
-          ]}>
           <Input placeholder={t('message.enter-display-name')} />
         </Form.Item>
       </Form>

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"