ADM-537:[frontend] Support multiple Done columns

frontend/__tests__/src/components/Metrics/MetricsStep/CycleTime.test.tsx

@@ -132,8 +132,8 @@ describe('CycleTime', () => {
   })
 
   describe('Error message ', () => {
-    it('should show error message when select more than one Done option', async () => {
-      const { getAllByRole, getByRole, getByText } = setup()
+    it('should not show error message when select more than one Done option', async () => {
+      const { getAllByRole, getByRole, queryByText } = setup()
       const columnsArray = getAllByRole('button', { name: 'Doing' })
       await userEvent.click(columnsArray[0])
       const listBoxZero = within(getByRole('listbox'))
@@ -144,7 +144,7 @@ describe('CycleTime', () => {
       const mockOptionOneDone = listBoxOne.getByRole('option', { name: 'Done' })
       await userEvent.click(mockOptionOneDone)
 
-      await waitFor(() => expect(getByText(errorMessage)).toBeInTheDocument())
+      expect(queryByText(errorMessage)).not.toBeInTheDocument()
     })
 
     it('should not show error message when select less than one Done option', async () => {

frontend/src/components/Metrics/MetricsStep/CycleTime/index.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
 import { MetricsSettingTitle } from '@src/components/Common/MetricsSettingTitle'
 import FlagCard from '@src/components/Metrics/MetricsStep/CycleTime/FlagCard'
 import { FormSelectPart } from '@src/components/Metrics/MetricsStep/CycleTime/FormSelectPart'
-import { ErrorDone } from '@src/components/Metrics/MetricsStep/CycleTime/style'
 import { useAppDispatch } from '@src/hooks/useAppDispatch'
 import {
   saveCycleTimeSettings,
@@ -19,38 +18,32 @@ interface cycleTimeProps {
 
 export const CycleTime = ({ title }: cycleTimeProps) => {
   const dispatch = useAppDispatch()
-  const [isError, setIsError] = useState(false)
   const { cycleTimeSettings } = useAppSelector(selectMetricsContent)
   const warningMessage = useAppSelector(selectCycleTimeWarningMessage)
   const [cycleTimeOptions, setCycleTimeOptions] = useState(cycleTimeSettings)
 
   const saveCycleTimeOptions = (name: string, value: string) => {
     setCycleTimeOptions(
-      cycleTimeOptions.map((item) => {
-        if (item.name === name) {
-          item = JSON.parse(JSON.stringify(item))
-          item.value = value
-        }
-        return item
-      })
+      cycleTimeOptions.map((item) =>
+        item.name === name
+          ? {
+              ...item,
+              value,
+            }
+          : item
+      )
     )
     dispatch(saveDoneColumn([]))
   }
 
   useEffect(() => {
-    setIsError(cycleTimeOptions.filter((item) => item.value === 'Done').length > 1)
     dispatch(saveCycleTimeSettings(cycleTimeOptions))
   }, [cycleTimeOptions, dispatch])
 
   return (
     <>
       <MetricsSettingTitle title={title} />
       {warningMessage && <WarningNotification message={warningMessage} />}
-      {isError && (
-        <ErrorDone>
-          <span>Only one column can be selected as &quot;Done&quot;</span>
-        </ErrorDone>
-      )}
       <FormSelectPart selectedOptions={cycleTimeOptions} saveCycleTimeOptions={saveCycleTimeOptions} />
       <FlagCard />
     </>

frontend/src/components/Metrics/MetricsStep/CycleTime/style.tsx

@@ -1,6 +1,5 @@
 import { styled } from '@mui/material/styles'
 import { Checkbox } from '@mui/material'
-import { theme } from '@src/theme'
 
 export const FlagCardItem = styled('div')({
   display: 'flex',
@@ -13,8 +12,3 @@ export const ItemText = styled('div')({
 export const ItemCheckbox = styled(Checkbox)({
   paddingLeft: '0',
 })
-
-export const ErrorDone = styled('div')({
-  color: theme.components?.errorMessage.color,
-  paddingBottom: theme.components?.errorMessage.paddingBottom,
-})

frontend/src/components/Metrics/MetricsStep/index.tsx

@@ -4,8 +4,8 @@ import { RealDone } from '@src/components/Metrics/MetricsStep/RealDone'
 import { CycleTime } from '@src/components/Metrics/MetricsStep/CycleTime'
 import { Classification } from '@src/components/Metrics/MetricsStep/Classification'
 import { selectJiraColumns, selectMetrics, selectUsers } from '@src/context/config/configSlice'
-import { METRICS_CONSTANTS, REQUIRED_DATA } from '@src/constants'
-import { selectCycleTimeSettings, selectMetricsContent } from '@src/context/Metrics/metricsSlice'
+import { REQUIRED_DATA } from '@src/constants'
+import { selectMetricsContent } from '@src/context/Metrics/metricsSlice'
 import { DeploymentFrequencySettings } from '@src/components/Metrics/MetricsStep/DeploymentFrequencySettings'
 import { LeadTimeForChanges } from '@src/components/Metrics/MetricsStep/LeadTimeForChanges'
 
@@ -14,7 +14,6 @@ export const MetricsStep = () => {
   const users = useAppSelector(selectUsers)
   const jiraColumns = useAppSelector(selectJiraColumns)
   const targetFields = useAppSelector(selectMetricsContent).targetFields
-  const selectedCycleTimeSettings = useAppSelector(selectCycleTimeSettings)
   const isShowCrewsAndRealDone =
     requiredData.includes(REQUIRED_DATA.VELOCITY) ||
     requiredData.includes(REQUIRED_DATA.CYCLE_TIME) ||
@@ -26,10 +25,7 @@ export const MetricsStep = () => {
 
       {requiredData.includes(REQUIRED_DATA.CYCLE_TIME) && <CycleTime title={'Cycle time settings'} />}
 
-      {isShowCrewsAndRealDone &&
-        selectedCycleTimeSettings.filter((column) => column.value === METRICS_CONSTANTS.doneValue).length < 2 && (
-          <RealDone columns={jiraColumns} title={'Real done'} label={'Consider as Done'} />
-        )}
+      {isShowCrewsAndRealDone && <RealDone columns={jiraColumns} title={'Real done'} label={'Consider as Done'} />}
 
       {requiredData.includes(REQUIRED_DATA.CLASSIFICATION) && (
         <Classification targetFields={targetFields} title={'Classification setting'} label={'Distinguished By'} />