From 07ba74684a5f0c7e416aab127ea3f23f0f7feae9 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Wed, 25 Feb 2026 14:50:20 +0100
Subject: [PATCH] catalog: fix entity page tab group ordering

The entity page tab groups were rendered in extension tree order rather
than respecting the order defined in the groups configuration. This
sorts the rendered groups based on the key order from groupDefinitions.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .changeset/fix-entity-tab-group-ordering.md   |  5 +++
 .../components/EntityTabs/EntityTabsList.tsx  | 44 ++++++++++++-------
 2 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/fix-entity-tab-group-ordering.md

diff --git a/.changeset/fix-entity-tab-group-ordering.md b/.changeset/fix-entity-tab-group-ordering.md
new file mode 100644
index 0000000000..6fab3f77af
--- /dev/null
+++ b/.changeset/fix-entity-tab-group-ordering.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Fixed entity page tab groups not respecting the ordering from the `groups` configuration.
diff --git a/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsList.tsx b/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsList.tsx
index d77cc5e444..9267e083f5 100644
--- a/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsList.tsx
+++ b/plugins/catalog/src/alpha/components/EntityTabs/EntityTabsList.tsx
@@ -88,20 +88,34 @@ export function EntityTabsList(props: EntityTabsListProps) {
 
   const { tabs: items, selectedIndex = 0, showIcons, groupDefinitions } = props;
 
-  const groups = useMemo(
-    () =>
-      items.reduce((result, tab) => {
-        const group = tab.group ? groupDefinitions[tab.group] : undefined;
-        const groupOrId = group && tab.group ? tab.group : tab.id;
-        result[groupOrId] = result[groupOrId] ?? {
-          group,
-          items: [],
-        };
-        result[groupOrId].items.push(tab);
-        return result;
-      }, {} as Record<string, TabGroup>),
-    [items, groupDefinitions],
-  );
+  const groups = useMemo(() => {
+    const byKey = items.reduce((result, tab) => {
+      const group = tab.group ? groupDefinitions[tab.group] : undefined;
+      const groupOrId = group && tab.group ? tab.group : tab.id;
+      result[groupOrId] = result[groupOrId] ?? {
+        group,
+        items: [],
+      };
+      result[groupOrId].items.push(tab);
+      return result;
+    }, {} as Record<string, TabGroup>);
+
+    const groupOrder = Object.keys(groupDefinitions);
+    return Object.entries(byKey).sort(([a], [b]) => {
+      const ai = groupOrder.indexOf(a);
+      const bi = groupOrder.indexOf(b);
+      if (ai !== -1 && bi !== -1) {
+        return ai - bi;
+      }
+      if (ai !== -1) {
+        return -1;
+      }
+      if (bi !== -1) {
+        return 1;
+      }
+      return 0;
+    });
+  }, [items, groupDefinitions]);
 
   const selectedItem = items[selectedIndex];
   return (
@@ -115,7 +129,7 @@ export function EntityTabsList(props: EntityTabsListProps) {
         aria-label={t('entityTabs.tabsAriaLabel')}
         value={selectedItem?.group ?? selectedItem?.id}
       >
-        {Object.entries(groups).map(([id, tabGroup]) => (
+        {groups.map(([id, tabGroup]) => (
           <EntityTabsGroup
             data-testid={`header-tab-${id}`}
             className={styles.defaultTab}