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
2025-08-22 07:58:06 +00:00 · 2025-03-24 20:52:39 +05:30 · 2025-03-24 20:52:39 +05:30 · 52e07cf2c3
commit 52e07cf2c3
parent 30239bdf05
31 changed files with 273 additions and 109 deletions
--- a/openmetadata-ui/src/main/resources/ui/playwright/utils/metric.ts
+++ b/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();

--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/link-icon-with-bg.svg
+++ b/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>
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx
+++ b/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">
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.test.tsx
+++ b/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');
+  });
 });
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/data-asset-header.less
+++ b/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;
+  }
 }
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/RetentionPeriod/RetentionPeriod.component.tsx
+++ b/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">
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/RetentionPeriod/retention-period.less
+++ b/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;
+}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx
+++ b/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"
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts
+++ b/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;
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/entity-header-title.less
+++ b/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);
--- a/openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricHeaderInfo/MetricHeaderInfo.tsx
+++ b/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}>
-      <ExtraInfoLabel
-        dataTestId={modiFiedLabel}
-        label={label}
-        value={value ?? NO_DATA_PLACEHOLDER}
-      />
-      {hasPermission && !metricDetails.deleted && (
-        <Popover
-          destroyTooltipOnHide
-          content={list}
-          open={popupVisible}
-          overlayClassName="metric-header-info-popover"
-          placement="bottomRight"
-          showArrow={false}
-          trigger="click"
-          onOpenChange={setPopupVisible}>
-          <Tooltip
-            title={t('label.edit-entity', {
-              entity: label,
-            })}>
-            <Button
-              className="flex-center p-0"
-              data-testid={`edit-${modiFiedLabel}-button`}
-              icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
-              loading={isUpdating}
-              size="small"
-              type="text"
-            />
-          </Tooltip>
-        </Popover>
-      )}
+    <Space
+      className="d-flex metric-header-info-container align-start"
+      data-testid={modiFiedLabel}>
+      <div className="d-flex extra-info-container align-start ">
+        <Typography.Text
+          className="whitespace-nowrap text-sm d-flex flex-col gap-2"
+          data-testid={modiFiedLabel}>
+          <div className="d-flex items-center gap-1">
+            <span className="extra-info-label-heading">{label}</span>
+            {hasPermission && !metricDetails.deleted && (
+              <Popover
+                destroyTooltipOnHide
+                content={list}
+                open={popupVisible}
+                overlayClassName="metric-header-info-popover"
+                placement="bottomRight"
+                showArrow={false}
+                trigger="click"
+                onOpenChange={setPopupVisible}>
+                <Tooltip
+                  title={t('label.edit-entity', {
+                    entity: label,
+                  })}>
+                  <Button
+                    className="flex-center edit-metrics p-0"
+                    data-testid={`edit-${modiFiedLabel}-button`}
+                    icon={<EditIcon color={DE_ACTIVE_COLOR} width="12px" />}
+                    loading={isUpdating}
+                    size="small"
+                    type="text"
+                  />
+                </Tooltip>
+              </Popover>
+            )}
+          </div>
+          <div className={classNames('font-medium extra-info-value')}>
+            {value ?? NO_DATA_PLACEHOLDER}
+          </div>
+        </Typography.Text>
+      </div>
    </Space>
  );
 };
--- a/openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricHeaderInfo/metric-header-info.less
+++ b/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;
+}
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CertificationTag/CertificationTag.tsx
+++ b/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>
    );
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CertificationTag/certification-tag.less
+++ b/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;
+  }
+}
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.component.tsx
+++ b/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 "
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/domain-label.less
+++ b/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 {
-  width: 150px;
+.data-assets-header-container {
+  .domain-link-container {
+    width: 148px;
+  }
 }
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/NoOwner/NoOwnerFound.tsx
+++ b/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 && (
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx
+++ b/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(
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/owner-label.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/owner-label.less
@ -125,3 +125,7 @@
    }
  }
 }
+
+.owner-label-container {
+  width: 148px;
+}
--- 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
@ -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",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
+++ b/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",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
+++ b/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",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json
+++ b/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",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
+++ b/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",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json
+++ b/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",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
+++ b/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",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
+++ b/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",
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
+++ b/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",
--- a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
+++ b/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;
--- a/openmetadata-ui/src/main/resources/ui/src/utils/DataAssetsHeader.utils.test.tsx
+++ b/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(
--- a/openmetadata-ui/src/main/resources/ui/src/utils/DataAssetsHeader.utils.tsx
+++ b/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;
 };