fix(organizations): restrict my organization projects to admins/owner…

…s TASK-1393 (#5384)

### 📣 Summary
Fixes viewswitcher so only MMO admins and owners see option for
`myOrgProjectsRoute` and restricts route itself based on user's org
role.

### 👀 Preview steps
1. Create/use an MMO with at least three members: owner, admin and
member
2. Login as each member and view projects list.
3. Observe that project list view switcher only gives "my org projects"
option for admin and owner
4. Observe that member is redirected to normal project route when trying
to navigate to org project route directly via URL

jsapp/js/projects/projectViews/viewSwitcher.tsx

@@ -10,7 +10,10 @@ import KoboDropdown from 'js/components/common/koboDropdown';
 
 // Stores and hooks
 import projectViewsStore from './projectViewsStore';
-import {useOrganizationQuery} from 'js/account/organization/organizationQuery';
+import {
+  useOrganizationQuery,
+  OrganizationUserRole,
+} from 'js/account/organization/organizationQuery';
 
 // Constants
 import {PROJECTS_ROUTES} from 'js/router/routerConstants';
@@ -49,10 +52,15 @@ function ViewSwitcher(props: ViewSwitcherProps) {
     }
   };
 
-  const hasMultipleOptions = (
-    projectViews.views.length !== 0 ||
-    orgQuery.data?.is_mmo
-  );
+  const displayMyOrgOption =
+    orgQuery.data?.is_mmo &&
+    [OrganizationUserRole.admin, OrganizationUserRole.owner].includes(
+      orgQuery.data?.request_user_role
+    );
+
+  const hasMultipleOptions =
+    projectViews.views.length !== 0 || displayMyOrgOption;
+
   const organizationName = orgQuery.data?.name || t('Organization');
 
   let triggerLabel = HOME_VIEW.name;
@@ -109,9 +117,9 @@ function ViewSwitcher(props: ViewSwitcherProps) {
               {HOME_VIEW.name}
             </button>
 
-            {/* This is the organization view option - depends if user is in MMO
-            organization */}
-            {orgQuery.data?.is_mmo &&
+            {/* This is the organization view option - restricted to
+            MMO admins and owners */}
+            {displayMyOrgOption &&
               <button
                 key={ORG_VIEW.uid}
                 className={styles.menuOption}

jsapp/js/projects/routes.tsx

@@ -3,6 +3,7 @@ import {Navigate, Route} from 'react-router-dom';
 import RequireAuth from 'js/router/requireAuth';
 import {PROJECTS_ROUTES} from 'js/router/routerConstants';
 import {RequireOrgPermissions} from 'js/router/RequireOrgPermissions.component';
+import { OrganizationUserRole } from '../account/organization/organizationQuery';
 
 const MyProjectsRoute = React.lazy(
   () => import(/* webpackPrefetch: true */ './myProjectsRoute')
@@ -34,6 +35,10 @@ export default function routes() {
         element={
           <RequireAuth>
             <RequireOrgPermissions
+              validRoles={[
+                OrganizationUserRole.owner,
+                OrganizationUserRole.admin,
+              ]}
               mmoOnly
               redirectRoute={PROJECTS_ROUTES.MY_PROJECTS}
             >