feat(loader): ajout d'un loader à la place du bouton lorsque l'on pub…

…lie un document (#1432)

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: React.ReactNode;
+};
+
+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>
+  );
+}

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({
@@ -315,36 +316,32 @@ 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")}
+        <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>
+          {primaryButtonLabel && (
+            <PublishButton
+              onClick={() => submit(getNextStatus(status))}
+              disabled={submitting || status === "TO_PUBLISH"}
+              isPublishing={submitting}
             >
-              Sauvegarder
-            </Button>
-            {primaryButtonLabel && (
-              <Button
-                variant="contained"
-                type="button"
-                color="success"
-                onClick={() => submit(getNextStatus(status))}
-                disabled={submitting || status === "TO_PUBLISH"}
-              >
-                {primaryButtonLabel}
-              </Button>
-            )}
-          </Stack>
-        )}
+              {primaryButtonLabel}
+            </PublishButton>
+          )}
+        </Stack>
       </Stack>
     </form>
   );

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";
 import { StatusPublicationContainer } from "../status/StatusPublication";
 
 type EditQuestionAnswerListProps = {
@@ -77,8 +77,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) {
@@ -89,7 +91,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}`);
@@ -104,15 +111,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">

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>
   );

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}

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"

targets/frontend/src/modules/agreements/components/Common/Form.tsx

@@ -1,16 +1,13 @@
 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";
 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,29 +197,30 @@ 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({
                     open: true,
                     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>

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>