Minor: Entity Header certificates Design changes (#20484)

* fixed header certificates

* view source url renamed

* fixed broze medal case sensitivity

* fixed test case and comments

* fixed certification

* fixed certification className

* fixed certificates

* fixed variable usage

---------

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

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx

@@ -553,7 +553,9 @@ export const DataAssetsHeader = ({
                         <Typography.Link
                           href={(dataAsset as Table).sourceUrl}
                           target="_blank">
-                          {t('label.source-url')}
+                          {t('label.view-in-service-type', {
+                            serviceType: (dataAsset as Table).serviceType,
+                          })}
                         </Typography.Link>
                       </Button>
                     </Tooltip>
@@ -627,7 +629,7 @@ export const DataAssetsHeader = ({
                   data-testid="header-tier-container">
                   {tier ? (
                     <div className="d-flex flex-col gap-2">
-                      <div className="d-flex items-center gap-1">
+                      <div className="tier-heading-container d-flex items-center gap-1">
                         <span className="entity-no-tier ">
                           {t('label.tier')}
                         </span>
@@ -654,7 +656,7 @@ export const DataAssetsHeader = ({
                     </div>
                   ) : (
                     <div className="flex items-center flex-col gap-2">
-                      <div className="d-flex items-center gap-1">
+                      <div className="tier-heading-container d-flex items-center gap-1">
                         <span className="entity-no-tier">
                           {t('label.tier')}
                         </span>

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.test.tsx

@@ -17,7 +17,10 @@ import {
   APIEndpoint,
   APIRequestMethod,
 } from '../../../generated/entity/data/apiEndpoint';
-import { Container } from '../../../generated/entity/data/container';
+import {
+  Container,
+  StorageServiceType,
+} from '../../../generated/entity/data/container';
 import { MOCK_TIER_DATA } from '../../../mocks/TableData.mock';
 import { getDataQualityLineage } from '../../../rest/lineageAPI';
 import { getContainerByName } from '../../../rest/storageAPI';
@@ -42,6 +45,7 @@ const mockProps: DataAssetsHeaderProps = {
       name: 's3_storage_sample',
       type: 'storageService',
     },
+    serviceType: 'moc service' as StorageServiceType,
   } as Container,
   entityType: EntityType.CONTAINER,
   permissions: DEFAULT_ENTITY_PERMISSION,
@@ -246,7 +250,9 @@ describe('DataAssetsHeader component', () => {
     expect(sourceUrlButton).toBeInTheDocument();
     expect(sourceUrlLink).toHaveAttribute('href', mockSourceUrl);
     expect(sourceUrlLink).toHaveAttribute('target', '_blank');
-    expect(screen.getByText('label.source-url')).toBeInTheDocument();
+    expect(screen.getByText('label.view-in-service-type')).toBeInTheDocument();
+
+    ``;
   });
 
   it('should not render source URL button when sourceUrl is not present', () => {

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/data-asset-header.less

@@ -124,4 +124,9 @@
   .extra-info-container {
     max-width: 148px;
   }
+  .tier-heading-container {
+    svg {
+      fill: @de-active-color;
+    }
+  }
 }

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx

@@ -112,7 +112,7 @@ const EntityHeaderTitle = ({
       wrap={false}>
       {icon && <Col className="flex-center">{icon}</Col>}
       <Col
-        className={classNames('d-flex flex-col gap-2', {
+        className={classNames('d-flex flex-col gap-1', {
           'w-max-full-140': deleted || badge,
         })}>
         {/* If we do not have displayName name only be shown in the bold from the below code */}

openmetadata-ui/src/main/resources/ui/src/components/common/CertificationTag/CertificationTag.tsx

@@ -27,11 +27,11 @@ const CertificationTag = ({
 }) => {
   if (certification.tagLabel.style?.iconURL) {
     const name = getEntityName(certification.tagLabel);
+    const actualName = certification.tagLabel.name ?? '';
     const tagSrc = getTagImageSrc(certification.tagLabel.style.iconURL);
 
     return (
       <Tooltip
-        className="cursor-pointer"
         title={getTagTooltip(name, certification.tagLabel.description)}
         trigger="hover">
         <div
@@ -50,7 +50,10 @@ const CertificationTag = ({
             src={tagSrc}
           />
           {showName && (
-            <span className="certification-name text-sm font-medium">
+            <span
+              className={classNames('text-sm font-medium', {
+                [`${actualName.toLowerCase()}`]: Boolean(actualName),
+              })}>
               {name}
             </span>
           )}

openmetadata-ui/src/main/resources/ui/src/components/common/CertificationTag/certification-tag.less

@@ -38,7 +38,13 @@
     width: 16px;
     height: 16px;
   }
-  span {
+  span.bronze {
+    color: @red-16;
+  }
+  span.silver {
+    color: @grey-700;
+  }
+  span.gold {
     color: @yellow-11;
   }
 }

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

@@ -1497,6 +1497,7 @@
     "view-definition": "Ansichtsdefinition",
     "view-detail-plural": "Details anzeigen",
     "view-entity": "{{entity}} anzeigen",
+    "view-in-service-type": "In {{serviceType}} anzeigen",
     "view-less": "Weniger anzeigen",
     "view-more": "Mehr anzeigen",
     "view-new-count": "{{count}} Neu anzeigen",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "View Definition",
     "view-detail-plural": "View Details",
     "view-entity": "View {{entity}}",
+    "view-in-service-type": "View in {{serviceType}}",
     "view-less": "View less",
     "view-more": "View more",
     "view-new-count": "View {{count}} new",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "View Definition",
     "view-detail-plural": "Ver detalles",
     "view-entity": "Ver {{entity}}",
+    "view-in-service-type": "Ver en {{serviceType}}",
     "view-less": "Ver menos",
     "view-more": "Ver más",
     "view-new-count": "Ver {{count}} nuevo",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "Définition de la Vue",
     "view-detail-plural": "Voir les détails",
     "view-entity": "Voir la {{entity}}",
+    "view-in-service-type": "Voir dans {{serviceType}}",
     "view-less": "Voir moins",
     "view-more": "Voir Plus",
     "view-new-count": "Voir {{count}} Nouveau",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "Ver definición",
     "view-detail-plural": "Ver detalles",
     "view-entity": "Ver {{entity}}",
+    "view-in-service-type": "Ver en {{serviceType}}",
     "view-less": "Ver menos",
     "view-more": "Ver máis",
     "view-new-count": "Ver {{count}} novos",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "הצג תיאור",
     "view-detail-plural": "הצג פרטים",
     "view-entity": "הצג {{entity}}",
+    "view-in-service-type": "צפה ב-{{serviceType}}",
     "view-less": "הצג פחות",
     "view-more": "הצג עוד",
     "view-new-count": "הצג {{count}} חדש",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "View Definition",
     "view-detail-plural": "詳細を表示",
     "view-entity": "{{entity}}を見る",
+    "view-in-service-type": "{{serviceType}}에서 보기",
     "view-less": "表示を減らす",
     "view-more": "もっと見る",
     "view-new-count": "View {{count}} new",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ko-kr.json

@@ -1497,6 +1497,7 @@
     "view-definition": "정의 보기",
     "view-detail-plural": "View Details",
     "view-entity": "{{entity}} 보기",
+    "view-in-service-type": "View in {{serviceType}}",
     "view-less": "적게 보기",
     "view-more": "더 보기",
     "view-new-count": "{{count}}개 새 항목 보기",

openmetadata-ui/src/main/resources/ui/src/locale/languages/mr-in.json

@@ -1497,6 +1497,7 @@
     "view-definition": "परिभाषा पहा",
     "view-detail-plural": "तपशील पहा",
     "view-entity": "{{entity}} पहा",
+    "view-in-service-type": "{{serviceType}} मध्ये पहा",
     "view-less": "कमी पहा",
     "view-more": "अधिक पहा",
     "view-new-count": "{{count}} नवीन पहा",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "Viewdefinitie",
     "view-detail-plural": "Details bekijken",
     "view-entity": "Bekijk {{entity}}",
+    "view-in-service-type": "Bekijk in {{serviceType}}",
     "view-less": "Minder weergeven",
     "view-more": "Bekijk meer",
     "view-new-count": "Bekijk {{count}} nieuw",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "مشاهده تعریف",
     "view-detail-plural": "مشاهده جزئیات",
     "view-entity": "مشاهده {{entity}}",
+    "view-in-service-type": "در {{serviceType}} مشاهده کنید",
     "view-less": "Ver menos",
     "view-more": "مشاهده بیشتر",
     "view-new-count": "مشاهده {{count}} جدید",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "Definição de Visualização",
     "view-detail-plural": "Ver detalhes",
     "view-entity": "Visualizar {{entity}}",
+    "view-in-service-type": "Ver no {{serviceType}}",
     "view-less": "Ver menos",
     "view-more": "Ver mais",
     "view-new-count": "Visualizar {{count}} novos",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "Definição de Visualização",
     "view-detail-plural": "Ver detalhes",
     "view-entity": "Visualizar {{entity}}",
+    "view-in-service-type": "Ver em {{serviceType}}",
     "view-less": "Ver menos",
     "view-more": "Ver mais",
     "view-new-count": "Visualizar {{count}} novos",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "Посмотреть определение",
     "view-detail-plural": "Просмотр деталей",
     "view-entity": "Посмотреть {{entity}}",
+    "view-in-service-type": "Просмотр в {{serviceType}}",
     "view-less": "Показать меньше",
     "view-more": "Посмотреть больше",
     "view-new-count": "Посмотреть {{count}} новых",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "ดูคำจำกัดความ",
     "view-detail-plural": "ดูรายละเอียด",
     "view-entity": "ดู {{entity}}",
+    "view-in-service-type": "ดูใน {{serviceType}}",
     "view-less": "ดูน้อยลง",
     "view-more": "ดูเพิ่มเติม",
     "view-new-count": "ดู {{count}} ใหม่",

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

@@ -1497,6 +1497,7 @@
     "view-definition": "查看定义",
     "view-detail-plural": "查看详情",
     "view-entity": "查看{{entity}}",
+    "view-in-service-type": "在 {{serviceType}} 中查看",
     "view-less": "查看较少",
     "view-more": "查看更多",
     "view-new-count": "查看{{count}}个新的",

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

@@ -65,6 +65,7 @@
 @red-13: #fda29b;
 @red-14: #d92d20;
 @red-15: #e52315;
+@red-16: #7e2410;
 @orange-1: #fff6ed;
 @orange-2: #c4320a;
 
@@ -122,6 +123,7 @@
 @grey-19: #363f72;
 
 @text-grey-muted: @grey-4;
+@de-active-color: #6b7280;
 @font-size-base: 14px;
 @box-shadow-base: 0px 2px 10px rgba(0, 0, 0, 0.12);
 @white: #fff;