Revert contentOrder to defaultContentOrder, only sort within groups

Keep ungrouped tabs in their natural order and only apply content
ordering within actual groups. Rename the contentOrder prop back to
defaultContentOrder to clarify its scope.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/catalog/report-alpha.api.md

@@ -1119,8 +1119,8 @@ const _default: OverridableFrontendPlugin<
               }
             >[]
           | undefined;
-        contentOrder?: 'title' | 'natural' | undefined;
         showNavItemIcons?: boolean | undefined;
+        contentOrder?: 'title' | 'natural' | undefined;
         title?: string | undefined;
         path?: string | undefined;
       };

plugins/catalog/src/alpha/components/EntityLayout/EntityLayout.tsx

@@ -80,7 +80,7 @@ export interface EntityLayoutProps {
    */
   parentEntityRelations?: string[];
   groupDefinitions: EntityContentGroupDefinitions;
-  contentOrder?: 'title' | 'natural';
+  defaultContentOrder?: 'title' | 'natural';
   showNavItemIcons?: boolean;
 }
 
@@ -111,7 +111,7 @@ export const EntityLayout = (props: EntityLayoutProps) => {
     NotFoundComponent,
     parentEntityRelations,
     groupDefinitions,
-    contentOrder,
+    defaultContentOrder,
     showNavItemIcons,
   } = props;
   const { kind } = useRouteRefParams(entityRouteRef);
@@ -166,7 +166,7 @@ export const EntityLayout = (props: EntityLayoutProps) => {
         <EntityTabs
           routes={routes}
           groupDefinitions={groupDefinitions}
-          contentOrder={contentOrder}
+          defaultContentOrder={defaultContentOrder}
           showIcons={showNavItemIcons}
         />
       )}

plugins/catalog/src/alpha/components/EntityTabs/EntityTabs.tsx

@@ -72,12 +72,12 @@ export function useSelectedSubRoute(subRoutes: SubRoute[]): {
 type EntityTabsProps = {
   routes: SubRoute[];
   groupDefinitions: EntityContentGroupDefinitions;
-  contentOrder?: 'title' | 'natural';
+  defaultContentOrder?: 'title' | 'natural';
   showIcons?: boolean;
 };
 
 export function EntityTabs(props: EntityTabsProps) {
-  const { routes, groupDefinitions, contentOrder, showIcons } = props;
+  const { routes, groupDefinitions, defaultContentOrder, showIcons } = props;
 
   const { index, route, element } = useSelectedSubRoute(routes);
 
@@ -108,7 +108,7 @@ export function EntityTabs(props: EntityTabsProps) {
         selectedIndex={index}
         showIcons={showIcons}
         groupDefinitions={groupDefinitions}
-        contentOrder={contentOrder}
+        defaultContentOrder={defaultContentOrder}
       />
       <EntityTabsPanel>
         <Helmet title={route?.title} />

plugins/catalog/src/alpha/components/EntityTabs/EntityTabsList.tsx

@@ -78,7 +78,7 @@ type TabGroup = {
 type EntityTabsListProps = {
   tabs: Tab[];
   groupDefinitions: EntityContentGroupDefinitions;
-  contentOrder?: 'title' | 'natural';
+  defaultContentOrder?: 'title' | 'natural';
   showIcons?: boolean;
   selectedIndex?: number;
 };
@@ -106,7 +106,7 @@ export function EntityTabsList(props: EntityTabsListProps) {
     selectedIndex = 0,
     showIcons,
     groupDefinitions,
-    contentOrder = 'title',
+    defaultContentOrder = 'title',
   } = props;
 
   const aliasToGroup = useMemo(
@@ -157,16 +157,18 @@ export function EntityTabsList(props: EntityTabsListProps) {
 
     for (const [id, tabGroup] of sorted) {
       const groupDef = groupDefinitions[id];
-      const order = groupDef?.contentOrder ?? contentOrder;
-      if (order === 'title') {
-        tabGroup.items.sort((a, b) =>
-          a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }),
-        );
+      if (groupDef) {
+        const order = groupDef.contentOrder ?? defaultContentOrder;
+        if (order === 'title') {
+          tabGroup.items.sort((a, b) =>
+            a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }),
+          );
+        }
       }
     }
 
     return sorted;
-  }, [items, groupDefinitions, aliasToGroup, contentOrder]);
+  }, [items, groupDefinitions, aliasToGroup, defaultContentOrder]);
 
   const selectedItem = items[selectedIndex];
   return (

plugins/catalog/src/alpha/pages.tsx

@@ -178,7 +178,7 @@ export const catalogEntityPage = PageBlueprint.makeWithOverrides({
                 header={header}
                 contextMenuItems={filteredMenuItems}
                 groupDefinitions={groupDefinitions}
-                contentOrder={config.contentOrder}
+                defaultContentOrder={config.contentOrder}
                 showNavItemIcons={config.showNavItemIcons}
               >
                 {inputs.contents.map(output => (