feat(rbac): use relative links (janus-idp#1185)

This change updates the links between components from absolute links to relative links to better support being run from a different route root. This commit also adds a property to help better integrate this plugin into the backstage-showcase Administration page while still retaining it's existing functionality. Signed-off-by: Stan Lewis <[email protected]>
uniiverse · Feb 8, 2024 · 9fcab95 · 9fcab95
1 parent d625cb2
commit 9fcab95
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 26 deletions.
diff --git a/plugins/rbac/src/components/CreateRole/CreateRolePage.tsx b/plugins/rbac/src/components/CreateRole/CreateRolePage.tsx
@@ -37,7 +37,7 @@ export const CreateRolePage = () => {
       resourceRef={catalogEntityReadPermission.resourceType}
     >
       <Page themeId="tool">
-        <Header title="Create role" type="RBAC" typeLink="/rbac" />
+        <Header title="Create role" type="RBAC" typeLink=".." />
         <Content>
           <RoleForm
             initialValues={initialValues}

diff --git a/plugins/rbac/src/components/CreateRole/EditRolePage.tsx b/plugins/rbac/src/components/CreateRole/EditRolePage.tsx
@@ -50,7 +50,7 @@ export const EditRolePage = () => {
     }
     return (
       <>
-        <Header title="Edit role" type="RBAC" typeLink="/rbac" />
+        <Header title="Edit role" type="RBAC" typeLink=".." />
         <Content>
           <RoleForm
             initialValues={initialValues}

diff --git a/plugins/rbac/src/components/CreateRole/RoleForm.tsx b/plugins/rbac/src/components/CreateRole/RoleForm.tsx
@@ -67,9 +67,9 @@ export const RoleForm = ({
     if (step && roleName) {
       const { kind, namespace, name } = getKindNamespaceName(roleName);
 
-      navigate(`/rbac/roles/${kind}/${namespace}/${name}`);
+      navigate(`../roles/${kind}/${namespace}/${name}`);
     } else {
-      navigate('/rbac');
+      navigate('..');
     }
   };
 

diff --git a/plugins/rbac/src/components/EditRole.tsx b/plugins/rbac/src/components/EditRole.tsx
@@ -32,7 +32,7 @@ const EditRole = ({
           aria-label="Update"
           disabled={disable}
           title={tooltip || 'Edit Role'}
-          to={to || `/rbac/role/${kind}/${namespace}/${name}`}
+          to={to || `../role/${kind}/${namespace}/${name}`}
         >
           <EditIcon />
         </IconButton>

diff --git a/plugins/rbac/src/components/RbacPage.tsx b/plugins/rbac/src/components/RbacPage.tsx
@@ -8,20 +8,33 @@ import { policyEntityReadPermission } from '@janus-idp/backstage-plugin-rbac-com
 import { DeleteDialogContextProvider } from './RolesList/DeleteDialogContext';
 import { RolesList } from './RolesList/RolesList';
 
-export const RbacPage = () => (
-  <RequirePermission
-    permission={policyEntityReadPermission}
-    resourceRef={policyEntityReadPermission.resourceType}
-  >
-    <Page themeId="tool">
-      <Header title="Administration" />
-      <DeleteDialogContextProvider>
-        <TabbedLayout>
-          <TabbedLayout.Route path="/rbac" title="RBAC">
-            <RolesList />
-          </TabbedLayout.Route>
-        </TabbedLayout>
-      </DeleteDialogContextProvider>
-    </Page>
-  </RequirePermission>
+export const RbacPage = ({ useHeader = true }: { useHeader?: boolean }) => (
+  <>
+    {useHeader ? (
+      <RequirePermission
+        permission={policyEntityReadPermission}
+        resourceRef={policyEntityReadPermission.resourceType}
+      >
+        <Page themeId="tool">
+          <Header title="Administration" />
+          <DeleteDialogContextProvider>
+            <TabbedLayout>
+              <TabbedLayout.Route path="/rbac" title="RBAC">
+                <RolesList />
+              </TabbedLayout.Route>
+            </TabbedLayout>
+          </DeleteDialogContextProvider>
+        </Page>
+      </RequirePermission>
+    ) : (
+      <RequirePermission
+        permission={policyEntityReadPermission}
+        resourceRef={policyEntityReadPermission.resourceType}
+      >
+        <DeleteDialogContextProvider>
+          <RolesList />
+        </DeleteDialogContextProvider>
+      </RequirePermission>
+    )}
+  </>
 );
diff --git a/plugins/rbac/src/components/RoleOverview/MembersCard.tsx b/plugins/rbac/src/components/RoleOverview/MembersCard.tsx
@@ -36,7 +36,7 @@ const getEditIcon = (isAllowed: boolean, roleName: string) => {
       dataTestId={isAllowed ? 'update-members' : 'disable-update-members'}
       roleName={roleName}
       disable={!isAllowed}
-      to={`/rbac/role/${kind}/${namespace}/${name}?activeStep=${1}`}
+      to={`../../role/${kind}/${namespace}/${name}?activeStep=${1}`}
     />
   );
 };

diff --git a/plugins/rbac/src/components/RoleOverview/PermissionsCard.tsx b/plugins/rbac/src/components/RoleOverview/PermissionsCard.tsx
@@ -35,7 +35,7 @@ const getEditIcon = (isAllowed: boolean, roleName: string) => {
       dataTestId={isAllowed ? 'update-policies' : 'disable-update-policies'}
       roleName={roleName}
       disable={!isAllowed}
-      to={`/rbac/role/${kind}/${namespace}/${name}?activeStep=${2}`}
+      to={`../../role/${kind}/${namespace}/${name}?activeStep=${2}`}
     />
   );
 };

diff --git a/plugins/rbac/src/components/RoleOverview/RoleOverviewPage.tsx b/plugins/rbac/src/components/RoleOverview/RoleOverviewPage.tsx
@@ -26,7 +26,7 @@ export const RoleOverviewPage = () => {
         <Header
           title={`${roleKind}:${roleNamespace}/${roleName}`}
           type="RBAC"
-          typeLink="/rbac"
+          typeLink=".."
         />
         <TabbedLayout>
           <TabbedLayout.Route path="" title="Overview">

diff --git a/plugins/rbac/src/components/Router.tsx b/plugins/rbac/src/components/Router.tsx
@@ -19,10 +19,10 @@ import { ToastContextProvider } from './ToastContext';
  *
  * @public
  */
-export const Router = () => (
+export const Router = ({ useHeader = true }: { useHeader?: boolean }) => (
   <ToastContextProvider>
     <Routes>
-      <Route path="/" element={<RbacPage />} />
+      <Route path="/" element={<RbacPage useHeader={useHeader} />} />
       <Route path={roleRouteRef.path} element={<RoleOverviewPage />} />
       <Route
         path={createRoleRouteRef.path}