🩹 [fiche action] fix: afficher automatiquement le tag modifié quand on édite un tag

Earthfile

@@ -605,13 +605,13 @@
     RUN earthly +api-test-build
     FOR test IN $tests
       RUN echo "Running tests for tests/$test'"
       RUN docker run --rm \
               --name api_test_tet \
               --network $network \
               --env SUPABASE_URL=$API_URL \
               --env SUPABASE_KEY=$SERVICE_ROLE_KEY \
               --env SUPABASE_SERVICE_ROLE_KEY=$SERVICE_ROLE_KEY \
-              api-test:latest test -A tests/$test/*.test.ts --location 'http://localhost'
+              api-test:latest test --no-check -A tests/$test/*.test.ts --location 'http://localhost'
     END
 
 api-crud-test:

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionActeurs/ModaleActeurs.tsx

@@ -37,6 +37,8 @@ const ModaleActeurs = ({
   const collectivite = useCurrentCollectivite();
   const collectiviteId = collectivite?.collectivite_id || null;
 
+  const ficheActionInvalidationKeys = [['fiche_action', fiche.id.toString()]];
+
   const handleSave = () => {
     if (!_.isEqual(fiche, editedFiche)) {
       updateFiche(editedFiche);
@@ -61,6 +63,7 @@ const ModaleActeurs = ({
                   services,
                 }))
               }
+              additionalKeysToInvalidate={ficheActionInvalidationKeys}
             />
           </Field>
 
@@ -74,6 +77,7 @@ const ModaleActeurs = ({
                   structures,
                 }))
               }
+              additionalKeysToInvalidate={ficheActionInvalidationKeys}
             />
           </Field>
 
@@ -88,6 +92,7 @@ const ModaleActeurs = ({
                   referents: personnes,
                 }))
               }
+              additionalKeysToInvalidate={ficheActionInvalidationKeys}
             />
           </Field>
 
@@ -101,6 +106,7 @@ const ModaleActeurs = ({
                   partenaires,
                 }))
               }
+              additionalKeysToInvalidate={ficheActionInvalidationKeys}
             />
           </Field>
 

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionDescription/ModaleDescription.tsx

@@ -103,6 +103,9 @@ const ModaleDescription = ({ fiche, updateFiche }: ModaleDescriptionProps) => {
               onChange={({ libresTag }) =>
                 setEditedFiche((prevState) => ({ ...prevState, libresTag }))
               }
+              additionalKeysToInvalidate={[
+                ['fiche_action', fiche.id.toString()],
+              ]}
             />
           </Field>
 

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionPilotes/ModalePilotes.tsx

@@ -45,6 +45,9 @@ const ModalePilotes = ({
                   pilotes: personnes,
                 }))
               }
+              additionalKeysToInvalidate={[
+                ['fiche_action', fiche.id.toString()],
+              ]}
             />
           </Field>
         </FormSectionGrid>

app.territoiresentransitions.react/src/ui/dropdownLists/PartenairesDropdown/PartenairesDropdown.tsx

@@ -2,6 +2,7 @@ import { Tag } from '@/domain/collectivites';
 import { SelectMultipleProps } from '@/ui';
 import SelectTags from '../tags/SelectTags';
 import { usePartenairesListe } from './usePartenairesListe';
+import { QueryKey } from 'react-query';
 
 type PartenairesDropdownProps = Omit<
   SelectMultipleProps,
@@ -15,6 +16,7 @@ type PartenairesDropdownProps = Omit<
     partenaires: Tag[];
     selectedPartenaire: Tag;
   }) => void;
+  additionalKeysToInvalidate?: QueryKey[];
 };
 
 const PartenairesDropdown = (props: PartenairesDropdownProps) => {
@@ -26,6 +28,7 @@ const PartenairesDropdown = (props: PartenairesDropdownProps) => {
       placeholder={props.placeholder ?? 'Sélectionnez ou créez un partenaire'}
       queryKey="partenaires"
       tagTableName="partenaire_tag"
+      additionalKeysToInvalidate={props.additionalKeysToInvalidate}
       optionsListe={data}
       refetchOptions={refetch}
       onChange={({ values, selectedValue }) => {

app.territoiresentransitions.react/src/ui/dropdownLists/PersonnesDropdown/PersonnesDropdown.tsx

@@ -9,6 +9,7 @@ import { Option, OptionValue, SelectFilter, SelectMultipleProps } from '@/ui';
 import { Personne } from '@/api/collectivites';
 import { usePersonneListe } from './usePersonneListe';
 import { getPersonneStringId } from './utils';
+import { QueryKey } from 'react-query';
 
 type Props = Omit<SelectMultipleProps, 'values' | 'onChange' | 'options'> & {
   values?: string[];
@@ -21,13 +22,14 @@ type Props = Omit<SelectMultipleProps, 'values' | 'onChange' | 'options'> & {
   }) => void;
   disabledOptionsIds?: string[];
   disableEdition?: boolean;
+  additionalKeysToInvalidate?: QueryKey[];
 };
 
 /** Sélecteur de personnes de la collectivité */
 const PersonnesDropdown = (props: Props) => {
   const collectiviteId = useCollectiviteId();
 
-  const { data: personneListe } = usePersonneListe();
+  const { data: personneListe, refetch } = usePersonneListe();
 
   const options: Option[] = personneListe
     ? personneListe.map((personne) => ({
@@ -47,16 +49,26 @@ const PersonnesDropdown = (props: Props) => {
   const { mutate: updateTag } = useTagUpdate({
     key: ['personnes', collectiviteId],
     tagTableName: 'personne_tag',
+    keysToInvalidate: props.additionalKeysToInvalidate,
+    onSuccess: () => {
+      refetch();
+    },
   });
 
   const { mutate: deleteTag } = useDeleteTag({
     key: ['personnes', collectiviteId],
     tagTableName: 'personne_tag',
+    onSuccess: () => {
+      refetch();
+    },
   });
 
   const { data: newTag, mutate: createTag } = useTagCreate({
     key: ['personnes', collectiviteId],
     tagTableName: 'personne_tag',
+    onSuccess: () => {
+      refetch();
+    },
   });
 
   const newTagId = newTag?.data?.[0].id;

app.territoiresentransitions.react/src/ui/dropdownLists/ServicesPilotesDropdown/ServicesPilotesDropdown.tsx

@@ -2,6 +2,7 @@ import { Tag } from '@/domain/collectivites';
 import { SelectMultipleProps } from '@/ui';
 import SelectTags from '../tags/SelectTags';
 import { useServicesPilotesListe } from './useServicesPilotesListe';
+import { QueryKey } from 'react-query';
 
 type ServicesPilotesDropdownProps = Omit<
   SelectMultipleProps,
@@ -16,6 +17,7 @@ type ServicesPilotesDropdownProps = Omit<
     selectedService: Tag;
   }) => void;
   disabledOptionsIds?: number[];
+  additionalKeysToInvalidate?: QueryKey[];
 };
 
 const ServicesPilotesDropdown = (props: ServicesPilotesDropdownProps) => {
@@ -27,6 +29,7 @@ const ServicesPilotesDropdown = (props: ServicesPilotesDropdownProps) => {
       dataTest={props.dataTest ?? 'ServicePilote'}
       queryKey="services_pilotes"
       tagTableName="service_tag"
+      additionalKeysToInvalidate={props.additionalKeysToInvalidate}
       optionsListe={data}
       refetchOptions={refetch}
       onChange={({ values, selectedValue }) => {

app.territoiresentransitions.react/src/ui/dropdownLists/StructuresDropdown/StructuresDropdown.tsx

@@ -2,6 +2,7 @@ import { Tag } from '@/domain/collectivites';
 import { SelectMultipleProps } from '@/ui';
 import SelectTags from '../tags/SelectTags';
 import { useStructuresListe } from './useStructuresListe';
+import { QueryKey } from 'react-query';
 
 type StructuresDropdownProps = Omit<
   SelectMultipleProps,
@@ -15,6 +16,7 @@ type StructuresDropdownProps = Omit<
     structures: Tag[];
     selectedStructure: Tag;
   }) => void;
+  additionalKeysToInvalidate?: QueryKey[];
 };
 
 const StructuresDropdown = (props: StructuresDropdownProps) => {
@@ -26,6 +28,7 @@ const StructuresDropdown = (props: StructuresDropdownProps) => {
       placeholder={props.placeholder ?? 'Sélectionnez ou créez un pilote'}
       queryKey="structures"
       tagTableName="structure_tag"
+      additionalKeysToInvalidate={props.additionalKeysToInvalidate}
       optionsListe={data}
       refetchOptions={refetch}
       onChange={({ values, selectedValue }) => {

app.territoiresentransitions.react/src/ui/dropdownLists/TagsSuiviPersoDropdown/TagsSuiviPersoDropdown.tsx

@@ -2,6 +2,7 @@ import { Tag } from '@/domain/collectivites';
 import { SelectMultipleProps } from '@/ui';
 import SelectTags from '../tags/SelectTags';
 import { useTagsSuiviPersoListe } from './useTagsSuiviPersoListe';
+import { QueryKey } from 'react-query';
 
 type TagsSuiviPersoDropdownProps = Omit<
   SelectMultipleProps,
@@ -15,6 +16,7 @@ type TagsSuiviPersoDropdownProps = Omit<
     libresTag: Tag[];
     selectedLibreTag: Tag;
   }) => void;
+  additionalKeysToInvalidate?: QueryKey[];
 };
 
 const TagsSuiviPersoDropdown = (props: TagsSuiviPersoDropdownProps) => {
@@ -26,6 +28,7 @@ const TagsSuiviPersoDropdown = (props: TagsSuiviPersoDropdownProps) => {
       placeholder={props.placeholder ?? 'Créez un tag de suivi personnalisé'}
       queryKey="tags_suivi_perso"
       tagTableName="libre_tag"
+      additionalKeysToInvalidate={props.additionalKeysToInvalidate}
       optionsListe={data}
       refetchOptions={refetch}
       onChange={({ values, selectedValue }) => {

app.territoiresentransitions.react/src/ui/dropdownLists/tags/SelectTags.tsx

@@ -8,6 +8,7 @@ import { useDeleteTag, useTagCreate, useTagUpdate } from '.';
 
 type SelectTagsProps = Omit<SelectMultipleProps, 'options' | 'onChange'> & {
   queryKey: QueryKey;
+  additionalKeysToInvalidate?: QueryKey[];
   tagTableName: TableTag;
   optionsListe?: Tag[];
   userCreatedOptionsIds?: number[];
@@ -24,6 +25,7 @@ type SelectTagsProps = Omit<SelectMultipleProps, 'options' | 'onChange'> & {
 
 const SelectTags = ({
   queryKey,
+  additionalKeysToInvalidate,
   tagTableName,
   optionsListe,
   userCreatedOptionsIds,
@@ -89,6 +91,7 @@ const SelectTags = ({
   const { mutate: updateTag } = useTagUpdate({
     key: [queryKey, collectiviteId],
     tagTableName,
+    keysToInvalidate: additionalKeysToInvalidate,
     onSuccess: refetchOptions,
   });
 

app.territoiresentransitions.react/src/ui/dropdownLists/tags/useTagUpdate.ts

@@ -48,7 +48,9 @@ export const useTagUpdate = ({
           queryClient.setQueryData(key, context?.previousdata);
         }
         queryClient.invalidateQueries(key);
-        keysToInvalidate?.forEach((key) => queryClient.invalidateQueries(key));
+        keysToInvalidate?.forEach((key) => {
+          queryClient.invalidateQueries(key);
+        });
       },
       onSuccess: () => onSuccess?.(),
     }