Fix cypress tests with flag states

MTES-MCT · May 28, 2024 · e3a0f27 · e3a0f27
1 parent b3b1358
commit e3a0f27
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 40 deletions.
diff --git a/frontend/cypress/e2e/vessels/vessel_filters.spec.ts b/frontend/cypress/e2e/vessels/vessel_filters.spec.ts
@@ -16,7 +16,7 @@ context('Vessel filters', () => {
 
     // When
     cy.get('*[data-cy^="save-filter-modal"]').click({ timeout: 10000 })
-    cy.get('*[class^="rs-input"]').last().type('Navires FR')
+    cy.get('[name="vessel-filter"]').type('Navires FR')
     cy.get('*[data-cy="save-filter"]').click({ timeout: 10000 })
 
     // Then

diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
@@ -15,7 +15,7 @@ export const FIVE_MINUTES = 5 * 60 * 1000
 
 export const COUNTRIES_AS_ALPHA2_OPTIONS: Option<string>[] = Object.keys(Countries.getAlpha2Codes()).map(code => ({
   label: Countries.getName(code, 'fr'),
-  value: code.toLowerCase()
+  value: code
 }))
 
 export const COUNTRIES_AS_ALPHA3_OPTIONS: Option<string>[] = Object.keys(Countries.getAlpha3Codes()).map(code => ({

diff --git a/...nd/src/features/MainWindow/components/MapButtons/VesselFilters/SaveVesselFiltersModal.tsx b/...nd/src/features/MainWindow/components/MapButtons/VesselFilters/SaveVesselFiltersModal.tsx
@@ -1,18 +1,13 @@
 import { COLORS } from '@constants/constants'
+import { StyledModalHeader } from '@features/commonComponents/StyledModalHeader'
+import { TextInput, Icon, Size } from '@mtes-mct/monitor-ui'
 import { useState } from 'react'
 import { CirclePicker } from 'react-color'
-import { Input, InputGroup, Modal } from 'rsuite'
+import { Modal } from 'rsuite'
 import styled from 'styled-components'
 import { v4 as uuidv4 } from 'uuid'
 
 import { TagList } from './TagList'
-import { StyledModalHeader } from '../../../../commonComponents/StyledModalHeader'
-import FilterSVG from '../../../../icons/Icone_filtres_dark.svg?react'
-
-const styles = {
-  marginBottom: 20,
-  width: 200
-}
 
 type SaveVesselFiltersModalProps = Readonly<{
   addFilter: (filter: { color: string; filters: any; name: string; showed: boolean; uuid: string }) => void
@@ -28,10 +23,14 @@ export function SaveVesselFiltersModal({
   isOpen,
   setIsOpen
 }: SaveVesselFiltersModalProps) {
-  const [filterName, setFilterName] = useState('')
+  const [filterName, setFilterName] = useState<string | undefined>(undefined)
   const [filterColor, setFilterColor] = useState('#2c6e49')
 
   const save = () => {
+    if (!filterName) {
+      return
+    }
+
     const filter = {
       color: filterColor,
       filters,
@@ -61,13 +60,17 @@ export function SaveVesselFiltersModal({
         </Modal.Title>
       </StyledModalHeader>
       <Modal.Body>
-        <InputGroup inside style={styles}>
-          <InputGroup.Addon>
-            <Filter fill={filterColor} />
-          </InputGroup.Addon>
-          <Input onChange={setFilterName} placeholder="FILTRE SANS NOM" />
-        </InputGroup>
-        <TagList filters={filters} />
+        <TextInput
+          Icon={Icon.Filter}
+          isLabelHidden
+          label="Nom du filtre"
+          name="vessel-filter"
+          onChange={setFilterName}
+          placeholder="FILTRE SANS NOM"
+          size={Size.LARGE}
+          value={filterName}
+        />
+        <StyledTagList filters={filters} />
         <SelectedFilterColor>
           <Square $backgroundColor={filterColor} />
           Couleur des navires du filtre
@@ -100,6 +103,10 @@ export function SaveVesselFiltersModal({
   )
 }
 
+const StyledTagList = styled(TagList)`
+  margin-top: 12px;
+`
+
 const SelectedFilterColor = styled.div`
   margin: 10px 0 10px 0;
   font-size: 13px;
@@ -151,7 +158,3 @@ const CancelButton = styled.button`
     color: ${COLORS.lightGray};
   }
 `
-
-const Filter = styled(FilterSVG)`
-  width: 16px;
-`
diff --git a/frontend/src/features/MainWindow/components/MapButtons/VesselFilters/TagList.tsx b/frontend/src/features/MainWindow/components/MapButtons/VesselFilters/TagList.tsx
@@ -1,3 +1,4 @@
+import { CountryFlag } from '@components/CountryFlag'
 import { COLORS } from '@constants/constants'
 import countries from 'i18n-iso-countries'
 import { useEffect, useState } from 'react'
@@ -10,6 +11,7 @@ import { vesselSize } from '../../../../../domain/entities/vessel/vessel'
 import type { FilterValues } from 'domain/types/filter'
 
 type TagListProps = Readonly<{
+  className?: string | undefined
   filters: FilterValues
   removeTagFromFilter?: (removeObject: {
     type: string | undefined
@@ -18,7 +20,7 @@ type TagListProps = Readonly<{
   }) => void
   uuid?: string
 }>
-export function TagList({ filters, removeTagFromFilter, uuid }: TagListProps) {
+export function TagList({ className, filters, removeTagFromFilter, uuid }: TagListProps) {
   const [tags, setTags] = useState<
     Array<{
       iconElement: JSX.Element
@@ -38,7 +40,7 @@ export function TagList({ filters, removeTagFromFilter, uuid }: TagListProps) {
 
     if (filters.countriesFiltered?.length) {
       const countriesTags = filters.countriesFiltered.map(country => ({
-        iconElement: <Flag rel="preload" src={`flags/${country}.svg`} title={countries.getName(country, 'fr')} />,
+        iconElement: <StyledCountryFlag countryCode={country} size={[20, 14]} />,
         text: countries.getName(country, 'fr'),
         type: 'countriesFiltered',
         value: country
@@ -134,7 +136,7 @@ export function TagList({ filters, removeTagFromFilter, uuid }: TagListProps) {
   }, [filters])
 
   return (
-    <List>
+    <List className={className}>
       {tags?.length ? (
         <>
           {tags.map(tag => (
@@ -156,16 +158,16 @@ export function TagList({ filters, removeTagFromFilter, uuid }: TagListProps) {
   )
 }
 
+const StyledCountryFlag = styled(CountryFlag)`
+  margin-right: 8px;
+  vertical-align: -2px;
+`
+
 const List = styled.div`
   display: inline-block;
   width: 100%;
   text-align: center;
-`
-
-const Flag = styled.img`
-  height: 14px;
-  margin-bottom: 3px;
-  margin-right: 5px;
+  line-height: 24px;
 `
 
 const NoTag = styled.div`

diff --git a/frontend/src/features/VesselList/VesselListFilters.tsx b/frontend/src/features/VesselList/VesselListFilters.tsx
@@ -137,7 +137,9 @@ function UnmemoizedVesselListFilters({
     }))
 
     zones.setZonesFilter(nextZonesWithoutNulls)
-  }, [dispatch, zones])
+    // Having a dependency on `zones` trigger an infinite re-render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch, zones.setZonesFilter])
 
   useEffect(() => {
     getZones()

diff --git a/frontend/src/features/VesselList/index.tsx b/frontend/src/features/VesselList/index.tsx
@@ -351,6 +351,25 @@ export function VesselList({ namespace }) {
     [dispatch, namespace, zonesFilter, zonesSelected]
   )
 
+  const zones = useMemo(
+    () => ({
+      administrativeZonesFiltered,
+      callRemoveZoneSelected,
+      setAdministrativeZonesFiltered,
+      setZonesFilter: setZonesFilterCallback,
+      zonesFilter,
+      zonesSelected
+    }),
+    [
+      administrativeZonesFiltered,
+      callRemoveZoneSelected,
+      setAdministrativeZonesFiltered,
+      setZonesFilterCallback,
+      zonesFilter,
+      zonesSelected
+    ]
+  )
+
   const isRightMenuShrinked = !rightMenuIsOpen
 
   return (
@@ -439,14 +458,7 @@ export function VesselList({ namespace }) {
                   species,
                   speciesFiltered
                 }}
-                zones={{
-                  administrativeZonesFiltered,
-                  callRemoveZoneSelected,
-                  setAdministrativeZonesFiltered,
-                  setZonesFilter: setZonesFilterCallback,
-                  zonesFilter,
-                  zonesSelected
-                }}
+                zones={zones}
               />
               <VesselListTable
                 allVesselsChecked={allVesselsChecked}