Show loader when fetching roles and signin in, prevent enable/disable and remove if user does not have write permissions

Author: abrilgzz

Service/GroupMembershipManagement/Hosts/WebApi/Infrastructure/compute/template.bicep

@@ -61,9 +61,6 @@ param dataFactoryName string = '${solutionAbbreviation}-data-${environmentAbbrev
 @description('Name of the Azure Data Factory pipeline.')
 param adfPipeline string
 
-@description('Enter the subscription id.')
-param authenticationType string = 'ClientSecret'
-
 var subscriptionId = subscription().subscriptionId
 var appInsightsInstrumentationKey = resourceId(subscription().subscriptionId, dataResourceGroup, 'Microsoft.KeyVault/vaults/secrets', dataKeyVaultName, 'appInsightsInstrumentationKey')
 var webapiClientId = resourceId(subscription().subscriptionId, prereqsResourceGroup, 'Microsoft.KeyVault/vaults/secrets', prereqsKeyVaultName, 'webapiClientId')
@@ -151,10 +148,6 @@ var appSettings = [
     name: 'Settings:GraphCredentials:TenantId'
     value: '@Microsoft.KeyVault(SecretUri=${reference(graphAppTenantId, '2019-09-01').secretUriWithVersion})'
   }
-  {
-    name: 'Settings:GraphCredentials:AuthenticationType'
-    value: authenticationType
-  }
   {
     name: 'Settings:ActionableEmailProviderId'
     value: '@Microsoft.KeyVault(SecretUri=${reference(actionableEmailProviderId, '2019-09-01').secretUriWithVersion})'

UI/web-app/src/App/App.base.tsx

@@ -1,9 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-
 import { classNamesFunction, type IProcessedStyleSet } from '@fluentui/react';
 import { useTheme } from '@fluentui/react/lib/Theme';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { useSelector, useDispatch } from 'react-redux';
 import { Outlet } from 'react-router-dom';
@@ -20,7 +19,7 @@ import { setLanguage } from '../store/localization.api';
 import { fetchSettings } from '../store/settings.api';
 import { AppFooter } from '../components/AppFooter';
 import { fetchDefaultSqlMembershipSource, fetchDefaultSqlMembershipSourceAttributes } from '../store/sqlMembershipSources.api';
-import { selectHasAccess } from '../store/roles.slice';
+import { selectHasAccess, selectIsFetchingRoles } from '../store/roles.slice';
 
 const getClassNames = classNamesFunction<IAppStyleProps, IAppStyles>();
 
@@ -37,6 +36,7 @@ export const AppBase: React.FunctionComponent<IAppProps> = (props: IAppProps) =>
   const profile = useSelector(selectProfile);
   const loggedIn = useSelector(selectLoggedIn);
   const hasAccess = useSelector(selectHasAccess);
+  const isFetchingRoles = useSelector(selectIsFetchingRoles);
 
   // run once after load.
   useEffect(() => {
@@ -58,7 +58,15 @@ export const AppBase: React.FunctionComponent<IAppProps> = (props: IAppProps) =>
     dispatch(setLanguage(profile?.userPreferredLanguage));
   }, [dispatch, profile?.userPreferredLanguage]);
 
-  if (loggedIn) {
+  const showLoader = !loggedIn || isFetchingRoles;
+
+  if (showLoader) {
+    return (
+      <div className={classNames.root}>
+        <Loader />
+      </div>
+    );
+  } else {
     return (
       <div className={classNames.root}>
         <AppHeader />
@@ -73,11 +81,5 @@ export const AppBase: React.FunctionComponent<IAppProps> = (props: IAppProps) =>
         <AppFooter />
       </div>
     );
-  } else {
-    return (
-      <div className={classNames.root}>
-        <Loader />
-      </div>
-    );
   }
 };

UI/web-app/src/pages/JobDetails/JobDetails.base.tsx

@@ -54,7 +54,7 @@ import {
 import { JobDetails } from '../../models/JobDetails';
 import { useStrings } from '../../store/hooks';
 import { setPagingBarVisible } from '../../store/pagingBar.slice';
-import { selectIsSubmissionReviewer } from '../../store/roles.slice';
+import { selectIsJobOwnerWriter, selectIsSubmissionReviewer } from '../../store/roles.slice';
 import { SyncStatus } from '../../models';
 import { OnboardingSteps } from '../../models/OnboardingSteps';
 import { fetchJobs } from '../../store/jobs.api';
@@ -96,6 +96,7 @@ export const JobDetailsBase: React.FunctionComponent<IJobDetailsProps> = (
   const removeGMMError = useSelector(selectRemoveGMMError);
   const jobsLoading = useSelector(selectJobsLoading);
   const removeGMMPending = useSelector(selectRemoveGMMLoading);
+  const isJobWriter = useSelector(selectIsJobOwnerWriter);
   const showLoader = jobsLoading || removeGMMPending;
 
   const OpenInNewWindowIcon: IIconProps = { iconName: 'OpenInNewWindow' };
@@ -206,13 +207,14 @@ export const JobDetailsBase: React.FunctionComponent<IJobDetailsProps> = (
               actionOnClick={openMembershipConfiguration}
             />
             <div className={classNames.removeGMM}>
-              <ActionButton
-                iconProps={{ iconName: 'Delete' }}
-                title={strings.JobDetails.labels.removeGMM}
-                ariaLabel={strings.JobDetails.labels.removeGMM}
-                onClick={onRemoveGMMButtonClick}>
-                {strings.JobDetails.labels.removeGMM}
-              </ActionButton>
+              {isJobWriter &&
+                <ActionButton
+                  iconProps={{ iconName: 'Delete' }}
+                  title={strings.JobDetails.labels.removeGMM}
+                  ariaLabel={strings.JobDetails.labels.removeGMM}
+                  onClick={onRemoveGMMButtonClick}>
+                  {strings.JobDetails.labels.removeGMM}
+                </ActionButton>}
             </div>
           </div>
           <Dialog
@@ -228,10 +230,10 @@ export const JobDetailsBase: React.FunctionComponent<IJobDetailsProps> = (
             }}
           >
             <DialogFooter>
-              <PrimaryButton 
-                onClick={onConfirmRemove} 
+              <PrimaryButton
+                onClick={onConfirmRemove}
                 text={strings.JobDetails.labels.removeGMMConfirmation}
-                styles={{ root: { padding: '16px'} }}
+                styles={{ root: { padding: '16px' } }}
               />
               <DefaultButton onClick={onDialogClose} text={strings.cancel} />
             </DialogFooter>
@@ -278,6 +280,7 @@ const MembershipStatusContent: React.FunctionComponent<IContentProps> = (
   const patchResponse = useSelector(selectPatchJobDetailsResponse);
   const [jobStatus, setJobStatus] = useState(job.status);
   const [isJobEnabled, setIsJobEnabled] = useState(job.enabledOrNot);
+  const isJobWriter = useSelector(selectIsJobOwnerWriter);
 
   useEffect(() => {
     setJobStatus(job.status);
@@ -331,7 +334,7 @@ const MembershipStatusContent: React.FunctionComponent<IContentProps> = (
           inlineLabel={true}
           checked={isJobEnabled}
           onChange={handleStatusChange}
-          disabled={jobStatus === SyncStatus.PendingReview || jobStatus === SyncStatus.SubmissionRejected}
+          disabled={!isJobWriter || jobStatus === SyncStatus.PendingReview || jobStatus === SyncStatus.SubmissionRejected}
         />
         <div>
           <div className={isJobEnabled ? classNames.jobEnabled : classNames.jobDisabled}>

UI/web-app/src/store/roles.slice.tsx

@@ -5,7 +5,7 @@ import { createSlice } from '@reduxjs/toolkit';
 import type { RootState } from './store';
 import { getAllRoles } from './roles.api';
 
-// Define a type for the slice state
+// Define a type for the slice stat
 export type Roles = {
   isJobOwnerReader: boolean;
   isJobOwnerWriter: boolean;
@@ -14,9 +14,10 @@ export type Roles = {
   isSubmissionReviewer: boolean;
   isHyperlinkAdministrator: boolean;
   isCustomMembershipProviderAdministrator: boolean;
+  isFetchingRoles: boolean;
 }
 
-// Define the initial state using that type
+// Define the initial state using that ty
 const initialState: Roles = {
   isJobOwnerReader: false,
   isJobOwnerWriter: false,
@@ -25,19 +26,28 @@ const initialState: Roles = {
   isSubmissionReviewer: false,
   isHyperlinkAdministrator: false,
   isCustomMembershipProviderAdministrator: false,
+  isFetchingRoles: false,
 };
 
 export const rolesSlice = createSlice({
   name: 'roles',
   initialState,
   reducers: { },
   extraReducers: (builder) => {
+    builder.addCase(getAllRoles.pending, (state) => {
+        state.isFetchingRoles = true; 
+    });
     builder.addCase(getAllRoles.fulfilled, (state, action) => {
-      Object.assign(state, action.payload);
+        Object.assign(state, action.payload);
+        state.isFetchingRoles = false;
+    });
+    builder.addCase(getAllRoles.rejected, (state) => {
+        state.isFetchingRoles = false;
     });
   }
 });
 
+export const selectIsFetchingRoles = (state: RootState) => state.roles.isFetchingRoles;
 export const selectIsJobOwnerReader = (state: RootState) => state.roles.isJobOwnerReader;
 export const selectIsJobOwnerWriter = (state: RootState) => state.roles.isJobOwnerWriter;
 export const selectIsJobTenantReader = (state: RootState) => state.roles.isJobTenantReader;
@@ -50,8 +60,12 @@ export const selectHasAccess = (state: RootState) => {
   return state.roles.isJobOwnerReader || state.roles.isJobOwnerWriter || state.roles.isJobTenantReader || state.roles.isJobTenantWriter;
 };
 
+export const selectHasJobWritePermissions = (state: RootState) => {
+  return state.roles.isJobOwnerWriter || state.roles.isJobTenantWriter;
+};
+
 export const selectIsJobWriter = (state: RootState) => {
   return state.roles.isJobOwnerWriter || state.roles.isJobTenantWriter;
 };
 
-export default rolesSlice.reducer;
+export default rolesSlice.reducer;