ADM-909:[frontend]change with comments

frontend/__tests__/containers/ConfigStep/DateRangePicker.test.tsx

@@ -286,7 +286,7 @@ describe('DateRangePickerSection', () => {
     expect(sortButtonContainer).toBeNull();
   });
 
-  it('should update sort status when handleSortStatusChange is called', async () => {
+  it('should update sort status when handleSortTypeChange is called', async () => {
     const rangeDate1 = ['03/15/2024', '03/25/2024'];
     const rangeDate2 = ['03/08/2024', '03/11/2024'];
 

frontend/__tests__/containers/ConfigStep/SortDateRange.test.tsx

@@ -1,6 +1,6 @@
 import { SortType } from '@src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup';
 import { SortDateRange } from '@src/containers/ConfigStep/DateRangePicker/SortDateRange';
-import { updateDateRangeSortStatus } from '@src/context/config/configSlice';
+import { updateDateRangeSortType } from '@src/context/config/configSlice';
 import { setupStore } from '@test/utils/setupStoreUtil';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -18,13 +18,13 @@ const setup = () => {
 };
 jest.mock('@src/context/config/configSlice', () => ({
   ...jest.requireActual('@src/context/config/configSlice'),
-  updateDateRangeSortStatus: jest.fn().mockReturnValue({ type: 'SHOULD_UPDATE_SORT_STATUS' }),
+  updateDateRangeSortType: jest.fn().mockReturnValue({ type: 'SHOULD_UPDATE_SORT_STATUS' }),
 }));
 
 describe('SortDateRange button behaviors', () => {
   it('should show sort time rang button', () => {
     setup();
-    const sortButtonContainer = screen.getByLabelText('Time range sort');
+    const sortButtonContainer = screen.getByLabelText('Sorting date range');
     expect(sortButtonContainer).toBeInTheDocument();
 
     const sortTextButton = screen.getByText('Default sort');
@@ -36,7 +36,7 @@ describe('SortDateRange button behaviors', () => {
 
   it('should change sort order given SortButton is clicked', async () => {
     setup();
-    const sortButtonContainer = screen.getByLabelText('Time range sort');
+    const sortButtonContainer = screen.getByLabelText('Sorting date range');
     expect(sortButtonContainer).toBeInTheDocument();
 
     const sortTextButton = screen.getByText('Default sort');
@@ -46,8 +46,8 @@ describe('SortDateRange button behaviors', () => {
     const sortButton = screen.getByLabelText('sort button');
     await userEvent.click(sortButton);
 
-    expect(updateDateRangeSortStatus).toHaveBeenCalledTimes(1);
-    expect(updateDateRangeSortStatus).toHaveBeenCalledWith(SortType.DESCENDING);
+    expect(updateDateRangeSortType).toHaveBeenCalledTimes(1);
+    expect(updateDateRangeSortType).toHaveBeenCalledWith(SortType.DESCENDING);
   });
 
   it('should render right icon with sort status', async () => {

frontend/__tests__/context/configSlice.test.ts

@@ -3,7 +3,7 @@ import configReducer, {
   selectSteps,
   updateCalendarType,
   updateDateRange,
-  updateDateRangeSortStatus,
+  updateDateRangeSortType,
   updateMetrics,
   updateProjectCreatedState,
   updateProjectName,
@@ -52,11 +52,11 @@ describe('config reducer', () => {
     expect(config.dateRange[0].endDate).toEqual('');
   });
 
-  it('should update date range sort status with given sort status', () => {
-    const newSortStatus = SortType.DEFAULT;
-    const config = configReducer(initialConfigState, updateDateRangeSortStatus(newSortStatus)).basic;
+  it('should update date range sort type with given sort type', () => {
+    const newSortType = SortType.DEFAULT;
+    const config = configReducer(initialConfigState, updateDateRangeSortType(newSortType)).basic;
 
-    expect(config.sortStatus).toEqual(newSortStatus);
+    expect(config.sortType).toEqual(newSortType);
   });
 
   it('should isProjectCreated is false when import file', () => {

frontend/__tests__/initialConfigState.ts

@@ -14,7 +14,7 @@ const initialConfigState: BasicConfigState = {
         endDate: null,
       },
     ],
-    sortStatus: SortType.DEFAULT,
+    sortType: SortType.DEFAULT,
     metrics: [],
   },
   board: {

frontend/src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup.tsx

@@ -55,18 +55,18 @@ export const DateRangePickerGroup = ({ sortType, onError }: IProps) => {
   const dispatch = useAppDispatch();
   const dateRangeGroup = useAppSelector(selectDateRange);
   const isAddButtonDisabled = dateRangeGroup.length === MAX_TIME_RANGE_AMOUNT;
-  const [sortDateRangeGroup, setSortDateRangeGroup] = useState<ISortedDateRangeType[]>(
+  const [sortedDateRange, setSortedDateRange] = useState<ISortedDateRangeType[]>(
     dateRangeGroup.map(fillDateRangeGroup),
   );
 
   useEffect(() => {
-    const errors = sortDateRangeGroup.filter(({ startDateError, endDateError }) => startDateError || endDateError);
+    const errors = sortedDateRange.filter(({ startDateError, endDateError }) => startDateError || endDateError);
     onError?.(errors);
-  }, [onError, sortDateRangeGroup]);
+  }, [onError, sortedDateRange]);
 
   const handleError = (type: string, error: DateValidationError, index: number) => {
-    setSortDateRangeGroup(
-      sortDateRangeGroup.map((item) => ({ ...item, [type]: item.sortIndex === index ? error : null })),
+    setSortedDateRange(
+      sortedDateRange.map((item) => ({ ...item, [type]: item.sortIndex === index ? error : null })),
     );
   };
 
@@ -77,35 +77,35 @@ export const DateRangePickerGroup = ({ sortType, onError }: IProps) => {
   };
 
   const addRangeHandler = () => {
-    const result = [...sortDateRangeGroup, { startDate: null, endDate: null }];
-    setSortDateRangeGroup(result.map(fillDateRangeGroup));
+    const result = [...sortedDateRange, { startDate: null, endDate: null }];
+    setSortedDateRange(result.map(fillDateRangeGroup));
     dispatch(updateDateRange(result.map(({ startDate, endDate }) => ({ startDate, endDate }))));
   };
 
   const handleChange = (
     { startDate, endDate }: { startDate: string | null; endDate: string | null },
     index: number,
   ) => {
-    const result = sortDateRangeGroup.map((item) =>
+    const result = sortedDateRange.map((item) =>
       item.sortIndex === index ? { ...item, startDate, endDate, startDateError: null, endDateError: null } : item,
     );
-    setSortDateRangeGroup(result);
+    setSortedDateRange(result);
     dispatchUpdateConfig();
     dispatch(updateDateRange(result.map(({ startDate, endDate }) => ({ startDate, endDate }))));
   };
 
   const handleRemove = (index: number) => {
-    const result = [...sortDateRangeGroup];
+    const result = [...sortedDateRange];
     remove(result, ({ sortIndex }) => sortIndex === index);
-    setSortDateRangeGroup(result);
+    setSortedDateRange(result);
     dispatchUpdateConfig();
     dispatch(updateDateRange(result.map(({ startDate, endDate }) => ({ startDate, endDate }))));
   };
 
   return (
     <DateRangePickerGroupContainer>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
-        {sortBy(sortDateRangeGroup, get(sortFn, sortType)).map(({ startDate, endDate, sortIndex }, index) => (
+        {sortBy(sortedDateRange, get(sortFn, sortType)).map(({ startDate, endDate, sortIndex }, index) => (
           <DateRangePicker
             startDate={startDate}
             endDate={endDate}
@@ -114,7 +114,7 @@ export const DateRangePickerGroup = ({ sortType, onError }: IProps) => {
             onChange={handleChange}
             onError={handleError}
             onRemove={handleRemove}
-            allRange={sortDateRangeGroup}
+            allRange={sortedDateRange}
           />
         ))}
         <AddButton

frontend/src/containers/ConfigStep/DateRangePicker/SortDateRange.tsx

@@ -6,7 +6,7 @@ import {
   SortTextButton,
 } from '@src/containers/ConfigStep/DateRangePicker/style';
 import { SortType } from '@src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup';
-import { updateDateRangeSortStatus } from '@src/context/config/configSlice';
+import { updateDateRangeSortType } from '@src/context/config/configSlice';
 import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
 import { SORT_DATE_RANGE_TEXT } from '@src/constants/resources';
 import { useAppDispatch } from '@src/hooks/useAppDispatch';
@@ -20,26 +20,30 @@ type IProps = {
 
 export const SortDateRange = ({ onChange, sortType }: IProps) => {
   const dispatch = useAppDispatch();
-  const [sortOrder, setSortOrder] = useState(sortType);
+  const [dateRangeSortType, setDateRangeSortType] = useState(sortType);
 
   const handleChangeSort = () => {
     const totalSortTypes = Object.values(SortType).length;
-    const currentIndex = Object.values(SortType).indexOf(sortOrder);
+    const currentIndex = Object.values(SortType).indexOf(dateRangeSortType);
     const newIndex = (currentIndex + 1) % totalSortTypes;
     const newSortType = Object.values(SortType)[newIndex];
 
-    setSortOrder(newSortType);
-    dispatch(updateDateRangeSortStatus(newSortType));
+    setDateRangeSortType(newSortType);
+    dispatch(updateDateRangeSortType(newSortType));
     onChange?.(newSortType);
   };
 
   return (
-    <Box aria-label='Time range sort'>
+    <Box aria-label='Sorting date range'>
       <SortButtonContainer>
-        <SortTextButton disableRipple>{SORT_DATE_RANGE_TEXT[sortOrder]}</SortTextButton>
+        <SortTextButton disableRipple>{SORT_DATE_RANGE_TEXT[dateRangeSortType]}</SortTextButton>
         <SortButton aria-label='sort button' onClick={handleChangeSort}>
-          {sortOrder === SortType.ASCENDING ? <AscendingIcon fontSize='inherit' /> : <ArrowDropUp fontSize='inherit' />}
-          {sortOrder === SortType.DESCENDING ? (
+          {dateRangeSortType === SortType.ASCENDING ? (
+            <AscendingIcon fontSize='inherit' />
+          ) : (
+            <ArrowDropUp fontSize='inherit' />
+          )}
+          {dateRangeSortType === SortType.DESCENDING ? (
             <DescendingIcon fontSize='inherit' />
           ) : (
             <ArrowDropDown fontSize='inherit' />

frontend/src/containers/ConfigStep/DateRangePicker/index.tsx

@@ -1,6 +1,6 @@
 import { DateRangePickerGroup, SortType } from '@src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup';
 import { ISortedDateRangeType } from '@src/containers/ConfigStep/DateRangePicker/DateRangePickerGroup';
-import { selectDateRange, selectDateRangeSortStatus } from '@src/context/config/configSlice';
+import { selectDateRange, selectDateRangeSortType } from '@src/context/config/configSlice';
 import { SortDateRange } from '@src/containers/ConfigStep/DateRangePicker/SortDateRange';
 import SectionTitleWithTooltip from '@src/components/Common/SectionTitleWithTooltip';
 import { TitleContainer } from '@src/containers/ConfigStep/DateRangePicker/style';
@@ -10,24 +10,19 @@ import { useMemo, useState } from 'react';
 
 export const DateRangePickerSection = () => {
   const dateRangeGroup = useAppSelector(selectDateRange);
-  const dateRangeGroupSortStatus = useAppSelector(selectDateRangeSortStatus);
+  const dateRangeGroupSortType = useAppSelector(selectDateRangeSortType);
   const [sortType, setSortType] = useState<SortType>(
-    dateRangeGroupSortStatus ? dateRangeGroupSortStatus : SortType.DEFAULT,
+    dateRangeGroupSortType ? dateRangeGroupSortType : SortType.DEFAULT,
   );
 
   const [hasError, setHasError] = useState(false);
   const isDateRangeValid = useMemo(() => {
     return dateRangeGroup.every((dateRange) => {
-      return (
-        dateRange.startDate !== null &&
-        dateRange.endDate !== null &&
-        dateRange.startDate !== 'Invalid Date' &&
-        dateRange.endDate !== 'Invalid Date'
-      );
+      return dateRange.startDate && dateRange.endDate;
     });
   }, [dateRangeGroup]);
 
-  const handleSortStatusChange = (type: SortType) => {
+  const handleSortTypeChange = (type: SortType) => {
     setSortType(type);
   };
 
@@ -46,7 +41,7 @@ export const DateRangePickerSection = () => {
           }}
         />
         {dateRangeGroup.length > 1 && isDateRangeValid && !hasError && (
-          <SortDateRange onChange={handleSortStatusChange} sortType={sortType} />
+          <SortDateRange onChange={handleSortTypeChange} sortType={sortType} />
         )}
       </TitleContainer>
       <DateRangePickerGroup sortType={sortType} onError={handleError} />

frontend/src/containers/MetricsStepper/index.tsx

@@ -175,13 +175,13 @@ const MetricsStepper = () => {
 
   /* istanbul ignore next */
   const handleSave = () => {
-    const { projectName, dateRange, calendarType, metrics, sortStatus } = config.basic;
+    const { projectName, dateRange, calendarType, metrics, sortType } = config.basic;
     const configData = {
       projectName,
       dateRange,
       calendarType,
       metrics,
-      sortStatus,
+      sortType,
 
       board: isShowBoard ? omit(config.board.config, ['projectKey']) : undefined,
       /* istanbul ignore next */

frontend/src/context/config/configSlice.ts

@@ -30,7 +30,7 @@ export interface BasicConfigState {
     projectName: string;
     calendarType: string;
     dateRange: DateRange;
-    sortStatus: SortType;
+    sortType: SortType;
     metrics: string[];
   };
   board: IBoardState;
@@ -50,7 +50,7 @@ export const initialBasicConfigState: BasicConfigState = {
         endDate: null,
       },
     ],
-    sortStatus: SortType?.DEFAULT,
+    sortType: SortType?.DEFAULT,
     metrics: [],
   },
   board: initialBoardState,
@@ -103,8 +103,8 @@ export const configSlice = createSlice({
     updateDateRange: (state, action) => {
       state.basic.dateRange = action.payload;
     },
-    updateDateRangeSortStatus: (state, action) => {
-      state.basic.sortStatus = action.payload;
+    updateDateRangeSortType: (state, action) => {
+      state.basic.sortType = action.payload;
     },
     updateMetrics: (state, action) => {
       const { metrics, shouldBoardShow, shouldPipelineToolShow, shouldSourceControlShow } = getMetricsInfo(
@@ -213,7 +213,7 @@ export const {
   updateProjectName,
   updateCalendarType,
   updateDateRange,
-  updateDateRangeSortStatus,
+  updateDateRangeSortType,
   updateMetrics,
   updateBoard,
   updateBoardVerifyState,
@@ -232,7 +232,7 @@ export const {
 export const selectProjectName = (state: RootState) => state.config.basic.projectName;
 export const selectCalendarType = (state: RootState) => state.config.basic.calendarType;
 export const selectDateRange = (state: RootState) => state.config.basic.dateRange;
-export const selectDateRangeSortStatus = (state: RootState) => state.config.basic.sortStatus;
+export const selectDateRangeSortType = (state: RootState) => state.config.basic.sortType;
 export const selectMetrics = (state: RootState) => state.config.basic.metrics;
 export const isSelectBoardMetrics = (state: RootState) =>
   state.config.basic.metrics.some((metric) => BOARD_METRICS.includes(metric));