Fix misc UI (#9912)

* fix(ui): show displayName instead name for entities

* fix ui improvements #9879

* fix alert details destination title rendering

* fixed failing cy test

Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Alerts.spec.js

@@ -256,9 +256,10 @@ describe('Alerts page should work properly', () => {
       .contains(TEST_CASE.testCaseAlert)
       .click();
     // Check data asset
-    cy.get(
+    cy.get('[data-testid="display-name-entities"]').should(
-      '.ant-row-middle > :nth-child(2) > :nth-child(1) > :nth-child(1) > :nth-child(3)'
+      'contain',
-    ).should('contain', TEST_CASE.dataAsset);
+      TEST_CASE.dataAsset
+    );
     cy.get('div.ant-typography').should('contain', TEST_CASE.filters);
   });
 

openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertsDetails/AlertDetails.component.tsx

@@ -14,6 +14,10 @@
 import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import Icon from '@ant-design/icons/lib/components/Icon';
 import { Button, Card, Col, Divider, Row, Space, Tag, Typography } from 'antd';
+import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
+import { TitleBreadcrumbProps } from 'components/common/title-breadcrumb/title-breadcrumb.interface';
+import PageHeader from 'components/header/PageHeader.component';
+import { HeaderProps } from 'components/header/PageHeader.interface';
 import { isArray } from 'lodash';
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -38,15 +42,13 @@ import {
   getFunctionDisplayName,
 } from '../../../utils/Alerts/AlertsUtil';
 import { getHostNameFromURL } from '../../../utils/CommonUtils';
-import RichTextEditorPreviewer from '../../common/rich-text-editor/RichTextEditorPreviewer';
-import TitleBreadcrumb from '../../common/title-breadcrumb/title-breadcrumb.component';
-import { TitleBreadcrumbProps } from '../../common/title-breadcrumb/title-breadcrumb.interface';
 
 interface AlertDetailsComponentProps {
   alerts: Alerts;
   alertActions: AlertAction[];
   onDelete: () => void;
-  breadcrumb: TitleBreadcrumbProps['titleLinks'];
+  pageHeaderData?: HeaderProps['data'];
+  breadcrumb?: TitleBreadcrumbProps['titleLinks'];
   allowDelete?: boolean;
   allowEdit?: boolean;
 }
@@ -55,8 +57,9 @@ export const AlertDetailsComponent = ({
   alerts,
   alertActions,
   onDelete,
-  breadcrumb,
+  pageHeaderData,
   allowDelete = true,
+  breadcrumb,
   allowEdit = true,
 }: AlertDetailsComponentProps) => {
   const { t } = useTranslation();
@@ -65,7 +68,9 @@ export const AlertDetailsComponent = ({
     <Row align="middle" gutter={[16, 16]}>
       <Col span={24}>
         <div className="d-flex items-center justify-between">
-          <TitleBreadcrumb titleLinks={breadcrumb} />
+          {breadcrumb ? <TitleBreadcrumb titleLinks={breadcrumb} /> : null}
+
+          {pageHeaderData ? <PageHeader data={pageHeaderData} /> : null}
           <Space size={16}>
             {allowEdit && (
               <Link to={`${EDIT_LINK_PATH}/${alerts?.id}`}>
@@ -86,13 +91,6 @@ export const AlertDetailsComponent = ({
       </Col>
       <Col span={24}>
         <Card>
-          {alerts.description && (
-            <>
-              <RichTextEditorPreviewer markdown={alerts?.description ?? ''} />
-              <Divider />
-            </>
-          )}
-
           <Space direction="vertical" size={8}>
             <Typography.Title className="m-0" level={5}>
               {t('label.trigger')}
@@ -103,7 +101,7 @@ export const AlertDetailsComponent = ({
               )}
               :
             </Typography.Text>
-            <Typography.Text>
+            <Typography.Text data-testid="display-name-entities">
               {alerts?.triggerConfig.entities
                 ?.map(getDisplayNameForEntities)
                 ?.join(', ')}
@@ -149,7 +147,18 @@ export const AlertDetailsComponent = ({
                     )}
                   </Space>
                 ) : (
-                  <Card className="h-full" title={<Space size={8} />}>
+                  <Card
+                    className="h-full"
+                    title={
+                      <Space size={16}>
+                        {getAlertsActionTypeIcon(action.alertActionType)}
+
+                        {getAlertActionTypeDisplayName(
+                          action.alertActionType ??
+                            AlertActionType.GenericWebhook
+                        )}
+                      </Space>
+                    }>
                     <Space direction="vertical" size={8}>
                       {action.alertActionType === AlertActionType.Email && (
                         <>

openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardTitle.component.tsx

@@ -12,6 +12,7 @@
  */
 
 import { Button, Typography } from 'antd';
+import { toString } from 'lodash';
 import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { ROUTES } from '../../../constants/constants';
@@ -43,23 +44,24 @@ const TableDataCardTitle = ({
 }: TableDataCardTitleProps) => {
   const isTourRoute = location.pathname.includes(ROUTES.TOUR);
 
-  const testId = useMemo(
+  const { testId, displayName } = useMemo(
-    () =>
+    () => ({
-      dataTestId
+      testId: dataTestId
         ? dataTestId
         : `${getPartialNameFromTableFQN(source.fullyQualifiedName ?? '', [
             FqnPart.Service,
           ])}-${getNameFromFQN(source.fullyQualifiedName ?? '')}`,
+      displayName: toString(source.displayName),
+    }),
     [dataTestId, source]
   );
-
   const title = (
     <Button
       data-testid={testId}
       id={`${id ?? testId}-title`}
       type="link"
       onClick={isTourRoute ? handleLinkClick : undefined}>
-      {stringToHTML(source.name)}
+      {stringToHTML(displayName)}
     </Button>
   );
 
@@ -72,7 +74,7 @@ const TableDataCardTitle = ({
       ellipsis
       className="m-b-0 text-base"
       level={5}
-      title={source.name}>
+      title={displayName}>
       <Link
         className="table-data-card-title-container w-fit-content w-max-90"
         to={getEntityLink(searchIndex, source.fullyQualifiedName ?? '')}>

openmetadata-ui/src/main/resources/ui/src/components/header/PageHeader.component.tsx

@@ -13,15 +13,9 @@
 
 import { Typography } from 'antd';
 import React from 'react';
+import { HeaderProps } from './PageHeader.interface';
 import './PageHeader.style.less';
 
-interface HeaderProps {
-  data: {
-    header: string;
-    subHeader: string;
-  };
-}
-
 const PageHeader = ({ data: { header, subHeader } }: HeaderProps) => {
   return (
     <div className="page-header-container">

openmetadata-ui/src/main/resources/ui/src/components/header/PageHeader.interface.ts

@@ -0,0 +1,19 @@
+/*
+ *  Copyright 2022 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+export interface HeaderProps {
+  data: {
+    header: string;
+    subHeader: string;
+  };
+}

openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.interface.ts

@@ -31,6 +31,7 @@ type Fields =
   | 'fullyQualifiedName'
   | 'description'
   | 'serviceType'
+  | 'displayName'
   | 'deleted';
 
 export type SourceType = (

openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx

@@ -12,7 +12,7 @@
  */
 
 import classNames from 'classnames';
-import { isUndefined } from 'lodash';
+import { isUndefined, toString } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { PAGE_SIZE } from '../../constants/constants';
@@ -64,7 +64,7 @@ const SearchedData: React.FC<SearchedDataProps> = ({
         });
       }
 
-      let name = table.name;
+      let name = toString(table.displayName);
       if (!isUndefined(highlight)) {
         name = highlight?.name?.join(' ') || name;
       }

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -188,6 +188,7 @@
     "edit-workflow-ingestion": "Edit {{workflow}} Ingestion",
     "edited": "Edited",
     "effect": "Effect",
+    "elastic-search": "Elasticsearch",
     "elastic-search-re-index": "ElasticsearchReindex",
     "email": "Email",
     "email-plural": "Emails",
@@ -658,6 +659,7 @@
     "delete-team-message": "Any teams under \"{{teamName}}\" will be {{deleteType}} deleted as well.",
     "delete-webhook-permanently": "You want to delete webhook {{webhookName}} permanently? This action cannot be reverted.",
     "discover-your-data-and-unlock-the-value-of-data-assets": "Discover your data and unlock the value of data assets.",
+    "elastic-search-message": "Manage Elastisearch related works here. You can trigger re-create indexes or check the status of re-creating indexes",
     "email-is-invalid": "Invalid Email.",
     "enable-column-profile": "Enable column profile",
     "enable-debug-logging": "Enable debug logging",

openmetadata-ui/src/main/resources/ui/src/pages/AlertsActivityFeedPage/AlertsActivityFeedPage.tsx

@@ -67,13 +67,11 @@ const AlertsActivityFeedPage = () => {
     fetchActivityFeedAlert();
   }, []);
 
-  const breadcrumb = useMemo(
+  const pageHeaderData = useMemo(
-    () => [
+    () => ({
-      {
+      header: getEntityName(alert),
-        name: getEntityName(alert),
+      subHeader: alert?.description || '',
-        url: '',
+    }),
-      },
-    ],
     [alert]
   );
 
@@ -86,7 +84,7 @@ const AlertsActivityFeedPage = () => {
       alertActions={alertActions}
       alerts={alert}
       allowDelete={false}
-      breadcrumb={breadcrumb}
+      pageHeaderData={pageHeaderData}
       onDelete={noop}
     />
   ) : (

openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx

@@ -10,9 +10,10 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Button, Col, Row, Table, Tooltip, Typography } from 'antd';
+import { Button, Col, Row, Table, Tooltip } from 'antd';
 import DeleteWidgetModal from 'components/common/DeleteWidget/DeleteWidgetModal';
 import NextPrevious from 'components/common/next-previous/NextPrevious';
+import PageHeader from 'components/header/PageHeader.component';
 import Loader from 'components/Loader/Loader';
 import { isNil } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -131,19 +132,20 @@ const AlertsPage = () => {
     [handleAlertDelete]
   );
 
+  const pageHeaderData = useMemo(
+    () => ({
+      header: t('label.alert-plural'),
+      subHeader: t('message.alerts-description'),
+    }),
+    []
+  );
+
   return (
     <>
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <div className="d-flex justify-between">
-            <div>
+            <PageHeader data={pageHeaderData} />
-              <Typography.Title level={5}>
-                {t('label.alert-plural')}
-              </Typography.Title>
-              <Typography.Text>
-                {t('message.alerts-description')}
-              </Typography.Text>
-            </div>
             <Link
               to={getSettingPath(
                 GlobalSettingsMenuCategory.NOTIFICATIONS,

openmetadata-ui/src/main/resources/ui/src/pages/ElasticSearchIndexPage/ElasticSearchReIndexPage.component.tsx

@@ -15,9 +15,11 @@ import { ReloadOutlined } from '@ant-design/icons';
 import { Badge, Button, Card, Col, Divider, Row, Space } from 'antd';
 import { AxiosError } from 'axios';
 import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer';
+import PageHeader from 'components/header/PageHeader.component';
 import { useWebSocketConnector } from 'components/web-scoket/web-scoket.provider';
 import { isEmpty, startCase } from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   getAllReIndexStatus,
   reIndexByPublisher,
@@ -41,6 +43,7 @@ import './ElasticSearchReIndex.style.less';
 import ReIndexAllModal from './ElasticSearchReIndexModal.component';
 
 const ElasticSearchIndexPage = () => {
+  const { t } = useTranslation();
   const [batchJobData, setBatchJobData] = useState<EventPublisherJob>();
   const [streamJobData, setStreamJobData] = useState<EventPublisherJob>();
 
@@ -128,6 +131,16 @@ const ElasticSearchIndexPage = () => {
   }, []);
 
   return (
+    <Row align="middle" gutter={[16, 16]}>
+      <Col span={24}>
+        <PageHeader
+          data={{
+            header: t('label.elastic-search'),
+            subHeader: t('message.elastic-search-message'),
+          }}
+        />
+      </Col>
+      <Col span={24}>
         <div>
           <Row gutter={[16, 16]}>
             <Col span={24}>
@@ -179,8 +192,9 @@ const ElasticSearchIndexPage = () => {
                               />
                             )}
                             <span>
-                          {getEventPublisherStatusText(batchJobData?.status) ||
+                              {getEventPublisherStatusText(
-                            '--'}
+                                batchJobData?.status
+                              ) || '--'}
                             </span>
                           </Space>
                         </span>
@@ -261,7 +275,9 @@ const ElasticSearchIndexPage = () => {
                       {batchJobData?.failureDetails?.lastFailedReason ? (
                         <RichTextEditorPreviewer
                           enableSeeMoreVariant={Boolean(batchJobData)}
-                      markdown={batchJobData?.failureDetails?.lastFailedReason}
+                          markdown={
+                            batchJobData?.failureDetails?.lastFailedReason
+                          }
                         />
                       ) : (
                         '--'
@@ -309,8 +325,9 @@ const ElasticSearchIndexPage = () => {
                               />
                             )}
                             <span>
-                          {getEventPublisherStatusText(streamJobData?.status) ||
+                              {getEventPublisherStatusText(
-                            '--'}
+                                streamJobData?.status
+                              ) || '--'}
                             </span>
                           </Space>
                         </span>
@@ -357,7 +374,9 @@ const ElasticSearchIndexPage = () => {
                       {streamJobData?.failureDetails?.lastFailedReason ? (
                         <RichTextEditorPreviewer
                           enableSeeMoreVariant={Boolean(streamJobData)}
-                      markdown={streamJobData?.failureDetails?.lastFailedReason}
+                          markdown={
+                            streamJobData?.failureDetails?.lastFailedReason
+                          }
                         />
                       ) : (
                         '--'
@@ -375,6 +394,8 @@ const ElasticSearchIndexPage = () => {
             onSave={performReIndexAll}
           />
         </div>
+      </Col>
+    </Row>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx

@@ -87,11 +87,11 @@ const GlossaryLeftPanel = ({ glossaries }: GlossaryLeftPanelProps) => {
   return (
     <LeftPanelCard id="glossary">
       <GlossaryV1Skeleton loading={glossaries.length === 0}>
-        <Row className="m-t-sm" gutter={[0, 16]}>
+        <Row className="p-y-xs" gutter={[0, 16]}>
           <Col className="p-x-sm" span={24}>
-            <Typography.Paragraph className="m-b-0">
+            <Typography.Text strong className="m-b-0">
               {t('label.glossary')}
-            </Typography.Paragraph>
+            </Typography.Text>
           </Col>
           <Col className="p-x-sm" span={24}>
             <Searchbar
@@ -113,12 +113,10 @@ const GlossaryLeftPanel = ({ glossaries }: GlossaryLeftPanelProps) => {
                   : t('message.no-permission-for-action')
               }>
               <Button
-                ghost
+                className="w-full flex-center gap-2 text-primary"
-                className="w-full flex-center gap-2"
                 data-testid="add-glossary"
                 disabled={!createGlossaryPermission}
                 icon={<PlusIcon />}
-                type="primary"
                 onClick={handleAddGlossaryClick}>
                 {t('label.add-glossary')}
               </Button>

openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx

@@ -804,12 +804,11 @@ const TagsPage = () => {
                     </Row>
                   ) : (
                     <Space>
-                      <Typography.Title
+                      <Typography.Text
-                        className="m-b-0"
+                        className="m-b-0 font-bold text-lg"
-                        data-testid="classification-name"
+                        data-testid="classification-name">
-                        level={5}>
                         {getEntityName(currentClassification)}
-                      </Typography.Title>
+                      </Typography.Text>
                       {currentClassification.provider === ProviderType.User && (
                         <Tooltip
                           title={
@@ -886,7 +885,7 @@ const TagsPage = () => {
                 </div>
               </Space>
             )}
-            <div className="m-b-sm" data-testid="description-container">
+            <div className="m-b-sm m-t-xs" data-testid="description-container">
               <Description
                 description={currentClassification?.description || ''}
                 entityName={

openmetadata-ui/src/main/resources/ui/src/styles/layout.less

@@ -14,3 +14,6 @@
 .overflow-y-auto {
   overflow-y: auto;
 }
+.min-h-24 {
+  min-height: 6rem;
+}

openmetadata-ui/src/main/resources/ui/src/utils/Alerts/AlertsUtil.tsx

@@ -71,7 +71,7 @@ export const StyledCard = ({
   subHeading: string;
 }) => {
   return (
-    <div className="bg-grey p-sm rounded-4">
+    <div className="bg-grey p-sm rounded-4 min-h-24">
       <Typography.Text>{heading}</Typography.Text>
       <br />
       <Typography.Text className="text-xs text-grey-muted">

openmetadata-ui/src/main/resources/ui/src/utils/GlobalSettingsUtils.tsx

@@ -278,7 +278,12 @@ export const getGlobalSettingMenuItem = (
     icon,
     children: subItems,
     label: isBeta ? (
-      <Badge color="#7147e8" count="beta" offset={[30, 8]} size="small">
+      <Badge
+        className="text-xs text-grey-muted"
+        color="#7147e8"
+        count="beta"
+        offset={[30, 8]}
+        size="small">
         {label}
       </Badge>
     ) : (