MINOR: open links in new tab in DataAssetsHeader (#18172)

* MINOR: open links in new tab in DataAssetsHeader * fix: make mlModelDetail.dashboard internal link
open-metadata · Oct 19, 2024 · 19152f9 · 19152f9
1 parent 0261caf
commit 19152f9
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/...in/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx b/...in/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx
@@ -107,18 +107,24 @@ export const ExtraInfoLink = ({
   label,
   value,
   href,
+  newTab = false,
 }: {
   label: string;
   value: string | number;
   href: string;
+  newTab?: boolean;
 }) => (
   <>
     <Divider className="self-center" type="vertical" />
     <div className="d-flex items-center text-xs">
       {!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/...rc/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.test.tsx b/...rc/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
@@ -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}