Merge pull request #20228 from backstage/rugvip/same-tab

core-components: always navigate on tab click

.changeset/lemon-masks-greet.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+The `TabbedLayout` component will now also navigate when clicking the active tab, which allows for navigation back from any sub routes.

packages/core-components/src/components/TabbedLayout/TabbedLayout.test.tsx

@@ -17,6 +17,7 @@ import { renderInTestApp, withLogCollector } from '@backstage/test-utils';
 import { act, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { TabbedLayout } from './TabbedLayout';
+import { Link, Route, Routes } from 'react-router-dom';
 
 describe('TabbedLayout', () => {
   it('renders simplest case', async () => {
@@ -81,4 +82,41 @@ describe('TabbedLayout', () => {
     expect(getByText('tabbed-test-title-2')).toBeInTheDocument();
     expect(getByText('tabbed-test-content-2')).toBeInTheDocument();
   });
+
+  it('navigates when user clicks the same tab', async () => {
+    const { getByText, queryByText, queryAllByRole } = await renderInTestApp(
+      <TabbedLayout>
+        <TabbedLayout.Route path="/" title="tabbed-test-title">
+          <div>
+            tabbed-test-content
+            <div>
+              <Link to="test">tabbed-test-sub-link</Link>
+              <Routes>
+                <Route
+                  path="test"
+                  element={<div>tabbed-test-sub-content</div>}
+                />
+              </Routes>
+            </div>
+          </div>
+        </TabbedLayout.Route>
+        <TabbedLayout.Route path="/some-other-path" title="tabbed-test-title-2">
+          <div>tabbed-test-content-2</div>
+        </TabbedLayout.Route>
+      </TabbedLayout>,
+    );
+
+    const subLink = getByText('tabbed-test-sub-link');
+    expect(subLink).toBeInTheDocument();
+    act(() => {
+      fireEvent.click(subLink);
+    });
+
+    expect(queryByText('tabbed-test-sub-content')).toBeInTheDocument();
+    const [firstTab] = queryAllByRole('tab');
+    act(() => {
+      fireEvent.click(firstTab);
+    });
+    expect(queryByText('tabbed-test-sub-content')).not.toBeInTheDocument();
+  });
 });

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

@@ -85,7 +85,7 @@ export function HeaderTabs(props: HeaderTabsProps) {
       if (selectedIndex === undefined) {
         setSelectedTab(index);
       }
-      if (onChange && selectedIndex !== index) onChange(index);
+      if (onChange) onChange(index);
     },
     [selectedIndex, onChange],
   );