build: fix build errors

MTES-MCT · Jan 17, 2025 · e58747b · e58747b
1 parent cd7554b
commit e58747b
Show file tree

Hide file tree

Showing 20 changed files with 4,059 additions and 5,135 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -71,7 +71,8 @@
     "uuid": "^9.0.1",
     "web-vitals": "^1.1.2",
     "whatwg-fetch": "^3.6.20",
-    "yup": "^0.32.11"
+    "yup": "^0.32.11",
+    "yup-next": "npm:yup@^1.4.0"
   },
   "devDependencies": {
     "@craco/craco": "^7.1.0",

diff --git a/frontend/src/components/Draft/DraftDownloader.tsx b/frontend/src/components/Draft/DraftDownloader.tsx
@@ -20,7 +20,7 @@ function DraftDownloader(props: Readonly<Props>) {
     <Tile
       classes={{
         title: styles.title,
-        link: styles.link,
+        link: styles.link
       }}
       desc={description}
       enlargeLink
@@ -30,9 +30,11 @@ function DraftDownloader(props: Readonly<Props>) {
       linkProps={{
         download: true,
         href: link,
+        onClick: () => {
+          props.setDownloaded(true);
+        }
       }}
       title="Télécharger les destinataires et vos courriers"
-      onClick={() => props.setDownloaded(true)}
     />
   );
 }

diff --git a/frontend/src/components/HousingListFilters/CampaignFilter.tsx b/frontend/src/components/HousingListFilters/CampaignFilter.tsx
@@ -2,7 +2,7 @@ import { fr } from '@codegouvfr/react-dsfr';
 import Checkbox from '@codegouvfr/react-dsfr/Checkbox';
 import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
 import { List, Set } from 'immutable';
-import { ChangeEvent, useId, useRef } from 'react';
+import { useId, useRef } from 'react';
 import { match } from 'ts-pattern';
 
 import {
@@ -83,10 +83,6 @@ function CampaignFilter(props: Props) {
     }
   }
 
-  function noop(event: ChangeEvent): void {
-    event.stopPropagation();
-  }
-
   const categories = groupByStatus(props.options).toArray();
 
   return (
@@ -165,8 +161,8 @@ function CampaignFilter(props: Props) {
                     (value) => value === noCampaignOption.value
                   ),
                   value: noCampaignOption.value,
-                  onClick: noop,
-                  onChange: noop
+                  onClick: (event) => event.stopPropagation(),
+                  onChange: (event) => event.stopPropagation()
                 }
               }
             ]}
@@ -206,8 +202,8 @@ function CampaignFilter(props: Props) {
                     nativeInputProps: {
                       checked: selected.some((value) => value === status),
                       value: status,
-                      onClick: noop,
-                      onChange: noop
+                      onClick: (event) => event.stopPropagation(),
+                      onChange: (event) => event.stopPropagation()
                     }
                   }
                 ]}
@@ -234,8 +230,8 @@ function CampaignFilter(props: Props) {
                           (value) => value === campaign.id
                         ),
                         value: campaign.id,
-                        onClick: noop,
-                        onChange: noop
+                        onClick: (event) => event.stopPropagation(),
+                        onChange: (event) => event.stopPropagation()
                       }
                     }
                   ]}

diff --git a/frontend/src/components/OwnerCard/OwnerCard.tsx b/frontend/src/components/OwnerCard/OwnerCard.tsx
@@ -54,26 +54,28 @@ function OwnerCard(props: OwnerCardProps) {
               />
               Date de naissance
             </LabelNext>
-            <Typography>{birthdate(props.owner.birthDate)} ({age(props.owner.birthDate)} ans)</Typography>
+            <Typography>
+              {birthdate(props.owner.birthDate)} ({age(props.owner.birthDate)}{' '}
+              ans)
+            </Typography>
           </Grid>
         ) : null}
 
         <Grid xs={12}>
           <LabelNext component="h3">
             <span
-              className={fr.cx(
-                'fr-icon-bank-line',
-                'fr-icon--sm',
-                'fr-mr-1w'
-              )}
+              className={fr.cx('fr-icon-bank-line', 'fr-icon--sm', 'fr-mr-1w')}
               aria-hidden={true}
             />
             Adresse fiscale (source: DGFIP)
           </LabelNext>
-          <Typography color={fr.colors.decisions.text.default.grey.default}>{props.owner.rawAddress ? props.owner.rawAddress.join(' ') : 'Inconnue'}</Typography>
+          <Typography color={fr.colors.decisions.text.default.grey.default}>
+            {props.owner.rawAddress
+              ? props.owner.rawAddress.join(' ')
+              : 'Inconnue'}
+          </Typography>
         </Grid>
 
-
         <Grid xs={12}>
           <LabelNext component="h3">
             <span
@@ -86,22 +88,28 @@ function OwnerCard(props: OwnerCardProps) {
             />
             Adresse postale (source: Base Adresse Nationale)
           </LabelNext>
-          <Typography>{props.owner.banAddress ? formatAddress(props.owner.banAddress).join(' ') :  'Inconnue'}</Typography>
+          <Typography>
+            {props.owner.banAddress
+              ? formatAddress(props.owner.banAddress).join(' ')
+              : 'Inconnue'}
+          </Typography>
         </Grid>
 
-
         {!isBanEligible(props.owner.banAddress) && (
           <Grid xs={12}>
+            {/* @ts-expect-error: will be fixed by upgrading the DSFR */}
             <Alert
               severity="info"
               classes={{ title: fr.cx('fr-mb-2w') }}
               description={
                 <>
                   <Typography>
-                    L’adresse Base Adresse Nationale ne correspond pas à celle de la DGFIP.
+                    L’adresse Base Adresse Nationale ne correspond pas à celle
+                    de la DGFIP.
                   </Typography>
                   <Typography>
-                    Nous vous recommandons de vérifier en cliquant sur &quot;Modifier&quot;.
+                    Nous vous recommandons de vérifier en cliquant sur
+                    &quot;Modifier&quot;.
                   </Typography>
                 </>
               }

diff --git a/frontend/src/components/SearchableSelectNext/SearchableSelectNext.tsx b/frontend/src/components/SearchableSelectNext/SearchableSelectNext.tsx
@@ -65,6 +65,7 @@ function SearchableSelectNext<
       renderInput={(params) => (
         <Input
           {...props.inputProps}
+          label={props.inputProps?.label ?? 'Rechercher'}
           nativeInputProps={{
             ...props.inputProps?.nativeInputProps,
             ...params.inputProps,

diff --git a/frontend/src/components/_app/AppTextInput/AppTextInputNext.tsx b/frontend/src/components/_app/AppTextInput/AppTextInputNext.tsx
@@ -11,44 +11,43 @@ export type AppTextInputNextProps = InputProps & {
  * A text input to be used with react-hook-form and validated using yup.
  */
 function AppTextInputNext(props: AppTextInputNextProps) {
+  const { nativeInputProps, nativeTextAreaProps, textArea, ...rest } = props;
   const { field, fieldState } = useController({
     name: props.name,
     disabled: props.disabled
   });
 
-  const isTextArea = props.textArea === true;
+  const regularInputProps: Pick<InputProps.RegularInput, 'nativeInputProps'> = {
+    nativeInputProps: {
+      ...nativeInputProps,
+      // Avoid browser validation which prevents react-hook-form to work
+      formNoValidate: true,
+      name: field.name,
+      ref: field.ref,
+      value: field.value,
+      onBlur: field.onBlur,
+      onChange: field.onChange
+    }
+  };
+  const textAreaProps: Pick<
+    InputProps.TextArea,
+    'nativeTextAreaProps' | 'textArea'
+  > = {
+    textArea: true,
+    nativeTextAreaProps: {
+      ...nativeTextAreaProps,
+      name: field.name,
+      ref: field.ref,
+      value: field.value,
+      onBlur: field.onBlur,
+      onChange: field.onChange
+    }
+  };
 
   return (
     <Input
-      {...props}
-      textArea={isTextArea}
-      nativeInputProps={
-        !isTextArea
-          ? {
-              ...props.nativeInputProps,
-              // Avoid browser validation which prevents react-hook-form to work
-              formNoValidate: true,
-              name: field.name,
-              ref: field.ref,
-              value: field.value,
-              onBlur: field.onBlur,
-              onChange: field.onChange
-            }
-          : undefined
-      }
-      nativeTextAreaProps={
-        isTextArea
-          ? {
-              ...props.nativeTextAreaProps,
-              formNoValidate: true,
-              name: field.name,
-              ref: field.ref,
-              value: field.value,
-              onBlur: field.onBlur,
-              onChange: field.onChange
-            }
-          : undefined
-      }
+      {...rest}
+      {...(textArea ? textAreaProps : regularInputProps)}
       state={fieldState.invalid ? 'error' : undefined}
       stateRelatedMessage={
         fieldState.invalid

diff --git a/frontend/src/components/modals/CampaignCreationModal/CampaignCreationModal.tsx b/frontend/src/components/modals/CampaignCreationModal/CampaignCreationModal.tsx
@@ -60,18 +60,12 @@ const CampaignCreationModal = ({
         onClick={modal.open}
         data-testid="create-campaign-button"
         size="small"
-        role="button"
-        name="Créer une campagne"
       >
         Créer une campagne
       </Button>
       <modal.Component
         size="large"
-        title={
-          <>
-            Créer une campagne
-          </>
-        }
+        title={<>Créer une campagne</>}
         buttons={[
           {
             children: 'Annuler',

diff --git a/frontend/src/components/modals/ConfirmationModal/ConfirmationModal.tsx b/frontend/src/components/modals/ConfirmationModal/ConfirmationModal.tsx
@@ -3,7 +3,7 @@ import { Container } from '../../_dsfr';
 import { createModal } from '@codegouvfr/react-dsfr/Modal';
 import Button, { ButtonProps } from '@codegouvfr/react-dsfr/Button';
 import AppLinkAsButton, {
-  AppLinkAsButtonProps,
+  AppLinkAsButtonProps
 } from '../../_app/AppLinkAsButton/AppLinkAsButton';
 
 interface Props {
@@ -13,7 +13,7 @@ interface Props {
   onOpen?(openModal: () => void): Promise<void> | void;
   onSubmit(param?: any): Promise<void> | void;
   size?: 'small' | 'medium' | 'large';
-  openingButtonProps?: Omit<ButtonProps, 'onClick'>;
+  openingButtonProps?: Exclude<ButtonProps, ButtonProps.AsAnchor>;
   openingAppLinkAsButtonProps?: Omit<AppLinkAsButtonProps, 'onClick'>;
 }
 
@@ -25,15 +25,15 @@ function ConfirmationModal({
   onSubmit,
   size,
   openingButtonProps,
-  openingAppLinkAsButtonProps,
+  openingAppLinkAsButtonProps
 }: Props) {
   const modal = useMemo(
     () =>
       createModal({
         id: `confirmation-modal-${modalId}`,
-        isOpenedByDefault: false,
+        isOpenedByDefault: false
       }),
-    [modalId],
+    [modalId]
   );
 
   function open() {
@@ -69,13 +69,13 @@ function ConfirmationModal({
           {
             children: 'Annuler',
             priority: 'secondary',
-            className: 'fr-mr-2w',
+            className: 'fr-mr-2w'
           },
           {
             children: 'Confirmer',
             onClick: onClick,
-            doClosesModal: false,
-          },
+            doClosesModal: false
+          }
         ]}
         style={{ textAlign: 'initial' }}
       >

diff --git a/frontend/src/components/modals/GroupCampaignCreationModal/GroupCampaignCreationModal.tsx b/frontend/src/components/modals/GroupCampaignCreationModal/GroupCampaignCreationModal.tsx
@@ -3,18 +3,23 @@ import { Alert } from '@codegouvfr/react-dsfr/Alert';
 import ConfirmationModal from '../ConfirmationModal/ConfirmationModal';
 import * as yup from 'yup';
 import { useState } from 'react';
-import { campaignDescriptionValidator, campaignTitleValidator, useForm } from '../../../hooks/useForm';
+import {
+  campaignDescriptionValidator,
+  campaignTitleValidator,
+  useForm
+} from '../../../hooks/useForm';
 import { Campaign } from '../../../models/Campaign';
 import { Group } from '../../../models/Group';
 import { Container, Text } from '../../_dsfr';
 import AppTextInput from '../../_app/AppTextInput/AppTextInput';
-import { ButtonProps } from '@codegouvfr/react-dsfr/Button';
 import { displayCount } from '../../../utils/stringUtils';
 
 interface Props {
   group: Group;
   housingCount: number;
-  openingButtonProps?: Omit<ButtonProps, 'onClick'>;
+  openingButtonProps?: {
+    className?: string;
+  };
   onSubmit: (campaign: Pick<Campaign, 'title' | 'description'>) => void;
 }
 
@@ -23,19 +28,19 @@ function GroupCampaignCreationModal(props: Props) {
   const [description, setDescription] = useState('');
   const shape = {
     title: campaignTitleValidator,
-    description: campaignDescriptionValidator,
+    description: campaignDescriptionValidator
   };
   type FormShape = typeof shape;
   const form = useForm(yup.object().shape(shape), {
     title,
-    description,
+    description
   });
 
   async function submit(): Promise<void> {
     await form.validate(() =>
       props.onSubmit({
         title,
-        description,
+        description
       })
     );
   }
@@ -49,7 +54,7 @@ function GroupCampaignCreationModal(props: Props) {
       openingButtonProps={{
         children: 'Créer une campagne',
         disabled: props.housingCount === 0,
-        ...props.openingButtonProps,
+        ...props.openingButtonProps
       }}
       onSubmit={submit}
     >

diff --git a/frontend/src/components/modals/GroupRemovalModal/GroupRemovalModal.tsx b/frontend/src/components/modals/GroupRemovalModal/GroupRemovalModal.tsx
@@ -5,7 +5,10 @@ import { Campaign } from '../../../models/Campaign';
 
 interface Props {
   campaigns?: Campaign[];
-  openingButtonProps?: Omit<ButtonProps, 'onClick'>;
+  openingButtonProps?: Omit<
+    Exclude<ButtonProps, ButtonProps.AsAnchor>,
+    'onClick'
+  >;
   onSubmit: () => Promise<void>;
   onClose?: () => void;
 }
@@ -24,7 +27,7 @@ function GroupRemovalModal(props: Props) {
         children: `${isRemoving ? 'Supprimer' : 'Archiver'} le groupe`,
         iconId: 'ri-delete-bin-line',
         priority: 'tertiary',
-        ...props.openingButtonProps,
+        ...props.openingButtonProps
       }}
       onSubmit={props.onSubmit}
     >