UI feedbacks (#13684)

* fix: minor ui feedbacks

* fix: feedbacks

* fix: css on explore

* fix: domain cypress

* fix: profile picture alignment issues

openmetadata-ui/src/main/resources/ui/cypress/common/DomainUtils.js

@@ -132,6 +132,10 @@ export const updateAssets = (domainObj) => {
 
   cy.get('[data-testid="domain-link"]').should('contain', domainObj.name);
 
+  cy.get('[data-testid="app-bar-item-domain"]')
+    .should('be.visible')
+    .click({ force: true });
+
   goToAssetsTab(domainObj);
 
   cy.get('.assets-data-container [data-testid="entity-header-display-name"]')
@@ -147,7 +151,7 @@ export const removeAssets = (domainObj) => {
   verifyResponseStatusCode('@assetTab', 200);
 
   interceptURL('GET', '/api/v1/domain*', 'domains');
-  interceptURL('PATCH', '/api/v1/table/*', 'patchDomain');
+  interceptURL('PATCH', '/api/v1/tables/*', 'patchDomain');
 
   cy.get('[data-testid="entity-header-display-name"]')
     .contains(entity.term)
@@ -160,6 +164,10 @@ export const removeAssets = (domainObj) => {
   cy.get('[data-testid="remove-owner"]').click();
   verifyResponseStatusCode('@patchDomain', 200);
 
+  cy.get('[data-testid="app-bar-item-domain"]')
+    .should('be.visible')
+    .click({ force: true });
+
   goToAssetsTab(domainObj);
   cy.contains('Adding a new Asset is easy, just give it a spin!').should(
     'be.visible'

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

@@ -57,7 +57,7 @@ describe('Domain page should work properly', () => {
     updateDomainDetails(DOMAIN_1);
   });
 
-  it.skip('Assets Tab should work properly', () => {
+  it('Assets Tab should work properly', () => {
     updateAssets(DOMAIN_1);
   });
 

openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsDetailsPage/DataProductsDetailsPage.component.tsx

@@ -289,7 +289,7 @@ const DataProductsDetailsPage = ({
                     entityType: t('label.data-product'),
                   }
                 )}
-                icon={<DeleteIcon color={DE_ACTIVE_COLOR} width="18px" />}
+                icon={<DeleteIcon color={DE_ACTIVE_COLOR} width="14px" />}
                 id="delete-button"
                 name={t('label.delete')}
               />

openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainExperts/DomainExperts.component.tsx

@@ -65,6 +65,7 @@ function DomainExperts({
             id={expert.id}
             name={expert.name ?? ''}
             textClass="text-xs"
+            type="circle"
             width="20"
           />
           <Link to={getUserPath(expert.name ?? '')}>

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

@@ -91,9 +91,7 @@ function GlossaryTermSummary({
               <Typography.Text
                 className="text-grey-body"
                 data-testid="no-reviewer-header">
-                {t('label.no-entity', {
+                {t('label.no-reviewer')}
-                  entity: t('label.children-lowercase'),
-                })}
               </Typography.Text>
             )}
           </Col>

openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreV1.style.less

@@ -68,6 +68,7 @@
   .custom-menu.ant-menu-root.ant-menu-inline {
     .ant-menu-item {
       height: 40px;
+      width: 100%;
     }
   }
 }

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryDetailsRightPanel/GlossaryDetailsRightPanel.component.tsx

@@ -117,6 +117,7 @@ const GlossaryDetailsRightPanel = ({
               id={owner?.id || ''}
               name={owner?.name ?? ''}
               textClass="text-xs"
+              type="circle"
               width="20"
             />
             <Link

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryDetailsRightPanel/GlossaryReviewers.tsx

@@ -73,6 +73,7 @@ function GlossaryReviewers({
             id={reviewer.id}
             name={reviewer.name ?? ''}
             textClass="text-xs"
+            type="circle"
             width="20"
           />
           <Link to={getUserPath(reviewer.name ?? '')}>

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx

@@ -255,7 +255,7 @@ const TagsContainerV2 = ({
               : t('label.request-tag-plural')
           }>
           <IconRequest
-            className="cursor-pointer"
+            className="cursor-pointer align-middle"
             data-testid="request-entity-tags"
             height={14}
             name="request-tags"
@@ -276,7 +276,7 @@ const TagsContainerV2 = ({
             entity: t('label.conversation'),
           })}>
           <IconComments
-            className="cursor-pointer"
+            className="cursor-pointer align-middle"
             data-testid="tag-thread"
             height={14}
             name="comments"
@@ -306,7 +306,7 @@ const TagsContainerV2 = ({
               {!isEmpty(tags?.[tagType]) && !isEditTags && (
                 <Col>
                   <EditIcon
-                    className="cursor-pointer"
+                    className="cursor-pointer align-middle"
                     color={DE_ACTIVE_COLOR}
                     data-testid="edit-button"
                     width="14px"
@@ -341,7 +341,7 @@ const TagsContainerV2 = ({
     () =>
       permission && !isEmpty(tags?.[tagType]) ? (
         <EditIcon
-          className="hover-cell-icon cursor-pointer"
+          className="hover-cell-icon cursor-pointer align-middle"
           data-testid="edit-button"
           height={14}
           name={t('label.edit')}

openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx

@@ -127,7 +127,7 @@ const UserPopOverCard: FC<Props> = ({ children, userName, type = 'user' }) => {
 
     return (
       <Space align="center">
-        <ProfilePicture id="" name={userName} width="24" />
+        <ProfilePicture id="" name={userName} type="circle" width="24" />
         <div className="self-center">
           <Button
             className="text-info p-0"

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -589,7 +589,7 @@
     "mark-deleted-entity": "{{entity}} als gelöscht markieren",
     "mark-deleted-table-plural": "Gelöschte Tabellen markieren",
     "markdown-guide": "Markdown-Leitfaden",
-    "market-place": "Market Place",
+    "market-place": "Marketplace",
     "matches": "Entspricht",
     "max": "Maximal",
     "maximum-size-lowercase": "Maximale Größe",

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

@@ -589,7 +589,7 @@
     "mark-deleted-entity": "Mark Deleted {{entity}}",
     "mark-deleted-table-plural": "Mark Deleted Tables",
     "markdown-guide": "Markdown Guide",
-    "market-place": "Market Place",
+    "market-place": "Marketplace",
     "matches": "Matches",
     "max": "Max",
     "maximum-size-lowercase": "maximum size",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -589,7 +589,7 @@
     "mark-deleted-entity": "Marcar {{entity}} como Eliminado",
     "mark-deleted-table-plural": "Marcar Tablas como Eliminadas",
     "markdown-guide": "Guía de Markdown",
-    "market-place": "Market Place",
+    "market-place": "Marketplace",
     "matches": "Coincide",
     "max": "Máx",
     "maximum-size-lowercase": "tamaño máximo",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -589,7 +589,7 @@
     "mark-deleted-entity": "Marquer {{entity}} Supprimé·e",
     "mark-deleted-table-plural": "Marquer les Tables Supprimé·e",
     "markdown-guide": "Guide Markdown",
-    "market-place": "Market Place",
+    "market-place": "Marketplace",
     "matches": "Correspond",
     "max": "Max",
     "maximum-size-lowercase": "taille maximum",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -589,7 +589,7 @@
     "mark-deleted-entity": "Mark Deleted {{entity}}",
     "mark-deleted-table-plural": "Mark Deleted Tables",
     "markdown-guide": "Markdownガイド",
-    "market-place": "Market Place",
+    "market-place": "Marketplace",
     "matches": "マッチ",
     "max": "最大",
     "maximum-size-lowercase": "最大サイズ",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json

@@ -589,7 +589,7 @@
     "mark-deleted-entity": "Mark Deleted {{entity}}",
     "mark-deleted-table-plural": "Marcar tabelas excluídas",
     "markdown-guide": "Guia Markdown",
-    "market-place": "Market Place",
+    "market-place": "Marketplace",
     "matches": "Combinar",
     "max": "Max",
     "maximum-size-lowercase": "tamanho máximo",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json

@@ -589,7 +589,7 @@
     "mark-deleted-entity": "Отметить как удаленное {{entity}}",
     "mark-deleted-table-plural": "Отметить удаленные таблицы",
     "markdown-guide": "Markdown Guide",
-    "market-place": "Market Place",
+    "market-place": "Marketplace",
     "matches": "Совпадения",
     "max": "Максимум",
     "maximum-size-lowercase": "максимальный размер",

openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json

@@ -589,7 +589,7 @@
     "mark-deleted-entity": "标记已删除的{{entity}}",
     "mark-deleted-table-plural": "标记已删除的表",
     "markdown-guide": "Markdown 指南",
-    "market-place": "Market Place",
+    "market-place": "Marketplace",
     "matches": "匹配",
     "max": "最大值",
     "maximum-size-lowercase": "最大",

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

@@ -20,9 +20,14 @@ import { ReactComponent as HeadingIcon } from '../../assets/svg/marketplace-head
 import ApplicationCard from '../../components/Applications/ApplicationCard/ApplicationCard.component';
 import NextPrevious from '../../components/common/next-previous/NextPrevious';
 import { PagingHandlerParams } from '../../components/common/next-previous/NextPrevious.interface';
+import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
 import PageLayoutV1 from '../../components/containers/PageLayoutV1';
 import PageHeader from '../../components/header/PageHeader.component';
 import Loader from '../../components/Loader/Loader';
+import {
+  GlobalSettingOptions,
+  GlobalSettingsMenuCategory,
+} from '../../constants/GlobalSettings.constants';
 import { PAGE_HEADERS } from '../../constants/PageHeaders.constant';
 import { AppMarketPlaceDefinition } from '../../generated/entity/applications/marketplace/appMarketPlaceDefinition';
 import { Paging } from '../../generated/type/paging';
@@ -30,7 +35,10 @@ import { usePaging } from '../../hooks/paging/usePaging';
 import { getMarketPlaceApplicationList } from '../../rest/applicationMarketPlaceAPI';
 import { showPagination } from '../../utils/CommonUtils';
 import { getEntityName } from '../../utils/EntityUtils';
-import { getMarketPlaceAppDetailsPath } from '../../utils/RouterUtils';
+import {
+  getMarketPlaceAppDetailsPath,
+  getSettingPath,
+} from '../../utils/RouterUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import './market-place.less';
 
@@ -95,7 +103,27 @@ const MarketPlacePage = () => {
     <PageLayoutV1
       className="p-0 marketplace-page"
       pageTitle={t('label.market-place')}>
-      <Row className="marketplace-header" justify="center">
+      <Row className="marketplace-header">
+        <Col span={24}>
+          <TitleBreadcrumb
+            className="p-md"
+            titleLinks={[
+              {
+                name: t('label.application-plural'),
+                url: getSettingPath(
+                  GlobalSettingsMenuCategory.INTEGRATIONS,
+                  GlobalSettingOptions.APPLICATIONS
+                ),
+              },
+              {
+                name: t('label.market-place'),
+                url: '',
+              },
+            ]}
+          />
+        </Col>
+        <Col span={24}>
+          <Row className="marketplace-header-row" justify="center">
             <Col span={18}>
               <div className="d-flex items-center justify-between h-full">
                 <PageHeader data={PAGE_HEADERS.APPLICATION} />
@@ -103,6 +131,9 @@ const MarketPlacePage = () => {
               </div>
             </Col>
           </Row>
+        </Col>
+      </Row>
+
       <Row className="m-t-lg" justify="center">
         <Col span={18}>
           <div className="d-flex flex-wrap gap-3">

openmetadata-ui/src/main/resources/ui/src/pages/MarketPlacePage/market-place.less

@@ -15,10 +15,12 @@
   .marketplace-header {
     height: 300px;
     background-color: rgba(9, 80, 197, 0.05);
-    padding: 0 4rem;
     .heading {
       font-size: 30px;
     }
+    .marketplace-header-row {
+      padding: 0 4rem;
+    }
   }
   .page-layout-v1-center {
     padding: 0;

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less

@@ -17,3 +17,9 @@
   padding: 2px 3px;
   margin: 1px 2px;
 }
+
+.assignee-item {
+  .profile-image {
+    vertical-align: middle;
+  }
+}

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx

@@ -17,6 +17,7 @@ import { groupBy, isUndefined } from 'lodash';
 import React, { FC, useMemo } from 'react';
 import { ReactComponent as TeamIcon } from '../../../assets/svg/teams-grey.svg';
 import { UserTag } from '../../../components/common/UserTag/UserTag.component';
+import { UserTagSize } from '../../../components/common/UserTag/UserTag.interface';
 import { OwnerType } from '../../../enums/user.enum';
 import { Option } from '../TasksPage.interface';
 import './Assignee.less';
@@ -72,7 +73,12 @@ const Assignees: FC<Props> = ({
           ...user,
           label: (
             <div data-testid={`assignee-option-${user.label}`}>
-              <UserTag id={user.value} name={user.label} />
+              <UserTag
+                className="assignee-item"
+                id={user.value}
+                name={user.label}
+                size={UserTagSize.small}
+              />
             </div>
           ),
         })),
@@ -85,7 +91,7 @@ const Assignees: FC<Props> = ({
   return (
     <Select
       showSearch
-      className="ant-select-custom"
+      className="ant-select-custom select-assignee"
       data-testid="select-assignee"
       defaultActiveFirstOption={false}
       filterOption={false}

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

@@ -318,10 +318,6 @@ a[href].link-text-grey,
   white-space: nowrap;
 }
 
-.gap-2 {
-  gap: 0.5rem /* 8px */;
-}
-
 /* SSO layout style  */
 .sso-container {
   width: 100%;

openmetadata-ui/src/main/resources/ui/src/styles/components/profile-picture.less

@@ -18,7 +18,7 @@
 
 .profile-image svg,
 .profile-image img {
-  display: inline-block;
+  display: flex;
   height: 100%;
   width: 100%;
 }

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

@@ -44,6 +44,7 @@ export const getOwner = (
           id={owner?.id || ''}
           name={owner?.name ?? ''}
           textClass="text-xs"
+          type="circle"
           width="20"
         />
         <Link

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

@@ -90,7 +90,12 @@ import {
   getTableFQNFromColumnFQN,
   sortTagsCaseInsensitive,
 } from './CommonUtils';
-import { getGlossaryPath, getSettingPath } from './RouterUtils';
+import {
+  getDataProductsDetailsPath,
+  getDomainDetailsPath,
+  getGlossaryPath,
+  getSettingPath,
+} from './RouterUtils';
 import { getSearchIndexDetailsPath } from './SearchIndexUtils';
 import { serviceTypeLogo } from './ServiceUtils';
 import { getDecodedFqn, ordinalize } from './StringsUtils';
@@ -286,6 +291,14 @@ export const getEntityLink = (
     case SearchIndex.SEARCH_INDEX:
       return getSearchIndexDetailsPath(fullyQualifiedName);
 
+    case EntityType.DOMAIN:
+    case SearchIndex.DOMAIN:
+      return getDomainDetailsPath(fullyQualifiedName);
+
+    case EntityType.DATA_PRODUCT:
+    case SearchIndex.DATA_PRODUCT:
+      return getDataProductsDetailsPath(fullyQualifiedName);
+
     case SearchIndex.TABLE:
     case EntityType.TABLE:
     default: