[Signalements] Le tri de la liste ne fonctionne plus (#2367)

## Linked issues - Resolve #2338 ---- - [x] Tests E2E (Cypress)
MTES-MCT · Jul 24, 2023 · c0377f3 · c0377f3
2 parents 49533b0 + 4138352
commit c0377f3
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 45 deletions.
diff --git a/frontend/cypress/e2e/side_window/reporting_list/table.spec.ts b/frontend/cypress/e2e/side_window/reporting_list/table.spec.ts
@@ -0,0 +1,41 @@
+import { openSideWindowReportingList } from './utils'
+import { SeaFrontGroup } from '../../../../src/domain/entities/seaFront/constants'
+
+context('Side Window > Reporting List > Table', () => {
+  beforeEach(() => {
+    openSideWindowReportingList()
+
+    cy.getDataCy(`side-window-sub-menu-${SeaFrontGroup.NAMO}`).click()
+  })
+
+  it('Should sort reportings by title', () => {
+    // TODO Make a cypress helper to handle semantically-correct tables (via both `<table />` and roles).
+    const getTitleColumnHeader = () => cy.get('[role="columnheader"]').contains('Titre')
+
+    getTitleColumnHeader().click()
+
+    getTitleColumnHeader().parent().find('svg').should('be.visible')
+    cy.get('[role="table"] [role="rowgroup"]:last-child() [role="row"]').first().contains('3 milles - Chaluts')
+
+    getTitleColumnHeader().click()
+
+    getTitleColumnHeader().parent().find('svg').should('be.visible')
+    cy.get('[role="table"] [role="rowgroup"]:last-child() [role="row"]')
+      .first()
+      .contains('Suspicion de chalutage dans les 3 milles')
+  })
+
+  it('Should sort reportings by NATINF', () => {
+    const getNatinfColumnHeader = () => cy.get('[role="columnheader"]').contains('NATINF')
+
+    getNatinfColumnHeader().click()
+
+    getNatinfColumnHeader().parent().find('svg').should('be.visible')
+    cy.get('[role="table"] [role="rowgroup"]:last-child() [role="row"]').first().contains('7059')
+
+    getNatinfColumnHeader().click()
+
+    getNatinfColumnHeader().parent().find('svg').should('be.visible')
+    cy.get('[role="table"] [role="rowgroup"]:last-child() [role="row"]').first().contains('27689')
+  })
+})
diff --git a/frontend/cypress/e2e/side_window/reporting_list/utils.ts b/frontend/cypress/e2e/side_window/reporting_list/utils.ts
@@ -0,0 +1,12 @@
+export const openSideWindowReportingList = () => {
+  cy.visit('/side_window')
+
+  cy.wait(500)
+
+  if (document.querySelector('[data-cy="first-loader"]')) {
+    cy.getDataCy('first-loader').should('not.be.visible')
+  }
+  cy.getDataCy('side-window-reporting-tab').click()
+
+  cy.wait(500)
+}
diff --git a/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/constants.ts b/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/constants.ts
@@ -14,14 +14,14 @@ export const REPORTING_LIST_TABLE_OPTIONS: TableOptions<InfractionSuspicionRepor
     {
       fixedWidth: 112,
       isSortable: true,
-      key: 'value.source',
+      key: 'source',
       label: 'Origine',
       transform: getReportingOrigin
     },
     {
       fixedWidth: 288,
       isSortable: true,
-      key: 'value.type',
+      key: 'title',
       label: 'Titre',
       transform: getReportingTitle
     },

diff --git a/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/index.tsx b/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/index.tsx
@@ -181,45 +181,37 @@ MMSI: ${reporting.mmsi || ''}`
             return (
               <CardTableRow key={reporting.id} data-cy="side-window-current-reportings" index={index + 1} style={{}}>
                 <FlexboxGrid>
-                  <FlexboxGrid.Item style={columnStyles[0] as CSSProperties}>
+                  <Cell style={columnStyles[0]}>
                     <StyledCheckbox
                       checked={reporting.$isChecked}
                       onChange={() => toggleTableCheckForId(reporting.id)}
                     />
-                  </FlexboxGrid.Item>
-                  <FlexboxGrid.Item
-                    style={columnStyles[1] as CSSProperties}
-                    title={reporting.validationDate || reporting.creationDate}
-                  >
+                  </Cell>
+                  <Cell style={columnStyles[1]} title={reporting.validationDate || reporting.creationDate}>
                     {timeago.format(reporting.validationDate || reporting.creationDate, 'fr')}
-                  </FlexboxGrid.Item>
-                  <FlexboxGrid.Item
-                    style={columnStyles[2] as CSSProperties}
-                    title={getReportingOrigin(reporting, true)}
-                  >
+                  </Cell>
+                  <Cell style={columnStyles[2]} title={getReportingOrigin(reporting, true)}>
                     {getReportingOrigin(reporting)}
-                  </FlexboxGrid.Item>
-                  <FlexboxGrid.Item style={columnStyles[3] as CSSProperties} title={getReportingTitle(reporting, true)}>
+                  </Cell>
+                  <Cell style={columnStyles[3]} title={getReportingTitle(reporting, true)}>
                     {getReportingTitle(reporting)}
-                  </FlexboxGrid.Item>
-                  <FlexboxGrid.Item style={columnStyles[4] as CSSProperties}>
-                    {reporting.value.natinfCode}
-                  </FlexboxGrid.Item>
-                  <FlexboxGrid.Item style={columnStyles[5] as CSSProperties} title={getVesselNameTitle(reporting)}>
+                  </Cell>
+                  <Cell style={columnStyles[4]}>{reporting.value.natinfCode}</Cell>
+                  <Cell style={columnStyles[5]} title={getVesselNameTitle(reporting)}>
                     <Flag
                       rel="preload"
                       src={`${baseUrl ? `${baseUrl}/` : ''}flags/${reporting.flagState.toLowerCase()}.svg`}
                       style={{ marginLeft: 0, marginRight: 5, marginTop: -2, width: 18 }}
                       title={countries.getName(reporting.flagState.toLowerCase(), 'fr')}
                     />
                     {reporting.vesselName}
-                  </FlexboxGrid.Item>
-                  <FlexboxGrid.Item style={columnStyles[6] as CSSProperties}>{reporting.value.dml}</FlexboxGrid.Item>
-                  <FlexboxGrid.Item style={columnStyles[7] as CSSProperties}>
+                  </Cell>
+                  <Cell style={columnStyles[6]}>{reporting.value.dml}</Cell>
+                  <Cell style={columnStyles[7]}>
                     {reporting.underCharter && <UnderCharter>Navire sous charte</UnderCharter>}
-                  </FlexboxGrid.Item>
+                  </Cell>
                   <Separator />
-                  <FlexboxGrid.Item style={columnStyles[8] as CSSProperties}>
+                  <Cell style={columnStyles[8]}>
                     <IconButton
                       accent={Accent.TERTIARY}
                       data-cy="side-window-silenced-alerts-show-vessel"
@@ -228,8 +220,8 @@ MMSI: ${reporting.mmsi || ''}`
                       style={showIconStyle}
                       title="Voir sur la carte"
                     />
-                  </FlexboxGrid.Item>
-                  <FlexboxGrid.Item style={columnStyles[9] as CSSProperties}>
+                  </Cell>
+                  <Cell style={columnStyles[9]}>
                     <IconButton
                       accent={Accent.TERTIARY}
                       data-cy="side-window-edit-reporting"
@@ -238,7 +230,7 @@ MMSI: ${reporting.mmsi || ''}`
                       onClick={() => edit(editingIsDisabled, reporting)}
                       title="Editer le signalement"
                     />
-                  </FlexboxGrid.Item>
+                  </Cell>
                 </FlexboxGrid>
               </CardTableRow>
             )
@@ -251,6 +243,10 @@ MMSI: ${reporting.mmsi || ''}`
   )
 }
 
+const Cell = styled(FlexboxGrid.Item).attrs(() => ({
+  role: 'row'
+}))``
+
 const UnderCharter = styled.div`
   background: ${p => p.theme.color.mediumSeaGreen} 0% 0% no-repeat padding-box;
   padding: 2px 8px;

diff --git a/frontend/src/features/SideWindow/AlertListAndReportingList/index.tsx b/frontend/src/features/SideWindow/AlertListAndReportingList/index.tsx
@@ -99,6 +99,7 @@ const Wrapper = styled.div`
   overflow: auto;
 `
 
+// TODO This should be a `<a />` or a `<button />`.
 const Title = styled.h2<{
   isSelected: boolean
 }>`

diff --git a/frontend/src/features/SideWindow/SideWindowSubMenuLink.tsx b/frontend/src/features/SideWindow/SideWindowSubMenuLink.tsx
@@ -82,6 +82,7 @@ export function SideWindowSubMenuLink({
 
 const Text = styled.div``
 
+// TODO This should be a `<a />` or a `<button />`.
 const MenuButton = styled.div``
 
 const CircleWithKeyMetric = styled.span``

diff --git a/frontend/src/hooks/useTable/TableHead.tsx b/frontend/src/hooks/useTable/TableHead.tsx
@@ -25,25 +25,33 @@ export function TableHead({
   onSort,
   sortingKey
 }: TableHeadProps) {
+  const sortByKey = (column: TableColumn) => {
+    if (!column.isSortable) {
+      return
+    }
+
+    onSort(column.key, column.key === sortingKey && !isSortingDesc)
+  }
+
   return (
     <CardTableHeader noPadding>
-      <FlexboxGrid>
+      <FlexboxGrid role="row">
         {isCheckable && (
           <CellWrapper $fixedWidth={36} style={{ padding: 0 }}>
             <StyledCheckbox checked={isAllChecked} onChange={onAllCheckChange} />
           </CellWrapper>
         )}
 
-        {columns.map(({ fixedWidth, isSortable, key, label = '' }) => (
-          <CellWrapper key={key} $fixedWidth={fixedWidth}>
+        {columns.map(column => (
+          <CellWrapper key={column.key} $fixedWidth={column.fixedWidth} role="columnheader">
             <CardTableColumnTitle
-              dataCy={`table-order-by-${key}`}
+              dataCy={`table-order-by-${column.key}`}
               isAscending={!isSortingDesc}
-              isSortable={isSortable}
-              isSortColumn={key === sortingKey}
-              onClick={() => onSort(key, key === sortingKey && !isSortingDesc)}
+              isSortable={column.isSortable}
+              isSortedColumn={column.key === sortingKey}
+              onClick={() => sortByKey(column)}
             >
-              {label}
+              {column.label || ''}
             </CardTableColumnTitle>
           </CellWrapper>
         ))}

diff --git a/frontend/src/hooks/useTable/TableHeadNext.tsx b/frontend/src/hooks/useTable/TableHeadNext.tsx
@@ -55,7 +55,7 @@ export function TableHeadNext({
               dataCy={`table-order-by-${key}`}
               isAscending={!isSortingDesc}
               isSortable={isSortable}
-              isSortColumn={key === sortingKey}
+              isSortedColumn={key === sortingKey}
               onClick={() => onSort(key, key === sortingKey && !isSortingDesc)}
               style={{
                 lineHeight: 1.125

diff --git a/frontend/src/hooks/useTable/index.tsx b/frontend/src/hooks/useTable/index.tsx
@@ -152,7 +152,8 @@ export function useTable<T extends CollectionItem = CollectionItem>(
       return filteredAndSearchedTableData
     }
 
-    const sortingKeyPath = path(['$sortable', sortingKey]) as any
+    const sortingKeyAsArrayPath = getArrayPathFromStringPath(sortingKey)
+    const sortingKeyPath = path(['$sortable', ...sortingKeyAsArrayPath]) as any
     const bySortingKey = isSortingDesc ? descend(sortingKeyPath) : ascend(sortingKeyPath)
 
     return sortWith(

diff --git a/frontend/src/ui/card-table/CardTable.tsx b/frontend/src/ui/card-table/CardTable.tsx
@@ -3,7 +3,9 @@ import styled from 'styled-components'
 
 // The width of the scrolling bar is 16 px. When we have more than
 // 9 items, the scrolling bar is showed
-export const CardTable = styled(List)<{
+export const CardTable = styled(List).attrs(() => ({
+  role: 'table'
+}))<{
   $hasScroll: boolean
   $width: number
 }>`

diff --git a/frontend/src/ui/card-table/CardTableBody.tsx b/frontend/src/ui/card-table/CardTableBody.tsx
@@ -1,6 +1,8 @@
 import styled from 'styled-components'
 
-export const CardTableBody = styled.div`
+export const CardTableBody = styled.div.attrs(() => ({
+  role: 'rowgroup'
+}))`
   overflow-y: auto;
   max-height: calc(100vh - 170px);
 `
diff --git a/frontend/src/ui/card-table/CardTableColumnTitle.tsx b/frontend/src/ui/card-table/CardTableColumnTitle.tsx
@@ -8,21 +8,21 @@ type CardTableColumnTitleProps = HTMLAttributes<HTMLDivElement> & {
   children: string
   dataCy?: string | undefined
   isAscending?: boolean | undefined
-  isSortColumn?: boolean | undefined
   isSortable?: boolean | undefined
+  isSortedColumn?: boolean | undefined
 }
 export function CardTableColumnTitle({
   children,
   dataCy = '',
   isAscending = false,
   isSortable = false,
-  isSortColumn = false,
+  isSortedColumn = false,
   onClick
 }: CardTableColumnTitleProps) {
   return (
     <StyledCardTableColumnTitle $isSortable={isSortable} data-cy={dataCy} onClick={onClick} title={String(children)}>
       <span>{children}</span>
-      {isSortable && isSortColumn && (
+      {isSortable && isSortedColumn && (
         <Sort $isAscending={isAscending} title={isAscending ? 'Croissant' : 'Décroissant'} />
       )}
     </StyledCardTableColumnTitle>

diff --git a/frontend/src/ui/card-table/CardTableHeader.tsx b/frontend/src/ui/card-table/CardTableHeader.tsx
@@ -11,7 +11,7 @@ type CardTableHeaderProps = {
 }
 export function CardTableHeader({ children, noPadding = false }: CardTableHeaderProps) {
   return (
-    <StyledCardTableHeader key={0} $noPadding={noPadding} index={0}>
+    <StyledCardTableHeader key={0} $noPadding={noPadding} index={0} role="rowgroup">
       {children}
     </StyledCardTableHeader>
   )

diff --git a/frontend/src/ui/card-table/CardTableRow.tsx b/frontend/src/ui/card-table/CardTableRow.tsx
@@ -3,7 +3,9 @@ import styled from 'styled-components'
 
 import { COLORS } from '../../constants/constants'
 
-export const CardTableRow = styled(List.Item)<{
+export const CardTableRow = styled(List.Item).attrs(() => ({
+  role: 'row'
+}))<{
   index: number
   isFocused?: boolean
   toClose?: boolean