Add requestor field for Job Tenant Writers in the onboarding form

abrilgzz · danielluo-msft · commit 0710659ccb29 · 2024-05-15T16:49:52.000-07:00
diff --git a/UI/web-app/src/components/Confirmation/Confirmation.base.tsx b/UI/web-app/src/components/Confirmation/Confirmation.base.tsx
@@ -25,6 +25,7 @@ import {
   manageMembershipIsAdvancedView,
   manageMembershipPeriod,
   manageMembershipQuery,
+  manageMembershipRequestor,
   manageMembershipSelectedDestination,
   manageMembershipSelectedDestinationEndpoints,
   manageMembershipStartDate,
@@ -33,6 +34,7 @@ import {
 } from '../../store/manageMembership.slice';
 import { OnboardingSteps } from '../../models/OnboardingSteps';
 import { useLocation } from 'react-router-dom';
+import { selectIsJobTenantWriter } from '../../store/roles.slice';
 
 const getClassNames = classNamesFunction<
   IConfirmationStyleProps,
@@ -60,9 +62,14 @@ export const ConfirmationBase: React.FunctionComponent<IConfirmationProps> = (pr
   const startDate: string = useSelector(manageMembershipStartDate);
   const thresholdPercentageForAdditions: number = useSelector(manageMembershipThresholdPercentageForAdditions);
   const thresholdPercentageForRemovals: number = useSelector(manageMembershipThresholdPercentageForRemovals);
+  const requestor: string = useSelector(manageMembershipRequestor);
+  
   const isAdvancedView = useSelector(manageMembershipIsAdvancedView);
   const compositeQuery = useSelector(manageMembershipCompositeQuery);
   const globalQuery = useSelector(manageMembershipQuery);
+
+  const isJobTenantWriter = useSelector(selectIsJobTenantWriter);
+
   const displayQuery: string = isAdvancedView ? JSON.stringify(globalQuery, null, 2) : JSON.stringify(compositeQuery, null, 2);
 
   const SharePointDomain: string = `${process.env.REACT_APP_SHAREPOINTDOMAIN}`;
@@ -222,6 +229,16 @@ export const ConfirmationBase: React.FunctionComponent<IConfirmationProps> = (pr
                   {thresholdPercentageForRemovals === -1 ? `${strings.ManageMembership.labels.noThresholdSet}`: `${thresholdPercentageForRemovals}%`}
                 </Text>
               </Stack.Item>
+              {isJobTenantWriter &&
+                <Stack.Item align="start">
+                  <Text className={classNames.itemTitle} block>
+                    {strings.JobDetails.labels.requestor}
+                  </Text>
+                  <Text className={classNames.itemData} block>
+                    {requestor}
+                  </Text>
+                </Stack.Item>
+              }
             </Stack>
           </div>)}
 
diff --git a/UI/web-app/src/components/RunConfiguration/RunConfiguration.base.tsx b/UI/web-app/src/components/RunConfiguration/RunConfiguration.base.tsx
@@ -6,7 +6,8 @@ import {
   IProcessedStyleSet,
   classNamesFunction,
   useTheme,
-  ChoiceGroup, IChoiceGroupOption, DatePicker, Dropdown, Checkbox
+  ChoiceGroup, IChoiceGroupOption, DatePicker, Dropdown, Checkbox,
+  TextField
 } from '@fluentui/react';
 import {
   IRunConfigurationProps,
@@ -26,6 +27,7 @@ import {
   manageMembershipUseThresholdLimits,
   setNewJobPeriod,
   setNewJobStartDate,
+  setNewJobRequestor,
   setNewJobThresholdPercentageForAdditions,
   setNewJobThresholdPercentageForRemovals,
   setShowDecreaseDropdown,
@@ -35,6 +37,7 @@ import {
 } from '../../store/manageMembership.slice';
 import { AppDispatch } from '../../store';
 import { useDispatch, useSelector } from 'react-redux';
+import { selectIsJobTenantWriter } from '../../store/roles.slice';
 
 const getClassNames = classNamesFunction<
   IRunConfigurationStyleProps,
@@ -61,6 +64,7 @@ export const RunConfigurationBase: React.FunctionComponent<IRunConfigurationProp
   const startDateOption = useSelector(manageMembershipStartDateOption);
   const showIncreaseDropdown = useSelector(manageMembershipShowIncreaseDropdown);
   const showDecreaseDropdown = useSelector(manageMembershipShowDecreaseDropdown);
+  const isJobTenantWriter = useSelector(selectIsJobTenantWriter);
 
   const defaultIncreaseThreshold: number = 100;
   const defaultDecreaseThreshold: number = 20;
@@ -84,8 +88,22 @@ export const RunConfigurationBase: React.FunctionComponent<IRunConfigurationProp
   const increaseOptions = Array.from({ length: 10 }, (_, i) => ({ key: `${(i + 1) * 10}`, text: `${(i + 1) * 10}%` }));
   const decreaseOptions = Array.from({ length: 11 }, (_, i) => ({ key: `${i * 5}`, text: `${i * 5}%` }));
 
+  const handleRequestorChange = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
+    dispatch(setNewJobRequestor(newValue || ''));
+  };
+
   return (
     <div className={classNames.root}>
+      {isJobTenantWriter &&
+        <TextField
+          label={strings.ManageMembership.labels.requestor}
+          placeholder={strings.ManageMembership.labels.requestor}
+          onChange={handleRequestorChange}
+          styles={{
+            fieldGroup: classNames.textFieldFieldGroup,
+          }}
+        />
+      }
       <ChoiceGroup
         styles={{
           root: classNames.horizontalChoiceGroup,
diff --git a/UI/web-app/src/components/RunConfiguration/RunConfiguration.styles.ts b/UI/web-app/src/components/RunConfiguration/RunConfiguration.styles.ts
@@ -63,7 +63,14 @@ import {
         borderWidth: 1,
         borderColor: theme.palette.neutralQuaternary,
         background: theme.palette.white,
-      }
+      },
+      textFieldFieldGroup: {
+        borderRadius: 4,
+        border: '1px solid',
+        borderColor: theme.palette.neutralQuaternary,
+        backgroud: theme.palette.white,
+        width: 300
+      },
     };
   };
   
diff --git a/UI/web-app/src/components/RunConfiguration/RunConfiguration.types.ts b/UI/web-app/src/components/RunConfiguration/RunConfiguration.types.ts
@@ -18,6 +18,7 @@ import {
     checkboxPairsContainer: IStyle;
     thresholdDropdown: IStyle;
     dropdownTitle: IStyle;
+    textFieldFieldGroup: IStyle;
   }
   
   export interface IRunConfigurationStyleProps {
diff --git a/UI/web-app/src/pages/ManageMembership/ManageMembership.base.tsx b/UI/web-app/src/pages/ManageMembership/ManageMembership.base.tsx
@@ -42,7 +42,8 @@ import {
   setIsEditingExistingJob,
   manageMembershipIsEditingExistingJob,
   manageMembershipCompositeQuery,
-  clearSourceParts
+  clearSourceParts,
+  manageMembershipRequestor
 } from '../../store/manageMembership.slice';
 import { getGroupEndpoints, getGroupOnboardingStatus } from '../../store/manageMembership.api';
 import { NewJob } from '../../models/NewJob';
@@ -133,7 +134,9 @@ export const ManageMembershipBase: React.FunctionComponent<IManageMembershipProp
   const period = useSelector(manageMembershipPeriod);
   const thresholdPercentageForAdditions = useSelector(manageMembershipThresholdPercentageForAdditions);
   const thresholdPercentageForRemovals = useSelector(manageMembershipThresholdPercentageForRemovals);
-  const requestor = useSelector(selectAccountUsername);
+  const currentUser = useSelector(selectAccountUsername) ?? '';
+  const inputRequestor = useSelector(manageMembershipRequestor);
+  const requestor: string = inputRequestor === '' ? currentUser : inputRequestor;
   const isEditingExistingJob = useSelector(manageMembershipIsEditingExistingJob);
   const advancedViewQuery = useSelector(manageMembershipQuery);
   const sourcePartsQuery = useSelector(manageMembershipCompositeQuery);
@@ -144,7 +147,7 @@ export const ManageMembershipBase: React.FunctionComponent<IManageMembershipProp
   } else {
     finalQuery = sourcePartsQuery;
   }
-
+  
   const handleSearchDestinationChange = (selectedDestinations: IPersonaProps[] | undefined) => {
     dispatch(setHasChanges(true));
 
diff --git a/UI/web-app/src/services/localization/IStrings.ts b/UI/web-app/src/services/localization/IStrings.ts
@@ -322,6 +322,7 @@ export type IStrings = {
       groupMembership: string;
       groupOwnership: string;
       clickHere: string;
+      requestor: string;
     }
   };
   copy: string;
diff --git a/UI/web-app/src/services/localization/i18n/locales/en/translations.ts b/UI/web-app/src/services/localization/i18n/locales/en/translations.ts
@@ -327,6 +327,7 @@ export const strings: IStrings = {
       groupMembership: 'Group Membership',
       groupOwnership: 'Group Ownership',
       clickHere: 'Click here',
+      requestor: 'Requestor',
     }
   },
   copy: 'Copy',
diff --git a/UI/web-app/src/services/localization/i18n/locales/es/translations.ts b/UI/web-app/src/services/localization/i18n/locales/es/translations.ts
@@ -331,6 +331,7 @@ export const strings: IStrings = {
       groupMembership: 'Membresía de grupo',
       groupOwnership: 'Propietario de grupo',
       clickHere: 'Haz click aquí',
+      requestor: 'Solicitante',
     }
   },
   copy: 'Copiar',
diff --git a/UI/web-app/src/store/manageMembership.slice.tsx b/UI/web-app/src/store/manageMembership.slice.tsx
@@ -92,6 +92,9 @@ const manageMembershipSlice = createSlice({
         setNewJobQuery: (state, action: PayloadAction<SyncJobQuery>) => {
             state.newJob.query = action.payload;
         },
+        setNewJobRequestor: (state, action: PayloadAction<string>) => {
+            state.newJob.requestor = action.payload;
+        },
         setIsAdvancedQueryValid: (state, action: PayloadAction<boolean>) => {
             state.isAdvancedQueryValid = action.payload;
         },
@@ -274,6 +277,7 @@ export const {
     setHasChanges,
     setCurrentStep,
     setNewJobQuery,
+    setNewJobRequestor,
     setIsAdvancedQueryValid,
     setSelectedDestination,
     setNewJobStartDate,
@@ -313,6 +317,7 @@ export const manageMembershipStartDate = (state: RootState) => state.manageMembe
 export const manageMembershipPeriod = (state: RootState) => state.manageMembership.newJob.period;
 export const manageMembershipThresholdPercentageForAdditions = (state: RootState) => state.manageMembership.newJob.thresholdPercentageForAdditions;
 export const manageMembershipThresholdPercentageForRemovals = (state: RootState) => state.manageMembership.newJob.thresholdPercentageForRemovals;
+export const manageMembershipRequestor = (state: RootState) => state.manageMembership.newJob.requestor;
 
 // 1- Select Destination
 export const manageMembershipSearchResults = (state: RootState) => state.manageMembership.searchResults;

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ import {`
`18`	`18`	`checkboxPairsContainer: IStyle;`
`19`	`19`	`thresholdDropdown: IStyle;`
`20`	`20`	`dropdownTitle: IStyle;`
	`21`	`+ textFieldFieldGroup: IStyle;`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`export interface IRunConfigurationStyleProps {`
Original file line number	Diff line number	Diff line change
`@@ -322,6 +322,7 @@ export type IStrings = {`
`322`	`322`	`groupMembership: string;`
`323`	`323`	`groupOwnership: string;`
`324`	`324`	`clickHere: string;`
	`325`	`+ requestor: string;`
`325`	`326`	`}`
`326`	`327`	`};`
`327`	`328`	`copy: string;`
Original file line number	Diff line number	Diff line change
`@@ -327,6 +327,7 @@ export const strings: IStrings = {`
`327`	`327`	`groupMembership: 'Group Membership',`
`328`	`328`	`groupOwnership: 'Group Ownership',`
`329`	`329`	`clickHere: 'Click here',`
	`330`	`+ requestor: 'Requestor',`
`330`	`331`	`}`
`331`	`332`	`},`
`332`	`333`	`copy: 'Copy',`
Original file line number	Diff line number	Diff line change
`@@ -331,6 +331,7 @@ export const strings: IStrings = {`
`331`	`331`	`groupMembership: 'Membresía de grupo',`
`332`	`332`	`groupOwnership: 'Propietario de grupo',`
`333`	`333`	`clickHere: 'Haz click aquí',`
	`334`	`+ requestor: 'Solicitante',`
`334`	`335`	`}`
`335`	`336`	`},`
`336`	`337`	`copy: 'Copiar',`