fix enity tabs order

Author: its-mitesh-kumar

packages/app/config.d.ts

@@ -74,6 +74,7 @@ export interface Config {
           path: string;
           title: string;
           mountPoint: string;
+          priority?: number;
         }[];
         mountPoints?: {
           mountPoint: string;

packages/app/src/components/DynamicRoot/DynamicRoot.tsx

@@ -336,14 +336,14 @@ export const DynamicRoot = ({
     }, []);
 
     const entityTabOverrides = entityTabs.reduce<EntityTabOverrides>(
-      (acc, { path, title, mountPoint, scope }) => {
+      (acc, { path, title, mountPoint, scope, priority }) => {
         if (acc[path]) {
           // eslint-disable-next-line no-console
           console.warn(
             `Plugin ${scope} is not configured properly: a tab has already been configured for "${path}", ignoring entry with title: "${title}" and mountPoint: "${mountPoint}"`,
           );
         } else {
-          acc[path] = { title, mountPoint };
+          acc[path] = { title, mountPoint, priority };
         }
         return acc;
       },

packages/app/src/components/DynamicRoot/DynamicRootContext.tsx

@@ -104,7 +104,7 @@ export type RemotePlugins = {
 
 export type EntityTabOverrides = Record<
   string,
-  { title: string; mountPoint: string }
+  { title: string; mountPoint: string; priority?: number }
 >;
 
 export type MountPoints = Record<string, ScalprumMountPoint[]>;

packages/app/src/components/catalog/EntityPage/DynamicEntityTab.tsx

@@ -15,6 +15,7 @@ export type DynamicEntityTabProps = {
   mountPoint: string;
   if?: (entity: Entity) => boolean;
   children?: React.ReactNode;
+  priority?: number;
 };
 
 /**

packages/app/src/components/catalog/EntityPage/EntityPage.tsx

@@ -1,6 +1,7 @@
 import { ContextMenuAwareEntityLayout } from './ContextMenuAwareEntityLayout';
-import { defaultTabs, tabChildren, tabRules } from './defaultTabs';
+import { tabChildren, tabRules } from './defaultTabs';
 import { dynamicEntityTab, DynamicEntityTabProps } from './DynamicEntityTab';
+import {mergeTabs} from '../utils'
 
 /**
  * Displays the tabs and content for a catalog entity
@@ -16,7 +17,7 @@ export const entityPage = (
 ) => {
   return (
     <ContextMenuAwareEntityLayout>
-      {Object.entries({ ...defaultTabs, ...entityTabOverrides }).map(
+      {mergeTabs(entityTabOverrides).map(
         ([path, config]) => {
           return dynamicEntityTab({
             ...config,

packages/app/src/components/catalog/utils.tsx

@@ -1,4 +1,6 @@
 import { type Entity } from '@backstage/catalog-model';
+import { defaultTabs } from './EntityPage/defaultTabs';
+import { DynamicEntityTabProps } from './EntityPage/DynamicEntityTab';
 
 export const isType = (types: string | string[]) => (entity: Entity) => {
   if (!entity?.spec?.type) {
@@ -13,3 +15,20 @@ export const hasAnnotation = (keys: string) => (entity: Entity) =>
 
 export const hasLinks = (entity: Entity) =>
   Boolean(entity.metadata.links?.length);
+
+export const mergeTabs = (
+  entityTabOverrides: Record<
+    string,
+    Omit<DynamicEntityTabProps, 'path' | 'if' | 'children'>
+  >,
+) => {
+  return (
+    Object.entries({ ...defaultTabs, ...entityTabOverrides })
+      .filter(([, tab]) => !(tab.priority && tab.priority < 0))
+      .sort(([, tabA], [, tabB]) => {
+        const priorityA = tabA.priority ?? 0;
+        const priorityB = tabB.priority ?? 0;
+        return priorityB - priorityA;
+      }) || []
+  );
+};

packages/app/src/utils/dynamicUI/extractDynamicConfig.ts

@@ -106,13 +106,15 @@ type EntityTab = {
   mountPoint: string;
   path: string;
   title: string;
+  pariority?: number;
 };
 
 type EntityTabEntry = {
   scope: string;
   mountPoint: string;
   path: string;
   title: string;
+  priority?: number;
 };
 
 type ThemeEntry = {
@@ -307,12 +309,14 @@ function extractDynamicConfig(
   );
   config.entityTabs = Object.entries(frontend).reduce<EntityTabEntry[]>(
     (accEntityTabs, [scope, { entityTabs }]) => {
+      // console.log('accEntityTabs',accEntityTabs,scope,entityTabs)
       accEntityTabs.push(
         ...(entityTabs ?? []).map(entityTab => ({
           ...entityTab,
           scope,
         })),
       );
+      console.log('accEntityTabs', accEntityTabs);
       return accEntityTabs;
     },
     [],