[Missions] Nouveau tableau de missions pour régler le souci de scroll (…

…#474)

- Resolve #230 
- Ajout d'une librairie eslint pour éviter de commiter les tests cypress
en `it.only`

frontend/.eslintrc.js

@@ -38,7 +38,7 @@ module.exports = {
     },
     {
       files: ['cypress/**/*.js', 'cypress/**/*.ts', 'cypress.config.ts'],
-      plugins: ['cypress'],
+      plugins: ['cypress', 'no-only-tests'],
       rules: {
         'cypress/no-assigning-return-values': 'error',
         // TODO Hopefully we'll able to enforce that rule someday.
@@ -50,7 +50,8 @@ module.exports = {
         'cypress/no-pause': 'error',
 
         'import/no-default-export': 'off',
-        'import/no-extraneous-dependencies': 'off'
+        'import/no-extraneous-dependencies': 'off',
+        'no-only-tests/no-only-tests': 'error'
       }
     },
     // Custom monitorenv rule

frontend/package.json

@@ -33,11 +33,13 @@
   "dependencies": {
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/modifiers": "^4.0.0",
-    "@mtes-mct/monitor-ui": "5.3.6",
+    "@mtes-mct/monitor-ui": "5.8.0",
     "@reduxjs/toolkit": "1.8.2",
     "@sentry/react": "6.19.7",
     "@sentry/tracing": "6.19.7",
     "@svgr/webpack": "^5.5.0",
+    "@tanstack/react-table": "^8.8.5",
+    "@tanstack/react-virtual": "^3.0.0-beta.54",
     "date-fns": "2.29.2",
     "dayjs": "1.11.7",
     "flexsearch": "0.7.21",
@@ -113,6 +115,7 @@
     "eslint-plugin-jest": "26.8.5",
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-no-null": "1.0.2",
+    "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-promise": "6.0.0",

frontend/src/domain/entities/controlUnit.ts

@@ -12,5 +12,5 @@ export type ControlResource = {
   name: string
 }
 
-export const getControlUnitsAsText = (controlUnits: Omit<ControlUnit, 'id'>[]) =>
+export const getControlUnitsAsText = (controlUnits: ControlUnit[]) =>
   controlUnits.map(controlUnit => `${controlUnit.name} (${controlUnit.administration})`).join(' / ')

frontend/src/features/missions/MissionsList/CellActionThemes.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { reduceBy, map, flatten, pipe, uniq, filter, toPairs, join } from 'ramda'
 import { useMemo } from 'react'
-import { Table } from 'rsuite'
 
-import { ActionTypeEnum } from '../../../domain/entities/missions'
+import { ActionTypeEnum, EnvAction } from '../../../domain/entities/missions'
 
 const getAllThemesAndSubThemesAsString = envactions => {
   const filterSurveillanceAndControlActions = filter(
@@ -28,12 +27,12 @@ const getAllThemesAndSubThemesAsString = envactions => {
   return pipe(flattenAndGroupSubThemesByThemes, toPairs, map(getThemeAndSubThemesString), join(' ; '))(envactions)
 }
 
-export function CellActionThemes({ dataKey, rowData, ...props }: { dataKey?: any; rowData?: any }) {
-  const cellContent = useMemo(() => getAllThemesAndSubThemesAsString(rowData?.envActions), [rowData?.envActions])
+export function CellActionThemes({ envActions }: { envActions: EnvAction[] }) {
+  const cellContent = useMemo(() => getAllThemesAndSubThemesAsString(envActions), [envActions])
 
   return (
-    <Table.Cell {...props} data-cy="cell-envactions-themes" title={cellContent}>
+    <span data-cy="cell-envactions-themes" title={cellContent}>
       {cellContent}
-    </Table.Cell>
+    </span>
   )
 }

frontend/src/features/missions/MissionsList/CellEditMission.tsx

@@ -1,32 +1,15 @@
-/* eslint-disable react/jsx-props-no-spreading */
+import { Button, Icon, Size } from '@mtes-mct/monitor-ui'
 import { useDispatch } from 'react-redux'
-import { IconButton, Table } from 'rsuite'
-import styled from 'styled-components'
 
 import { editMission } from '../../../domain/use_cases/missions/editMission'
-import { ReactComponent as EditIconSVG } from '../../../uiMonitor/icons/Edit.svg'
 
-export function CellEditMission({ dataKey, rowData, ...props }: { dataKey?: any; rowData?: any }) {
+export function CellEditMission({ id }: { id: number }) {
   const dispatch = useDispatch()
-  const setMission = () => dispatch(editMission(rowData.id))
+  const setMission = () => dispatch(editMission(id))
 
   return (
-    <CustomCell {...props}>
-      <IconButton
-        appearance="primary"
-        data-cy="edit-mission"
-        icon={<EditIconSVG className="rs-icon" />}
-        onClick={setMission}
-        size="sm"
-      >
-        Editer
-      </IconButton>
-    </CustomCell>
+    <Button data-cy="edit-mission" Icon={Icon.Edit} onClick={setMission} size={Size.SMALL}>
+      Editer
+    </Button>
   )
 }
-
-const CustomCell = styled(Table.Cell)`
-  .rs-table-cell-content {
-    padding-top: 10px;
-  }
-`

frontend/src/features/missions/MissionsList/CellLocalizeMission.tsx

@@ -1,40 +1,24 @@
-/* eslint-disable react/jsx-props-no-spreading */
+import { Accent, Icon, IconButton } from '@mtes-mct/monitor-ui'
 import GeoJSON from 'ol/format/GeoJSON'
 import { useDispatch } from 'react-redux'
-import { IconButton, Table } from 'rsuite'
-import styled from 'styled-components'
 
 import { OPENLAYERS_PROJECTION } from '../../../domain/entities/map/constants'
 import { setFitToExtent } from '../../../domain/shared_slices/Map'
-import { ReactComponent as LocalizeIconSVG } from '../../../uiMonitor/icons/Focus_zones.svg'
 
-export function CellLocalizeMission({ dataKey, rowData, ...props }: { dataKey?: any; rowData?: any }) {
+export function CellLocalizeMission({ geom }: { geom: any }) {
   const dispatch = useDispatch()
 
-  if (!rowData.geom) {
-    return <CustomCell {...props}>-</CustomCell>
+  if (!geom) {
+    return <span>-</span>
   }
   const handleZoomToMission = () => {
     const feature = new GeoJSON({
       featureProjection: OPENLAYERS_PROJECTION
-    }).readFeature(rowData.geom)
+    }).readFeature(geom)
 
     const extent = feature?.getGeometry()?.getExtent()
     dispatch(setFitToExtent(extent))
   }
 
-  return (
-    <CustomCell {...props}>
-      <IconButton icon={<LocalizeIcon className="rs-icon" />} onClick={handleZoomToMission} size="md" />
-    </CustomCell>
-  )
+  return <IconButton accent={Accent.TERTIARY} Icon={Icon.FocusZones} onClick={handleZoomToMission} />
 }
-
-const LocalizeIcon = styled(LocalizeIconSVG)`
-  width: 20px;
-`
-const CustomCell = styled(Table.Cell)`
-  .rs-table-cell-content {
-    padding-top: 7px;
-  }
-`