From dc24c00b8ecb0440a9e495cb88a6e9d09debcd7b Mon Sep 17 00:00:00 2001
From: fuzmish <71511927+fuzmish@users.noreply.github.com>
Date: Wed, 9 Oct 2024 14:25:51 +0900
Subject: [PATCH] MINOR: open links in new tab in DataAssetsHeader (#18172)

* MINOR: open links in new tab in DataAssetsHeader

* fix: make mlModelDetail.dashboard internal link
---
 .../DataAssetsHeader.component.tsx            |  8 ++++-
 .../DataAssetsHeader.test.tsx                 | 33 ++++++++++++++++++-
 .../ui/src/utils/DataAssetsHeader.utils.tsx   |  6 ++++
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git 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
index 41903907db3..8ebf9c75d90 100644
--- 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
@@ -107,10 +107,12 @@ export const ExtraInfoLink = ({
   label,
   value,
   href,
+  newTab = false,
 }: {
   label: string;
   value: string | number;
   href: string;
+  newTab?: boolean;
 }) => (
   <>
     <Divider className="self-center" type="vertical" />
@@ -118,7 +120,11 @@ export const ExtraInfoLink = ({
       {!isEmpty(label) && (
         <span className="text-grey-muted m-r-xss">{`${label}: `}</span>
       )}
-      <Typography.Link href={href} style={{ fontSize: '12px' }}>
+      <Typography.Link
+        href={href}
+        rel={newTab ? 'noopener noreferrer' : undefined}
+        style={{ fontSize: '12px' }}
+        target={newTab ? '_blank' : undefined}>
         {value}{' '}
       </Typography.Link>
       <Icon
diff --git 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
index 84d2d0e3083..d8b911e2801 100644
--- 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
@@ -21,7 +21,7 @@ import { Container } from '../../../generated/entity/data/container';
 import { MOCK_TIER_DATA } from '../../../mocks/TableData.mock';
 import { getContainerByName } from '../../../rest/storageAPI';
 import { DEFAULT_ENTITY_PERMISSION } from '../../../utils/PermissionsUtils';
-import { DataAssetsHeader } from './DataAssetsHeader.component';
+import { DataAssetsHeader, ExtraInfoLink } from './DataAssetsHeader.component';
 import { DataAssetsHeaderProps } from './DataAssetsHeader.interface';
 
 const mockProps: DataAssetsHeaderProps = {
@@ -103,6 +103,37 @@ jest.mock('../../../rest/storageAPI', () => ({
     .mockImplementation(() => Promise.resolve({ name: 'test' })),
 }));
 
+describe('ExtraInfoLink component', () => {
+  const mockProps = {
+    label: 'myLabel',
+    value: 'example',
+    href: 'http://example.com/',
+  };
+
+  it('should not have target and rel attributes when newTab is false (default)', () => {
+    const { container } = render(<ExtraInfoLink {...mockProps} />);
+
+    const elm = container.querySelector('a');
+
+    expect(elm).toHaveAttribute('href', mockProps.href);
+    expect(elm).not.toHaveAttribute('target');
+    expect(elm).not.toHaveAttribute('rel');
+  });
+
+  it('should have target and rel attributes when newTab is true', () => {
+    const { container } = render(<ExtraInfoLink {...mockProps} newTab />);
+
+    const elm = container.querySelector('a');
+
+    expect(elm).toHaveAttribute('href', mockProps.href);
+    expect(elm).toHaveAttribute('target', '_blank');
+
+    const rel = (elm?.getAttribute('rel') || '').split(/\s+/g);
+
+    expect(rel.sort()).toStrictEqual(['noopener', 'noreferrer'].sort());
+  });
+});
+
 describe('DataAssetsHeader component', () => {
   it('should call getContainerByName API on Page load for container assets', () => {
     const mockGetContainerByName = getContainerByName as jest.Mock;
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DataAssetsHeader.utils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DataAssetsHeader.utils.tsx
index 613ce2955c7..0907319428a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/DataAssetsHeader.utils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/DataAssetsHeader.utils.tsx
@@ -105,6 +105,7 @@ export const getDataAssetsHeaderInfo = (
         <>
           {dashboardDetails.sourceUrl && (
             <ExtraInfoLink
+              newTab
               href={dashboardDetails.sourceUrl}
               label=""
               value={getEntityName(dashboardDetails)}
@@ -147,6 +148,7 @@ export const getDataAssetsHeaderInfo = (
         <>
           {pipelineDetails.sourceUrl && (
             <ExtraInfoLink
+              newTab
               href={pipelineDetails.sourceUrl}
               label=""
               value={getEntityName(pipelineDetails)}
@@ -178,6 +180,7 @@ export const getDataAssetsHeaderInfo = (
           )}
           {mlModelDetail.server && (
             <ExtraInfoLink
+              newTab
               href={mlModelDetail.server}
               label={t('label.server')}
               value={mlModelDetail.server}
@@ -388,6 +391,7 @@ export const getDataAssetsHeaderInfo = (
         <>
           {storedProcedureDetails.sourceUrl && (
             <ExtraInfoLink
+              newTab
               href={storedProcedureDetails.sourceUrl}
               label=""
               value={getEntityName(storedProcedureDetails)}
@@ -422,6 +426,7 @@ export const getDataAssetsHeaderInfo = (
         <>
           {apiCollection.endpointURL && (
             <ExtraInfoLink
+              newTab
               href={apiCollection.endpointURL}
               label={t('label.endpoint-url')}
               value={apiCollection.endpointURL}
@@ -451,6 +456,7 @@ export const getDataAssetsHeaderInfo = (
           )}
           {apiEndpoint.endpointURL && (
             <ExtraInfoLink
+              newTab
               href={apiEndpoint.endpointURL}
               label={t('label.endpoint-url')}
               value={apiEndpoint.endpointURL}