UI #8513: UI improvements 0.13 Part-3 (#8889)

* Removed highlighting on hover of data cards for data assets other than table

* Fixed alignment issues in Executions tab for pipelines

* Entity summary panel profiler data styling changed

* Added vector svg to use in Executions tab

* Changed OM logo to show on services page for Openmetadata Service

* Fixed Breadcrumb typo for add ingestion page
Replaced 'entity' with 'data asset'
Localisation

* Fixed version page bug

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>

openmetadata-ui/src/main/resources/ui/src/assets/svg/vector.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.1251 0.467894C9.42488 0.767576 9.59329 1.17398 9.59329 1.59773C9.59329 2.02148 9.42488 2.42788 9.1251 2.72756L3.85937 7.99001L9.1251 13.2525C9.27783 13.3999 9.39965 13.5762 9.48346 13.7712C9.56726 13.9662 9.61138 14.1759 9.61322 14.388C9.61507 14.6002 9.57461 14.8107 9.4942 15.0071C9.4138 15.2035 9.29507 15.3819 9.14492 15.5319C8.99478 15.682 8.81624 15.8006 8.61972 15.881C8.4232 15.9613 8.21264 16.0018 8.00032 15.9999C7.78799 15.9981 7.57816 15.954 7.38307 15.8703C7.18798 15.7865 7.01153 15.6648 6.86402 15.5121L0.467745 9.11984C0.167966 8.82016 -0.000440012 8.41376 -0.000439993 7.99001C-0.000439975 7.56626 0.167967 7.15986 0.467745 6.86017L6.86402 0.467893C7.16389 0.168302 7.57055 -8.9235e-08 7.99456 -7.07122e-08C8.41858 -5.21895e-08 8.82523 0.168302 9.1251 0.467894Z" fill="#37352F"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/components/Execution/TreeView/TreeViewTab.component.tsx

@@ -15,9 +15,9 @@ import Tree from 'antd/lib/tree';
 import { isEmpty } from 'lodash';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ReactComponent as ArrowSvg } from '../../../assets/svg/vector.svg';
 import { PipelineStatus, Task } from '../../../generated/entity/data/pipeline';
 import { getTreeData, getTreeViewData } from '../../../utils/executionUtils';
-import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { formatDateTimeFromSeconds } from '../../../utils/TimeUtils';
 import './tree-view-tab.less';
 
@@ -50,22 +50,23 @@ const TreeViewTab = ({
 
   return (
     <Card>
-      <Row align="middle" className="m-b-lg m-t-md" justify="center">
+      <Row
-        <SVGIcons
+        align="middle"
-          alt="result"
+        className="m-b-lg m-t-md"
-          className="tw-w-4 transform-180 m-r-7 cursor-pointer"
+        gutter={16}
-          icon={Icons.ARROW_RIGHT}
+        justify="center">
-        />
+        <Col>
-        <Typography.Title className="p-b-0" level={5}>
+          <ArrowSvg className="cursor-pointer" />
-          {formatDateTimeFromSeconds(startTime)} to{' '}
+        </Col>
-          {formatDateTimeFromSeconds(endTime)}
+        <Col>
-        </Typography.Title>
+          <Typography.Title className="p-b-0 m-b-0" level={5}>
-
+            {formatDateTimeFromSeconds(startTime)} to{' '}
-        <SVGIcons
+            {formatDateTimeFromSeconds(endTime)}
-          alt="result"
+          </Typography.Title>
-          className="tw-w-4 m-l-7 cursor-pointer"
+        </Col>
-          icon={Icons.ARROW_RIGHT}
+        <Col>
-        />
+          <ArrowSvg className=" cursor-pointer transform-180" />
+        </Col>
       </Row>
 
       {isEmpty(viewData) && (

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx

@@ -90,14 +90,13 @@ export default function EntitySummaryPanel({
                     </Typography.Text>
                   </Col>
                   <Col span={24}>
-                    <Typography.Title
+                    <Typography.Text
                       className={classNames(
                         'summary-panel-statistics-count',
                         field.className
-                      )}
+                      )}>
-                      level={3}>
                       {field.value}
-                    </Typography.Title>
+                    </Typography.Text>
                   </Col>
                 </Row>
               </Col>

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.style.less

@@ -39,8 +39,9 @@
 
   .summary-panel-statistics-count {
     color: #37352f;
-    line-height: 29px;
+    font-size: 18px;
-    font-weight: 600;
+    line-height: 24px;
+    font-weight: 700;
   }
 
   .text-gray {

openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx

@@ -157,7 +157,7 @@ const Services = ({
                         <div
                           className="tw-flex tw-justify-end"
                           data-testid="service-icon">
-                          {getServiceLogo(service.serviceType || '', 'tw-h-8')}
+                          {getServiceLogo(service.serviceType || '', 'h-7')}
                         </div>
                       </div>
                     </div>

openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx

@@ -31,7 +31,7 @@ const stepsData = [
     step: 1,
     title: 'Ingest Sample Data',
     description:
-      'Run sample data to ingest sample entities into your OpenMetadata.',
+      'Run sample data to ingest sample data assets into your OpenMetadata.',
     link: 'https://docs.open-metadata.org/openmetadata/ingestion/workflows/profiler',
   },
   {

openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.less

@@ -14,7 +14,7 @@
 @background-color: #ffffff;
 @highlidghted-border-color: #1890ff;
 
-.table-data-card-container {
+.data-asset-info-card-container {
   border: 1px solid @border-color;
   border-radius: 6px;
   background-color: @background-color;

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

@@ -13,13 +13,15 @@
 
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
 import { isString, startCase, uniqueId } from 'lodash';
 import { ExtraInfo } from 'Models';
 import React, { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import AppState from '../../../AppState';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { ROUTES } from '../../../constants/constants';
+import { tabsInfo } from '../../../constants/explore.constants';
 import { EntityType } from '../../../enums/entity.enum';
 import { SearchIndex } from '../../../enums/search.enum';
 import { CurrentTourPageType } from '../../../enums/tour.enum';
@@ -58,6 +60,7 @@ const TableDataCardV2: React.FC<TableDataCardPropsV2> = ({
   handleSummaryPanelDisplay,
 }) => {
   const location = useLocation();
+  const { tab } = useParams<{ tab: string }>();
 
   const otherDetails = useMemo(() => {
     const _otherDetails: ExtraInfo[] = [
@@ -114,7 +117,12 @@ const TableDataCardV2: React.FC<TableDataCardPropsV2> = ({
 
   return (
     <div
-      className="table-data-card-container"
+      className={classNames(
+        'data-asset-info-card-container',
+        tab === tabsInfo.table_search_index.path
+          ? 'table-data-card-container'
+          : ''
+      )}
       data-testid="table-data-card"
       id={id}
       onClick={() => {

openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts

@@ -67,6 +67,7 @@ import trino from '../assets/img/service-icon-trino.png';
 import vertica from '../assets/img/service-icon-vertica.png';
 import dashboardDefault from '../assets/svg/dashboard.svg';
 import iconDefaultService from '../assets/svg/default-service-icon.svg';
+import logo from '../assets/svg/logo-monogram.svg';
 import pipelineDefault from '../assets/svg/pipeline.svg';
 import plus from '../assets/svg/plus.svg';
 import mlflow from '../assets/svg/service-icon-mlflow.svg';
@@ -125,6 +126,7 @@ export const DAGSTER = dagster;
 export const FIVETRAN = fivetran;
 export const AMUNDSEN = amundsen;
 export const ATLAS = atlas;
+export const LOGO = logo;
 
 export const AIRFLOW = airflow;
 export const PREFECT = prefect;

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

@@ -65,7 +65,7 @@
     "enter-display-name": "Enter display name",
     "edit-display-name": "Edit Display Name",
     "enter-name": "Enter Name",
-    "name-already-exist": "Name already exists",
+    "entity-already-exists": "{{entity}} already exists.",
     "special-character-not-allowed": "Special characters are not allowed",
     "add-team": "Add Team",
     "close-with-comment": "Close with comment",
@@ -190,9 +190,9 @@
     "most-recent-session": "Most Recent Session",
     "total-session": "Total Sessions",
     "average-session": "Avg. Session Time",
-    "entity-name": "Entity Name",
+    "data-asset-name": "Data Asset Name",
     "owner": "Owner",
-    "entity-type": "Entity Type",
+    "data-asset-type": "Data Asset Type",
     "total-views": "Total Views",
     "unique-views": "Unique Views",
     "recent-runs": "Recent Runs",
@@ -309,6 +309,7 @@
     "server": "Server",
     "feature-plural": "Features",
     "detail-plural": "Details",
+    "add-workflow-ingestion": "Add {{workflow}} Ingestion",
     "clearAll": "Clear All",
     "view-less": "View less",
     "view-more": "View more"

openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx

@@ -15,6 +15,7 @@ import { AxiosError } from 'axios';
 import { capitalize, startCase } from 'lodash';
 import { ServiceTypes } from 'Models';
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
 import {
   addIngestionPipeline,
@@ -57,6 +58,7 @@ import { showErrorToast } from '../../utils/ToastUtils';
 const AddIngestionPage = () => {
   const { ingestionType, serviceFQN, serviceCategory } =
     useParams<{ [key: string]: string }>();
+  const { t } = useTranslation();
   const history = useHistory();
   const [serviceData, setServiceData] = useState<DataObj>();
   const [activeIngestionStep, setActiveIngestionStep] = useState(1);
@@ -141,7 +143,7 @@ const AddIngestionPage = () => {
           if (err.response?.status === 409) {
             showErrorToast(
               err,
-              jsonData['api-error-messages']['entity-already-exist-error']
+              t('label.entity-already-exists', { entity: 'Data asset' })
             );
             reject();
           } else {
@@ -229,7 +231,9 @@ const AddIngestionPage = () => {
         activeTitle: true,
       },
       {
-        name: `Add ${capitalize(ingestionType)} Ingestion`,
+        name: t('label.add-workflow-ingestion', {
+          workflow: startCase(ingestionType),
+        }),
         url: '',
         activeTitle: true,
       },

openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx

@@ -124,7 +124,9 @@ const AddTeamForm: React.FC<AddTeamFormType> = ({
                     )
                   )
                 ) {
-                  return Promise.reject(t('label.name-already-exist'));
+                  return Promise.reject(
+                    t('label.entity-already-exists', { entity: 'Name' })
+                  );
                 }
 
                 return Promise.resolve();

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

@@ -499,7 +499,9 @@ export const getFrequentlyJoinedWithColumns = (
   columnName: string,
   joins: Array<ColumnJoins>
 ): Array<JoinedWith> => {
-  return joins.find((join) => join.columnName === columnName)?.joinedWith || [];
+  return (
+    joins?.find((join) => join.columnName === columnName)?.joinedWith || []
+  );
 };
 
 export const getFrequentlyJoinedColumns = (

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

@@ -511,8 +511,8 @@ export const getSummary = (
           {isDeleteUpdated
             .map((field) => {
               return field.newValue
-                ? 'Entity has been deleted'
+                ? 'Data asset has been deleted'
-                : 'Entity has been restored';
+                : 'Data asset has been restored';
             })
             .join(', ')}
         </p>

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

@@ -60,6 +60,7 @@ import {
   IBMDB2,
   KAFKA,
   KINESIS,
+  LOGO,
   LOOKER,
   MARIADB,
   METABASE,
@@ -277,6 +278,9 @@ export const serviceTypeLogo = (type: string) => {
     case MetadataServiceType.Atlas:
       return ATLAS;
 
+    case MetadataServiceType.OpenMetadata:
+      return LOGO;
+
     default: {
       let logo;
       if (serviceTypes.messagingServices.includes(type)) {