♻️ Inputfile in legacy done

MTES-MCT · Sep 19, 2024 · 18c1923 · 18c1923
1 parent 68bebb3
commit 18c1923
Show file tree

Hide file tree

Showing 14 changed files with 28 additions and 55 deletions.
diff --git a/packages/applications/legacy/src/views/components/UI/molecules/InputFile.tsx b/packages/applications/legacy/src/views/components/UI/molecules/InputFile.tsx
@@ -12,7 +12,7 @@ type InputFileProps = {
 export const InputFile = ({
   id = 'file',
   name = 'file',
-  required,
+  required = true,
   disabled,
   className,
 }: InputFileProps) => {
@@ -23,11 +23,11 @@ export const InputFile = ({
         name={name}
         id={id}
         required={required}
-        aria-required
+        aria-required={required}
         disabled={disabled}
         className={className}
       />
-      <LabelDescription>Taille maximale du fichier : 50 MB</LabelDescription>
+      <LabelDescription className="italic">Taille maximale du fichier : 50 Mo</LabelDescription>
     </div>
   );
 };
diff --git a/packages/applications/legacy/src/views/pages/UploadLegacyModificationFilesPage.tsx b/packages/applications/legacy/src/views/pages/UploadLegacyModificationFilesPage.tsx
@@ -13,10 +13,9 @@ import {
 } from '../components';
 import { hydrateOnClient } from '../helpers/hydrateOnClient';
 
-export type UploadLegacyModificationFileResult =
-  | {
-      filename: string;
-    } & ({ error: false } | { error: true; message: string });
+export type UploadLegacyModificationFileResult = {
+  filename: string;
+} & ({ error: false } | { error: true; message: string });
 
 type UploadLegacyModificationFilesProps = {
   request: Request;
@@ -78,7 +77,7 @@ export const UploadLegacyModificationFiles = ({
           </div>
           <Input type="file" multiple name="files" id="files" />
           <div className="text-sm mt-2">
-            Vous pouvez attacher jusqu'à 50Mo de fichiers à la fois
+            Vous pouvez attacher des fichiers de 50Mo max à la fois
           </div>
         </div>
         <PrimaryButton type="submit" name="submit" id="submit">

diff --git a/packages/applications/legacy/src/views/pages/changerFournisseurPage/ChangerFournisseur.tsx b/packages/applications/legacy/src/views/pages/changerFournisseurPage/ChangerFournisseur.tsx
@@ -21,6 +21,7 @@ import {
   Form,
   ChampsObligatoiresLégende,
   LabelDescription,
+  InputFile,
 } from '../../components';
 import { hydrateOnClient } from '../../helpers';
 import { CHAMPS_FOURNISSEURS, CORRESPONDANCE_CHAMPS_FOURNISSEURS } from '../../../modules/project';
@@ -142,7 +143,7 @@ export const ChangerFournisseur = ({ request, project, appelOffre }: ChangerFour
           )}
           <div>
             <Label htmlFor="file">Pièce-jointe</Label>
-            <Input type="file" name="file" id="file" required aria-required="true" />
+            <InputFile />
           </div>
           <div>
             <Label htmlFor="justification">

diff --git a/packages/applications/legacy/src/views/pages/changerProducteurPage/ChangerProducteur.tsx b/packages/applications/legacy/src/views/pages/changerProducteurPage/ChangerProducteur.tsx
@@ -12,6 +12,7 @@ import {
   Form,
   Heading1,
   Input,
+  InputFile,
   Label,
   LabelDescription,
   LegacyPageTemplate,
@@ -101,14 +102,7 @@ export const ChangerProducteur = ({ request, project, appelOffre }: ChangerProdu
           </div>
           <div>
             <Label htmlFor="file">Joindre les statuts mis à jour</Label>
-            <Input
-              type="file"
-              name="file"
-              id="file"
-              required
-              aria-required
-              {...(!appelOffre?.changementProducteurPossibleAvantAchèvement && { disabled: true })}
-            />
+            <InputFile disabled={!appelOffre?.changementProducteurPossibleAvantAchèvement} />
           </div>
           <div>
             <Label htmlFor="justification" optionnel>

diff --git a/...legacy/src/views/pages/demanderChangementPuissancePage/components/ChangementPuissance.tsx b/...legacy/src/views/pages/demanderChangementPuissancePage/components/ChangementPuissance.tsx
@@ -15,6 +15,7 @@ import {
   LabelDescription,
   Callout,
   AlertBox,
+  InputFile,
 } from '../../../components';
 import { AlertePuissanceMaxDepassee } from './AlertePuissanceMaxDepassee';
 import { AlertePuissanceHorsRatios } from './AlertePuissanceHorsRatios';
@@ -214,13 +215,7 @@ export const ChangementPuissance = ({
         >
           Courrier explicatif ou décision administrative
         </Label>
-        <Input
-          type="file"
-          name="file"
-          id="file"
-          required={fichierEtJustificationRequis}
-          aria-required={fichierEtJustificationRequis}
-        />
+        <InputFile required={fichierEtJustificationRequis} />
       </div>
     </>
   );

diff --git a/packages/applications/legacy/src/views/pages/délai/CorrigerDelaiAccordePage.tsx b/packages/applications/legacy/src/views/pages/délai/CorrigerDelaiAccordePage.tsx
@@ -7,6 +7,7 @@ import {
   Form,
   InfoBox,
   Input,
+  InputFile,
   Label,
   PageProjetTemplate,
   PrimaryButton,
@@ -85,7 +86,7 @@ export const CorrigerDelaiAccorde = ({
               </li>
               <li>
                 <span>Téléversez le courrier signé : </span>
-                <Input type="file" name="file" id="file" required aria-required />
+                <InputFile />
               </li>
             </ol>
           </div>

diff --git a/.../applications/legacy/src/views/pages/modificationRequestPage/components/PuissanceForm.tsx b/.../applications/legacy/src/views/pages/modificationRequestPage/components/PuissanceForm.tsx
@@ -48,7 +48,6 @@ export const PuissanceForm = ({ modificationRequest }: PuissanceFormProps) => {
         optionnel={true}
         reasonForOptionnel={`en cas de refus ou de décision favorable de l'État`}
       />
-
       <div>
         <div>
           Nouvelle {textPuissance.toLowerCase()} demandée :{' '}

diff --git a/...ications/legacy/src/views/pages/modificationRequestPage/components/UploadResponseFile.tsx b/...ications/legacy/src/views/pages/modificationRequestPage/components/UploadResponseFile.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { DownloadResponseTemplate } from '.';
 import { ModificationRequestPageDTO } from '../../../../modules/modificationRequest';
-import { Input, Label } from '../../../components';
+import { InputFile, Label } from '../../../components';
 
 interface UploadResponseFileProps {
   modificationRequest: ModificationRequestPageDTO & { type: string };
@@ -19,13 +19,7 @@ export const UploadResponseFile = ({
       <Label htmlFor="file" optionnel={optionnel} reasonForOptionnel={reasonForOptionnel}>
         Réponse signée (fichier pdf)
       </Label>
-      <Input
-        type="file"
-        name="file"
-        id="file"
-        required={modificationRequest.type !== 'puissance'}
-        aria-required={modificationRequest.type !== 'puissance'}
-      />
+      <InputFile required={modificationRequest.type !== 'puissance'} />
     </div>
     <DownloadResponseTemplate modificationRequest={modificationRequest} />
   </div>

diff --git a/...c/views/pages/newModificationRequestPage/components/actionnaire/ChangementActionnaire.tsx b/...c/views/pages/newModificationRequestPage/components/actionnaire/ChangementActionnaire.tsx
@@ -3,6 +3,7 @@ import {
   Callout,
   ChampsObligatoiresLégende,
   Input,
+  InputFile,
   Label,
   LabelDescription,
   TextArea,
@@ -44,7 +45,7 @@ export const ChangementActionnaire = ({
       <LabelDescription>
         Vous pouvez transmettre un fichier compressé si il y a plusieurs documents
       </LabelDescription>
-      <Input type="file" name="file" id="file" required aria-required="true" />
+      <InputFile />
     </div>
     <div>
       <Label htmlFor="justification" optionnel={true}>

diff --git a/...s/legacy/src/views/pages/newModificationRequestPage/components/recours/DemandeRecours.tsx b/...s/legacy/src/views/pages/newModificationRequestPage/components/recours/DemandeRecours.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
 import {
-  Input,
   Label,
   TextArea,
   ChampsObligatoiresLégende,
   LabelDescription,
+  InputFile,
 } from '../../../../components';
 
 type DemandeRecoursProps = {
@@ -36,7 +36,7 @@ export const DemandeRecours = ({ justification }: DemandeRecoursProps) => (
       <LabelDescription>
         Vous pouvez transmettre un fichier compressé si il y a plusieurs documents
       </LabelDescription>
-      <Input type="file" name="file" id="file" required aria-required="true" />
+      <InputFile />
     </div>
   </>
 );
diff --git a/packages/applications/legacy/src/views/pages/projectDetailsPage/components/AttachFile.tsx b/packages/applications/legacy/src/views/pages/projectDetailsPage/components/AttachFile.tsx
@@ -10,6 +10,7 @@ import {
   Label,
   Form,
   ChampsObligatoiresLégende,
+  InputFile,
 } from '../../../components';
 
 type AttachFileProps = {
@@ -56,14 +57,7 @@ export const AttachFile = ({ projectId }: AttachFileProps) => {
           <div>
             <Label htmlFor="file">Fichier(s) à attacher</Label>
             {Array.from({ length: fileCount }, (v, i) => i).map((i) => (
-              <Input
-                key={`file_${i}`}
-                type="file"
-                name="file"
-                id="file"
-                required
-                aria-required="true"
-              />
+              <InputFile key={`file_${i}`} />
             ))}
             <Link onClick={() => setFileCount(fileCount + 1)}>+ Ajouter un autre fichier</Link>
           </div>

diff --git a/...ges/applications/legacy/src/views/pages/signalerDemandeDelaiPage/SignalerDemandeDelai.tsx b/...ges/applications/legacy/src/views/pages/signalerDemandeDelaiPage/SignalerDemandeDelai.tsx
@@ -12,6 +12,7 @@ import {
   Label,
   LabelDescription,
   Input,
+  InputFile,
 } from '../../components';
 import { ProjectDataForSignalerDemandeDelaiPage } from '../../../modules/project';
 import routes from '../../../routes';
@@ -142,7 +143,7 @@ export const SignalerDemandeDelai = ({
           <Label htmlFor="file" optionnel>
             Courrier de la réponse (fichier joint)
           </Label>
-          <Input name="file" type="file" className="rounded-none" id="file" />
+          <InputFile className="rounded-none" required={false} />
         </div>
 
         <div>

diff --git a/...applications/legacy/src/views/pages/signalerDemandeRecoursPage/SignalerDemandeRecours.tsx b/...applications/legacy/src/views/pages/signalerDemandeRecoursPage/SignalerDemandeRecours.tsx
@@ -13,6 +13,7 @@ import {
   Radio,
   Form,
   ChampsObligatoiresLégende,
+  InputFile,
 } from '../../components';
 import routes from '../../../routes';
 import { ProjectDataForSignalerDemandeRecoursPage } from '../../../modules/project';
@@ -98,14 +99,7 @@ export const SignalerDemandeRecours = ({
 
         <div>
           <Label htmlFor="file">Courrier de la réponse (fichier joint)</Label>
-          <Input
-            name="file"
-            type="file"
-            className="rounded-none"
-            id="file"
-            required
-            aria-required="true"
-          />
+          <InputFile className="rounded-none" />
         </div>
 
         <div>

diff --git a/packages/applications/ssr/src/components/atoms/form/UploadDocument.tsx b/packages/applications/ssr/src/components/atoms/form/UploadDocument.tsx
@@ -68,7 +68,7 @@ const UploadNewDocument: FC<Omit<UploadDocumentProps, 'documentKey'>> = ({
             setUploadFileName(fileName);
           }}
         />
-        <div className="fr-hint-text">Taille maximale acceptée : XX MB</div>
+        {/* <div className="fr-hint-text">Taille maximale acceptée : XX MB</div> */}
 
         <Button className="!mt-0" type="button" priority="secondary" onClick={browseForFile}>
           <Icon id="fr-icon-folder-2-fill" className="md:mr-1" />