From a5f98578157091da80ad01ae1d4c14ab5abc45ab Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Wed, 1 Feb 2023 17:34:39 +0530
Subject: [PATCH] UI : Minor ui fixes and localisation (#10001)

* Minor ui fixes and localisation

* fix localization key

* changes as per comments

* memoized page header

* method name change
---
 .../{plus-primery.svg => plus-primary.svg}    |  0
 .../TreeView/TreeViewTab.component.tsx        |  2 +-
 .../GlossaryTermTab.component.tsx             |  5 +-
 .../ui/src/components/Services/Services.tsx   | 36 ++++++++-----
 .../ui/src/locale/languages/en-us.json        |  1 +
 .../CustomPropertiesPageV1.tsx                | 49 ++++++++++++-----
 .../GlossaryLeftPanel.component.tsx           |  2 +-
 .../GlossaryPage/GlossaryPage.component.tsx   |  4 +-
 .../resources/ui/src/pages/tags/index.tsx     | 53 ++++++++++++-------
 .../main/resources/ui/src/utils/SvgUtils.tsx  |  4 +-
 10 files changed, 99 insertions(+), 57 deletions(-)
 rename openmetadata-ui/src/main/resources/ui/src/assets/svg/{plus-primery.svg => plus-primary.svg} (100%)

diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/plus-primery.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/plus-primary.svg
similarity index 100%
rename from openmetadata-ui/src/main/resources/ui/src/assets/svg/plus-primery.svg
rename to openmetadata-ui/src/main/resources/ui/src/assets/svg/plus-primary.svg
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Execution/TreeView/TreeViewTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Execution/TreeView/TreeViewTab.component.tsx
index fc34dadc592..f6d3fbf7660 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Execution/TreeView/TreeViewTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Execution/TreeView/TreeViewTab.component.tsx
@@ -73,7 +73,7 @@ const TreeViewTab = ({
       {isEmpty(viewData) ? (
         <Empty
           className="my-4"
-          description={t('label.no-execution-runs-found')}
+          description={t('message.no-execution-runs-found')}
         />
       ) : (
         <Row className="w-full">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
index 9f9b7802fbc..549ffbe1f52 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
@@ -251,11 +251,10 @@ const GlossaryTermTab = ({
               : NO_PERMISSION_FOR_ACTION
           }>
           <Button
-            ghost
-            className="m-t-xs"
+            className="m-t-md"
             data-testid="add-new-tag-button"
             disabled={!createGlossaryTermPermission}
-            size="small"
+            size="middle"
             type="primary"
             onClick={handleAddGlossaryTermClick}>
             {t('label.add-entity', { entity: t('label.term-lowercase') })}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx
index 77545d17c34..ef9c09eb3b5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx
@@ -11,9 +11,10 @@
  *  limitations under the License.
  */
 
-import { Button as ButtonAntd, Card, Col, Row, Space, Tooltip } from 'antd';
+import { Button, Card, Col, Row, Space, Tooltip } from 'antd';
 import { isEmpty } from 'lodash';
 import React, { Fragment, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link, useHistory } from 'react-router-dom';
 import {
   getServiceDetailsPath,
@@ -39,7 +40,6 @@ import {
   getResourceEntityFromServiceCategory,
 } from '../../utils/ServiceUtils';
 import { useAuthContext } from '../authentication/auth-provider/AuthProvider';
-import { Button } from '../buttons/Button/Button';
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
 import NextPrevious from '../common/next-previous/NextPrevious';
 import RichTextEditorPreviewer from '../common/rich-text-editor/RichTextEditorPreviewer';
@@ -62,6 +62,7 @@ const Services = ({
   currentPage,
   onPageChange,
 }: ServicesProps) => {
+  const { t } = useTranslation();
   const { isAuthDisabled } = useAuthContext();
   const history = useHistory();
   const handleAddServiceClick = () => {
@@ -113,18 +114,21 @@ const Services = ({
                 placement="left"
                 title={
                   addServicePermission
-                    ? 'Add Service'
+                    ? t('label.add-entity', {
+                        entity: t('label.service'),
+                      })
                     : NO_PERMISSION_FOR_ACTION
                 }>
                 <Button
-                  className="tw-h-8 tw-rounded tw-mb-2"
+                  className="m-b-xs"
                   data-testid="add-service-button"
                   disabled={!addServicePermission && !isAuthDisabled}
-                  size="small"
-                  theme="primary"
-                  variant="contained"
+                  size="middle"
+                  type="primary"
                   onClick={handleAddServiceClick}>
-                  Add New Service
+                  {t('label.add-new-entity', {
+                    entity: t('label.service'),
+                  })}
                 </Button>
               </Tooltip>
             </Space>
@@ -167,14 +171,14 @@ const Services = ({
                               />
                             ) : (
                               <span className="tw-no-description">
-                                No description
+                                {t('label.no-description')}
                               </span>
                             )}
                           </div>
                           {getOptionalFields(service, serviceName)}
                         </div>
                         <div className="" data-testid="service-type">
-                          <label className="tw-mb-0">Type:</label>
+                          <label className="tw-mb-0">{t('label.type')}:</label>
                           <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
                             {service.serviceType}
                           </span>
@@ -212,18 +216,22 @@ const Services = ({
                 placement="left"
                 title={
                   addServicePermission
-                    ? 'Add Service'
+                    ? t('label.add-entity', {
+                        entity: t('label.service'),
+                      })
                     : NO_PERMISSION_FOR_ACTION
                 }>
-                <ButtonAntd
+                <Button
                   ghost
                   data-testid="add-service-button"
                   disabled={!addServicePermission}
                   size="small"
                   type="primary"
                   onClick={handleAddServiceClick}>
-                  Add new {servicesDisplayName[serviceName]}
-                </ButtonAntd>
+                  {t('label.add-new-entity', {
+                    entity: servicesDisplayName[serviceName],
+                  })}
+                </Button>
               </Tooltip>
             }
             doc={CONNECTORS_DOCS}
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
index a95cd562d27..a5cf226f17c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
@@ -13,6 +13,7 @@
     "activity-lowercase-plural": "activities",
     "add": "Add",
     "add-a-new-service": "Add a New Service",
+    "add-custom-entity-property": "Add Custom {{entity}} Property",
     "add-deploy": "Add & Deploy",
     "add-entity": "Add {{entity}}",
     "add-glossary": "Add Glossary",
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
index bbb33afafed..c039a25e176 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
@@ -11,9 +11,8 @@
  *  limitations under the License.
  */
 
-import { Button as ButtonAntd, Col, Row, Tooltip } from 'antd';
+import { Button, Col, Row, Tooltip } from 'antd';
 import { AxiosError } from 'axios';
-import { Button } from 'components/buttons/Button/Button';
 import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
 import TabsPane from 'components/common/TabsPane/TabsPane';
 import { CustomPropertyTable } from 'components/CustomEntityDetail/CustomPropertyTable';
@@ -27,7 +26,8 @@ import {
 import SchemaEditor from 'components/schema-editor/SchemaEditor';
 import { compare } from 'fast-json-patch';
 import { isEmpty, isUndefined } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
 import { getTypeByFQN, updateType } from 'rest/metadataTypeAPI';
 import {
@@ -47,6 +47,7 @@ import { showErrorToast } from '../../utils/ToastUtils';
 import './CustomPropertiesPageV1.less';
 
 const CustomEntityDetailV1 = () => {
+  const { t } = useTranslation();
   const { tab } = useParams<{ [key: string]: string }>();
   const history = useHistory();
 
@@ -141,19 +142,22 @@ const CustomEntityDetailV1 = () => {
     }
   };
 
-  const getCustomPageHeader = useCallback(() => {
+  const customPageHeader = useMemo(() => {
     switch (tabAttributePath) {
       case ENTITY_PATH.tables:
         return PAGE_HEADERS.TABLES_CUSTOM_ATTRIBUTES;
+
       case ENTITY_PATH.topics:
         return PAGE_HEADERS.TOPICS_CUSTOM_ATTRIBUTES;
+
       case ENTITY_PATH.dashboards:
         return PAGE_HEADERS.DASHBOARD_CUSTOM_ATTRIBUTES;
+
       case ENTITY_PATH.pipelines:
         return PAGE_HEADERS.PIPELINES_CUSTOM_ATTRIBUTES;
+
       case ENTITY_PATH.mlmodels:
         return PAGE_HEADERS.ML_MODELS_CUSTOM_ATTRIBUTES;
-
       default:
         return PAGE_HEADERS.TABLES_CUSTOM_ATTRIBUTES;
     }
@@ -191,7 +195,7 @@ const CustomEntityDetailV1 = () => {
       data-testid="custom-entity-container"
       gutter={[16, 16]}>
       <Col span={24}>
-        <PageHeader data={getCustomPageHeader()} />
+        <PageHeader data={customPageHeader} />
       </Col>
       <Col className="global-settings-tabs" span={24}>
         <TabsPane
@@ -216,15 +220,23 @@ const CustomEntityDetailV1 = () => {
               <ErrorPlaceHolder
                 buttons={
                   <Tooltip
-                    title={editPermission ? 'Add' : NO_PERMISSION_FOR_ACTION}>
-                    <ButtonAntd
+                    title={
+                      editPermission
+                        ? t('label.add-custom-entity-property', {
+                            entity: customPageHeader.header,
+                          })
+                        : NO_PERMISSION_FOR_ACTION
+                    }>
+                    <Button
                       ghost
                       data-testid="add-field-button"
                       disabled={!editPermission}
                       type="primary"
                       onClick={() => handleAddProperty()}>
-                      Add Property
-                    </ButtonAntd>
+                      {t('label.add-entity', {
+                        entity: t('label.property'),
+                      })}
+                    </Button>
                   </Tooltip>
                 }
                 dataTestId="custom-properties-no-data"
@@ -237,15 +249,24 @@ const CustomEntityDetailV1 = () => {
             <div data-testid="entity-custom-fields">
               <div className="flex justify-end">
                 <Tooltip
-                  title={editPermission ? 'Add' : NO_PERMISSION_FOR_ACTION}>
+                  placement="topRight"
+                  title={
+                    editPermission
+                      ? t('label.add-custom-entity-property', {
+                          entity: customPageHeader.header,
+                        })
+                      : NO_PERMISSION_FOR_ACTION
+                  }>
                   <Button
                     className="m-b-md p-y-xss p-x-xs rounded-4"
                     data-testid="add-field-button"
                     disabled={!editPermission}
-                    size="custom"
-                    theme="primary"
+                    size="middle"
+                    type="primary"
                     onClick={() => handleAddProperty()}>
-                    Add Property
+                    {t('label.add-entity', {
+                      entity: t('label.property'),
+                    })}
                   </Button>
                 </Tooltip>
               </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx
index 0c05a2f23f3..72dae241c3a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx
@@ -14,7 +14,7 @@
 import { Button, Col, Menu, MenuProps, Row, Tooltip, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import { ReactComponent as IconFolder } from 'assets/svg/folder.svg';
-import { ReactComponent as PlusIcon } from 'assets/svg/plus-primery.svg';
+import { ReactComponent as PlusIcon } from 'assets/svg/plus-primary.svg';
 import LeftPanelCard from 'components/common/LeftPanelCard/LeftPanelCard';
 import Searchbar from 'components/common/searchbar/Searchbar';
 import { usePermissionProvider } from 'components/PermissionProvider/PermissionProvider';
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
index c4fd7e9aa4a..201236ea0f7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
@@ -234,10 +234,10 @@ const GlossaryPage = () => {
       <ErrorPlaceHolder
         buttons={
           <Button
-            ghost
-            className="tw-h-8 tw-rounded tw-my-3"
+            className="rounded-4 m-y-md"
             data-testid="add-new-glossary"
             disabled={!createGlossaryPermission}
+            size="middle"
             type="primary"
             onClick={handleAddGlossaryClick}>
             {t('label.add-new-entity', { entity: t('label.glossary') })}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
index 2edaf6ccf3e..b7039821275 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
@@ -60,6 +60,7 @@ import {
   patchClassification,
   patchTag,
 } from 'rest/tagAPI';
+import { ReactComponent as PlusIcon } from '../../assets/svg/plus-primary.svg';
 import {
   INITIAL_PAGING_VALUE,
   PAGE_SIZE,
@@ -619,21 +620,22 @@ const TagsPage = () => {
                         })
                       : t('message.no-permission-for-action')
                   }>
-                  <button
-                    className="tw--mt-1 tw-w-full tw-flex-center tw-gap-2 tw-py-1 tw-text-primary tw-border tw-rounded-md tw-text-center"
+                  <Button
+                    block
+                    className=" text-primary"
                     data-testid="add-classification"
                     disabled={!createClassificationPermission}
+                    icon={<PlusIcon className="anticon" />}
                     onClick={() => {
                       setIsAddingClassification((prevState) => !prevState);
                       setErrorDataClassification(undefined);
                     }}>
-                    <SVGIcons alt="plus" icon={Icons.ICON_PLUS_PRIMARY} />{' '}
                     <span>
                       {t('label.add-entity', {
                         entity: t('label.classification'),
                       })}
                     </span>
-                  </button>
+                  </Button>
                 </Tooltip>
               </div>
             </div>
@@ -877,22 +879,33 @@ const TagsPage = () => {
                       })}
                     </Button>
                   </Tooltip>
-
-                  <Button
-                    className="tw-h-8 tw-rounded tw-ml-2"
-                    data-testid="delete-classification-or-tag"
-                    disabled={
-                      currentClassification.provider === ProviderType.System ||
-                      !classificationPermissions.Delete
-                    }
-                    size="small"
-                    onClick={() => {
-                      deleteTagHandler();
-                    }}>
-                    {t('label.delete-entity', {
-                      entity: t('label.classification'),
-                    })}
-                  </Button>
+                  <Tooltip
+                    title={
+                      !(
+                        currentClassification.provider ===
+                          ProviderType.System ||
+                        !classificationPermissions.Delete
+                      )
+                        ? t('label.delete-entity', {
+                            entity: t('label.classification'),
+                          })
+                        : t('message.no-permission-for-action')
+                    }>
+                    <Button
+                      className="add-new-tag-btn tw-ml-2"
+                      data-testid="delete-classification-or-tag"
+                      disabled={
+                        currentClassification.provider ===
+                          ProviderType.System ||
+                        !classificationPermissions.Delete
+                      }
+                      size="small"
+                      onClick={() => deleteTagHandler()}>
+                      {t('label.delete-entity', {
+                        entity: t('label.classification'),
+                      })}
+                    </Button>
+                  </Tooltip>
                 </div>
               </Space>
             )}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
index b7fab5f1b76..43728987b8e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
@@ -164,7 +164,7 @@ import IconPaperPlane from '../assets/svg/paper-plane.svg';
 import IconPendingBadge from '../assets/svg/pending-badge.svg';
 import IconPipelineGrey from '../assets/svg/pipeline-grey.svg';
 import IconPipeline from '../assets/svg/pipeline.svg';
-import IconPlusPrimery from '../assets/svg/plus-primery.svg';
+import IconPlusPrimary from '../assets/svg/plus-primary.svg';
 import IconPlus from '../assets/svg/plus.svg';
 import IconPolicies from '../assets/svg/policies.svg';
 import IconProfilerColor from '../assets/svg/profiler-color.svg';
@@ -777,7 +777,7 @@ const SVGIcons: FunctionComponent<Props> = ({ icon, ...props }: Props) => {
 
       break;
     case Icons.ICON_PLUS_PRIMARY:
-      IconComponent = IconPlusPrimery;
+      IconComponent = IconPlusPrimary;
 
       break;
     case Icons.ICON_MINUS: