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

jsapp/js/account/organizations/validateOrgPermissions.component.tsx

@@ -0,0 +1,50 @@
+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.isPending &&
+      orgQuery.data &&
+      (!hasValidRole || !hasValidOrg)
+    ) {
+      navigate(ACCOUNT_ROUTES.ACCOUNT_SETTINGS);
+    }
+  }, [redirect, orgQuery.isSuccess, orgQuery.data, navigate]);
+
+  return redirect && hasValidRole && hasValidOrg ? (
+    <Suspense fallback={null}>{children}</Suspense>
+  ) : (
+    <LoadingSpinner />
+  );
+};

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>
             }
           />