From 6323c975b04cd37f9a197d7386d420ae94163e70 Mon Sep 17 00:00:00 2001
From: Ivan Gabriele <ivan.gabriele@gmail.com>
Date: Wed, 19 Jul 2023 12:36:37 +0200
Subject: [PATCH 1/2] Fix reporting list sorting

---
 .../ReportingList/constants.ts                |  4 ++--
 frontend/src/hooks/useTable/TableHead.tsx     | 22 +++++++++++++------
 frontend/src/hooks/useTable/TableHeadNext.tsx |  2 +-
 frontend/src/hooks/useTable/index.tsx         |  3 ++-
 .../ui/card-table/CardTableColumnTitle.tsx    |  6 ++---
 5 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/constants.ts b/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/constants.ts
index 2ab0db7dd3..647b64ed23 100644
--- 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: 176,
       isSortable: true,
-      key: 'value.source',
+      key: 'source',
       label: 'Origine',
       transform: getReportingOrigin
     },
     {
       fixedWidth: 288,
       isSortable: true,
-      key: 'value.type',
+      key: 'type',
       label: 'Titre',
       transform: getReportingTitle
     },
diff --git a/frontend/src/hooks/useTable/TableHead.tsx b/frontend/src/hooks/useTable/TableHead.tsx
index 7883783895..caf4879bdd 100644
--- a/frontend/src/hooks/useTable/TableHead.tsx
+++ b/frontend/src/hooks/useTable/TableHead.tsx
@@ -25,6 +25,14 @@ 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>
@@ -34,16 +42,16 @@ export function TableHead({
           </CellWrapper>
         )}
 
-        {columns.map(({ fixedWidth, isSortable, key, label = '' }) => (
-          <CellWrapper key={key} $fixedWidth={fixedWidth}>
+        {columns.map(column => (
+          <CellWrapper key={column.key} $fixedWidth={column.fixedWidth}>
             <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
index c309f8fe5b..332b9b3ab9 100644
--- 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
index 0cec507ab5..a27485e708 100644
--- 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/CardTableColumnTitle.tsx b/frontend/src/ui/card-table/CardTableColumnTitle.tsx
index 9cdee19f0d..1cec7d4118 100644
--- 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>

From 41383526fc5d021a2819e3a4b5dfe336357bb4be Mon Sep 17 00:00:00 2001
From: Ivan Gabriele <ivan.gabriele@gmail.com>
Date: Wed, 19 Jul 2023 13:42:07 +0200
Subject: [PATCH 2/2] Add e2e tests for reporting list table sorting

---
 .../side_window/reporting_list/table.spec.ts  | 41 ++++++++++++++++
 .../e2e/side_window/reporting_list/utils.ts   | 12 +++++
 .../ReportingList/constants.ts                |  2 +-
 .../ReportingList/index.tsx                   | 48 +++++++++----------
 .../AlertListAndReportingList/index.tsx       |  1 +
 .../SideWindow/SideWindowSubMenuLink.tsx      |  1 +
 frontend/src/hooks/useTable/TableHead.tsx     |  4 +-
 frontend/src/ui/card-table/CardTable.tsx      |  4 +-
 frontend/src/ui/card-table/CardTableBody.tsx  |  4 +-
 .../src/ui/card-table/CardTableHeader.tsx     |  2 +-
 frontend/src/ui/card-table/CardTableRow.tsx   |  4 +-
 11 files changed, 90 insertions(+), 33 deletions(-)
 create mode 100644 frontend/cypress/e2e/side_window/reporting_list/table.spec.ts
 create mode 100644 frontend/cypress/e2e/side_window/reporting_list/utils.ts

diff --git a/frontend/cypress/e2e/side_window/reporting_list/table.spec.ts b/frontend/cypress/e2e/side_window/reporting_list/table.spec.ts
new file mode 100644
index 0000000000..b36e954918
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..e7617e661c
--- /dev/null
+++ 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
index 647b64ed23..a1c11fcf0e 100644
--- a/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/constants.ts
+++ b/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/constants.ts
@@ -21,7 +21,7 @@ export const REPORTING_LIST_TABLE_OPTIONS: TableOptions<InfractionSuspicionRepor
     {
       fixedWidth: 288,
       isSortable: true,
-      key: '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
index 04d158bb00..1cc200b255 100644
--- a/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/index.tsx
+++ b/frontend/src/features/SideWindow/AlertListAndReportingList/ReportingList/index.tsx
@@ -181,31 +181,23 @@ 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`}
@@ -213,13 +205,13 @@ MMSI: ${reporting.mmsi || ''}`
                       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
index 219c459e5e..74115d36d7 100644
--- 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
index 828bc03c04..4aa0ecfda8 100644
--- 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
index caf4879bdd..555a8ec22f 100644
--- a/frontend/src/hooks/useTable/TableHead.tsx
+++ b/frontend/src/hooks/useTable/TableHead.tsx
@@ -35,7 +35,7 @@ export function TableHead({
 
   return (
     <CardTableHeader noPadding>
-      <FlexboxGrid>
+      <FlexboxGrid role="row">
         {isCheckable && (
           <CellWrapper $fixedWidth={36} style={{ padding: 0 }}>
             <StyledCheckbox checked={isAllChecked} onChange={onAllCheckChange} />
@@ -43,7 +43,7 @@ export function TableHead({
         )}
 
         {columns.map(column => (
-          <CellWrapper key={column.key} $fixedWidth={column.fixedWidth}>
+          <CellWrapper key={column.key} $fixedWidth={column.fixedWidth} role="columnheader">
             <CardTableColumnTitle
               dataCy={`table-order-by-${column.key}`}
               isAscending={!isSortingDesc}
diff --git a/frontend/src/ui/card-table/CardTable.tsx b/frontend/src/ui/card-table/CardTable.tsx
index 6f40238729..2487a5e80f 100644
--- a/frontend/src/ui/card-table/CardTable.tsx
+++ b/frontend/src/ui/card-table/CardTable.tsx
@@ -5,7 +5,9 @@ import { COLORS } from '../../constants/constants'
 
 // 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
index e2951755c8..87b11dd407 100644
--- 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/CardTableHeader.tsx b/frontend/src/ui/card-table/CardTableHeader.tsx
index 443085c3e3..d9fa6e3ee2 100644
--- 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
index 85cdd4234b..99748db819 100644
--- 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