feat: fix form field array errors. Remove all periods if is at all times and critical. some vigilance area legend fixes

Author: maximeperraultdev

frontend/src/features/Dashboard/components/DashboardForm/VigilanceAreas/Layer.tsx

@@ -3,7 +3,7 @@ import { dashboardActions, getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
 import { LayerLegend } from '@features/layersSelector/utils/LayerLegend.style'
 import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
-import { isWithinPeriod } from '@features/VigilanceArea/components/VigilanceAreaForm/utils'
+import { isOutOfPeriod, isWithinPeriod } from '@features/VigilanceArea/components/VigilanceAreaForm/utils'
 import { VigilanceArea } from '@features/VigilanceArea/types'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Icon, IconButton, Tag, THEME } from '@mtes-mct/monitor-ui'
@@ -72,7 +72,7 @@ export function Layer({ isPinned = false, isSelected = false, vigilanceArea }: V
       <StyledTransparentButton $width="70%">
         <LayerLegend
           border={isWithinPeriod(vigilanceArea?.periods, true) ? `2px solid ${THEME.color.maximumRed}` : undefined}
-          isDisabled={vigilanceArea?.periods?.length === 0}
+          isDisabled={isOutOfPeriod(vigilanceArea?.periods)}
           layerType={MonitorEnvLayers.VIGILANCE_AREA}
           legendKey={vigilanceArea?.comments ?? 'aucun nom'}
           type={vigilanceArea?.name ?? 'aucun nom'}

frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Form.tsx

@@ -4,7 +4,7 @@ import { Tooltip } from '@components/Tooltip'
 import { ZonePicker } from '@components/ZonePicker'
 import { CancelEditDialog } from '@features/commonComponents/Modals/CancelEditModal'
 import { DeleteModal } from '@features/commonComponents/Modals/Delete'
-import { Periods } from '@features/VigilanceArea/components/VigilanceAreaForm/Periods'
+import { Periods } from '@features/VigilanceArea/components/VigilanceAreaForm/Periods/Periods'
 import { NEW_VIGILANCE_AREA_ID } from '@features/VigilanceArea/constants'
 import { vigilanceAreaActions, VigilanceAreaFormTypeOpen } from '@features/VigilanceArea/slice'
 import { VigilanceArea } from '@features/VigilanceArea/types'

…/components/VigilanceAreaForm/Period.tsx …nts/VigilanceAreaForm/Periods/Period.tsxfrontend/src/features/VigilanceArea/components/VigilanceAreaForm/Period.tsx renamed to frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Periods/Period.tsx frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Period.tsx renamed to frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Periods/Period.tsx

@@ -2,7 +2,7 @@ import {
   CheckboxWrapper,
   CriticalCheckbox,
   PeriodCircle
-} from '@features/VigilanceArea/components/VigilanceAreaForm/Periods'
+} from '@features/VigilanceArea/components/VigilanceAreaForm/Periods/Periods'
 import { PublishedVigilanceAreaPeriodSchema } from '@features/VigilanceArea/components/VigilanceAreaForm/Schema'
 import { ValidateButton } from '@features/VigilanceArea/components/VigilanceAreaForm/style'
 import { VigilanceArea } from '@features/VigilanceArea/types'
@@ -24,25 +24,25 @@ import { omit } from 'lodash'
 import { useState } from 'react'
 import styled from 'styled-components'
 
+import type { FormikErrors } from 'formik'
+
 type PeriodProps = {
-  hasError: string | undefined
+  error: FormikErrors<VigilanceArea.VigilanceAreaPeriod> | undefined
   index: number
   initialPeriod: VigilanceArea.VigilanceAreaPeriod
   onValidate: (vigilanceAreaSource: VigilanceArea.VigilanceAreaPeriod) => void
   remove: (index: number) => void
 }
 
-export function Period({ hasError, index, initialPeriod, onValidate, remove }: PeriodProps) {
+export function Period({ error, index, initialPeriod, onValidate, remove }: PeriodProps) {
   const frequencyOptions = getOptionsFromLabelledEnum(VigilanceArea.FrequencyLabel)
   const endingConditionOptions = getOptionsFromLabelledEnum(VigilanceArea.EndingConditionLabel)
-
   const isNewlyCreatedPeriod = Object.values(
     omit(initialPeriod, ['isCritical', 'id', 'frequency', 'endingCondition'])
   ).every(value => value === undefined || value === false)
   const [isEditing, setIsEditing] = useState(isNewlyCreatedPeriod)
   const [editedPeriod, setEditedPeriod] = useState(initialPeriod)
   const isValid = (value: VigilanceArea.VigilanceAreaPeriod) => PublishedVigilanceAreaPeriodSchema.isValidSync(value)
-
   const cancel = () => {
     if (isNewlyCreatedPeriod) {
       remove(index)
@@ -107,7 +107,7 @@ export function Period({ hasError, index, initialPeriod, onValidate, remove }: P
               : undefined
           }
           disabled={editedPeriod.isAtAllTimes}
-          error={hasError}
+          error={error?.startDatePeriod || error?.endDatePeriod}
           hasSingleCalendar
           isCompact
           isErrorMessageHidden
@@ -133,7 +133,7 @@ export function Period({ hasError, index, initialPeriod, onValidate, remove }: P
       <>
         <Select
           disabled={editedPeriod.isAtAllTimes}
-          error={hasError}
+          error={error?.frequency}
           isErrorMessageHidden
           isLight
           isRequired

…components/VigilanceAreaForm/Periods.tsx …ts/VigilanceAreaForm/Periods/Periods.tsxfrontend/src/features/VigilanceArea/components/VigilanceAreaForm/Periods.tsx renamed to frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Periods/Periods.tsx frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Periods.tsx renamed to frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Periods/Periods.tsx

@@ -1,16 +1,23 @@
-import { Period } from '@features/VigilanceArea/components/VigilanceAreaForm/Period'
+import { Period } from '@features/VigilanceArea/components/VigilanceAreaForm/Periods/Period'
 import { getVigilanceAreaPeriodInitialValues } from '@features/VigilanceArea/components/VigilanceAreaForm/utils'
 import { VigilanceArea } from '@features/VigilanceArea/types'
 import { Accent, Button, Checkbox, customDayjs, Icon, Legend } from '@mtes-mct/monitor-ui'
-import { FieldArray, useFormikContext } from 'formik'
+import { FieldArray, type FormikErrors, useFormikContext } from 'formik'
 import styled from 'styled-components'
 
 export function Periods() {
   const { errors, setFieldValue, values } = useFormikContext<VigilanceArea.VigilanceArea>()
 
+  function isArrayOfErrors(
+    periodErrors: string | FormikErrors<VigilanceArea.VigilanceAreaPeriod>[] | undefined
+  ): periodErrors is FormikErrors<VigilanceArea.VigilanceAreaPeriod>[] {
+    return Array.isArray(periodErrors)
+  }
+
   const { periods } = values
   const setIsAtAllTimes = (isChecked: boolean | undefined, isCritical: boolean) => {
-    const filtered = periods?.filter(period => period.isCritical !== isCritical)
+    // Clean all periods if user set period to all times and critical
+    const filtered = isCritical ? [] : periods?.filter(period => period.isCritical !== isCritical)
 
     const index = periods?.findIndex(period => period.isAtAllTimes && period.isCritical === isCritical) ?? -1
 
@@ -44,6 +51,7 @@ export function Periods() {
                 <PeriodCircle />
                 <CriticalCheckbox
                   checked={hasSimpleIsAtAllTimesPeriod}
+                  disabled={hasCriticalIsAtAllTimesPeriod}
                   isLight
                   label="Vigilance simple en tout temps"
                   name="isSimpleAtAllTimes"
@@ -79,7 +87,7 @@ export function Periods() {
                 return (
                   <Period
                     key={period.id ?? index}
-                    hasError={errors.periods}
+                    error={isArrayOfErrors(errors.periods) ? errors.periods[index] : undefined}
                     index={index}
                     initialPeriod={period}
                     onValidate={vigilanceAreaPeriod => {

frontend/src/features/VigilanceArea/components/VigilanceAreaForm/Sources/index.tsx

@@ -28,7 +28,7 @@ export function Sources() {
             return (
               <Source
                 key={source.id ?? index}
-                hasError={meta.error}
+                hasError={meta.error?.[index]}
                 index={index}
                 initialSource={source}
                 onValidate={vigilanceAreaSource => {
@@ -77,7 +77,7 @@ export function Sources() {
             return (
               <Source
                 key={source.id ?? index}
-                hasError={meta.error}
+                hasError={meta.error?.[index]}
                 index={index}
                 initialSource={source}
                 onValidate={vigilanceAreaSource => {

frontend/src/features/VigilanceArea/components/VigilanceAreaForm/index.tsx

@@ -21,7 +21,7 @@ import { Form } from './Form'
 import { VigilanceAreaPanel } from './Panel'
 import { VigilanceAreaSchema } from './Schema'
 import { Header, SubHeaderContainer, Title, TitleContainer } from './style'
-import { getVigilanceAreaInitialValues, isWithinPeriod } from './utils'
+import { getVigilanceAreaInitialValues, isOutOfPeriod, isWithinPeriod } from './utils'
 
 type VigilanceAreaFormProps = {
   isOpen: boolean
@@ -94,7 +94,7 @@ export function VigilanceAreaForm({ isOpen, isReadOnly = false, vigilanceAreaId
                 border={
                   isWithinPeriod(vigilanceArea?.periods, true) ? `2px solid ${THEME.color.maximumRed}` : undefined
                 }
-                isDisabled={vigilanceArea?.periods?.length === 0}
+                isDisabled={isOutOfPeriod(vigilanceArea?.periods)}
                 layerType={MonitorEnvLayers.VIGILANCE_AREA}
                 legendKey={vigilanceArea?.comments ?? 'aucun nom'}
                 size={Size.NORMAL}

frontend/src/features/VigilanceArea/components/VigilanceAreasList/Cells/PeriodsCell.tsx

@@ -1,5 +1,5 @@
 import { Tooltip } from '@components/Tooltip'
-import { BasePeriodCircle } from '@features/VigilanceArea/components/VigilanceAreaForm/Periods'
+import { BasePeriodCircle } from '@features/VigilanceArea/components/VigilanceAreaForm/Periods/Periods'
 import { PeriodCell } from '@features/VigilanceArea/components/VigilanceAreasList/Cells/PeriodCell'
 import { VigilanceArea } from '@features/VigilanceArea/types'
 import styled from 'styled-components'

frontend/src/features/layersSelector/myVigilanceAreas/MyVigilanceAreaLayerZone.tsx

@@ -1,6 +1,6 @@
 import { useGetVigilanceAreasQuery } from '@api/vigilanceAreasAPI'
 import { StyledTransparentButton } from '@components/style'
-import { isWithinPeriod } from '@features/VigilanceArea/components/VigilanceAreaForm/utils'
+import { isOutOfPeriod, isWithinPeriod } from '@features/VigilanceArea/components/VigilanceAreaForm/utils'
 import { vigilanceAreaActions } from '@features/VigilanceArea/slice'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Icon, IconButton, OPENLAYERS_PROJECTION, Size, THEME, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
@@ -78,7 +78,7 @@ export function MyVigilanceAreaLayerZone({
       <StyledTransparentButton onClick={zoomToLayerExtent}>
         <LayerLegend
           border={isWithinPeriod(layer?.periods, true) ? `2px solid ${THEME.color.maximumRed}` : undefined}
-          isDisabled={layer?.periods?.length === 0}
+          isDisabled={isOutOfPeriod(layer?.periods)}
           layerType={MonitorEnvLayers.VIGILANCE_AREA}
           legendKey={layer?.comments}
           type={layer?.name ?? 'aucun nom'}

frontend/src/features/layersSelector/search/ResultsList/VigilanceAreaLayer/index.tsx

@@ -1,5 +1,5 @@
 import { StyledTransparentButton } from '@components/style'
-import { isWithinPeriod } from '@features/VigilanceArea/components/VigilanceAreaForm/utils'
+import { isOutOfPeriod, isWithinPeriod } from '@features/VigilanceArea/components/VigilanceAreaForm/utils'
 import { vigilanceAreaActions } from '@features/VigilanceArea/slice'
 import { useTracking } from '@hooks/useTracking'
 import { Accent, Icon, IconButton, OPENLAYERS_PROJECTION, THEME, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
@@ -99,7 +99,7 @@ export function VigilanceAreaLayer({ layer, searchedText }: RegulatoryLayerProps
       <StyledTransparentButton onClick={toggleZoneMetadata}>
         <LayerLegend
           border={isWithinPeriod(layer?.periods, true) ? `2px solid ${THEME.color.maximumRed}` : undefined}
-          isDisabled={layer?.periods?.length === 0}
+          isDisabled={isOutOfPeriod(layer?.periods)}
           layerType={MonitorEnvLayers.VIGILANCE_AREA}
           legendKey={layer?.comments}
           type={layer?.name ?? 'aucun'}