From e9aadf694856e5a701f404804857063c03b0a2c3 Mon Sep 17 00:00:00 2001
From: carolineBda <caroline.bourdeu@gmail.com>
Date: Tue, 18 Jun 2024 16:47:34 +0200
Subject: [PATCH 1/4] =?UTF-8?q?feat(loader):=20ajout=20d'un=20loader=20?=
 =?UTF-8?q?=C3=A0=20la=20place=20du=20bouton=20lorsque=20l'on=20publie=20u?=
 =?UTF-8?q?n=20document?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/button/PublishButton.tsx   | 30 +++++++++++++
 .../contributions/answers/AnswerForm.tsx      | 11 +++--
 .../questions/EditQuestionAnswerList.tsx      | 19 +++++---
 .../src/components/layout/Navigation.tsx      |  1 +
 .../agreements/components/Common/Form.tsx     | 19 ++++----
 .../informationsEdit/InformationsForm.tsx     | 45 +++++++++----------
 .../modules/models/components/Common/Form.tsx | 42 ++++++++---------
 .../frontend/src/pages/themes/edit/[id].js    |  4 +-
 8 files changed, 102 insertions(+), 69 deletions(-)
 create mode 100644 targets/frontend/src/components/button/PublishButton.tsx

diff --git a/targets/frontend/src/components/button/PublishButton.tsx b/targets/frontend/src/components/button/PublishButton.tsx
new file mode 100644
index 000000000..291e5c9d2
--- /dev/null
+++ b/targets/frontend/src/components/button/PublishButton.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Button, CircularProgress as Spinner } from "@mui/material";
+
+type Props = {
+  disabled?: boolean;
+  isPublishing: boolean;
+  onClick: () => void;
+  children: JSX.Element | string | undefined;
+};
+
+export function PublishButton({
+  disabled=false,
+  onClick,
+  children,
+  isPublishing,
+}: Props) {
+  return isPublishing ? (
+    <Spinner />
+  ) : (
+    <Button
+      variant="contained"
+      type="button"
+      color="success"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}
diff --git a/targets/frontend/src/components/contributions/answers/AnswerForm.tsx b/targets/frontend/src/components/contributions/answers/AnswerForm.tsx
index bcab68eef..c756c0360 100644
--- a/targets/frontend/src/components/contributions/answers/AnswerForm.tsx
+++ b/targets/frontend/src/components/contributions/answers/AnswerForm.tsx
@@ -1,4 +1,4 @@
-import { Button, FormControl, Stack, Alert } from "@mui/material";
+import { Alert, Button, FormControl, Stack } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -16,6 +16,7 @@ import {
 } from "./references";
 import { getNextStatus, getPrimaryButtonLabel } from "../status/utils";
 import { FicheSpDocumentInput } from "./references/FicheSpDocumentInput";
+import { PublishButton } from "src/components/button/PublishButton";
 
 const answerFormBaseSchema = answerRelationSchema
   .pick({
@@ -331,15 +332,13 @@ export const AnswerForm = ({
             >
               Sauvegarder
             </Button>
-            <Button
-              variant="contained"
-              type="button"
-              color="success"
+            <PublishButton
               onClick={() => submit(getNextStatus(status))}
               disabled={submitting || status === "PUBLISHED"}
+              isPublishing={submitting}
             >
               {getPrimaryButtonLabel(status)}
-            </Button>
+            </PublishButton>
           </Stack>
         )}
       </Stack>
diff --git a/targets/frontend/src/components/contributions/questions/EditQuestionAnswerList.tsx b/targets/frontend/src/components/contributions/questions/EditQuestionAnswerList.tsx
index 7761df139..01ce22093 100644
--- a/targets/frontend/src/components/contributions/questions/EditQuestionAnswerList.tsx
+++ b/targets/frontend/src/components/contributions/questions/EditQuestionAnswerList.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   Checkbox,
   Paper,
   Stack,
@@ -19,6 +18,7 @@ import { Answer } from "../type";
 import { StatusContainer } from "../status";
 import { useRouter } from "next/router";
 import { fr } from "@codegouvfr/react-dsfr";
+import { PublishButton } from "../../button/PublishButton";
 
 type EditQuestionAnswerListProps = {
   answers: Answer[];
@@ -76,8 +76,10 @@ export const QuestionAnswerList = ({
     )
   );
   const [displayPublish, setDisplayPublish] = useState(false);
+  const [isPublishing, setIsPublishing] = useState(false);
 
   const publishAll = async () => {
+    setIsPublishing(true);
     const ids = Object.entries(answersCheck).reduce<string[]>(
       (arr, [id, checked]) => {
         if (checked) {
@@ -88,7 +90,12 @@ export const QuestionAnswerList = ({
       []
     );
     const promises = ids.map((id) => onPublish(id));
-    await Promise.all(promises);
+    try {
+      await Promise.all(promises).finally(() => setIsPublishing(false));
+    } catch (e) {
+      setIsPublishing(false);
+      throw e;
+    }
   };
   const redirectToAnswer = (id: string) => {
     router.push(`/contributions/answers/${id}`);
@@ -103,15 +110,13 @@ export const QuestionAnswerList = ({
     <Stack alignItems="stretch">
       <Stack>
         <Stack direction="row" alignItems="start" spacing={2}>
-          <Button
-            variant="contained"
-            type="button"
-            color="success"
+          <PublishButton
             disabled={!displayPublish}
             onClick={publishAll}
+            isPublishing={isPublishing}
           >
             Publier
-          </Button>
+          </PublishButton>
         </Stack>
         <TableContainer component={Paper}>
           <Table size="small" aria-label="purchases">
diff --git a/targets/frontend/src/components/layout/Navigation.tsx b/targets/frontend/src/components/layout/Navigation.tsx
index a51668db1..855c633d5 100644
--- a/targets/frontend/src/components/layout/Navigation.tsx
+++ b/targets/frontend/src/components/layout/Navigation.tsx
@@ -127,6 +127,7 @@ export function Navigation() {
           ) : (
             href && (
               <Stack
+                key={key}
                 direction="row"
                 justifyContent="space-between"
                 alignItems="center"
diff --git a/targets/frontend/src/modules/agreements/components/Common/Form.tsx b/targets/frontend/src/modules/agreements/components/Common/Form.tsx
index 2a55be6b3..5a84ea534 100644
--- a/targets/frontend/src/modules/agreements/components/Common/Form.tsx
+++ b/targets/frontend/src/modules/agreements/components/Common/Form.tsx
@@ -1,9 +1,5 @@
 import { AlertColor, Button, FormControl, Stack } from "@mui/material";
-import {
-  FormAutocompleteChips,
-  FormSwitch,
-  FormTextField,
-} from "src/components/forms";
+import { FormAutocompleteChips, FormTextField } from "src/components/forms";
 
 import { useForm } from "react-hook-form";
 import { Agreement, agreementSchema } from "../../type";
@@ -11,6 +7,7 @@ import React, { useState } from "react";
 import { SnackBar } from "src/components/utils/SnackBar";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
+import { PublishButton } from "../../../../components/button/PublishButton";
 
 type FormData = Partial<z.infer<typeof agreementSchemaUpsert>>;
 
@@ -86,6 +83,7 @@ export const AgreementForm = ({
       });
     }
   };
+  const [isPublishing, setIsPublishing] = useState(false);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -199,11 +197,10 @@ export const AgreementForm = ({
             {agreement ? "Sauvegarder" : "Créer"}
           </Button>
           {onPublish && (
-            <Button
-              type="button"
-              variant="contained"
-              color="success"
+            <PublishButton
+              isPublishing={isPublishing}
               onClick={async () => {
+                setIsPublishing(true);
                 try {
                   await onPublish();
                   setSnack({
@@ -211,17 +208,19 @@ export const AgreementForm = ({
                     severity: "success",
                     message: "La convention collective a été publiée",
                   });
+                  setIsPublishing(false);
                 } catch (e: any) {
                   setSnack({
                     open: true,
                     severity: "error",
                     message: `Erreur lors de la publication de la convention collective: ${e.message}`,
                   });
+                  setIsPublishing(false);
                 }
               }}
             >
               Publier
-            </Button>
+            </PublishButton>
           )}
         </Stack>
       </Stack>
diff --git a/targets/frontend/src/modules/informations/components/informationsEdit/InformationsForm.tsx b/targets/frontend/src/modules/informations/components/informationsEdit/InformationsForm.tsx
index ac2370ae7..b51bc042a 100644
--- a/targets/frontend/src/modules/informations/components/informationsEdit/InformationsForm.tsx
+++ b/targets/frontend/src/modules/informations/components/informationsEdit/InformationsForm.tsx
@@ -1,14 +1,15 @@
-import { Stack, Button, FormControl, Typography } from "@mui/material";
-import React from "react";
-import { useForm, useFieldArray } from "react-hook-form";
+import { Button, FormControl, Stack, Typography } from "@mui/material";
+import React, { useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FormTextField, FormRadioGroup } from "src/components/forms";
+import { FormRadioGroup, FormTextField } from "src/components/forms";
 
 import { InformationsResult } from "./Informations.query";
 import { Information, informationSchema } from "../../type";
 import { InformationsContent } from "./InformationsContent";
 import { InformationsReference } from "./InformationsReference";
 import { FormCheckbox } from "src/components/forms/Checkbox";
+import { PublishButton } from "../../../../components/button/PublishButton";
 
 export type InformationsFormProps = {
   data?: InformationsResult;
@@ -23,12 +24,7 @@ export const InformationsForm = ({
   onDelete,
   onPublish,
 }: InformationsFormProps): JSX.Element => {
-  const {
-    control,
-    handleSubmit,
-    trigger,
-    formState: { errors },
-  } = useForm<Information>({
+  const { control, handleSubmit } = useForm<Information>({
     defaultValues: data ?? { title: "", dismissalProcess: false },
     resolver: zodResolver(informationSchema),
     shouldFocusError: true,
@@ -56,6 +52,7 @@ export const InformationsForm = ({
   const [expandedContent, setExpandedContent] = React.useState<string | false>(
     false
   );
+  const [isPublishing, setIsPublishing] = useState(false);
 
   return (
     <>
@@ -222,19 +219,21 @@ export const InformationsForm = ({
               Supprimer
             </Button>
             <Button type="submit">Sauvegarder</Button>
-            <Button
-              type="button"
-              variant="contained"
-              color="success"
-              disabled={!onPublish}
-              onClick={async () => {
-                if (onPublish && data?.id) {
-                  await onPublish();
-                }
-              }}
-            >
-              Publier
-            </Button>
+            {onPublish && (
+              <PublishButton
+                disabled={!onPublish}
+                onClick={async () => {
+                  if (data?.id) {
+                    setIsPublishing(true);
+                    await onPublish();
+                    setIsPublishing(false);
+                  }
+                }}
+                isPublishing={isPublishing}
+              >
+                Publier
+              </PublishButton>
+            )}
           </Stack>
         </Stack>
       </form>
diff --git a/targets/frontend/src/modules/models/components/Common/Form.tsx b/targets/frontend/src/modules/models/components/Common/Form.tsx
index abde47b4f..cde82aeee 100644
--- a/targets/frontend/src/modules/models/components/Common/Form.tsx
+++ b/targets/frontend/src/modules/models/components/Common/Form.tsx
@@ -26,6 +26,7 @@ import { LegiReferenceInput } from "src/components/contributions/answers/referen
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { FormOtherReferences } from "../../../../components/forms/OtherReferences";
+import { PublishButton } from "../../../../components/button/PublishButton";
 
 type FormData = Partial<z.infer<typeof modelSchemaUpsert>>;
 
@@ -144,6 +145,7 @@ export const ModelForm = ({
       });
     }
   };
+  const [isPublishing, setIsPublishing] = useState(false);
 
   const convertToHTML = async (file: File) => {
     setIsLoadingPreview(true);
@@ -300,31 +302,31 @@ export const ModelForm = ({
             {model ? "Sauvegarder" : "Créer"}
           </Button>
           {onPublish && (
-            <Button
-              type="button"
-              variant="contained"
-              color="success"
+            <PublishButton
+              isPublishing={isPublishing}
               onClick={async () => {
-                if (onPublish) {
-                  try {
-                    await onPublish();
-                    setSnack({
-                      open: true,
-                      severity: "success",
-                      message: "Le modèle de document a été publiée",
-                    });
-                  } catch (e: any) {
-                    setSnack({
-                      open: true,
-                      severity: "error",
-                      message: `Erreur lors de la publication du document: ${e.message}`,
-                    });
-                  }
+                setIsPublishing(true);
+
+                try {
+                  await onPublish();
+                  setSnack({
+                    open: true,
+                    severity: "success",
+                    message: "Le modèle de document a été publiée",
+                  });
+                  setIsPublishing(false);
+                } catch (e: any) {
+                  setSnack({
+                    open: true,
+                    severity: "error",
+                    message: `Erreur lors de la publication du document: ${e.message}`,
+                  });
+                  setIsPublishing(false);
                 }
               }}
             >
               Publier
-            </Button>
+            </PublishButton>
           )}
         </Stack>
       </Stack>
diff --git a/targets/frontend/src/pages/themes/edit/[id].js b/targets/frontend/src/pages/themes/edit/[id].js
index 547501241..3825da814 100644
--- a/targets/frontend/src/pages/themes/edit/[id].js
+++ b/targets/frontend/src/pages/themes/edit/[id].js
@@ -126,10 +126,8 @@ export function EditThemePage() {
     });
   }
 
-  // const notFound = !fetching && !deleteResult.fetching && !theme?.cdtnId;
-
   return (
-    <Layout /* errorCode={(notFound && 404) || null} */ title="Éditer le theme">
+    <Layout title="Éditer le theme">
       <Stack>
         {fetching ? (
           <Spinner />

From 0693c6c1081906929dde8c130465b2d3673eef99 Mon Sep 17 00:00:00 2001
From: carolineBda <caroline.bourdeu@gmail.com>
Date: Thu, 20 Jun 2024 11:34:15 +0200
Subject: [PATCH 2/4] fix contribs

---
 .../contributions/answers/AnswerForm.tsx      | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/targets/frontend/src/components/contributions/answers/AnswerForm.tsx b/targets/frontend/src/components/contributions/answers/AnswerForm.tsx
index c756c0360..3fe5ce385 100644
--- a/targets/frontend/src/components/contributions/answers/AnswerForm.tsx
+++ b/targets/frontend/src/components/contributions/answers/AnswerForm.tsx
@@ -315,32 +315,30 @@ export const AnswerForm = ({
               : undefined
           }
         />
-        {!submitting && (
-          <Stack direction="row" justifyContent="end" spacing={2} padding={2}>
-            <Button
-              type="button"
-              onClick={() => submit("REDACTING")}
-              disabled={status === "TODO" || status === "REDACTING"}
-            >
-              Remettre en rédaction
-            </Button>
-            <Button
-              variant="text"
-              type="button"
-              disabled={isNotEditable(answer)}
-              onClick={() => submit("REDACTING")}
-            >
-              Sauvegarder
-            </Button>
-            <PublishButton
-              onClick={() => submit(getNextStatus(status))}
-              disabled={submitting || status === "PUBLISHED"}
-              isPublishing={submitting}
-            >
-              {getPrimaryButtonLabel(status)}
-            </PublishButton>
-          </Stack>
-        )}
+        <Stack direction="row" justifyContent="end" spacing={2} padding={2}>
+          <Button
+            type="button"
+            onClick={() => submit("REDACTING")}
+            disabled={status === "TODO" || status === "REDACTING" || submitting}
+          >
+            Remettre en rédaction
+          </Button>
+          <Button
+            variant="text"
+            type="button"
+            disabled={isNotEditable(answer) || submitting}
+            onClick={() => submit("REDACTING")}
+          >
+            Sauvegarder
+          </Button>
+          <PublishButton
+            onClick={() => submit(getNextStatus(status))}
+            disabled={submitting || status === "PUBLISHED"}
+            isPublishing={submitting}
+          >
+            {getPrimaryButtonLabel(status)}
+          </PublishButton>
+        </Stack>
       </Stack>
     </form>
   );

From 85b556a99b41b27dfb11c90a6b7d9c999d7de6e0 Mon Sep 17 00:00:00 2001
From: carolineBda <caroline.bourdeu@gmail.com>
Date: Thu, 20 Jun 2024 15:01:50 +0200
Subject: [PATCH 3/4] modify bouton

---
 .../src/components/documents/Actions.js       |  7 ++--
 .../src/components/documents/Container.js     |  2 +-
 targets/frontend/src/pages/fichiers.tsx       | 36 ++++++++++---------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/targets/frontend/src/components/documents/Actions.js b/targets/frontend/src/components/documents/Actions.js
index 409a9e559..0ffb13539 100644
--- a/targets/frontend/src/components/documents/Actions.js
+++ b/targets/frontend/src/components/documents/Actions.js
@@ -42,13 +42,12 @@ export function DocumentsListActions({ onUpdatePublication }) {
       </Dialog>
       <Button
         type="button"
-        outline
-        size="small"
-        variant="secondary"
+        variant="contained"
+        color="success"
         disabled={Object.keys(selectedItems).length === 0}
         onClick={openPublishDialog}
       >
-        Modifier
+        Sauvegarder
       </Button>
     </Box>
   );
diff --git a/targets/frontend/src/components/documents/Container.js b/targets/frontend/src/components/documents/Container.js
index 23470e40c..c8ebf5703 100644
--- a/targets/frontend/src/components/documents/Container.js
+++ b/targets/frontend/src/components/documents/Container.js
@@ -100,8 +100,8 @@ export function DocumentListContainer({ initialFilterValues }) {
         <>chargement...</>
       ) : data.documents.length ? (
         <form>
-          <DocumentList documents={data.documents} />
           <DocumentsListActions onUpdatePublication={updatePublicationStatus} />
+          <DocumentList documents={data.documents} />
           <Pagination
             count={data.documents_aggregate.aggregate.count}
             currentPage={initialFilterValues.page}
diff --git a/targets/frontend/src/pages/fichiers.tsx b/targets/frontend/src/pages/fichiers.tsx
index 69d6bce9a..777466b9f 100644
--- a/targets/frontend/src/pages/fichiers.tsx
+++ b/targets/frontend/src/pages/fichiers.tsx
@@ -1,4 +1,18 @@
-import { Button, IconButton, ListItem } from "@mui/material";
+import {
+  Alert,
+  Box,
+  Button,
+  Card,
+  CircularProgress as Spinner,
+  IconButton,
+  InputLabel as Label,
+  List,
+  ListItem,
+  MenuItem,
+  Select,
+  TextField as Field,
+  Stack,
+} from "@mui/material";
 import prettyBytes from "pretty-bytes";
 import { useEffect, useRef, useState } from "react";
 import {
@@ -12,20 +26,10 @@ import { DropZone } from "src/components/storage/DropZone";
 import { useDebouncedState } from "src/hooks/";
 import { timeSince } from "src/lib/duration";
 import { request } from "src/lib/request";
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
 import { theme } from "../theme";
-import {
-  Box,
-  Card,
-  TextField as Field,
-  InputLabel as Label,
-  Alert,
-  Select,
-  CircularProgress as Spinner,
-  MenuItem,
-  List,
-} from "@mui/material";
 import { S3File } from "src/lib/upload";
+
 function FilesPage() {
   const { data, error, isValidating, mutate } = useSWR<S3File[]>("files", () =>
     request(`/api/storage`)
@@ -174,7 +178,7 @@ function FilesPage() {
       {isSearching || (isValidating && !data) ? (
         <Spinner />
       ) : data && data?.length > 0 ? (
-        <>
+        <Stack>
           <List sx={{ listStyleType: "none", m: 0, p: 0 }}>
             {data
               .filter(
@@ -272,9 +276,9 @@ function FilesPage() {
                 );
               })}
           </List>
-        </>
+        </Stack>
       ) : (
-        <>Pas de résultats</>
+        <p>Pas de résultats</p>
       )}
     </Layout>
   );

From 2004003b83fa100f131da2786d68d7e579c1594f Mon Sep 17 00:00:00 2001
From: Caroline <4971715+carolineBda@users.noreply.github.com>
Date: Mon, 24 Jun 2024 09:07:37 +0200
Subject: [PATCH 4/4] Update
 targets/frontend/src/components/button/PublishButton.tsx

Co-authored-by: Maxime Golfier <25312957+maxgfr@users.noreply.github.com>
---
 targets/frontend/src/components/button/PublishButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/targets/frontend/src/components/button/PublishButton.tsx b/targets/frontend/src/components/button/PublishButton.tsx
index 291e5c9d2..b598cd87b 100644
--- a/targets/frontend/src/components/button/PublishButton.tsx
+++ b/targets/frontend/src/components/button/PublishButton.tsx
@@ -5,7 +5,7 @@ type Props = {
   disabled?: boolean;
   isPublishing: boolean;
   onClick: () => void;
-  children: JSX.Element | string | undefined;
+  children: React.ReactNode;
 };
 
 export function PublishButton({