Add a summary to the report overview page

betagouv · Dec 24, 2024 · 180df41 · 180df41
1 parent 080b2df
commit 180df41
Show file tree

Hide file tree

Showing 36 changed files with 727 additions and 320 deletions.
diff --git a/apps/webapp/.prettierrc b/apps/webapp/.prettierrc
@@ -1,3 +1,4 @@
 {
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/apps/webapp/index.html b/apps/webapp/index.html
@@ -1,12 +1,12 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="scroll-smooth">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       rel="stylesheet"
-      href="/node_modules/@codegouvfr/react-dsfr/main.css"
+      href="./node_modules/@codegouvfr/react-dsfr/main.css"
     />
     <title>Fondation</title>
   </head>

diff --git a/apps/webapp/package.json b/apps/webapp/package.json
@@ -31,7 +31,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
-    "@ryoppippi/unplugin-typia": "^1.0.6",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -52,6 +51,7 @@
     "pdfkit": "^0.15.1",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "sharp": "^0.33.5",
     "tailwindcss": "^3.4.13",
     "type-fest": "^4.26.1",

diff --git a/apps/webapp/src/authentication/adapters/primary/components/Login.tsx b/apps/webapp/src/authentication/adapters/primary/components/Login.tsx
@@ -24,8 +24,8 @@ export const Login = () => {
   };
 
   return (
-    <div id="login-layout" className="h-full flex place-items-center">
-      <form onSubmit={authenticateUser} className="w-1/2 m-auto">
+    <div id="login-layout" className="flex h-full place-items-center">
+      <form onSubmit={authenticateUser} className="m-auto w-1/2">
         <Input
           label="Email"
           id="username"

diff --git a/apps/webapp/src/layout/PageLayout.tsx b/apps/webapp/src/layout/PageLayout.tsx
@@ -4,9 +4,9 @@ import { AppHeader } from "./AppHeader";
 
 export const PageLayout: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="flex flex-col h-screen">
+    <div className="flex h-screen flex-col">
       <AppHeader />
-      <main className="flex-grow flex">
+      <main className="flex flex-grow">
         <div className="flex-grow">{children}</div>
       </main>
       <AppFooter />

diff --git a/apps/webapp/src/reports/adapters/primary/components/ReportOverview/AttachedFileUpload.tsx b/apps/webapp/src/reports/adapters/primary/components/ReportOverview/AttachedFileUpload.tsx
@@ -1,10 +1,11 @@
-import { cx } from "@codegouvfr/react-dsfr/fr/cx";
 import { Upload } from "@codegouvfr/react-dsfr/Upload";
+import clsx from "clsx";
 import { FC } from "react";
 import { ReportSM } from "../../../../../store/appState";
+import { reportHtmlIds } from "../../dom/html-ids";
+import { summaryLabels } from "../../labels/summary-labels";
 import { AttachedFilesList } from "./AttachedFilesList";
 import { Card } from "./Card";
-import clsx from "clsx";
 
 export type AttachedFileUploadProps = {
   attachedFiles: ReportSM["attachedFiles"];
@@ -18,7 +19,8 @@ export const AttachedFileUpload: FC<AttachedFileUploadProps> = ({
   onAttachedFileDeleted,
 }) => {
   return (
-    <Card>
+    <Card id={reportHtmlIds.overview.attachedFilesSection}>
+      <h2>{summaryLabels.attachedFiles}</h2>
       <div className={clsx("flex flex-col gap-6")}>
         <Upload
           id="report-attached-file-upload"
@@ -30,8 +32,8 @@ export const AttachedFileUpload: FC<AttachedFileUploadProps> = ({
               }
             },
           }}
-          label={<div className={cx("fr-h2")}>Ajouter des pièces jointes</div>}
           hint="Formats supportés : png, jpeg et pdf."
+          label={null}
           multiple={false}
         />
         {attachedFiles && (

diff --git a/apps/webapp/src/reports/adapters/primary/components/ReportOverview/Biography.tsx b/apps/webapp/src/reports/adapters/primary/components/ReportOverview/Biography.tsx
@@ -1,18 +1,17 @@
-import { cx } from "@codegouvfr/react-dsfr/fr/cx";
+import { ReportVM } from "../../../../core-logic/view-models/ReportVM";
+import { reportHtmlIds } from "../../dom/html-ids";
 import { Card } from "./Card";
 
 export type BiographyProps = {
   biography: string | null;
 };
 
 export const Biography: React.FC<BiographyProps> = ({ biography }) => (
-  <Card>
-    <label className={cx("fr-h2")} id="biography">
-      Biographie
-    </label>
+  <Card id={reportHtmlIds.overview.biographySection}>
+    <h2 id={reportHtmlIds.overview.biography}>{ReportVM.biographyLabel}</h2>
     <div
-      aria-labelledby="biography"
-      className="whitespace-pre-line leading-10 w-full"
+      aria-labelledby={reportHtmlIds.overview.biography}
+      className="w-full whitespace-pre-line leading-10"
     >
       {biography}
     </div>

diff --git a/apps/webapp/src/reports/adapters/primary/components/ReportOverview/Card.tsx b/apps/webapp/src/reports/adapters/primary/components/ReportOverview/Card.tsx
@@ -2,16 +2,17 @@ import { cx } from "@codegouvfr/react-dsfr/fr/cx";
 import { PropsWithChildren } from "react";
 import clsx from "clsx";
 
-export const Card: React.FC<PropsWithChildren> = ({ children }) => {
+export type CardProps = {
+  id?: string;
+} & PropsWithChildren;
+
+export const Card: React.FC<CardProps> = ({ id, children }) => {
   return (
-    <div
-      className={clsx(
-        "bg-white rounded-lg",
-        "space-y-2",
-        cx("fr-col-10", "fr-col-md-7", "fr-px-3w", "fr-py-2w"),
-      )}
+    <section
+      id={id}
+      className={clsx("rounded-lg bg-white", cx("fr-px-3w", "fr-py-2w"))}
     >
       {children}
-    </div>
+    </section>
   );
 };
diff --git a/apps/webapp/src/reports/adapters/primary/components/ReportOverview/Comment.tsx b/apps/webapp/src/reports/adapters/primary/components/ReportOverview/Comment.tsx
@@ -1,4 +1,5 @@
 import { ReportVM } from "../../../../core-logic/view-models/ReportVM";
+import { reportHtmlIds } from "../../dom/html-ids";
 import { TextareaCard } from "./TextareaCard";
 
 export type CommentProps = {
@@ -8,7 +9,8 @@ export type CommentProps = {
 
 export const Comment: React.FC<CommentProps> = ({ comment, onUpdate }) => (
   <TextareaCard
-    id="comment"
+    cardId={reportHtmlIds.overview.commentSection}
+    titleId={reportHtmlIds.overview.comment}
     label={ReportVM.commentLabel}
     content={comment}
     onContentChange={onUpdate}

diff --git a/apps/webapp/src/reports/adapters/primary/components/ReportOverview/MagistratIdentity.tsx b/apps/webapp/src/reports/adapters/primary/components/ReportOverview/MagistratIdentity.tsx
@@ -23,7 +23,7 @@ export const MagistratIdentity: FC<MagistratIdentityProps> = ({
 }) => {
   return (
     <Card>
-      <div className={cx("fr-h1")}>{name}</div>
+      <h1>{name}</h1>
       <div className={cx("fr-text--bold")}>
         {`${ReportVM.magistratIdentityLabels.currentPosition} : ${currentPosition}`}
       </div>

diff --git a/apps/webapp/src/reports/adapters/primary/components/ReportOverview/Observers.tsx b/apps/webapp/src/reports/adapters/primary/components/ReportOverview/Observers.tsx
@@ -2,19 +2,18 @@ import { cx } from "@codegouvfr/react-dsfr/fr/cx";
 import { Card } from "./Card";
 import { ReportVM } from "../../../../core-logic/view-models/ReportVM";
 import clsx from "clsx";
+import { reportHtmlIds } from "../../dom/html-ids";
 
 export const Observers = ({ observers }: Pick<ReportVM, "observers">) => {
   if (!observers) return null;
 
   return (
-    <Card>
-      <label className={cx("fr-h2")} id="observers">
-        Observants
-      </label>
+    <Card id={reportHtmlIds.overview.observersSection}>
+      <h2 id={reportHtmlIds.overview.observers}>{ReportVM.observersLabel}</h2>
       <div
-        aria-labelledby="observers"
+        aria-labelledby={reportHtmlIds.overview.observers}
         className={clsx(
-          "whitespace-pre-line leading-10 w-full flex flex-col gap-4",
+          "flex w-full flex-col gap-4 whitespace-pre-line leading-10",
         )}
       >
         {observers.map(([observerName, ...observerInformation]) => (
@@ -36,7 +35,7 @@ const ObserverInformation = ({
   observerInformation: string[];
 }) => {
   return (
-    <div aria-labelledby="observers" className="whitespace-pre-line  w-full">
+    <div aria-labelledby="observers" className="w-full whitespace-pre-line">
       {observerInformation.map((info) => (
         <div key={info}>{info}</div>
       ))}

diff --git a/apps/webapp/src/reports/adapters/primary/components/ReportOverview/ReportOverview.spec.tsx b/apps/webapp/src/reports/adapters/primary/components/ReportOverview/ReportOverview.spec.tsx
@@ -51,7 +51,7 @@ describe("Report Overview Component", () => {
 
   it("shows a message if no report found", async () => {
     renderReportId("invalid-id");
-    await screen.findByText("Dossier de nomination non trouvé.");
+    await screen.findByText("Rapport non trouvé.");
   });
 
   describe("when there is a report", () => {
@@ -111,7 +111,9 @@ describe("Report Overview Component", () => {
         ReportBuilder.fromApiModel(reportApiModel).buildRetrieveSM();
       givenARenderedReport(reportApiModel);
 
-      await screen.findByText("Observants");
+      await screen.findByText("Observants", {
+        selector: "h2",
+      });
 
       for (const [index, observer] of aReportVM.observers!.entries()) {
         if (index === 0) {
@@ -280,9 +282,7 @@ describe("Report Overview Component", () => {
         });
 
         await screen.findByText(aReportVM.name);
-        const input = await screen.findByLabelText(
-          /^Ajouter des pièces jointes/,
-        );
+        const input = await screen.findByLabelText(/^Formats supportés.*/);
         await userEvent.upload(input, file);
 
         expect(store.getState().reportOverview.byIds).toEqual({

diff --git a/apps/webapp/src/reports/adapters/primary/components/ReportOverview/ReportOverview.tsx b/apps/webapp/src/reports/adapters/primary/components/ReportOverview/ReportOverview.tsx
@@ -20,8 +20,9 @@ import { Biography } from "./Biography";
 import { Comment } from "./Comment";
 import { MagistratIdentity } from "./MagistratIdentity";
 import { Observers } from "./Observers";
-import { ReportRules } from "./ReportRules";
 import { ReportOverviewState } from "./ReportOverviewState";
+import { ReportRules } from "./ReportRules";
+import { Summary } from "./Summary";
 
 export type ReportOverviewProps = {
   id: string;
@@ -83,38 +84,67 @@ export const ReportOverview: React.FC<ReportOverviewProps> = ({ id }) => {
     dispatch(retrieveReport(id));
   }, [dispatch, id]);
 
-  if (!report) return <div>Dossier de nomination non trouvé.</div>;
+  if (!report) return <div>Rapport non trouvé.</div>;
   return (
     <div
       className={clsx(
-        "bg-light-orange",
-        "gap-2",
-        "justify-center",
-        cx("fr-py-5v", "fr-grid-row"),
+        "flex-col items-center bg-light-orange",
+        cx("fr-grid-row"),
       )}
     >
       <AutoSaveNotice />
-      <ReportOverviewState state={report.state} onUpdateState={onUpdateState} />
-      <MagistratIdentity
-        name={report.name}
-        birthDate={report.birthDate}
-        grade={report.grade}
-        currentPosition={report.currentPosition}
-        targettedPosition={report.targettedPosition}
-        rank={report.rank}
-      />
-      <Comment comment={report.comment} onUpdate={onUpdateComment} />
-      <Biography biography={report.biography} />
-      <Observers observers={report.observers} />
-      <ReportRules
-        rulesChecked={report.rulesChecked}
-        onUpdateReportRule={onUpdateReportRule}
-      />
-      <AttachedFileUpload
-        attachedFiles={report.attachedFiles}
-        onFileAttached={onFileAttached}
-        onAttachedFileDeleted={onAttachedFileDeleted}
-      />
+      <div
+        className={clsx(
+          "scroll-smooth",
+          cx("fr-grid-row", "fr-grid-row--center", "fr-py-5v"),
+        )}
+      >
+        <div
+          className={clsx(
+            "hidden md:block",
+            cx("fr-col-md-5", "fr-col-lg-4", "fr-col-xl-3"),
+          )}
+        >
+          <Summary summary={report.summary} />
+        </div>
+        <div
+          className={clsx(
+            "flex-col gap-2",
+            cx(
+              "fr-grid-row",
+              "fr-col-10",
+              "fr-col-md-5",
+              "fr-col-lg-6",
+              "fr-col-xl-8",
+            ),
+          )}
+        >
+          <ReportOverviewState
+            state={report.state}
+            onUpdateState={onUpdateState}
+          />
+          <MagistratIdentity
+            name={report.name}
+            birthDate={report.birthDate}
+            grade={report.grade}
+            currentPosition={report.currentPosition}
+            targettedPosition={report.targettedPosition}
+            rank={report.rank}
+          />
+          <Comment comment={report.comment} onUpdate={onUpdateComment} />
+          <Biography biography={report.biography} />
+          <Observers observers={report.observers} />
+          <ReportRules
+            rulesChecked={report.rulesChecked}
+            onUpdateReportRule={onUpdateReportRule}
+          />
+          <AttachedFileUpload
+            attachedFiles={report.attachedFiles}
+            onFileAttached={onFileAttached}
+            onAttachedFileDeleted={onAttachedFileDeleted}
+          />
+        </div>
+      </div>
     </div>
   );
 };