feat(AdminPage): support full page components (#955)

This change adds a tweak to the AdminPage to support components with sub-routes that provide entire page layouts rather than just tab contents. This change also updates the rbac frontend plugin which takes advantage of these changes, as well as the backend plugin to the latest available. Signed-off-by: Stan Lewis <[email protected]>
janus-idp · Feb 8, 2024 · 1bc043e · 1bc043e
1 parent 680847d
commit 1bc043e
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 72 deletions.
diff --git a/.changeset/strange-sheep-obey.md b/.changeset/strange-sheep-obey.md
@@ -0,0 +1,5 @@
+---
+'app': patch
+---
+
+Add support for full page components to AdminPage, and update the RBAC frontend and backend plugins
diff --git a/dynamic-plugins.default.yaml b/dynamic-plugins.default.yaml
@@ -522,17 +522,20 @@ plugins:
       dynamicPlugins:
         frontend:
           janus-idp.backstage-plugin-rbac:
-            appIcons:
-              - name: AdminPanelSettingsOutlinedIcon
+            mountPoints:
+              - mountPoint: admin.page.rbac/cards
                 module: RbacPlugin
-                importName: AdminPanelSettingsOutlinedIcon
-            dynamicRoutes:
-              - path: /rbac
                 importName: RbacPage
+                config:
+                  layout:
+                    gridColumn: "1 / -1"
+                    width: 100vw
+                  props:
+                    useHeader: false
+            dynamicRoutes:
+              - path: /admin/rbac
                 module: RbacPlugin
-                menuItem:
-                  icon: AdminPanelSettingsOutlinedIcon
-                  text: Administration
+                importName: RbacPage
 
   - package: ./dynamic-plugins/dist/janus-idp-backstage-scaffolder-backend-module-servicenow-dynamic
     disabled: true

diff --git a/dynamic-plugins/imports/package.json b/dynamic-plugins/imports/package.json
@@ -27,7 +27,7 @@
     "@janus-idp/backstage-plugin-ocm": "3.6.1",
     "@janus-idp/backstage-plugin-ocm-backend": "3.4.12",
     "@janus-idp/backstage-plugin-quay": "1.5.2",
-    "@janus-idp/backstage-plugin-rbac": "1.13.1",
+    "@janus-idp/backstage-plugin-rbac": "1.14.0",
     "@janus-idp/backstage-plugin-tekton": "3.5.0",
     "@janus-idp/backstage-plugin-topology": "1.17.6",
     "@janus-idp/backstage-scaffolder-backend-module-quay": "1.2.7",

diff --git a/packages/app/src/components/admin/AdminPage.tsx b/packages/app/src/components/admin/AdminPage.tsx
@@ -28,7 +28,9 @@ export const AdminPage = () => {
   const { mountPoints } = useContext(DynamicRootContext);
   const navigate = useNavigate();
   const { pathname } = useLocation();
-  const [parent, selectedTab] = pathname.slice(1, pathname.length).split('/');
+  const [parent, selectedTab, ...rest] = pathname
+    .slice(1, pathname.length)
+    .split('/');
   const availableTabs = tabs.filter(({ id }) => {
     return typeof mountPoints[`admin.page.${id}/cards`] !== 'undefined';
   });
@@ -63,23 +65,43 @@ export const AdminPage = () => {
     // doing anything else
     return <></>;
   }
+  const hasPageLayout = selectedTab === 'rbac' && rest.length > 0;
   const selectedIndex = availableTabs.findIndex(tab => tab.id === selectedTab);
   const tabContent = (
     mountPoints[`admin.page.${selectedTab}/context`] || []
   ).reduce(
     (acc, { Component }) => <Component>{acc}</Component>,
-    <Grid container>
-      {(mountPoints[`admin.page.${selectedTab}/cards`] || []).map(
-        ({ Component, config = {}, staticJSXContent }) => {
-          return (
-            <Box key={`${Component.name}`} sx={config.layout}>
-              <Component {...config.props}>{staticJSXContent}</Component>
-            </Box>
-          );
-        },
+    <>
+      {hasPageLayout ? (
+        <>
+          {(mountPoints[`admin.page.${selectedTab}/cards`] || []).map(
+            ({ Component, config = {}, staticJSXContent }) => {
+              return (
+                <Component key={`${Component.name}`} {...config.props}>
+                  {staticJSXContent}
+                </Component>
+              );
+            },
+          )}
+        </>
+      ) : (
+        <Grid container>
+          {(mountPoints[`admin.page.${selectedTab}/cards`] || []).map(
+            ({ Component, config = {}, staticJSXContent }) => {
+              return (
+                <Box key={`${Component.name}`} sx={config.layout}>
+                  <Component {...config.props}>{staticJSXContent}</Component>
+                </Box>
+              );
+            },
+          )}
+        </Grid>
       )}
-    </Grid>,
+    </>,
   );
+  if (hasPageLayout) {
+    return <>{tabContent}</>;
+  }
   return (
     <Page themeId="theme">
       <Header title="Administration" />

diff --git a/packages/backend/package.json b/packages/backend/package.json
@@ -45,7 +45,7 @@
     "@backstage/plugin-search-backend-node": "1.2.13",
     "@internal/plugin-dynamic-plugins-info-backend": "0.1.0",
     "@internal/plugin-scalprum-backend": "*",
-    "@janus-idp/backstage-plugin-rbac-backend": "2.1.2",
+    "@janus-idp/backstage-plugin-rbac-backend": "2.2.0",
     "@manypkg/get-packages": "1.1.3",
     "app": "*",
     "better-sqlite3": "9.3.0",