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(
-      '.ant-row-middle > :nth-child(2) > :nth-child(1) > :nth-child(1) > :nth-child(3)'
-    ).should('contain', TEST_CASE.dataAsset);
+    cy.get('[data-testid="display-name-entities"]').should(
+      'contain',
+      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(
-    () =>
-      dataTestId
+  const { testId, displayName } = useMemo(
+    () => ({
+      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(
-    () => [
-      {
-        name: getEntityName(alert),
-        url: '',
-      },
-    ],
+  const pageHeaderData = useMemo(
+    () => ({
+      header: getEntityName(alert),
+      subHeader: alert?.description || '',
+    }),
     [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>
-              <Typography.Title level={5}>
-                {t('label.alert-plural')}
-              </Typography.Title>
-              <Typography.Text>
-                {t('message.alerts-description')}
-              </Typography.Text>
-            </div>
+            <PageHeader data={pageHeaderData} />
             <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,253 +131,271 @@ const ElasticSearchIndexPage = () => {
   }, []);
 
   return (
-    <div>
-      <Row gutter={[16, 16]}>
-        <Col span={24}>
-          <Card
-            extra={
-              <Space>
-                <Button
-                  data-testid="elastic-search-re-fetch-data"
-                  disabled={batchLoading}
-                  icon={<ReloadOutlined />}
-                  size="small"
-                  title="Refresh log"
-                  onClick={fetchBatchReIndexedData}
-                />
-                <Button
-                  data-testid="elastic-search-re-index-all"
-                  disabled={!isAdminUser}
-                  size="small"
-                  type="primary"
-                  onClick={() => setModalOpen(true)}>
-                  Re Index All
-                </Button>
-              </Space>
-            }
-            loading={batchLoading}
-            size="small"
-            title="ElasticSearch">
-            <Row gutter={[16, 8]}>
-              <Col span={24}>
-                <Space wrap direction="horizontal" size={0}>
-                  <div className="flex">
-                    <span className="text-grey-muted">Mode</span> :
-                    <span className="m-l-xs">
-                      {startCase(batchJobData?.runMode) || '--'}
-                    </span>
-                  </div>
-                  <Divider type="vertical" />
-                  <div className="flex">
-                    <span className="text-grey-muted">Status</span> :
-                    <span className="m-l-xs">
-                      <Space size={8}>
-                        {batchJobData?.status && (
-                          <SVGIcons
-                            alt="result"
-                            className="w-4"
-                            icon={getStatusResultBadgeIcon(
-                              batchJobData?.status
-                            )}
-                          />
-                        )}
-                        <span>
-                          {getEventPublisherStatusText(batchJobData?.status) ||
-                            '--'}
+    <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}>
+              <Card
+                extra={
+                  <Space>
+                    <Button
+                      data-testid="elastic-search-re-fetch-data"
+                      disabled={batchLoading}
+                      icon={<ReloadOutlined />}
+                      size="small"
+                      title="Refresh log"
+                      onClick={fetchBatchReIndexedData}
+                    />
+                    <Button
+                      data-testid="elastic-search-re-index-all"
+                      disabled={!isAdminUser}
+                      size="small"
+                      type="primary"
+                      onClick={() => setModalOpen(true)}>
+                      Re Index All
+                    </Button>
+                  </Space>
+                }
+                loading={batchLoading}
+                size="small"
+                title="ElasticSearch">
+                <Row gutter={[16, 8]}>
+                  <Col span={24}>
+                    <Space wrap direction="horizontal" size={0}>
+                      <div className="flex">
+                        <span className="text-grey-muted">Mode</span> :
+                        <span className="m-l-xs">
+                          {startCase(batchJobData?.runMode) || '--'}
                         </span>
-                      </Space>
-                    </span>
-                  </div>
-                  <Divider type="vertical" />
-                  <div className="flex">
-                    <span className="text-grey-muted">Index stats</span> :
+                      </div>
+                      <Divider type="vertical" />
+                      <div className="flex">
+                        <span className="text-grey-muted">Status</span> :
+                        <span className="m-l-xs">
+                          <Space size={8}>
+                            {batchJobData?.status && (
+                              <SVGIcons
+                                alt="result"
+                                className="w-4"
+                                icon={getStatusResultBadgeIcon(
+                                  batchJobData?.status
+                                )}
+                              />
+                            )}
+                            <span>
+                              {getEventPublisherStatusText(
+                                batchJobData?.status
+                              ) || '--'}
+                            </span>
+                          </Space>
+                        </span>
+                      </div>
+                      <Divider type="vertical" />
+                      <div className="flex">
+                        <span className="text-grey-muted">Index stats</span> :
+                        <span className="m-l-xs">
+                          {!isEmpty(batchJobData) ? (
+                            <Space size={8}>
+                              <Badge
+                                className="request-badge running"
+                                count={batchJobData?.stats?.total}
+                                overflowCount={99999999}
+                                title={`Total index sent: ${batchJobData?.stats?.total}`}
+                              />
+
+                              <Badge
+                                className="request-badge success"
+                                count={batchJobData?.stats?.success}
+                                overflowCount={99999999}
+                                title={`Success index: ${batchJobData?.stats?.success}`}
+                              />
+
+                              <Badge
+                                showZero
+                                className="request-badge failed"
+                                count={batchJobData?.stats?.failed}
+                                overflowCount={99999999}
+                                title={`Failed index: ${batchJobData?.stats?.failed}`}
+                              />
+                            </Space>
+                          ) : (
+                            '--'
+                          )}
+                        </span>
+                      </div>
+                      <Divider type="vertical" />
+                      <div className="flex">
+                        <span className="text-grey-muted">Last Updated</span> :
+                        <span className="m-l-xs">
+                          {batchJobData?.timestamp
+                            ? getDateTimeByTimeStampWithZone(
+                                batchJobData?.timestamp
+                              )
+                            : '--'}
+                        </span>
+                      </div>
+                      <Divider type="vertical" />
+                      <div className="flex">
+                        <span className="text-grey-muted">Last Failed At:</span>
+                        <p className="m-l-xs">
+                          {batchJobData?.failureDetails?.lastFailedAt
+                            ? getDateTimeByTimeStampWithZone(
+                                batchJobData?.failureDetails?.lastFailedAt
+                              )
+                            : '--'}
+                        </p>
+                      </div>
+                    </Space>
+                  </Col>
+                  <Col span={24}>
+                    <span className="text-grey-muted">Failure Context:</span>
                     <span className="m-l-xs">
-                      {!isEmpty(batchJobData) ? (
-                        <Space size={8}>
-                          <Badge
-                            className="request-badge running"
-                            count={batchJobData?.stats?.total}
-                            overflowCount={99999999}
-                            title={`Total index sent: ${batchJobData?.stats?.total}`}
-                          />
-
-                          <Badge
-                            className="request-badge success"
-                            count={batchJobData?.stats?.success}
-                            overflowCount={99999999}
-                            title={`Success index: ${batchJobData?.stats?.success}`}
-                          />
-
-                          <Badge
-                            showZero
-                            className="request-badge failed"
-                            count={batchJobData?.stats?.failed}
-                            overflowCount={99999999}
-                            title={`Failed index: ${batchJobData?.stats?.failed}`}
-                          />
-                        </Space>
+                      {batchJobData?.failureDetails?.context ? (
+                        <RichTextEditorPreviewer
+                          enableSeeMoreVariant={Boolean(batchJobData)}
+                          markdown={batchJobData?.failureDetails?.context}
+                        />
                       ) : (
                         '--'
                       )}
                     </span>
-                  </div>
-                  <Divider type="vertical" />
-                  <div className="flex">
-                    <span className="text-grey-muted">Last Updated</span> :
+                  </Col>
+                  <Col span={24}>
+                    <span className="text-grey-muted">Last error:</span>
                     <span className="m-l-xs">
-                      {batchJobData?.timestamp
-                        ? getDateTimeByTimeStampWithZone(
-                            batchJobData?.timestamp
-                          )
-                        : '--'}
+                      {batchJobData?.failureDetails?.lastFailedReason ? (
+                        <RichTextEditorPreviewer
+                          enableSeeMoreVariant={Boolean(batchJobData)}
+                          markdown={
+                            batchJobData?.failureDetails?.lastFailedReason
+                          }
+                        />
+                      ) : (
+                        '--'
+                      )}
                     </span>
-                  </div>
-                  <Divider type="vertical" />
-                  <div className="flex">
-                    <span className="text-grey-muted">Last Failed At:</span>
-                    <p className="m-l-xs">
-                      {batchJobData?.failureDetails?.lastFailedAt
-                        ? getDateTimeByTimeStampWithZone(
-                            batchJobData?.failureDetails?.lastFailedAt
-                          )
-                        : '--'}
-                    </p>
-                  </div>
-                </Space>
-              </Col>
-              <Col span={24}>
-                <span className="text-grey-muted">Failure Context:</span>
-                <span className="m-l-xs">
-                  {batchJobData?.failureDetails?.context ? (
-                    <RichTextEditorPreviewer
-                      enableSeeMoreVariant={Boolean(batchJobData)}
-                      markdown={batchJobData?.failureDetails?.context}
-                    />
-                  ) : (
-                    '--'
-                  )}
-                </span>
-              </Col>
-              <Col span={24}>
-                <span className="text-grey-muted">Last error:</span>
-                <span className="m-l-xs">
-                  {batchJobData?.failureDetails?.lastFailedReason ? (
-                    <RichTextEditorPreviewer
-                      enableSeeMoreVariant={Boolean(batchJobData)}
-                      markdown={batchJobData?.failureDetails?.lastFailedReason}
-                    />
-                  ) : (
-                    '--'
-                  )}
-                </span>
-              </Col>
-            </Row>
-          </Card>
-        </Col>
-        <Col span={24}>
-          <Card
-            extra={
-              <Button
-                data-testid="elastic-search-re-fetch-data"
-                disabled={streamLoading}
-                icon={<ReloadOutlined />}
+                  </Col>
+                </Row>
+              </Card>
+            </Col>
+            <Col span={24}>
+              <Card
+                extra={
+                  <Button
+                    data-testid="elastic-search-re-fetch-data"
+                    disabled={streamLoading}
+                    icon={<ReloadOutlined />}
+                    size="small"
+                    title="Refresh log"
+                    onClick={fetchStreamReIndexedData}
+                  />
+                }
+                loading={streamLoading}
                 size="small"
-                title="Refresh log"
-                onClick={fetchStreamReIndexedData}
-              />
-            }
-            loading={streamLoading}
-            size="small"
-            title="ElasticSearch">
-            <Row gutter={[16, 8]}>
-              <Col span={24}>
-                <Space direction="horizontal" size={16}>
-                  <div className="flex">
-                    <span className="text-grey-muted">Mode</span> :
-                    <span className="m-l-xs">
-                      {startCase(streamJobData?.runMode) || '--'}
-                    </span>
-                  </div>
-                  <div className="flex">
-                    <span className="text-grey-muted">Status</span> :
-                    <span className="m-l-xs">
-                      <Space size={8}>
-                        {streamJobData?.status && (
-                          <SVGIcons
-                            alt="result"
-                            className="w-4"
-                            icon={getStatusResultBadgeIcon(
-                              streamJobData?.status
-                            )}
-                          />
-                        )}
-                        <span>
-                          {getEventPublisherStatusText(streamJobData?.status) ||
-                            '--'}
+                title="ElasticSearch">
+                <Row gutter={[16, 8]}>
+                  <Col span={24}>
+                    <Space direction="horizontal" size={16}>
+                      <div className="flex">
+                        <span className="text-grey-muted">Mode</span> :
+                        <span className="m-l-xs">
+                          {startCase(streamJobData?.runMode) || '--'}
                         </span>
-                      </Space>
-                    </span>
-                  </div>
+                      </div>
+                      <div className="flex">
+                        <span className="text-grey-muted">Status</span> :
+                        <span className="m-l-xs">
+                          <Space size={8}>
+                            {streamJobData?.status && (
+                              <SVGIcons
+                                alt="result"
+                                className="w-4"
+                                icon={getStatusResultBadgeIcon(
+                                  streamJobData?.status
+                                )}
+                              />
+                            )}
+                            <span>
+                              {getEventPublisherStatusText(
+                                streamJobData?.status
+                              ) || '--'}
+                            </span>
+                          </Space>
+                        </span>
+                      </div>
 
-                  <div className="flex">
-                    <span className="text-grey-muted">Last Updated</span> :
+                      <div className="flex">
+                        <span className="text-grey-muted">Last Updated</span> :
+                        <span className="m-l-xs">
+                          {streamJobData?.timestamp
+                            ? getDateTimeByTimeStampWithZone(
+                                streamJobData?.timestamp
+                              )
+                            : '--'}
+                        </span>
+                      </div>
+                      <div className="flex">
+                        <span className="text-grey-muted">Last Failed At:</span>
+                        <p className="m-l-xs">
+                          {streamJobData?.failureDetails?.lastFailedAt
+                            ? getDateTimeByTimeStampWithZone(
+                                streamJobData?.failureDetails?.lastFailedAt
+                              )
+                            : '--'}
+                        </p>
+                      </div>
+                    </Space>
+                  </Col>
+                  <Col span={24}>
+                    <span className="text-grey-muted">Failure Context:</span>
                     <span className="m-l-xs">
-                      {streamJobData?.timestamp
-                        ? getDateTimeByTimeStampWithZone(
-                            streamJobData?.timestamp
-                          )
-                        : '--'}
+                      {streamJobData?.failureDetails?.context ? (
+                        <RichTextEditorPreviewer
+                          enableSeeMoreVariant={Boolean(streamJobData)}
+                          markdown={streamJobData?.failureDetails?.context}
+                        />
+                      ) : (
+                        '--'
+                      )}
                     </span>
-                  </div>
-                  <div className="flex">
-                    <span className="text-grey-muted">Last Failed At:</span>
-                    <p className="m-l-xs">
-                      {streamJobData?.failureDetails?.lastFailedAt
-                        ? getDateTimeByTimeStampWithZone(
-                            streamJobData?.failureDetails?.lastFailedAt
-                          )
-                        : '--'}
-                    </p>
-                  </div>
-                </Space>
-              </Col>
-              <Col span={24}>
-                <span className="text-grey-muted">Failure Context:</span>
-                <span className="m-l-xs">
-                  {streamJobData?.failureDetails?.context ? (
-                    <RichTextEditorPreviewer
-                      enableSeeMoreVariant={Boolean(streamJobData)}
-                      markdown={streamJobData?.failureDetails?.context}
-                    />
-                  ) : (
-                    '--'
-                  )}
-                </span>
-              </Col>
-              <Col span={24}>
-                <span className="text-grey-muted">Last error:</span>
-                <span className="m-l-xs">
-                  {streamJobData?.failureDetails?.lastFailedReason ? (
-                    <RichTextEditorPreviewer
-                      enableSeeMoreVariant={Boolean(streamJobData)}
-                      markdown={streamJobData?.failureDetails?.lastFailedReason}
-                    />
-                  ) : (
-                    '--'
-                  )}
-                </span>
-              </Col>
-            </Row>
-          </Card>
-        </Col>
-      </Row>
-      <ReIndexAllModal
-        confirmLoading={confirmLoading}
-        visible={isModalOpen}
-        onCancel={() => setModalOpen(false)}
-        onSave={performReIndexAll}
-      />
-    </div>
+                  </Col>
+                  <Col span={24}>
+                    <span className="text-grey-muted">Last error:</span>
+                    <span className="m-l-xs">
+                      {streamJobData?.failureDetails?.lastFailedReason ? (
+                        <RichTextEditorPreviewer
+                          enableSeeMoreVariant={Boolean(streamJobData)}
+                          markdown={
+                            streamJobData?.failureDetails?.lastFailedReason
+                          }
+                        />
+                      ) : (
+                        '--'
+                      )}
+                    </span>
+                  </Col>
+                </Row>
+              </Card>
+            </Col>
+          </Row>
+          <ReIndexAllModal
+            confirmLoading={confirmLoading}
+            visible={isModalOpen}
+            onCancel={() => setModalOpen(false)}
+            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"
+                className="w-full flex-center gap-2 text-primary"
                 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
-                        className="m-b-0"
-                        data-testid="classification-name"
-                        level={5}>
+                      <Typography.Text
+                        className="m-b-0 font-bold text-lg"
+                        data-testid="classification-name">
                         {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>
     ) : (