From 021986e8a3f164fece31eaa38b7f2cc9d312252a Mon Sep 17 00:00:00 2001 From: Alex Rybchenko Date: Wed, 27 Oct 2021 13:08:57 +0200 Subject: [PATCH 1/7] fixed route resolving Signed-off-by: Alex Rybchenko --- .changeset/real-mails-add.md | 6 ++++++ .../src/components/TabbedLayout/RoutedTabs.tsx | 9 +++++++-- .../catalog/src/components/EntityLayout/EntityLayout.tsx | 4 +++- 3 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 .changeset/real-mails-add.md diff --git a/.changeset/real-mails-add.md b/.changeset/real-mails-add.md new file mode 100644 index 0000000000..15cdc2997f --- /dev/null +++ b/.changeset/real-mails-add.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-catalog': patch +--- + +fixed route resolving diff --git a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx index 2a65c8ffc8..d0c36e286c 100644 --- a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx +++ b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx @@ -33,9 +33,14 @@ export function useSelectedSubRoute(subRoutes: SubRoute[]): { element: children, })); - const element = useRoutes(routes) ?? subRoutes[0].children; + // TODO: remove once react-router updated + const sortedRoutes = routes.sort((a, b) => + b.path.slice(0, -2).localeCompare(a.path.slice(0, -2)), + ); - const [matchedRoute] = matchRoutes(routes, `/${params['*']}`) ?? []; + const element = useRoutes(sortedRoutes) ?? subRoutes[0].children; + + const [matchedRoute] = matchRoutes(sortedRoutes, `/${params['*']}`) ?? []; const foundIndex = matchedRoute ? subRoutes.findIndex(t => `${t.path}/*` === matchedRoute.route.path) : 0; diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx index c5679355e5..76619b652b 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx +++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx @@ -200,7 +200,9 @@ export const EntityLayout = ({ tabProps: props.tabProps, }, ]; - }), + }) + // TODO: remove once react-router updated + .sort((a, b) => b.path.localeCompare(a.path)), [entity], ); From 965117dab87e2314765450b113296f8fe5429f7f Mon Sep 17 00:00:00 2001 From: Alex Rybchenko Date: Wed, 27 Oct 2021 14:48:24 +0200 Subject: [PATCH 2/7] remove wrong sorting Signed-off-by: Alex Rybchenko --- plugins/catalog/src/components/EntityLayout/EntityLayout.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx index 76619b652b..c5679355e5 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx +++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx @@ -200,9 +200,7 @@ export const EntityLayout = ({ tabProps: props.tabProps, }, ]; - }) - // TODO: remove once react-router updated - .sort((a, b) => b.path.localeCompare(a.path)), + }), [entity], ); From ab451ef2274fc5ea56124d4f08870d0f3990a832 Mon Sep 17 00:00:00 2001 From: Alex Rybchenko Date: Wed, 27 Oct 2021 15:20:48 +0200 Subject: [PATCH 3/7] updated RoutedTabs.test Signed-off-by: Alex Rybchenko --- .../components/TabbedLayout/RoutedTabs.test.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/core-components/src/components/TabbedLayout/RoutedTabs.test.tsx b/packages/core-components/src/components/TabbedLayout/RoutedTabs.test.tsx index 9b33304a95..bbd48c127c 100644 --- a/packages/core-components/src/components/TabbedLayout/RoutedTabs.test.tsx +++ b/packages/core-components/src/components/TabbedLayout/RoutedTabs.test.tsx @@ -31,6 +31,12 @@ const testRoute2 = { children:
tabbed-test-content-2
, }; +const testRoute3 = { + title: 'tabbed-test-title-3', + path: '/some-other-path-similar', + children:
tabbed-test-content-3
, +}; + describe('RoutedTabs', () => { it('renders simplest case', async () => { const rendered = await renderInTestApp( @@ -46,7 +52,7 @@ describe('RoutedTabs', () => { } + element={} /> , ); @@ -61,6 +67,13 @@ describe('RoutedTabs', () => { expect(rendered.getByText('tabbed-test-title-2')).toBeInTheDocument(); expect(rendered.queryByText('tabbed-test-content-2')).toBeInTheDocument(); + + const thirdTab = rendered.queryAllByRole('tab')[2]; + act(() => { + fireEvent.click(thirdTab); + }); + expect(rendered.getByText('tabbed-test-title-3')).toBeInTheDocument(); + expect(rendered.queryByText('tabbed-test-content-3')).toBeInTheDocument(); }); describe('correctly delegates nested links', () => { From 7c5f6a0400c069f44aa8d2d3827dcbf6a8d74932 Mon Sep 17 00:00:00 2001 From: Alex Rybchenko Date: Fri, 29 Oct 2021 16:15:07 +0200 Subject: [PATCH 4/7] added comments Signed-off-by: Alex Rybchenko --- .changeset/real-mails-add.md | 2 +- .../core-components/src/components/TabbedLayout/RoutedTabs.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/real-mails-add.md b/.changeset/real-mails-add.md index 15cdc2997f..2769fef898 100644 --- a/.changeset/real-mails-add.md +++ b/.changeset/real-mails-add.md @@ -3,4 +3,4 @@ '@backstage/plugin-catalog': patch --- -fixed route resolving +fixed route resolving (ssue #7741) when user cannot select a tab in any of the tabbed pages (like the Catalog page) if it shares the same initial letters as a preceding tab. (i.e. where tab with a path of /ci is followed by a path of /cid, user cannot select /cid as /ci will always be selected first). diff --git a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx index d0c36e286c..c5c771b739 100644 --- a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx +++ b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx @@ -35,6 +35,7 @@ export function useSelectedSubRoute(subRoutes: SubRoute[]): { // TODO: remove once react-router updated const sortedRoutes = routes.sort((a, b) => + // remove added "/*" symbols from path before comparing b.path.slice(0, -2).localeCompare(a.path.slice(0, -2)), ); From a0a66000607f14dfd4571b86ea80115e47b9e766 Mon Sep 17 00:00:00 2001 From: Alex Rybchenko Date: Fri, 29 Oct 2021 16:17:47 +0200 Subject: [PATCH 5/7] fix typo Signed-off-by: Alex Rybchenko --- .changeset/real-mails-add.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/real-mails-add.md b/.changeset/real-mails-add.md index 2769fef898..9eff9cbe62 100644 --- a/.changeset/real-mails-add.md +++ b/.changeset/real-mails-add.md @@ -3,4 +3,4 @@ '@backstage/plugin-catalog': patch --- -fixed route resolving (ssue #7741) when user cannot select a tab in any of the tabbed pages (like the Catalog page) if it shares the same initial letters as a preceding tab. (i.e. where tab with a path of /ci is followed by a path of /cid, user cannot select /cid as /ci will always be selected first). +fixed route resolving (issue #7741) when user cannot select a tab in any of the tabbed pages (like the Catalog page) if it shares the same initial letters as a preceding tab. (i.e. where tab with a path of /ci is followed by a path of /cid, user cannot select /cid as /ci will always be selected first). From 8666b7bc903b55810632f2239caadb929616d660 Mon Sep 17 00:00:00 2001 From: Alex Rybchenko Date: Tue, 2 Nov 2021 09:26:45 +0100 Subject: [PATCH 6/7] updated changeset Signed-off-by: Alex Rybchenko --- .changeset/real-mails-add.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.changeset/real-mails-add.md b/.changeset/real-mails-add.md index 9eff9cbe62..30a9100699 100644 --- a/.changeset/real-mails-add.md +++ b/.changeset/real-mails-add.md @@ -1,6 +1,5 @@ --- '@backstage/core-components': patch -'@backstage/plugin-catalog': patch --- -fixed route resolving (issue #7741) when user cannot select a tab in any of the tabbed pages (like the Catalog page) if it shares the same initial letters as a preceding tab. (i.e. where tab with a path of /ci is followed by a path of /cid, user cannot select /cid as /ci will always be selected first). +fixed route resolving (issue #7741) when user cannot select a tab in any of the tabbed pages (like the Catalog page) if it shares the same initial letters as a preceding tab. (i.e. where tab with a path of /ci is followed by a path of /ci-2, user cannot select /ci-2 as /ci will always be selected first). From 58468331751e52832dff5da225b40b5791588172 Mon Sep 17 00:00:00 2001 From: Alex Rybchenko Date: Tue, 2 Nov 2021 09:28:15 +0100 Subject: [PATCH 7/7] used regex instead of slice Signed-off-by: Alex Rybchenko --- .../src/components/TabbedLayout/RoutedTabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx index c5c771b739..5debafd3f8 100644 --- a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx +++ b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx @@ -35,8 +35,8 @@ export function useSelectedSubRoute(subRoutes: SubRoute[]): { // TODO: remove once react-router updated const sortedRoutes = routes.sort((a, b) => - // remove added "/*" symbols from path before comparing - b.path.slice(0, -2).localeCompare(a.path.slice(0, -2)), + // remove "/*" symbols from path end before comparing + b.path.replace(/\/\*$/, '').localeCompare(a.path.replace(/\/\*$/, '')), ); const element = useRoutes(sortedRoutes) ?? subRoutes[0].children;