From 4eab5cf9011e6dade62024bdeb75b69f745609cb Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 28 Sep 2023 15:58:38 +0200
Subject: [PATCH] core-components: always navigate on tab click

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/lemon-masks-greet.md               |  5 +++
 .../TabbedLayout/TabbedLayout.test.tsx        | 38 +++++++++++++++++++
 .../src/layout/HeaderTabs/HeaderTabs.tsx      |  2 +-
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/lemon-masks-greet.md

diff --git a/.changeset/lemon-masks-greet.md b/.changeset/lemon-masks-greet.md
new file mode 100644
index 0000000000..79c7b7e92b
--- /dev/null
+++ b/.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.
diff --git a/packages/core-components/src/components/TabbedLayout/TabbedLayout.test.tsx b/packages/core-components/src/components/TabbedLayout/TabbedLayout.test.tsx
index b84a7f262d..f5a059d615 100644
--- a/packages/core-components/src/components/TabbedLayout/TabbedLayout.test.tsx
+++ b/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();
+  });
 });
diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
index 48e0a8906a..704df67374 100644
--- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
+++ b/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],
   );