From 021986e8a3f164fece31eaa38b7f2cc9d312252a Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Wed, 27 Oct 2021 13:08:57 +0200
Subject: [PATCH] fixed route resolving

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .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],
   );