[ADM-740] show not show real done when cycle time by status (#972)

Co-authored-by: wenjing-qi <[email protected]>
au-heartbeat · Jan 23, 2024 · 12d1fc1 · 12d1fc1
1 parent 727843e
commit 12d1fc1
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 41 deletions.
diff --git a/frontend/__tests__/containers/MetricsStep/CycleTime.test.tsx b/frontend/__tests__/containers/MetricsStep/CycleTime.test.tsx
@@ -47,7 +47,7 @@ const cycleTimeSettings = [
     value: 'Done',
   },
 ];
-const cycleTimeTypeLabels = ['By Board Column mapping', 'By Board Status mapping'];
+const cycleTimeTypeLabels = ['By Column', 'By Status'];
 let store = setupStore();
 
 jest.mock('@src/context/Metrics/metricsSlice', () => ({
@@ -376,7 +376,7 @@ describe('CycleTime', () => {
       expect(mockedUseAppDispatch).not.toHaveBeenCalledWith(saveDoneColumn([]));
     });
 
-    it('should reset Real done when marked as done from other options', async () => {
+    it('should not reset Real done when marked as done from other options', async () => {
       setup();
       const columnsArray = screen.getAllByRole('button', { name: LIST_OPEN });
       await userEvent.click(columnsArray[0]);
@@ -386,10 +386,10 @@ describe('CycleTime', () => {
       const inputElements = screen.getAllByRole('combobox');
       const selectedInputValue = inputElements.map((option) => option.getAttribute('value'))[0];
       expect(selectedInputValue).toBe('Done');
-      expect(mockedUseAppDispatch).toHaveBeenCalledWith(saveDoneColumn([]));
+      expect(mockedUseAppDispatch).not.toHaveBeenCalledWith(saveDoneColumn([]));
     });
 
-    it('should show the right selected value when cancel the done', async () => {
+    it('should show the correct selected value when cancel the done', async () => {
       setup();
       const columnsArray = screen.getAllByRole('button', { name: LIST_OPEN });
       await userEvent.click(columnsArray[0]);
@@ -402,7 +402,7 @@ describe('CycleTime', () => {
       const inputElements = screen.getAllByRole('combobox');
       const selectedInputValue = inputElements.map((option) => option.getAttribute('value'))[0];
       expect(selectedInputValue).toBe('Review');
-      expect(mockedUseAppDispatch).toHaveBeenCalledWith(saveDoneColumn([]));
+      expect(mockedUseAppDispatch).not.toHaveBeenCalledWith(saveDoneColumn([]));
     });
   });
 });
diff --git a/frontend/__tests__/containers/MetricsStep/MetricsStep.test.tsx b/frontend/__tests__/containers/MetricsStep/MetricsStep.test.tsx
@@ -20,9 +20,10 @@ import {
   REQUIRED_DATA_LIST,
   SELECT_CONSIDER_AS_DONE_MESSAGE,
 } from '../../fixtures';
-import { saveCycleTimeSettings, saveDoneColumn } from '@src/context/Metrics/metricsSlice';
+import { saveCycleTimeSettings, saveDoneColumn, setCycleTimeSettingsType } from '@src/context/Metrics/metricsSlice';
 import { updateJiraVerifyResponse, updateMetrics } from '@src/context/config/configSlice';
 import { useNotificationLayoutEffect } from '@src/hooks/useNotificationLayoutEffect';
+import { CYCLE_TIME_SETTINGS_TYPES } from '@src/constants/resources';
 import userEvent from '@testing-library/user-event';
 
 let store = setupStore();
@@ -240,5 +241,12 @@ describe('MetricsStep', () => {
 
       await waitFor(() => expect(realDoneSettingSection).not.toBeInTheDocument());
     });
+
+    it('should hide Real Done when cycleTime settings type is by status', async () => {
+      await store.dispatch(setCycleTimeSettingsType(CYCLE_TIME_SETTINGS_TYPES.BY_STATUS));
+      const { queryByText } = setup();
+
+      expect(queryByText(REAL_DONE)).not.toBeInTheDocument();
+    });
   });
 });
diff --git a/frontend/src/containers/MetricsStep/CycleTime/Table/index.tsx b/frontend/src/containers/MetricsStep/CycleTime/Table/index.tsx
@@ -35,15 +35,13 @@ const CycleTimeTable = () => {
         dispatch(saveDoneColumn([]));
       }
 
-      const optionNamesWithDone = cycleTimeSettings
-        .filter(({ value }) => value === DONE)
-        .map(({ column, status }) => (isColumnAsKey ? column : status));
+      const optionNamesWithDone = cycleTimeSettings.filter(({ value }) => value === DONE).map(({ column }) => column);
 
       if (optionNamesWithDone.includes(name)) {
         dispatch(saveDoneColumn([]));
       }
     },
-    [cycleTimeSettings, dispatch, isColumnAsKey],
+    [cycleTimeSettings, dispatch],
   );
 
   const saveCycleTimeOptions = useCallback(
@@ -56,7 +54,7 @@ const CycleTimeTable = () => {
             }
           : item,
       );
-      resetRealDoneColumn(name, value);
+      isColumnAsKey && resetRealDoneColumn(name, value);
       dispatch(saveCycleTimeSettings(newCycleTimeSettings));
     },
     [cycleTimeSettings, dispatch, isColumnAsKey, resetRealDoneColumn],
@@ -93,16 +91,8 @@ const CycleTimeTable = () => {
   return (
     <>
       <StyledRadioGroup aria-label='cycleTimeSettingsType' value={cycleTimeSettingsType} onChange={handleTypeChange}>
-        <FormControlLabel
-          value={CYCLE_TIME_SETTINGS_TYPES.BY_COLUMN}
-          control={<Radio />}
-          label='By Board Column mapping'
-        />
-        <FormControlLabel
-          value={CYCLE_TIME_SETTINGS_TYPES.BY_STATUS}
-          control={<Radio />}
-          label='By Board Status mapping'
-        />
+        <FormControlLabel value={CYCLE_TIME_SETTINGS_TYPES.BY_COLUMN} control={<Radio />} label='By Column' />
+        <FormControlLabel value={CYCLE_TIME_SETTINGS_TYPES.BY_STATUS} control={<Radio />} label='By Status' />
       </StyledRadioGroup>
       <TableContainer sx={{ mb: '2rem' }}>
         <Table aria-label='cycle time settings table'>

diff --git a/frontend/src/containers/MetricsStep/index.tsx b/frontend/src/containers/MetricsStep/index.tsx
@@ -5,13 +5,13 @@ import {
 } from '@src/containers/MetricsStep/style';
 import { selectDateRange, selectJiraColumns, selectMetrics, selectUsers } from '@src/context/config/configSlice';
 import { DeploymentFrequencySettings } from '@src/containers/MetricsStep/DeploymentFrequencySettings';
-import { selectCycleTimeSettings, selectMetricsContent } from '@src/context/Metrics/metricsSlice';
 import { useNotificationLayoutEffectInterface } from '@src/hooks/useNotificationLayoutEffect';
+import { CYCLE_TIME_SETTINGS_TYPES, DONE, REQUIRED_DATA } from '@src/constants/resources';
 import { Classification } from '@src/containers/MetricsStep/Classification';
+import { selectMetricsContent } from '@src/context/Metrics/metricsSlice';
 import DateRangeViewer from '@src/components/Common/DateRangeViewer';
 import { CycleTime } from '@src/containers/MetricsStep/CycleTime';
 import { RealDone } from '@src/containers/MetricsStep/RealDone';
-import { DONE, REQUIRED_DATA } from '@src/constants/resources';
 import { Crews } from '@src/containers/MetricsStep/Crews';
 import { useAppSelector } from '@src/hooks';
 import { useLayoutEffect } from 'react';
@@ -21,13 +21,14 @@ const MetricsStep = ({ closeAllNotifications }: useNotificationLayoutEffectInter
   const users = useAppSelector(selectUsers);
   const jiraColumns = useAppSelector(selectJiraColumns);
   const targetFields = useAppSelector(selectMetricsContent).targetFields;
-  const cycleTimeSettings = useAppSelector(selectCycleTimeSettings);
+  const { cycleTimeSettings, cycleTimeSettingsType } = useAppSelector(selectMetricsContent);
   const { startDate, endDate } = useAppSelector(selectDateRange);
   const isShowCrewsAndRealDone =
     requiredData.includes(REQUIRED_DATA.VELOCITY) ||
     requiredData.includes(REQUIRED_DATA.CYCLE_TIME) ||
     requiredData.includes(REQUIRED_DATA.CLASSIFICATION);
-  const isShowRealDone = cycleTimeSettings.some((e) => e.value === DONE);
+  const isShowRealDone =
+    cycleTimeSettingsType === CYCLE_TIME_SETTINGS_TYPES.BY_COLUMN && cycleTimeSettings.some((e) => e.value === DONE);
 
   useLayoutEffect(() => {
     closeAllNotifications();

diff --git a/frontend/src/containers/MetricsStepper/index.tsx b/frontend/src/containers/MetricsStepper/index.tsx
@@ -28,12 +28,7 @@ import {
   StyledStepLabel,
   StyledStepper,
 } from './style';
-import {
-  ICycleTimeSetting,
-  savedMetricsSettingState,
-  selectCycleTimeSettings,
-  selectMetricsContent,
-} from '@src/context/Metrics/metricsSlice';
+import { ICycleTimeSetting, savedMetricsSettingState, selectMetricsContent } from '@src/context/Metrics/metricsSlice';
 import { backStep, nextStep, selectStepNumber, updateTimeStamp } from '@src/context/stepper/StepperSlice';
 import { useMetricsStepValidationCheckContext } from '@src/hooks/useMetricsStepValidationCheckContext';
 import { useNotificationLayoutEffectInterface } from '@src/hooks/useNotificationLayoutEffect';
@@ -64,24 +59,21 @@ const MetricsStepper = (props: useNotificationLayoutEffectInterface) => {
   const metricsConfig = useAppSelector(selectMetricsContent);
   const [isDisableNextButton, setIsDisableNextButton] = useState(true);
   const { getDuplicatedPipeLineIds } = useMetricsStepValidationCheckContext();
-  const cycleTimeSettings = useAppSelector(selectCycleTimeSettings);
   const formMeta = useAppSelector(getFormMeta);
 
   const { isShow: isShowBoard, isVerified: isBoardVerified } = config.board;
   const { isShow: isShowPipeline, isVerified: isPipelineToolVerified } = config.pipelineTool;
   const { isShow: isShowSourceControl, isVerified: isSourceControlVerified } = config.sourceControl;
   const isShowCycleTimeSettings = requiredData.includes(REQUIRED_DATA.CYCLE_TIME);
-  const isCycleTimeSettingsVerified = cycleTimeSettings.some((e) => e.value === DONE);
+  const isCycleTimeSettingsVerified = metricsConfig.cycleTimeSettings.some((e) => e.value === DONE);
   const isShowClassificationSetting = requiredData.includes(REQUIRED_DATA.CLASSIFICATION);
   const isClassificationSettingVerified = metricsConfig.targetFields.some((item) => item.flag);
-
   const { metrics, projectName, dateRange } = config.basic;
 
-  const selectedBoardColumns = useAppSelector(selectCycleTimeSettings);
-
-  const isShowCrewsSetting = isShowBoard;
   const isShowRealDone =
-    isShowBoard && selectedBoardColumns.filter((column) => column.value === METRICS_CONSTANTS.doneValue).length > 0;
+    isShowBoard &&
+    metricsConfig.cycleTimeSettingsType === CYCLE_TIME_SETTINGS_TYPES.BY_COLUMN &&
+    metricsConfig.cycleTimeSettings.filter((column) => column.value === METRICS_CONSTANTS.doneValue).length > 0;
   const isShowDeploymentFrequency =
     requiredData.includes(REQUIRED_DATA.DEPLOYMENT_FREQUENCY) ||
     requiredData.includes(REQUIRED_DATA.CHANGE_FAILURE_RATE) ||
@@ -116,7 +108,7 @@ const MetricsStepper = (props: useNotificationLayoutEffectInterface) => {
 
     if (activeStep === METRICS_STEPS.METRICS) {
       const nextButtonValidityOptions = [
-        { isShow: isShowCrewsSetting, isValid: isCrewsSettingValid },
+        { isShow: isShowBoard, isValid: isCrewsSettingValid },
         { isShow: isShowRealDone, isValid: isRealDoneValid },
         { isShow: isShowDeploymentFrequency, isValid: isDeploymentFrequencyValid },
         { isShow: isShowCycleTimeSettings, isValid: isCycleTimeSettingsVerified },
@@ -138,9 +130,7 @@ const MetricsStepper = (props: useNotificationLayoutEffectInterface) => {
     metrics,
     projectName,
     dateRange,
-    selectedBoardColumns,
     metricsConfig,
-    isShowCrewsSetting,
     isCrewsSettingValid,
     isShowRealDone,
     isRealDoneValid,