feat(organizations): update page access permissions TASK-977 (#5219)

## Description For various pages in account settings, we previously used a wrapper component to verify whether the user was the owner of their org before allowing them to access the page. With the organizations project, this permissions check needs to allow for checking multiple role options. We also need to be able to check whether an org is an mmo for the members page. This PR overhauls the old wrapper component to allow for these checks.
kobotoolbox · Nov 6, 2024 · 70a8673 · 70a8673
1 parent be9db29
commit 70a8673
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 43 deletions.
diff --git a/jsapp/js/account/organizations/requireOrgOwner.component.tsx b/jsapp/js/account/organizations/requireOrgOwner.component.tsx
diff --git a/jsapp/js/account/organizations/validateOrgPermissions.component.tsx b/jsapp/js/account/organizations/validateOrgPermissions.component.tsx
@@ -0,0 +1,49 @@
+import React, {Suspense, useEffect} from 'react';
+import {useNavigate} from 'react-router-dom';
+import LoadingSpinner from 'js/components/common/loadingSpinner';
+import {ACCOUNT_ROUTES} from 'js/account/routes.constants';
+import {useOrganizationQuery} from 'js/account/stripe.api';
+import {OrganizationUserRole} from '../stripe.types';
+
+interface Props {
+  children: React.ReactNode;
+  validRoles?: OrganizationUserRole[];
+  mmoOnly?: boolean;
+  redirect?: boolean;
+}
+
+/**
+ * Use to handle display of pages that should only be accessible to certain user roles
+ * or members of MMOs. Defaults to allowing access for all users, so you must supply
+ * any restrictions.
+ */
+export const ValidateOrgPermissions = ({
+  children,
+  validRoles = undefined,
+  mmoOnly = false,
+  redirect = true,
+}: Props) => {
+  const navigate = useNavigate();
+  const orgQuery = useOrganizationQuery();
+  const hasValidRole = validRoles ? validRoles.includes(
+    orgQuery.data?.request_user_role ?? OrganizationUserRole.member
+  ) : true;
+  const hasValidOrg = mmoOnly ? orgQuery.data?.is_mmo : true;
+
+  // Redirect to Account Settings if conditions not met
+  useEffect(() => {
+    if (
+      redirect &&
+      orgQuery.data &&
+      (!hasValidRole || !hasValidOrg)
+    ) {
+      navigate(ACCOUNT_ROUTES.ACCOUNT_SETTINGS);
+    }
+  }, [redirect, orgQuery.data, navigate]);
+
+  return redirect && hasValidRole && hasValidOrg ? (
+    <Suspense fallback={null}>{children}</Suspense>
+  ) : (
+    <LoadingSpinner />
+  );
+};
diff --git a/jsapp/js/account/routes.tsx b/jsapp/js/account/routes.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import {Navigate, Route} from 'react-router-dom';
 import RequireAuth from 'js/router/requireAuth';
-import {RequireOrgOwner} from 'js/account/organizations/requireOrgOwner.component';
+import {ValidateOrgPermissions} from 'js/account/organizations/validateOrgPermissions.component';
+import {OrganizationUserRole} from './stripe.types';
 import {
   ACCOUNT_ROUTES,
   AccountSettings,
@@ -35,9 +36,9 @@ export default function routes() {
         index
         element={
           <RequireAuth>
-            <RequireOrgOwner>
+            <ValidateOrgPermissions validRoles={[OrganizationUserRole.owner]}>
               <PlansRoute />
-            </RequireOrgOwner>
+            </ValidateOrgPermissions>
           </RequireAuth>
         }
       />
@@ -46,9 +47,9 @@ export default function routes() {
         index
         element={
           <RequireAuth>
-            <RequireOrgOwner>
+            <ValidateOrgPermissions validRoles={[OrganizationUserRole.owner]}>
               <AddOnsRoute />
-            </RequireOrgOwner>
+            </ValidateOrgPermissions>
           </RequireAuth>
         }
       />
@@ -57,17 +58,31 @@ export default function routes() {
         index
         element={
           <RequireAuth>
-            <RequireOrgOwner>
+            <ValidateOrgPermissions
+              validRoles={[
+                OrganizationUserRole.owner,
+                OrganizationUserRole.admin,
+              ]}
+            >
               <DataStorage activeRoute={ACCOUNT_ROUTES.USAGE} />
-            </RequireOrgOwner>
+            </ValidateOrgPermissions>
           </RequireAuth>
         }
       />
       <Route
         path={ACCOUNT_ROUTES.USAGE_PROJECT_BREAKDOWN}
         element={
           <RequireAuth>
-            <DataStorage activeRoute={ACCOUNT_ROUTES.USAGE_PROJECT_BREAKDOWN} />
+            <ValidateOrgPermissions
+              validRoles={[
+                OrganizationUserRole.owner,
+                OrganizationUserRole.admin,
+              ]}
+            >
+              <DataStorage
+                activeRoute={ACCOUNT_ROUTES.USAGE_PROJECT_BREAKDOWN}
+              />
+            </ValidateOrgPermissions>
           </RequireAuth>
         }
       />
@@ -93,15 +108,25 @@ export default function routes() {
             path={ACCOUNT_ROUTES.ORGANIZATION_MEMBERS}
             element={
               <RequireAuth>
-                <div>Organization members view to be implemented</div>
+                <ValidateOrgPermissions mmoOnly>
+                  <div>Organization members view to be implemented</div>
+                </ValidateOrgPermissions>
               </RequireAuth>
             }
           />
           <Route
             path={ACCOUNT_ROUTES.ORGANIZATION_SETTINGS}
             element={
               <RequireAuth>
-                <div>Organization settings view to be implemented</div>
+                <ValidateOrgPermissions
+                  validRoles={[
+                    OrganizationUserRole.owner,
+                    OrganizationUserRole.admin,
+                  ]}
+                  mmoOnly
+                >
+                  <div>Organization settings view to be implemented</div>
+                </ValidateOrgPermissions>
               </RequireAuth>
             }
           />