feat(app): Support extensible entity tabs

This commit adds the ability to customize and extend the default set of tabs available for catalog entity items. The default set of tabs is hard-coded in the entity page but can be reconfigured and extended per plugin using the `entityTabs` property. If multiple plugins target the same entity route, only the first one will be used and a warning will be raised. Signed-off-by: Stan Lewis <[email protected]>
janus-idp · Apr 16, 2024 · 37c1859 · 37c1859
1 parent f1395a9
commit 37c1859
Show file tree

Hide file tree

Showing 22 changed files with 1,078 additions and 820 deletions.
diff --git a/packages/app/config.d.ts b/packages/app/config.d.ts
@@ -81,6 +81,11 @@ export interface Config {
             };
           }[];
         };
+        entityTabs?: {
+          path: string;
+          title: string;
+          mountPoint: string;
+        }[];
         mountPoints?: {
           mountPoint: string;
           module?: string;

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -2,13 +2,9 @@ import React from 'react';
 import { apis } from './apis';
 import DynamicRoot from './components/DynamicRoot';
 
-// Statically integrated frontend plugins
-const { dynamicPluginsInfoPlugin, ...dynamicPluginsInfoPluginModule } =
-  await import('@internal/plugin-dynamic-plugins-info');
-
 // The base UI configuration, these values can be overridden by values
 // specified in external configuration files
-const baseFrontendConfig = {
+export const baseFrontendConfig = {
   context: 'frontend',
   data: {
     dynamicPlugins: {
@@ -35,6 +31,10 @@ const baseFrontendConfig = {
   },
 };
 
+// Statically integrated frontend plugins
+const { dynamicPluginsInfoPlugin, ...dynamicPluginsInfoPluginModule } =
+  await import('@internal/plugin-dynamic-plugins-info');
+
 // The map of static plugins by package name
 const staticPluginMap = {
   '@internal/plugin-dynamic-plugins-info': {

diff --git a/packages/app/src/components/AppBase/AppBase.tsx b/packages/app/src/components/AppBase/AppBase.tsx
@@ -22,7 +22,7 @@ import { LearningPaths } from '../learningPaths/LearningPathsPage';
 import { SearchPage } from '../search/SearchPage';
 
 const AppBase = () => {
-  const { AppProvider, AppRouter, dynamicRoutes } =
+  const { AppProvider, AppRouter, dynamicRoutes, entityTabs } =
     useContext(DynamicRootContext);
   return (
     <AppProvider>
@@ -41,7 +41,7 @@ const AppBase = () => {
               path="/catalog/:namespace/:kind/:name"
               element={<CatalogEntityPage />}
             >
-              {entityPage}
+              {entityPage(entityTabs)}
             </Route>
             <Route
               path="/create"

diff --git a/packages/app/src/components/DynamicRoot/DynamicRoot.test.tsx b/packages/app/src/components/DynamicRoot/DynamicRoot.test.tsx
@@ -15,7 +15,8 @@ import {
 } from '@backstage/core-plugin-api';
 import { Entity } from '@backstage/catalog-model';
 import * as appDefaults from '@backstage/app-defaults';
-import { AppRouteBinder } from '@backstage/core-app-api';
+import { AppRouteBinder, defaultConfigLoader } from '@backstage/core-app-api';
+import { AppConfig } from '@backstage/config';
 
 const DynamicRoot = React.lazy(() => import('./DynamicRoot'));
 
@@ -67,7 +68,9 @@ const MockPage = () => {
   );
 };
 
-const MockApp = () => (
+const loadAppConfig = async () => await defaultConfigLoader();
+
+const MockApp = ({ appConfig }: { appConfig: AppConfig[] }) => (
   <React.Suspense fallback={null}>
     <DynamicRoot
       apis={[]}
@@ -78,6 +81,12 @@ const MockApp = () => (
           },
         })
       }
+      appConfig={appConfig}
+      baseFrontendConfig={{
+        context: '',
+        data: {},
+      }}
+      scalprumConfig={{}}
     />
   </React.Suspense>
 );
@@ -184,7 +193,8 @@ describe('DynamicRoot', () => {
     process.env = mockProcessEnv({
       'foo.bar': { dynamicRoutes: [{ path: '/foo' }] },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -198,7 +208,8 @@ describe('DynamicRoot', () => {
     process.env = mockProcessEnv({
       'foo.bar': { dynamicRoutes: [{ path: '/foo' }, { path: '/bar' }] },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -212,7 +223,8 @@ describe('DynamicRoot', () => {
     process.env = mockProcessEnv({
       'doesnt.exist': { dynamicRoutes: [{ path: '/foo' }] },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -231,7 +243,8 @@ describe('DynamicRoot', () => {
         dynamicRoutes: [{ path: '/foo', importName: 'BarComponent' }],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -248,7 +261,8 @@ describe('DynamicRoot', () => {
     process.env = mockProcessEnv({
       'foo.bar': { dynamicRoutes: [{ path: '/foo', module: 'BarPlugin' }] },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -269,7 +283,8 @@ describe('DynamicRoot', () => {
         ],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -285,7 +300,8 @@ describe('DynamicRoot', () => {
     process.env = mockProcessEnv({
       'foo.bar': { mountPoints: [{ mountPoint: 'a.b.c/cards' }] },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -304,7 +320,8 @@ describe('DynamicRoot', () => {
         ],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -323,7 +340,8 @@ describe('DynamicRoot', () => {
         ],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -347,7 +365,8 @@ describe('DynamicRoot', () => {
         ],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -370,7 +389,8 @@ describe('DynamicRoot', () => {
         ],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -393,7 +413,8 @@ describe('DynamicRoot', () => {
         ],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -414,7 +435,8 @@ describe('DynamicRoot', () => {
         ],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -430,7 +452,8 @@ describe('DynamicRoot', () => {
     process.env = mockProcessEnv({
       'doesnt.exist': { mountPoints: [{ mountPoint: 'a.b.c/cards' }] },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -451,7 +474,8 @@ describe('DynamicRoot', () => {
         ],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -470,7 +494,8 @@ describe('DynamicRoot', () => {
         mountPoints: [{ mountPoint: 'a.b.c/cards', module: 'BarPlugin' }],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -494,7 +519,8 @@ describe('DynamicRoot', () => {
         ],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -510,7 +536,8 @@ describe('DynamicRoot', () => {
     process.env = mockProcessEnv({
       'foo.bar': { appIcons: [{ name: 'fooIcon' }] },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -524,7 +551,8 @@ describe('DynamicRoot', () => {
     process.env = mockProcessEnv({
       'foo.bar': { appIcons: [{ name: 'fooIcon' }, { name: 'foo2Icon' }] },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -541,7 +569,8 @@ describe('DynamicRoot', () => {
     process.env = mockProcessEnv({
       'doesnt.exist': { appIcons: [{ name: 'fooIcon' }] },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -572,7 +601,8 @@ describe('DynamicRoot', () => {
         },
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -612,7 +642,8 @@ describe('DynamicRoot', () => {
         },
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -650,7 +681,8 @@ describe('DynamicRoot', () => {
         },
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -667,7 +699,8 @@ describe('DynamicRoot', () => {
         apiFactories: [{ importName: 'fooPluginApi' }],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -687,7 +720,8 @@ describe('DynamicRoot', () => {
         apiFactories: [{ importName: 'barPluginApi' }],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();
@@ -706,7 +740,8 @@ describe('DynamicRoot', () => {
         apiFactories: [{ importName: 'fooPluginApi', module: 'BarPlugin' }],
       },
     });
-    const rendered = await renderWithEffects(<MockApp />);
+    const appConfig = await loadAppConfig();
+    const rendered = await renderWithEffects(<MockApp appConfig={appConfig} />);
     await waitFor(async () => {
       expect(rendered.baseElement).toBeInTheDocument();
       expect(rendered.getByTestId('isLoadingFinished')).toBeInTheDocument();