Merge pull request #23527 from npiyush97/navfix

🐛 bug fix:fix issue in entitypage tabs with replacing nav link tabs

.changeset/wicked-bugs-joke.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added Link component in `TabUI` providing functionality like copy link or open in new tab.

packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx

@@ -95,4 +95,13 @@ describe('<HeaderTabs />', () => {
     await user.click(rendered.getByText('Docs'));
     expect(mockOnChange).toHaveBeenCalledTimes(1);
   });
+
+  it('should render 2 nav tabs', async () => {
+    const rendered = await renderInTestApp(<HeaderTabs tabs={mockTabs} />);
+    const tabs = rendered.queryAllByTestId(id => id.startsWith('header-tab'));
+    expect(tabs).toHaveLength(2);
+    tabs.forEach(tab => {
+      expect(tab.tagName.toLocaleLowerCase('en-US')).toBe('a');
+    });
+  });
 });

packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx

@@ -18,6 +18,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import TabUI, { TabProps } from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import React, { useCallback, useEffect, useState } from 'react';
+import { Link } from '@backstage/core-components';
 
 // TODO(blam): Remove this implementation when the Tabs are ready
 // This is just a temporary solution to implementing tabs for now
@@ -95,7 +96,9 @@ export function HeaderTabs(props: HeaderTabsProps) {
       setSelectedTab(selectedIndex);
     }
   }, [selectedIndex]);
-
+  function removeLeadingSlash(path: string) {
+    return path.replace(/^\//, '');
+  }
   return (
     <Box className={styles.tabsWrapper}>
       <Tabs
@@ -109,13 +112,15 @@ export function HeaderTabs(props: HeaderTabsProps) {
       >
         {tabs.map((tab, index) => (
           <TabUI
-            {...tab.tabProps}
             data-testid={`header-tab-${index}`}
             label={tab.label}
             key={tab.id}
+            component={Link}
+            to={removeLeadingSlash(tab.id)}
             value={index}
             className={styles.defaultTab}
             classes={{ selected: styles.selected, root: styles.tabRoot }}
+            {...tab.tabProps}
           />
         ))}
       </Tabs>

plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx

@@ -34,7 +34,7 @@ describe('<DefaultSettingsPage />', () => {
   it('should render the settings page with 3 tabs', async () => {
     const { container } = await renderInTestApp(<DefaultSettingsPage />);
 
-    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] a');
     expect(tabs).toHaveLength(3);
   });
 
@@ -48,7 +48,7 @@ describe('<DefaultSettingsPage />', () => {
       <DefaultSettingsPage tabs={[advancedTabRoute]} />,
     );
 
-    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] a');
     expect(tabs).toHaveLength(4);
     expect(tabs[3].textContent).toEqual('Advanced');
   });
@@ -63,7 +63,7 @@ describe('<DefaultSettingsPage />', () => {
       <DefaultSettingsPage tabs={[advancedTabRoute]} />,
     );
 
-    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] a');
     expect(tabs).toHaveLength(4);
     expect(tabs[3].textContent).toEqual('Advanced');
   });

plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx

@@ -36,7 +36,7 @@ describe('<SettingsPage />', () => {
   it('should render the default settings page with 3 tabs', async () => {
     const { container } = await renderInTestApp(<SettingsPage />);
 
-    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] a');
     expect(tabs).toHaveLength(3);
   });
 
@@ -49,7 +49,7 @@ describe('<SettingsPage />', () => {
     (useOutlet as jest.Mock).mockReturnValue(advancedTabRoute);
     const { container } = await renderInTestApp(<SettingsPage />);
 
-    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] a');
     expect(tabs).toHaveLength(4);
     expect(tabs[3].textContent).toEqual('Advanced');
   });
@@ -63,7 +63,7 @@ describe('<SettingsPage />', () => {
     (useOutlet as jest.Mock).mockReturnValue(advancedTabRoute);
     const { container } = await renderInTestApp(<SettingsPage />);
 
-    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] a');
     expect(tabs).toHaveLength(4);
     expect(tabs[3].textContent).toEqual('Advanced');
     const user = userEvent.setup();
@@ -86,7 +86,7 @@ describe('<SettingsPage />', () => {
     (useOutlet as jest.Mock).mockReturnValue(customLayout);
     const { container } = await renderInTestApp(<SettingsPage />);
 
-    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] a');
     expect(tabs).toHaveLength(2);
     expect(tabs[0].textContent).toEqual('General');
     expect(tabs[1].textContent).toEqual('Advanced');