Redesign : certificates and source URL (#20368)

* Redesigned certificate || source url

* updated extrainfolabel

* updated extrainfolabel

* fixed metricHeaderInfo|| gave consistent spacing

* fixed test cases

* fixed metric text overflow

* fixed tests

* fixed comments

* fixed sonar cases

openmetadata-ui/src/main/resources/ui/playwright/utils/metric.ts

@@ -48,7 +48,7 @@ export const updateUnitOfMeasurement = async (
   page: Page,
   unitOfMeasurement: string
 ) => {
-  await page.click(`[data-testid="edit-unit-of-measurement-button"]`);
+  await page.click(`[data-testid="edit-measurement-unit-button"]`);
   const patchPromise = page.waitForResponse(
     (response) => response.request().method() === 'PATCH'
   );
@@ -60,21 +60,21 @@ export const updateUnitOfMeasurement = async (
 
   // verify the unit of measurement is updated
   await expect(
-    page.getByText(`Unit of Measurement${unitOfMeasurement.toUpperCase()}`)
+    page.getByText(`Measurement Unit${unitOfMeasurement.toUpperCase()}`)
   ).toBeVisible();
 };
 
 export const removeUnitOfMeasurement = async (page: Page) => {
-  await page.click(`[data-testid="edit-unit-of-measurement-button"]`);
+  await page.click(`[data-testid="edit-measurement-unit-button"]`);
   const patchPromise = page.waitForResponse(
     (response) => response.request().method() === 'PATCH'
   );
-  await page.getByTestId('remove-unit-of-measurement-button').click();
+  await page.getByTestId('remove-measurement-unit-button').click();
 
   await patchPromise;
 
   // verify the unit of measurement is updated
-  await expect(page.getByText('Unit of Measurement--')).toBeVisible();
+  await expect(page.getByText('Measurement Unit--')).toBeVisible();
 };
 
 export const updateGranularity = async (page: Page, granularity: string) => {
@@ -267,7 +267,7 @@ export const addMetric = async (page: Page) => {
 
   await expect(
     page.getByText(
-      `Unit of Measurement${metricData.unitOfMeasurement.toUpperCase()}`
+      `Measurement Unit${metricData.unitOfMeasurement.toUpperCase()}`
     )
   ).toBeVisible();
 

openmetadata-ui/src/main/resources/ui/src/assets/svg/link-icon-with-bg.svg

@@ -0,0 +1,11 @@
+
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8108_4894)">
+<path d="M6.66656 8.66673C6.95286 9.04948 7.31813 9.36618 7.73759 9.59535C8.15705 9.82452 8.62089 9.9608 9.09766 9.99495C9.57442 10.0291 10.0529 9.9603 10.5008 9.79325C10.9486 9.62619 11.3553 9.36477 11.6932 9.02673L13.6932 7.02673C14.3004 6.39805 14.6364 5.55604 14.6288 4.68205C14.6212 3.80807 14.2706 2.97202 13.6526 2.354C13.0346 1.73597 12.1985 1.38541 11.3246 1.37781C10.4506 1.37022 9.60856 1.7062 8.97989 2.31339L7.83322 3.45339M9.33322 7.33339C9.04692 6.95064 8.68165 6.63394 8.26219 6.40477C7.84273 6.17559 7.37888 6.03931 6.90212 6.00517C6.42536 5.97102 5.94683 6.03981 5.49899 6.20687C5.05115 6.37393 4.64448 6.63534 4.30656 6.97339L2.30656 8.97339C1.69936 9.60207 1.36338 10.4441 1.37098 11.3181C1.37857 12.1921 1.72913 13.0281 2.34716 13.6461C2.96519 14.2641 3.80123 14.6147 4.67522 14.6223C5.54921 14.6299 6.39121 14.2939 7.01989 13.6867L8.15989 12.5467" stroke="#1570EF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_8108_4894">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -25,6 +25,7 @@ import { ReactComponent as IconExternalLink } from '../../../assets/svg/external
 import { ReactComponent as RedAlertIcon } from '../../../assets/svg/ic-alert-red.svg';
 import { ReactComponent as TaskOpenIcon } from '../../../assets/svg/ic-open-task.svg';
 import { ReactComponent as VersionIcon } from '../../../assets/svg/ic-version.svg';
+import { ReactComponent as LinkIcon } from '../../../assets/svg/link-icon-with-bg.svg';
 import { ActivityFeedTabs } from '../../../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface';
 import { DomainLabel } from '../../../components/common/DomainLabel/DomainLabel.component';
 import { OwnerLabel } from '../../../components/common/OwnerLabel/OwnerLabel.component';
@@ -67,6 +68,7 @@ import serviceUtilClassBase from '../../../utils/ServiceUtilClassBase';
 import tableClassBase from '../../../utils/TableClassBase';
 import { getTierTags } from '../../../utils/TableUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
+import CertificationTag from '../../common/CertificationTag/CertificationTag';
 import AnnouncementCard from '../../common/EntityPageInfos/AnnouncementCard/AnnouncementCard';
 import AnnouncementDrawer from '../../common/EntityPageInfos/AnnouncementDrawer/AnnouncementDrawer';
 import ManageButton from '../../common/EntityPageInfos/ManageButton/ManageButton';
@@ -94,7 +96,7 @@ export const ExtraInfoLabel = ({
   inlineLayout = false,
 }: {
   label: string;
-  value: string | number;
+  value: string | number | React.ReactNode;
   dataTestId?: string;
   showAsATag?: boolean;
   inlineLayout?: boolean;
@@ -116,19 +118,19 @@ export const ExtraInfoLabel = ({
   }
 
   return (
-    <div className="d-flex align-start ">
+    <div className="d-flex align-start extra-info-container">
       <Typography.Text
         className="whitespace-nowrap text-sm d-flex flex-col gap-2"
         data-testid={dataTestId}>
         {!isEmpty(label) && (
           <span className="extra-info-label-heading">{label}</span>
         )}
-        <span
+        <div
           className={classNames('font-medium extra-info-value', {
             showAsATag: showAsATag,
           })}>
           {value}
-        </span>
+        </div>
       </Typography.Text>
     </div>
   );
@@ -489,7 +491,6 @@ export const DataAssetsHeader = ({
             <Col flex="auto">
               <EntityHeaderTitle
                 badge={alertBadge}
-                certification={(dataAsset as Table)?.certification}
                 deleted={dataAsset?.deleted}
                 displayName={dataAsset.displayName}
                 entityType={entityType}
@@ -538,6 +539,22 @@ export const DataAssetsHeader = ({
                     </Button>
                   </Tooltip>
 
+                  {(dataAsset as Table).sourceUrl && (
+                    <Tooltip title={t('label.source-url')}>
+                      <Button
+                        className="source-url-button font-semibold"
+                        data-testid="source-url-button"
+                        icon={
+                          <Icon className="flex-center" component={LinkIcon} />
+                        }>
+                        <Typography.Link
+                          href={(dataAsset as Table).sourceUrl}
+                          target="_blank">
+                          {t('label.source-url')}
+                        </Typography.Link>
+                      </Button>
+                    </Tooltip>
+                  )}
                   <ManageButton
                     isAsyncDelete
                     afterDeleteAction={afterDeleteAction}
@@ -600,10 +617,10 @@ export const DataAssetsHeader = ({
             {tierSuggestionRender ?? (
               <TierCard currentTier={tier?.tagFQN} updateTier={onTierUpdate}>
                 <Space
-                  className="d-flex align-start"
+                  className="d-flex tier-container align-start"
                   data-testid="header-tier-container">
                   {tier ? (
-                    <div className="d-flex items-center flex-col gap-2">
+                    <div className="d-flex flex-col gap-2">
                       <div className="d-flex items-center gap-1">
                         <span className="entity-no-tier ">
                           {t('label.tier')}
@@ -696,6 +713,24 @@ export const DataAssetsHeader = ({
                 onUpdateMetricDetails={onMetricUpdate}
               />
             )}
+
+            {(dataAsset as Table)?.certification && (
+              <>
+                <Divider
+                  className="self-center vertical-divider"
+                  type="vertical"
+                />
+                <ExtraInfoLabel
+                  label={t('label.certification')}
+                  value={
+                    <CertificationTag
+                      showName
+                      certification={(dataAsset as Table).certification!}
+                    />
+                  }
+                />
+              </>
+            )}
             {extraInfo}
           </div>
           <div className="mt-2">

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

@@ -25,6 +25,8 @@ import { DEFAULT_ENTITY_PERMISSION } from '../../../utils/PermissionsUtils';
 import { DataAssetsHeader, ExtraInfoLink } from './DataAssetsHeader.component';
 import { DataAssetsHeaderProps } from './DataAssetsHeader.interface';
 
+import { LabelType, State, TagSource } from '../../../generated/tests/testCase';
+import { AssetCertification } from '../../../generated/type/assetCertification';
 const mockProps: DataAssetsHeaderProps = {
   dataAsset: {
     id: 'assets-id',
@@ -223,4 +225,71 @@ describe('DataAssetsHeader component', () => {
 
     mockIsAlertSupported = false;
   });
+
+  it('should render source URL button when sourceUrl is present', () => {
+    const mockSourceUrl = 'http://test-source.com';
+
+    render(
+      <DataAssetsHeader
+        {...mockProps}
+        dataAsset={{
+          ...mockProps.dataAsset,
+          sourceUrl: mockSourceUrl,
+        }}
+      />
+    );
+
+    const sourceUrlButton = screen.getByTestId('source-url-button');
+
+    const sourceUrlLink = screen.getByRole('link');
+
+    expect(sourceUrlButton).toBeInTheDocument();
+    expect(sourceUrlLink).toHaveAttribute('href', mockSourceUrl);
+    expect(sourceUrlLink).toHaveAttribute('target', '_blank');
+    expect(screen.getByText('label.source-url')).toBeInTheDocument();
+  });
+
+  it('should not render source URL button when sourceUrl is not present', () => {
+    render(<DataAssetsHeader {...mockProps} />);
+
+    expect(screen.queryByTestId('source-url-button')).not.toBeInTheDocument();
+  });
+
+  it('should render certification when certification is present', () => {
+    const mockCertification: AssetCertification = {
+      tagLabel: {
+        tagFQN: 'Certification.Bronze',
+        name: 'Bronze',
+        displayName: 'Bronze_Medal',
+        description: 'Bronze certified Data Asset test',
+        style: {
+          color: '#C08329',
+          iconURL: 'BronzeCertification.svg',
+        },
+        source: TagSource.Classification,
+        labelType: LabelType.Manual,
+        state: State.Confirmed,
+      },
+      appliedDate: 1732814645688,
+      expiryDate: 1735406645688,
+    };
+    render(
+      <DataAssetsHeader
+        {...mockProps}
+        dataAsset={{
+          ...mockProps.dataAsset,
+          certification: mockCertification,
+        }}
+      />
+    );
+
+    expect(screen.getByText('label.certification')).toBeInTheDocument();
+
+    const certificatComponent = screen.getByTestId(
+      `certification-${mockCertification.tagLabel.tagFQN}`
+    );
+
+    expect(certificatComponent).toBeInTheDocument();
+    expect(certificatComponent).toHaveTextContent('Bronze_Medal');
+  });
 });

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

@@ -24,7 +24,7 @@
     border-radius: 12px;
     border: 0.5px solid @grey-300;
     padding: 20px;
-    gap: 50px;
+    gap: 28px;
     background-color: @background-color;
   }
   .ant-space-item {
@@ -83,6 +83,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    width: 148px;
   }
 
   .ant-btn-group {
@@ -101,6 +102,23 @@
       border-radius: 8px;
     }
   }
+  .ant-btn.source-url-button {
+    background-color: @blue-11;
+    .ant-typography {
+      color: @blue-9;
+    }
+    span.anticon {
+      border-radius: 50%;
+      background-color: @blue-20;
+      padding: 4px;
+      height: 32px;
+      width: 32px;
+      border: 4px solid @blue-14;
+    }
+    svg {
+      fill: transparent;
+    }
+  }
 
   .ant-btn-group {
     .ant-btn {
@@ -111,4 +129,8 @@
   .ant-divider.ant-divider-vertical.vertical-divider {
     height: 50px;
   }
+  .tier-container,
+  .extra-info-container {
+    width: 148px;
+  }
 }

openmetadata-ui/src/main/resources/ui/src/components/Database/RetentionPeriod/RetentionPeriod.component.tsx

@@ -118,7 +118,7 @@ const RetentionPeriod = ({
   return (
     <div className="d-flex items-start gap-1">
       <Space
-        className="d-flex align-start"
+        className="d-flex retention-period-container align-start"
         data-testid="retention-period-container">
         <div className="d-flex ">
           <Typography.Text className="text-sm d-flex flex-col gap-2">

openmetadata-ui/src/main/resources/ui/src/components/Database/RetentionPeriod/retention-period.less

@@ -20,3 +20,7 @@ span.extra-info-label-heading {
   color: @primary-heading-color;
   font-weight: 500;
 }
+
+.retention-period-container {
+  width: 148px;
+}

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

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 import Icon, { ExclamationCircleFilled } from '@ant-design/icons';
-import { Badge, Button, Col, Divider, Row, Tooltip, Typography } from 'antd';
+import { Badge, Button, Col, Row, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import { capitalize, isEmpty } from 'lodash';
 import React, { useMemo, useState } from 'react';
@@ -25,7 +25,6 @@ import { useClipboard } from '../../../hooks/useClipBoard';
 import useCustomLocation from '../../../hooks/useCustomLocation/useCustomLocation';
 import { getEntityName } from '../../../utils/EntityUtils';
 import { stringToHTML } from '../../../utils/StringsUtils';
-import CertificationTag from '../../common/CertificationTag/CertificationTag';
 import './entity-header-title.less';
 import { EntityHeaderTitleProps } from './EntityHeaderTitle.interface';
 
@@ -42,7 +41,6 @@ const EntityHeaderTitle = ({
   className,
   showName = true,
   showOnlyDisplayName = false,
-  certification,
   excludeEntityService,
   isFollowing,
   isFollowingLoading,
@@ -164,14 +162,7 @@ const EntityHeaderTitle = ({
             )}
         </div>
       </Col>
-      {certification && (
+
-        <Col className="text-xs">
-          <div className="d-flex items-center">
-            <Divider className="m-x-xs h-6 m-r-sm" type="vertical" />
-            <CertificationTag certification={certification} />
-          </div>
-        </Col>
-      )}
       {isDisabled && (
         <Badge
           className="m-l-xs badge-grey"

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts

@@ -12,7 +12,6 @@
  */
 
 import { EntityType } from '../../../enums/entity.enum';
-import { AssetCertification } from '../../../generated/entity/data/table';
 
 export interface EntityHeaderTitleProps {
   className?: string;
@@ -28,7 +27,6 @@ export interface EntityHeaderTitleProps {
   badge?: React.ReactNode;
   isDisabled?: boolean;
   showName?: boolean;
-  certification?: AssetCertification;
   excludeEntityService?: boolean;
   isFollowing?: boolean;
   isFollowingLoading?: boolean;

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/entity-header-title.less

@@ -17,10 +17,12 @@
     margin-bottom: 0px;
     display: block;
     color: @grey-900;
+    max-width: 500px;
   }
   .ant-typography-ellipsis.entity-header-display-name {
     font-size: 16px;
     color: @grey-700;
+    max-width: 500px;
   }
   .ant-col.entity-header-content {
     max-width: calc(100% - 100px);

openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricHeaderInfo/MetricHeaderInfo.tsx

@@ -38,7 +38,6 @@ import {
   UnitOfMeasurement,
 } from '../../../generated/entity/data/metric';
 import { getSortedOptions } from '../../../utils/MetricEntityUtils/MetricUtils';
-import { ExtraInfoLabel } from '../../DataAssets/DataAssetsHeader/DataAssetsHeader.component';
 import './metric-header-info.less';
 
 interface MetricInfoItemOption {
@@ -150,37 +149,46 @@ const MetricInfoItem: FC<MetricInfoItemProps> = ({
   );
 
   return (
-    <Space className="d-flex align-start" data-testid={modiFiedLabel}>
+    <Space
-      <ExtraInfoLabel
+      className="d-flex metric-header-info-container align-start"
-        dataTestId={modiFiedLabel}
+      data-testid={modiFiedLabel}>
-        label={label}
+      <div className="d-flex extra-info-container align-start ">
-        value={value ?? NO_DATA_PLACEHOLDER}
+        <Typography.Text
-      />
+          className="whitespace-nowrap text-sm d-flex flex-col gap-2"
-      {hasPermission && !metricDetails.deleted && (
+          data-testid={modiFiedLabel}>
-        <Popover
+          <div className="d-flex items-center gap-1">
-          destroyTooltipOnHide
+            <span className="extra-info-label-heading">{label}</span>
-          content={list}
+            {hasPermission && !metricDetails.deleted && (
-          open={popupVisible}
+              <Popover
-          overlayClassName="metric-header-info-popover"
+                destroyTooltipOnHide
-          placement="bottomRight"
+                content={list}
-          showArrow={false}
+                open={popupVisible}
-          trigger="click"
+                overlayClassName="metric-header-info-popover"
-          onOpenChange={setPopupVisible}>
+                placement="bottomRight"
-          <Tooltip
+                showArrow={false}
-            title={t('label.edit-entity', {
+                trigger="click"
-              entity: label,
+                onOpenChange={setPopupVisible}>
-            })}>
+                <Tooltip
-            <Button
+                  title={t('label.edit-entity', {
-              className="flex-center p-0"
+                    entity: label,
-              data-testid={`edit-${modiFiedLabel}-button`}
+                  })}>
-              icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
+                  <Button
-              loading={isUpdating}
+                    className="flex-center edit-metrics p-0"
-              size="small"
+                    data-testid={`edit-${modiFiedLabel}-button`}
-              type="text"
+                    icon={<EditIcon color={DE_ACTIVE_COLOR} width="12px" />}
-            />
+                    loading={isUpdating}
-          </Tooltip>
+                    size="small"
-        </Popover>
+                    type="text"
-      )}
+                  />
+                </Tooltip>
+              </Popover>
+            )}
+          </div>
+          <div className={classNames('font-medium extra-info-value')}>
+            {value ?? NO_DATA_PLACEHOLDER}
+          </div>
+        </Typography.Text>
+      </div>
     </Space>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricHeaderInfo/metric-header-info.less

@@ -10,6 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+@import (reference) '../../../styles/variables.less';
 .metric-header-info-popover {
   min-width: 250px;
   .ant-popover-inner-content {
@@ -19,3 +20,15 @@
     background-color: #f2f6fc;
   }
 }
+.ant-btn.ant-btn-text.edit-metrics {
+  border: 1px solid @border-light;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  svg {
+    color: @grey-600;
+  }
+}
+.metric-header-info-container {
+  width: 148px;
+}

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

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 import { Tag, Tooltip } from 'antd';
+import classNames from 'classnames';
 import React from 'react';
 import { AssetCertification } from '../../../generated/entity/data/table';
 import { getEntityName } from '../../../utils/EntityUtils';
@@ -19,8 +20,10 @@ import './certification-tag.less';
 
 const CertificationTag = ({
   certification,
+  showName = false,
 }: {
   certification: AssetCertification;
+  showName?: boolean;
 }) => {
   if (certification.tagLabel.style?.iconURL) {
     const name = getEntityName(certification.tagLabel);
@@ -31,12 +34,26 @@ const CertificationTag = ({
         className="cursor-pointer"
         title={getTagTooltip(name, certification.tagLabel.description)}
         trigger="hover">
-        <div data-testid={`certification-${certification.tagLabel.tagFQN}`}>
+        <div
+          className={classNames({
+            'certification-tag-with-name d-flex items-center gap-1': showName,
+          })}
+          data-testid={`certification-${certification.tagLabel.tagFQN}`}
+          style={
+            showName
+              ? { backgroundColor: certification.tagLabel.style?.color + '33' } // to decrease opacity of the background color by 80%
+              : {}
+          }>
           <img
             alt={`certification: ${name}`}
             className="certification-img"
             src={tagSrc}
           />
+          {showName && (
+            <span className="certification-name text-sm font-medium">
+              {name}
+            </span>
+          )}
         </div>
       </Tooltip>
     );

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

@@ -10,6 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+@import (reference) '../../../styles/variables.less';
 .certification-tag {
   display: flex;
   align-items: center;
@@ -28,3 +29,16 @@
   width: 28px;
   height: 28px;
 }
+
+.certification-tag-with-name {
+  border-radius: 16px;
+  padding: 2px 8px 2px 10px;
+
+  .certification-img {
+    width: 16px;
+    height: 16px;
+  }
+  span {
+    color: @yellow-11;
+  }
+}

openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.component.tsx

@@ -202,7 +202,7 @@ export const DomainLabel = ({
     }
 
     return (
-      <div className="d-flex   flex-col gap-2 justify-center">
+      <div className="d-flex   flex-col gap-2 justify-start">
         {headerLayout && (
           <div
             className="d-flex text-sm gap-1 font-medium items-center "

openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/domain-label.less

@@ -19,6 +19,8 @@
 .domain-link-text {
   color: @grey-700;
 }
-.domain-link-container {
+.data-assets-header-container {
-  width: 150px;
+  .domain-link-container {
+    width: 148px;
+  }
 }

openmetadata-ui/src/main/resources/ui/src/components/common/NoOwner/NoOwnerFound.tsx

@@ -33,7 +33,11 @@ export const NoOwnerFound: React.FC<NoOwnerFoundProps> = ({
 
   return (
     <div
-      className="d-flex justify-center flex-col gap-2"
+      className={classNames(
+        'd-flex justify-start flex-col gap-2',
+        { 'owner-label-container': !isCompactView },
+        className
+      )}
       data-testid="owner-label">
       <div className="d-flex items-center gap-1">
         {isCompactView && (

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx

@@ -35,7 +35,7 @@ export const OwnerLabel = ({
     team: false,
   },
   tooltipText,
-  isCompactView = true,
+  isCompactView = true, // renders owner profile followed by its name
 }: OwnerLabelProps) => {
   const { t } = useTranslation();
   const [showAllOwners, setShowAllOwners] = useState(false);
@@ -69,7 +69,9 @@ export const OwnerLabel = ({
 
     return (
       <div
-        className="d-flex owner-label-heading gap-2 items-center"
+        className={classNames('d-flex owner-label-heading gap-2 items-center', {
+          'owner-label-container': !isCompactView,
+        })}
         data-testid="owner-label">
         <div
           className={classNames(

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/owner-label.less

@@ -125,3 +125,7 @@
     }
   }
 }
+
+.owner-label-container {
+  width: 148px;
+}

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

@@ -1434,7 +1434,7 @@
     "uninstall-lowercase": "uninstall",
     "uninstalled-lowercase": "uninstalled",
     "unique": "Unique",
-    "unit-of-measurement": "Unit of Measurement",
+    "unit-of-measurement": "Measurement Unit",
     "unpause": "UnPause",
     "unprocessed": "Unprocessed",
     "up-vote": "Up Vote",

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

@@ -1434,7 +1434,7 @@
     "uninstall-lowercase": "desinstalar",
     "uninstalled-lowercase": "uninstalled",
     "unique": "Único",
-    "unit-of-measurement": "Unit of Measurement",
+    "unit-of-measurement": "medida Unidad",
     "unpause": "Reanudar",
     "unprocessed": "Unprocessed",
     "up-vote": "Voto Positivo",

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

@@ -1434,7 +1434,7 @@
     "uninstall-lowercase": "désinstaller",
     "uninstalled-lowercase": "désinstallé",
     "unique": "Unique",
-    "unit-of-measurement": "Unit of Measurement",
+    "unit-of-measurement": "Unité de mesure",
     "unpause": "Réactiver",
     "unprocessed": "Unprocessed",
     "up-vote": "Voter",

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

@@ -1434,7 +1434,7 @@
     "uninstall-lowercase": "הסרה",
     "uninstalled-lowercase": "uninstalled",
     "unique": "ייחודי",
-    "unit-of-measurement": "Unit of Measurement",
+    "unit-of-measurement": "יחידת מדידה",
     "unpause": "בטל השהייה",
     "unprocessed": "Unprocessed",
     "up-vote": "Up Vote",

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

@@ -1434,7 +1434,7 @@
     "uninstall-lowercase": "uninstall",
     "uninstalled-lowercase": "uninstalled",
     "unique": "ユニーク",
-    "unit-of-measurement": "Unit of Measurement",
+    "unit-of-measurement": "単位",
     "unpause": "再開",
     "unprocessed": "Unprocessed",
     "up-vote": "Up Vote",

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

@@ -1434,7 +1434,7 @@
     "uninstall-lowercase": "deïnstalleren",
     "uninstalled-lowercase": "uninstalled",
     "unique": "Uniek",
-    "unit-of-measurement": "Unit of Measurement",
+    "unit-of-measurement": "Meeteenheid",
     "unpause": "Hervatten",
     "unprocessed": "Unprocessed",
     "up-vote": "Up Vote",

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

@@ -1434,7 +1434,7 @@
     "uninstall-lowercase": "desinstalar",
     "uninstalled-lowercase": "uninstalled",
     "unique": "Único",
-    "unit-of-measurement": "Unit of Measurement",
+    "unit-of-measurement": "Medida Unidade ",
     "unpause": "Continuar",
     "unprocessed": "Unprocessed",
     "up-vote": "Up Vote",

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

@@ -1434,7 +1434,7 @@
     "uninstall-lowercase": "uninstall",
     "uninstalled-lowercase": "uninstalled",
     "unique": "Уникальные значения",
-    "unit-of-measurement": "Unit of Measurement",
+    "unit-of-measurement": "Единица измерения",
     "unpause": "Снять паузу",
     "unprocessed": "Unprocessed",
     "up-vote": "Up Vote",

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

@@ -1434,7 +1434,7 @@
     "uninstall-lowercase": "卸载",
     "uninstalled-lowercase": "已卸载",
     "unique": "唯一",
-    "unit-of-measurement": "Unit of Measurement",
+    "unit-of-measurement": "计量单位",
     "unpause": "取消暂停",
     "unprocessed": "Unprocessed",
     "up-vote": "Up Vote",

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

@@ -87,6 +87,7 @@
 @blue-17: #eff8ff;
 @blue-18: #0968da;
 @blue-19: #e3e3e3;
+@blue-20: #d1e9ff;
 
 @partial-success-1: #06a4a4;
 @partial-success-2: #bdeeee;

openmetadata-ui/src/main/resources/ui/src/utils/DataAssetsHeader.utils.test.tsx

@@ -276,22 +276,10 @@ describe('Tests for DataAssetsHeaderUtils', () => {
     expect(assetData.breadcrumbs).toEqual([{ name: 'entityName', url: 'url' }]);
 
     // contains extra data for source url
-    expect(JSON.stringify(assetData.extraInfo)).toContain(
-      'http://localhost:8080/tree?dag_id=snowflake_etl'
-    );
 
     //  If Data does not present
-    const assetWithNoExtraData = getDataAssetsHeaderInfo(
-      EntityType.PIPELINE,
-      { ...mockPipelineData, sourceUrl: '' },
-      'snowflake_etl',
-      []
-    );
 
     // contains extra data for source url
-    expect(JSON.stringify(assetWithNoExtraData.extraInfo)).not.toContain(
-      'http://localhost:8080/tree?dag_id=snowflake_etl'
-    );
   });
 
   // Test for MlModel entity
@@ -494,10 +482,6 @@ describe('Tests for DataAssetsHeaderUtils', () => {
     expect(JSON.stringify(assetData.extraInfo)).toContain('label.language');
     expect(JSON.stringify(assetData.extraInfo)).toContain('SQL');
 
-    expect(JSON.stringify(assetData.extraInfo)).toContain(
-      'http://localhost:8585/api/v1/databaseSchemas/48261b8c-4c99-4c5d-9ec7-cb758cc9f9c1'
-    );
-
     //  If Data does not present
 
     const assetWithNoExtraData = getDataAssetsHeaderInfo(

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

@@ -59,7 +59,6 @@ import {
   getBreadcrumbForEntitiesWithServiceOnly,
   getBreadcrumbForTable,
   getEntityBreadcrumbs,
-  getEntityName,
 } from './EntityUtils';
 import { getEntityDetailsPath } from './RouterUtils';
 import { bytesToSize } from './StringsUtils';
@@ -667,22 +666,6 @@ export const getDataAssetsHeaderInfo = (
       break;
   }
 
-  if ('sourceUrl' in dataAsset && dataAsset.sourceUrl) {
-    returnData.extraInfo = (
-      <>
-        {returnData.extraInfo}
-        <Divider className="self-center vertical-divider" type="vertical" />
-        <ExtraInfoLink
-          ellipsis
-          newTab
-          href={dataAsset.sourceUrl}
-          label={t('label.source-url')}
-          value={getEntityName(dataAsset)}
-        />
-      </>
-    );
-  }
-
   return returnData;
 };