Upgrade @codegouvfr/react-dsfr from 1.9.16 to 1.16

.yarnrc.yml

@@ -3,7 +3,8 @@ nodeLinker: pnpm
 packageExtensions:
   "@codegouvfr/react-dsfr@*":
     dependencies:
-      react: "*"
+      "@types/react": "^18"
+      "react": "^18"
   "@turf/dissolve@*":
     dependencies:
       "@turf/flatten": "*"

frontend/jest.polyfills.js

@@ -10,6 +10,7 @@
 
 const { TextDecoder, TextEncoder } = require('node:util');
 const { ReadableStream, TransformStream } = require('node:stream/web');
+const { BroadcastChannel } = require('node:worker_threads')
 
 Object.defineProperties(globalThis, {
   ReadableStream: { value: ReadableStream },
@@ -22,13 +23,14 @@ const { Blob, File } = require('node:buffer');
 const { fetch, Headers, FormData, Request, Response } = require('undici');
 
 Object.defineProperties(globalThis, {
-  fetch: { value: fetch, writable: true },
+  fetch: { value: fetch, writable: true, configurable: true },
   Blob: { value: Blob },
   File: { value: File },
   Headers: { value: Headers },
   FormData: { value: FormData },
   Request: { value: Request, configurable: true },
-  Response: { value: Response, configurable: true }
+  Response: { value: Response, configurable: true },
+  BroadcastChannel: { value: BroadcastChannel },
 });
 
 Object.defineProperty(window, 'matchMedia', {

frontend/package.json

@@ -23,7 +23,7 @@
     ]
   },
   "dependencies": {
-    "@codegouvfr/react-dsfr": "1.9.16",
+    "@codegouvfr/react-dsfr": "1.16.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.9.1",
@@ -36,6 +36,7 @@
     "@maplibre/maplibre-gl-style-spec": "^20.3.1",
     "@mui/material": "^5.16.7",
     "@reduxjs/toolkit": "^1.9.7",
+    "@tanstack/react-table": "^8.20.5",
     "@turf/turf": "^7.1.0",
     "@typeform/embed-react": "^2.31.0",
     "@zerologementvacant/models": "workspace:*",
@@ -77,8 +78,8 @@
     "@craco/craco": "^7.1.0",
     "@faker-js/faker": "^8.4.1",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/create-react-app": "^2.0.5",
     "@types/async": "^3.2.24",
@@ -89,12 +90,13 @@
     "@types/prop-types": "^15.7.13",
     "@types/qs": "^6",
     "@types/randomstring": "^1.3.0",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.5",
     "@types/uuid": "^9.0.8",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-extended": "^4.0.2",
+    "jest-sorted": "^1.0.15",
     "jest-watch-typeahead": "^2.2.2",
     "randomstring": "^1.3.0",
     "react-dev-utils": "^12.0.1",

frontend/public/index.html

@@ -6,13 +6,13 @@
       href="https://unpkg.com/[email protected]/dist/maplibre-gl.css"
       rel="stylesheet"
     />
-    <link rel="apple-touch-icon" href="/dsfr/favicon/apple-touch-icon.png" />
-    <link rel="icon" href="/dsfr/favicon/favicon.svg" type="image/svg+xml" />
-    <link rel="shortcut icon" href="/dsfr/favicon/favicon.ico" type="image/x-icon" />
-    <link rel="manifest" href="/dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />
+    <link rel="apple-touch-icon" href="/dsfr/favicon/apple-touch-icon.png?v=1.12.1" />
+    <link rel="icon" href="/dsfr/favicon/favicon.svg?v=1.12.1" type="image/svg+xml" />
+    <link rel="shortcut icon" href="/dsfr/favicon/favicon.ico?v=1.12.1" type="image/x-icon" />
+    <link rel="manifest" href="/dsfr/favicon/manifest.webmanifest?v=1.12.1" crossorigin="use-credentials" />
 
-    <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css" />
-    <link rel="stylesheet" href="/dsfr/dsfr.min.css" />
+    <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=7e4f55f5" />
+    <link rel="stylesheet" href="/dsfr/dsfr.min.css?v=1.12.1" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

frontend/src/App.tsx

@@ -14,7 +14,7 @@ import AuthenticatedLayout from './layouts/AuthenticatedLayout';
 import HousingListView from './views/HousingList/HousingListView';
 import CampaignView from './views/Campaign/CampaignView';
 import GroupView from './views/Group/GroupView';
-import CampaignsListView from './views/Campaign/CampaignListView';
+import CampaignListView from './views/Campaign/CampaignListView';
 import HousingView from './views/Housing/HousingView';
 import OwnerView from './views/Owner/OwnerView';
 import StatusView from './views/Resources/StatusView';
@@ -44,7 +44,7 @@ const router = createBrowserRouter(
         />
         <Route path="/analyses" element={<AnalysisView />} />
         <Route path="/groupes/:id" element={<GroupView />} />
-        <Route path="/campagnes" element={<CampaignsListView />} />
+        <Route path="/campagnes" element={<CampaignListView />} />
         <Route path="/campagnes/:id" element={<CampaignView />} />
         <Route
           path="/proprietaires/:ownerId/logements/:housingId"

frontend/src/components/AdvancedTable/AdvancedTable.tsx

@@ -0,0 +1,121 @@
+import { fr } from '@codegouvfr/react-dsfr';
+import {
+  Pagination as TablePagination,
+  PaginationProps as TablePaginationProps
+} from '@codegouvfr/react-dsfr/Pagination';
+import Select, { SelectProps } from '@codegouvfr/react-dsfr/SelectNext';
+import { Table, TableProps } from '@codegouvfr/react-dsfr/Table';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import {
+  flexRender,
+  getCoreRowModel,
+  TableOptions,
+  useReactTable
+} from '@tanstack/react-table';
+import { MouseEvent, ReactNode } from 'react';
+
+interface AdvancedTableProps<Data extends object>
+  extends Omit<TableOptions<Data>, 'data' | 'getCoreRowModel'>,
+    PaginationProps {
+  data?: Data[];
+  isLoading?: boolean;
+  paginationProps?: Omit<
+    TablePaginationProps,
+    'count' | 'defaultPage' | 'getPageLinkProps'
+  >;
+  tableProps?: Omit<TableProps, 'headers' | 'data'>;
+}
+
+interface PaginationProps {
+  /**
+   * @default true
+   */
+  paginate?: boolean;
+  page?: number;
+  pageCount?: number;
+  perPage?: number;
+  onPageChange?(page: number): void;
+  onPerPageChange?(perPage: number): void;
+}
+
+const ROW_SIZE = 64;
+const PER_PAGE_OPTIONS: SelectProps.Option[] = [
+  '50',
+  '200',
+  '500'
+].map<SelectProps.Option>((nb) => {
+  return { label: `${nb} résultats par page`, value: nb };
+});
+
+function AdvancedTable<Data extends object>(props: AdvancedTableProps<Data>) {
+  const table = useReactTable<Data>({
+    manualPagination: true,
+    manualSorting: true,
+    ...props,
+    data: props.data ?? [],
+    getCoreRowModel: getCoreRowModel()
+  });
+  const headers: ReactNode[] = table
+    .getLeafHeaders()
+    .map((header) =>
+      flexRender(header.column.columnDef.header, header.getContext())
+    );
+  const data: ReactNode[][] = table
+    .getRowModel()
+    .rows.map((row) => row.getVisibleCells())
+    .map((cells) =>
+      cells.map((cell) =>
+        flexRender(cell.column.columnDef.cell, cell.getContext())
+      )
+    );
+
+  const paginate = props.paginate ?? true;
+
+  if (props?.isLoading) {
+    return (
+      <Skeleton
+        animation="wave"
+        variant="rectangular"
+        width="100%"
+        height={ROW_SIZE * 6}
+      />
+    );
+  }
+
+  return (
+    <Stack>
+      <Table {...props.tableProps} headers={headers} data={data} />
+      {paginate ? (
+        <Stack direction="row" justifyContent="center">
+          <Select
+            className={fr.cx('fr-mr-2w')}
+            label={null}
+            nativeSelectProps={{
+              value: props.perPage?.toString(),
+              onChange: (event) => {
+                props.onPerPageChange?.(Number(event.target.value));
+              }
+            }}
+            options={PER_PAGE_OPTIONS}
+          />
+          <TablePagination
+            {...props.paginationProps}
+            count={props.pageCount ?? 1}
+            defaultPage={props.page}
+            getPageLinkProps={(page: number) => ({
+              to: '#',
+              onClick: (event: MouseEvent) => {
+                event.preventDefault();
+                props.onPageChange?.(page);
+              }
+            })}
+            showFirstLast
+          />
+        </Stack>
+      ) : null}
+    </Stack>
+  );
+}
+
+export default AdvancedTable;

frontend/src/components/AdvancedTable/AdvancedTableHeader.tsx

@@ -0,0 +1,25 @@
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { ReactNode } from 'react';
+
+interface AdvancedTableHeaderProps {
+  title: string;
+  sort?: ReactNode;
+}
+
+function AdvancedTableHeader(props: AdvancedTableHeaderProps) {
+  return (
+    <Stack
+      direction="row"
+      sx={{ alignItems: 'center', justifyContent: 'space-between' }}
+      spacing={1}
+    >
+      <Typography variant="body2" sx={{ fontWeight: 700 }}>
+        {props.title}
+      </Typography>
+      {props.sort}
+    </Stack>
+  );
+}
+
+export default AdvancedTableHeader;