MTES-MCT · maximeperraultdev · Dec 18, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024
diff --git a/backend/src/main/resources/db/testdata/V666.18__insert_dummy_dashboards.sql b/backend/src/main/resources/db/testdata/V666.18__insert_dummy_dashboards.sql
diff --git a/frontend/cypress/e2e/main_window/control_unit_dialog/contact_list.spec.ts b/frontend/cypress/e2e/main_window/control_unit_dialog/contact_list.spec.ts
@@ -152,7 +152,7 @@ context('Main Window > Control Unit Dialog > Contact List', () => {
 
     cy.contains('Unité DREAL Pays-de-La-Loire').should('be.visible')
 
-    cy.getDataCy('reinitialize-filters').scrollIntoView().click()
+    cy.clickButton('Réinitialiser les filtres')
   })
 
   it('Should open the current mission of the unit', () => {

diff --git a/frontend/cypress/e2e/side_window/dashboard_list/filters.spec.ts b/frontend/cypress/e2e/side_window/dashboard_list/filters.spec.ts
@@ -0,0 +1,105 @@
+import { customDayjs } from '@mtes-mct/monitor-ui'
+
+import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
+import { visitSideWindow } from '../../utils/visitSideWindow'
+
+context('Side Window > Dashboard List > Filter Bar', () => {
+  beforeEach(() => {
+    cy.viewport(1280, 1024)
+    visitSideWindow()
+    cy.clickButton('Tableaux de bord')
+  })
+
+  it('Should filter dashboard for today', () => {
+    cy.fill('Période de mise à jour', 'Aujourd’hui')
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboard for the last week', () => {
+    cy.fill('Période de mise à jour', 'Une semaine')
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboard for the last month', () => {
+    cy.fill('Période de mise à jour', 'Un mois')
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+  })
+
+  it('Should filter dashboard for the current year', () => {
+    cy.fill('Période de mise à jour', 'Année en cours')
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboards by specific period', () => {
+    cy.fill('Période de mise à jour', 'Période spécifique')
+
+    const expectedStartDate = getUtcDateInMultipleFormats('2024-01-01T00:00:00.000Z')
+    const expectedEndDate = getUtcDateInMultipleFormats(customDayjs().toISOString())
+
+    cy.fill('Période spécifique de la date de mise à jour', [
+      expectedStartDate.asDatePickerDate,
+      expectedEndDate.asDatePickerDate
+    ])
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboard by sea front', () => {
+    cy.wait(200)
+    cy.fill('Façade', ['NAMO'])
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+    cy.get('.Table-SimpleTable tr').each((row, index) => {
+      if (index === 0) {
+        return
+      }
+
+      cy.wrap(row).should('contain', 'NAMO')
+    })
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboard by regulatory themes', () => {
+    cy.wait(200)
+    cy.fill('Thématique réglementaire', ['Mixte'])
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+    cy.get('.Table-SimpleTable tr').each((row, index) => {
+      if (index === 0) {
+        return
+      }
+
+      cy.wrap(row).should('contain', 'Interdiction VNM Molene')
+    })
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+
+  it('Should filter dashboards by units', () => {
+    cy.fill('Unité', ['DML'])
+
+    cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)
+    cy.get('.Table-SimpleTable tr').each((row, index) => {
+      if (index === 0) {
+        return
+      }
+
+      cy.wrap(row).should('contain', 'DML 2A (DDTM)')
+    })
+
+    cy.clickButton('Réinitialiser les filtres')
+  })
+})
diff --git a/frontend/cypress/e2e/side_window/mission_list/filters.spec.ts b/frontend/cypress/e2e/side_window/mission_list/filters.spec.ts
@@ -9,7 +9,7 @@ context('Side Window > Mission List > Filter Bar', () => {
   })
 
   afterEach(() => {
-    cy.getDataCy('reinitialize-filters').scrollIntoView().click()
+    cy.clickButton('Réinitialiser les filtres')
   })
 
   it('Should filter missions for the current week', () => {
@@ -40,7 +40,7 @@ context('Side Window > Mission List > Filter Bar', () => {
   })
 
   it('Should filter missions by completion status', () => {
-    cy.fill('Etat des données', ['Complétées'])
+    cy.fill('État des données', ['Complétées'])
 
     cy.getDataCy('missions-filter-tags').find('.Component-SingleTag > span').contains('Données complétées')
     cy.get('.Table-SimpleTable tr').should('have.length.to.be.greaterThan', 0)

diff --git a/frontend/cypress/e2e/side_window/mission_list/missions.spec.ts b/frontend/cypress/e2e/side_window/mission_list/missions.spec.ts
@@ -33,7 +33,7 @@ context('Missions', () => {
     cy.getDataCy('edit-mission-48').should('not.exist')
 
     cy.log('Initialize filters')
-    cy.getDataCy('reinitialize-filters').click()
+    cy.clickButton('Réinitialiser les filtres')
     cy.getDataCy('edit-mission-48').scrollIntoView().should('exist')
 
     cy.log('Units should be filtered')

diff --git a/frontend/cypress/e2e/side_window/reporting/filters.spec.ts b/frontend/cypress/e2e/side_window/reporting/filters.spec.ts
@@ -10,7 +10,7 @@ context('Reportings', () => {
     cy.wait('@getReportings')
   })
   afterEach(() => {
-    cy.getDataCy('reinitialize-filters').click({ force: true })
+    cy.clickButton('Réinitialiser les filtres')
   })
 
   it('Should filter reportings for the last seven days', () => {

diff --git a/frontend/cypress/e2e/side_window/vigilance_areas_list/filters.spec.ts b/frontend/cypress/e2e/side_window/vigilance_areas_list/filters.spec.ts
@@ -6,7 +6,7 @@ context('Side Window > Vigilance Areas List > Filter Bar', () => {
   })
 
   afterEach(() => {
-    cy.getDataCy('reinitialize-filters').scrollIntoView().click()
+    cy.clickButton('Réinitialiser les filtres')
   })
 
   const verifyVigilanceAreaRows = (expectedText: string) => {

diff --git a/frontend/src/components/RegulatoryThemesFilter.tsx b/frontend/src/components/RegulatoryThemesFilter.tsx
@@ -4,7 +4,7 @@ import { setFilteredRegulatoryThemes } from '@features/layersSelector/search/sli
 import { OptionValue } from '@features/Reportings/Filters/style'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
-import { CheckPicker, CustomSearch, type Option } from '@mtes-mct/monitor-ui'
+import { CheckPicker, CustomSearch } from '@mtes-mct/monitor-ui'
 import { getRegulatoryThemesAsOptions } from '@utils/getRegulatoryThemesAsOptions'
 import { useMemo } from 'react'
 
@@ -14,10 +14,7 @@ export function RegulatoryThemesFilter({ style }: { style?: React.CSSProperties
 
   const regulatoryThemes = useMemo(() => getRegulatoryThemesAsOptions(regulatoryLayers ?? []), [regulatoryLayers])
 
-  const regulatoryThemesCustomSearch = useMemo(
-    () => new CustomSearch(regulatoryThemes as Array<Option<string>>, ['label']),
-    [regulatoryThemes]
-  )
+  const regulatoryThemesCustomSearch = useMemo(() => new CustomSearch(regulatoryThemes, ['label']), [regulatoryThemes])
 
   const searchExtent = useAppSelector(state => state.layerSearch.searchExtent)
   const globalSearchText = useAppSelector(state => state.layerSearch.globalSearchText)

diff --git a/frontend/src/components/Table/index.tsx b/frontend/src/components/Table/index.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components'
 
 export function TableWithRef({ rows, table, virtualRows }, ref) {
   return (
-    <StyledDasboardsContainer ref={ref}>
+    <StyledDashboardsContainer ref={ref}>
       <SimpleTable.Table>
         <SimpleTable.Head>
           {table.getHeaderGroups().map(headerGroup => (
@@ -57,13 +57,13 @@ export function TableWithRef({ rows, table, virtualRows }, ref) {
           })}
         </tbody>
       </SimpleTable.Table>
-    </StyledDasboardsContainer>
+    </StyledDashboardsContainer>
   )
 }
 
 export const Table = forwardRef(TableWithRef)
 
-const StyledDasboardsContainer = styled.div`
+const StyledDashboardsContainer = styled.div`
   overflow: auto;
   width: fit-content;
   // scroll width (~15px) + 4px

diff --git a/frontend/src/components/style.ts b/frontend/src/components/style.ts
@@ -39,7 +39,7 @@ export const CustomPeriodLabel = styled.div`
   color: ${p => p.theme.color.slateGray};
   font-size: 13px;
 `
-export const TagsContainer = styled.div<{ $withTopMargin: boolean }>`
+export const TagsContainer = styled.div<{ $withTopMargin?: boolean }>`
   align-items: end;
   display: flex;
   flex-direction: row;

diff --git a/frontend/src/domain/entities/dateRange.ts b/frontend/src/domain/entities/dateRange.ts
@@ -13,38 +13,30 @@ export type DateRangeLabel = {
     value: K
   }
 }
-export const DATE_RANGE_LABEL: DateRangeLabel = {
-  /* eslint-disable sort-keys-fix/sort-keys-fix */
-  DAY: {
-    label: 'Aujourd’hui',
-    value: DateRangeEnum.DAY
-  },
-  WEEK: {
+
+export const DAY_OPTION = {
+  label: 'Aujourd’hui',
+  value: DateRangeEnum.DAY
+}
+export const dateRangeOptions = [
+  DAY_OPTION,
+  {
     label: 'Une semaine',
     value: DateRangeEnum.WEEK
   },
-  MONTH: {
+  {
     label: 'Un mois',
     value: DateRangeEnum.MONTH
   },
-  YEAR: {
+  {
     label: 'Année en cours',
     value: DateRangeEnum.YEAR
   },
-  CUSTOM: {
+  {
     label: 'Période spécifique',
     value: DateRangeEnum.CUSTOM
   }
-  /* eslint-enable sort-keys-fix/sort-keys-fix */
-}
-
-export enum ReportingDateRangeEnum {
-  CUSTOM = 'CUSTOM',
-  DAY = 'DAY',
-  MONTH = 'MONTH',
-  WEEK = 'WEEK',
-  YEAR = 'YEAR'
-}
+]
 
 export enum ReportingDateRangeLabels {
   DAY = '24 dernières heures',

diff --git a/frontend/src/domain/entities/seaFrontType.ts b/frontend/src/domain/entities/seaFrontType.ts
@@ -27,8 +27,7 @@ export enum SeaFrontLabel {
   UNKNOWN = 'Façade non renseignée'
 }
 
-// TODO Replace this object with `SeaFrontLabel`.
-export const seaFrontLabels = {
+export const SeaFrontLabels = {
   GUADELOUPE: {
     label: 'Guadeloupe',
     value: 'Guadeloupe'

diff --git a/frontend/src/domain/shared_slices/MissionFilters.ts b/frontend/src/domain/shared_slices/MissionFilters.ts
@@ -4,7 +4,7 @@ import { isEqual, omit } from 'lodash'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
-import { DATE_RANGE_LABEL, DateRangeEnum } from '../entities/dateRange'
+import { DateRangeEnum, DAY_OPTION } from '../entities/dateRange'
 
 export const TODAY = customDayjs().utc().startOf('day').toISOString()
 
@@ -52,7 +52,7 @@ const INITIAL_STATE: MissionFiltersState = {
   selectedCompletionStatus: undefined,
   selectedControlUnitIds: undefined,
   selectedMissionTypes: undefined,
-  selectedPeriod: DATE_RANGE_LABEL.DAY.value,
+  selectedPeriod: DAY_OPTION.value,
   selectedSeaFronts: undefined,
   selectedStatuses: undefined,
   selectedThemes: undefined,

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Columns/FirstColumn.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Columns/FirstColumn.tsx
@@ -1,3 +1,4 @@
+import { useObserverAccordion } from '@features/Dashboard/hooks/useObserverAccordion'
 import {
   getFilteredAmps,
   getFilteredRegulatoryAreas,
@@ -14,7 +15,6 @@ import { RegulatoryAreas } from '../RegulatoryAreas'
 import { VigilanceAreas } from '../VigilanceAreas'
 import { BaseColumn } from './style'
 import { type ColumnProps } from './utils'
-import { useObserverAccordion } from '../useObserverAccordion'
 
 import type { DashboardFilters } from '../slice'
 

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Columns/SecondColumn.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Columns/SecondColumn.tsx
@@ -1,3 +1,4 @@
+import { useObserverAccordion } from '@features/Dashboard/hooks/useObserverAccordion'
 import { getFilteredReportings, type DashboardType } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
 import { useAppSelector } from '@hooks/useAppSelector'
@@ -9,7 +10,6 @@ import { getReportingFilters } from '../slice'
 import { TerritorialPressure } from '../TerritorialPressure'
 import { BaseColumn } from './style'
 import { type ColumnProps } from './utils'
-import { useObserverAccordion } from '../useObserverAccordion'
 
 type SecondColumnProps = {
   dashboardForm: [string, DashboardType]

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Columns/ThirdColumn.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Columns/ThirdColumn.tsx
@@ -1,5 +1,6 @@
 import { RTK_DEFAULT_QUERY_OPTIONS } from '@api/constants'
 import { useGetControlUnitsQuery } from '@api/controlUnitsAPI'
+import { useObserverAccordion } from '@features/Dashboard/hooks/useObserverAccordion'
 import { type DashboardType } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
 import { isNotArchived } from '@utils/isNotArchived'
@@ -11,7 +12,6 @@ import { Weather } from '../Weather'
 import { BaseColumn } from './style'
 import { type ColumnProps } from './utils'
 import { type BookmarkType, Bookmark } from '../Bookmark'
-import { useObserverAccordion } from '../useObserverAccordion'
 
 type ThirdColumnProps = {
   dashboardForm: [string, DashboardType]

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Reportings/Filters.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Reportings/Filters.tsx
@@ -12,7 +12,7 @@ import {
   type DateAsStringRange,
   type OptionValueType
 } from '@mtes-mct/monitor-ui'
-import { ReportingDateRangeEnum, ReportingDateRangeLabels } from 'domain/entities/dateRange'
+import { DateRangeEnum, ReportingDateRangeLabels } from 'domain/entities/dateRange'
 import { StatusFilterEnum, StatusFilterLabels } from 'domain/entities/reporting'
 import { forwardRef, type ComponentProps } from 'react'
 import styled from 'styled-components'
@@ -48,7 +48,7 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
     if (dateRange) {
       dispatch(
         dashboardFiltersActions.setReportingFilters({
-          filters: { dateRange: dateRange as ReportingDateRangeEnum },
+          filters: { dateRange: dateRange as DateRangeEnum },
           id: dashboardId
         })
       )
@@ -79,7 +79,7 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
       {...props}
       ref={ref}
       $hasChildren={filteredReportings.length > 1}
-      $hasPeriodFilter={reportingFilters.dateRange === ReportingDateRangeEnum.CUSTOM}
+      $hasPeriodFilter={reportingFilters.dateRange === DateRangeEnum.CUSTOM}
     >
       <StyledDatesWrapper $hasChildren={filteredReportings.length > 1}>
         <DateRangeSelect
@@ -93,7 +93,7 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
           placeholder="Date de signalement depuis"
           value={reportingFilters.dateRange}
         />
-        {reportingFilters.dateRange === ReportingDateRangeEnum.CUSTOM && (
+        {reportingFilters.dateRange === DateRangeEnum.CUSTOM && (
           <CustomPeriodContainer>
             <DateRangePicker
               key="dateRange"
@@ -127,7 +127,7 @@ export const Filters = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ ...p
 const Wrapper = styled.div<{ $hasChildren: boolean; $hasPeriodFilter: boolean }>`
   padding: 16px 24px;
   ${({ $hasChildren, $hasPeriodFilter }) => $hasPeriodFilter && !$hasChildren && 'padding-bottom: 58px;'}
-  ${({ $hasChildren }) => $hasChildren && 'display: flex; justify-content: space-between;'}
+  ${({ $hasChildren }) => ($hasChildren ? 'display: flex; justify-content: space-between;' : 'display: flow-root;')}
 `
 const StatusWrapper = styled.fieldset`
   border: none;