Fix onboarding/editing bug

Author: abrilgzz

UI/web-app/src/components/RunConfiguration/RunConfiguration.base.tsx

@@ -151,7 +151,7 @@ export const RunConfigurationBase: React.FunctionComponent<IRunConfigurationProp
           className={classNames.controlWidth}
           label={strings.ManageMembership.labels.frequency}
           options={frequencyOptions}
-          defaultSelectedKey={period ? period.toString() : undefined}
+          defaultSelectedKey={period ? period.toString() : predefinedFrequencyOptions[0].key}
           onChange={(event, option) => {
             if (option) {
               dispatch(setNewJobPeriod(Number(option.key)));

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   IProcessedStyleSet,
@@ -85,7 +85,6 @@ export const ManageMembershipBase: React.FunctionComponent<IManageMembershipProp
 
   const dispatch = useDispatch<AppDispatch>();
   useEffect(() => {
-    dispatch(resetManageMembership());
     dispatch(setPagingBarVisible(false));
   }, [dispatch]);
 
@@ -99,38 +98,35 @@ export const ManageMembershipBase: React.FunctionComponent<IManageMembershipProp
   const isJobWriter = useSelector(selectIsJobWriter)
 
   // Existing job
-  const jobDetails = useSelector(selectSelectedJobDetails);
+  const jobDetailsRef = useRef(useSelector(selectSelectedJobDetails));
   const isLoading = useSelector(selectSelectedJobLoading);
 
   useEffect(() => {
-    let editingExistingJob = !!locationState.jobId;
-    if (editingExistingJob && isJobWriter) {
-      editingExistingJob = true;
-      dispatch(setIsEditingExistingJob(editingExistingJob));
-    }
-    else {
-      editingExistingJob = false;
-      dispatch(setIsEditingExistingJob(editingExistingJob));
+    let editingExistingJob = !!locationState?.jobId && isJobWriter;
+    dispatch(setIsEditingExistingJob(editingExistingJob));
+
+    if (!editingExistingJob) {
+      jobDetailsRef.current = undefined;
     }
 
-    if (locationState.currentStep) {
+    if (locationState?.currentStep) {
       dispatch(setCurrentStep(locationState.currentStep));
     }
 
-    if (locationState.jobId) {
+    if (locationState?.jobId) {
       dispatch(fetchJobDetails({
         syncJobId: locationState.jobId
       }));
     } else {
       dispatch(resetManageMembership());
     }
-  }, [dispatch, locationState]);
+  }, [dispatch, locationState, isJobWriter]);
 
   useEffect(() => {
-    if (jobDetails) {
-      dispatch(setJobDetailsForExistingJob(jobDetails));
+    if (jobDetailsRef.current) {
+      dispatch(setJobDetailsForExistingJob(jobDetailsRef.current));
     }
-  }, [dispatch, jobDetails]);
+  }, [dispatch, jobDetailsRef.current]);
 
   const isAdvancedQueryValid = useSelector(manageMembershipisAdvancedQueryValid);
   const allSourcePartsValid = useSelector(areAllSourcePartsValid);

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

@@ -239,7 +239,7 @@ const manageMembershipSlice = createSlice({
             state.sourceParts = [];
         },
         setJobDetailsForExistingJob: (state, action: PayloadAction<JobDetails>) => {
-            const { source } = action.payload;
+            const { source, requestor, startDate, period, thresholdPercentageForAdditions, thresholdPercentageForRemovals } = action.payload;
             state.advancedViewQuery = JSON.stringify(source);
             state.compositeQuery = buildCompositeQuery(JSON.parse(source));
             state.sourceParts = JSON.parse(source).map((query: SourcePartQuery, index: number) => ({
@@ -248,11 +248,11 @@ const manageMembershipSlice = createSlice({
                 query: query,
                 isValid: true
             }));
-            state.newJob.requestor = action.payload.requestor;
-            state.newJob.startDate = action.payload.startDate;
-            state.newJob.period = action.payload.period;
-            state.newJob.thresholdPercentageForAdditions = action.payload.thresholdPercentageForAdditions;
-            state.newJob.thresholdPercentageForRemovals = action.payload.thresholdPercentageForRemovals;
+            state.newJob.requestor = requestor || state.newJob.requestor;
+            state.newJob.startDate = startDate || state.newJob.startDate;
+            state.newJob.period = period || state.newJob.period;
+            state.newJob.thresholdPercentageForAdditions = thresholdPercentageForAdditions || state.newJob.thresholdPercentageForAdditions;
+            state.newJob.thresholdPercentageForRemovals = thresholdPercentageForRemovals || state.newJob.thresholdPercentageForRemovals;
         },
         setIsEditingExistingJob: (state, action: PayloadAction<boolean>) => {
             state.isEditingExistingJob = action.payload;