feat(admin): admin can now delete a competence bloc from the update c…

…ompetence bloc page of certification v2
SocialGouv · Nov 14, 2024 · c7e50a1 · c7e50a1
1 parent e7ef47e
commit c7e50a1
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 9 deletions.
diff --git a/...update-certification-competence-bloc-page/update-certification-competence-bloc-page.cy.ts b/...update-certification-competence-bloc-page/update-certification-competence-bloc-page.cy.ts
@@ -32,6 +32,16 @@ function interceptUpdateCertificationCompetenceBlocMutation() {
   });
 }
 
+function interceptDeleteCertificationCompetenceBlocMutation() {
+  cy.intercept("POST", "/api/graphql", (req) => {
+    stubMutation(
+      req,
+      "deleteCertificationCompetenceBlocForUpdateCompetenceBlocPage",
+      updateCertificationBlocMutationResponse,
+    );
+  });
+}
+
 context("when i access the update certification page ", () => {
   it("display the page with a correct title", function () {
     interceptCertificationCompetenceBloc();
@@ -83,7 +93,7 @@ context("when i access the update certification page ", () => {
     );
   });
 
-  it("let me add a new competence bloc", function () {
+  it("let me add a new competence to the competence bloc", function () {
     interceptCertificationCompetenceBloc();
     cy.admin(
       "http://localhost:3003/admin2/certifications-v2/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/bloc-competence/008a6fab-55ad-4412-ab17-56bc4b8e2fd0/",
@@ -99,7 +109,7 @@ context("when i access the update certification page ", () => {
     cy.get('[data-test="competence-list"] input').should("have.length", 5);
   });
 
-  it("let me remove a competence bloc", function () {
+  it("let me delete a competence from the competence bloc", function () {
     interceptCertificationCompetenceBloc();
     cy.admin(
       "http://localhost:3003/admin2/certifications-v2/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/bloc-competence/008a6fab-55ad-4412-ab17-56bc4b8e2fd0/",
@@ -110,8 +120,28 @@ context("when i access the update certification page ", () => {
 
     cy.get('[data-test="competence-list"] input').should("have.length", 4);
 
-    cy.get('[data-test="remove-competence-button"]').eq(1).click();
+    cy.get('[data-test="delete-competence-button"]').eq(1).click();
 
     cy.get('[data-test="competence-list"] input').should("have.length", 3);
   });
+
+  it("let me delete a competence bloc", function () {
+    interceptCertificationCompetenceBloc();
+    interceptDeleteCertificationCompetenceBlocMutation();
+    cy.admin(
+      "http://localhost:3003/admin2/certifications-v2/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/bloc-competence/008a6fab-55ad-4412-ab17-56bc4b8e2fd0/",
+    );
+    cy.wait("@activeFeaturesForConnectedUser");
+    cy.wait("@getMaisonMereCGUQuery");
+    cy.wait("@getCompetenceBlocForUpdateCompetenceBlocPage");
+
+    cy.get('[data-test="delete-competence-bloc-button"]').click();
+
+    cy.wait("@deleteCertificationCompetenceBlocForUpdateCompetenceBlocPage");
+
+    cy.url().should(
+      "eq",
+      "http://localhost:3003/admin2/certifications-v2/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/",
+    );
+  });
 });
diff --git a/...tifications-v2/[certificationId]/bloc-competence/[certificationCompetenceBlocId]/page.tsx b/...tifications-v2/[certificationId]/bloc-competence/[certificationCompetenceBlocId]/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useUpdateCompetenceBlocPage } from "./updateCompetenceBloc.hook";
 import { FormOptionalFieldsDisclaimer } from "@/components/form-optional-fields-disclaimer/FormOptionalFieldsDisclaimer";
 import { GrayCard } from "@/components/card/gray-card/GrayCard";
@@ -16,14 +16,18 @@ type CertificationCompetenceBlocForPage = Exclude<
 >;
 
 export default function UpdateCompetenceBlocPage() {
-  const { certificationCompetenceBlocId } = useParams<{
+  const { certificationId, certificationCompetenceBlocId } = useParams<{
+    certificationId: string;
     certificationCompetenceBlocId: string;
   }>();
 
+  const router = useRouter();
+
   const {
     competenceBloc,
     getCompetenceBlocQueryStatus,
     updateCertificationCompetenceBloc,
+    deleteCertificationCompetenceBloc,
   } = useUpdateCompetenceBlocPage({ certificationCompetenceBlocId });
 
   const handleFormSubmit = async (data: CompetenceBlocFormData) => {
@@ -34,17 +38,33 @@ export default function UpdateCompetenceBlocPage() {
       graphqlErrorToast(e);
     }
   };
+
+  const handleCompetenceBlocDeleteButtonClick = async () => {
+    try {
+      await deleteCertificationCompetenceBloc.mutateAsync();
+      successToast("modifications enregistrées");
+      router.push(`/certifications-v2/${certificationId}`);
+    } catch (e) {
+      graphqlErrorToast(e);
+    }
+  };
   return getCompetenceBlocQueryStatus === "success" && competenceBloc ? (
-    <PageContent competenceBloc={competenceBloc} onSubmit={handleFormSubmit} />
+    <PageContent
+      competenceBloc={competenceBloc}
+      onSubmit={handleFormSubmit}
+      onDeleteCompetenceBlocButtonClick={handleCompetenceBlocDeleteButtonClick}
+    />
   ) : null;
 }
 
 const PageContent = ({
   competenceBloc,
   onSubmit,
+  onDeleteCompetenceBlocButtonClick,
 }: {
   competenceBloc: CertificationCompetenceBlocForPage;
   onSubmit(data: CompetenceBlocFormData): Promise<void>;
+  onDeleteCompetenceBlocButtonClick?: () => void;
 }) => (
   <div data-test="update-certification-page">
     <Breadcrumb
@@ -98,6 +118,7 @@ const PageContent = ({
         })),
       }}
       onSubmit={onSubmit}
+      onDeleteCompetenceBlocButtonClick={onDeleteCompetenceBlocButtonClick}
     />
   </div>
 );
diff --git a/...ificationId]/bloc-competence/[certificationCompetenceBlocId]/updateCompetenceBloc.hook.ts b/...ificationId]/bloc-competence/[certificationCompetenceBlocId]/updateCompetenceBloc.hook.ts
@@ -37,6 +37,18 @@ const updateCertificationCompetenceBlocMutation = graphql(`
   }
 `);
 
+const deleteCertificationCompetenceBlocMutation = graphql(`
+  mutation deleteCertificationCompetenceBlocForUpdateCompetenceBlocPage(
+    $certificationCompetenceBlocId: String!
+  ) {
+    referential_deleteCertificationCompetenceBloc(
+      certificationCompetenceBlocId: $certificationCompetenceBlocId
+    ) {
+      id
+    }
+  }
+`);
+
 export const useUpdateCompetenceBlocPage = ({
   certificationCompetenceBlocId,
 }: {
@@ -71,12 +83,24 @@ export const useUpdateCompetenceBlocPage = ({
       }),
   });
 
+  const deleteCertificationCompetenceBloc = useMutation({
+    mutationFn: () =>
+      graphqlClient.request(deleteCertificationCompetenceBlocMutation, {
+        certificationCompetenceBlocId,
+      }),
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: [certificationCompetenceBlocId],
+      }),
+  });
+
   const competenceBloc =
     getCompetenceBlocResponse?.getCertificationCompetenceBloc;
 
   return {
     competenceBloc,
     getCompetenceBlocQueryStatus,
     updateCertificationCompetenceBloc,
+    deleteCertificationCompetenceBloc,
   };
 };
diff --git a/...n)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx b/...n)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx
@@ -23,11 +23,13 @@ export const CompetenceBlocForm = ({
   defaultValues,
   backUrl,
   className = "",
+  onDeleteCompetenceBlocButtonClick,
 }: {
   onSubmit(data: CompetenceBlocFormData): Promise<void>;
   defaultValues: Partial<CompetenceBlocFormData>;
   backUrl: string;
   className?: string;
+  onDeleteCompetenceBlocButtonClick?: () => void;
 }) => {
   const methods = useForm<CompetenceBlocFormData>({
     resolver: zodResolver(competenceBlocFormSchema),
@@ -52,7 +54,7 @@ export const CompetenceBlocForm = ({
 
   const handleFormSubmit = handleSubmit(onSubmit, (e) => console.log(e));
   return (
-    <form onSubmit={handleFormSubmit} className={`${className}`}>
+    <form onSubmit={handleFormSubmit} className={`flex flex-col ${className}`}>
       <Input
         data-test="competence-bloc-label-input"
         label="Intitulé du bloc de compétences"
@@ -63,7 +65,7 @@ export const CompetenceBlocForm = ({
         }}
       />
       <div
-        className="flex flex-col gap-2 mt-6 mb-2 pl-4"
+        className="flex flex-col gap-2 mb-2 pl-4"
         data-test="competence-list"
       >
         {competencesFields.map((c, cIndex) => (
@@ -78,7 +80,7 @@ export const CompetenceBlocForm = ({
               nativeInputProps={{ ...register(`competences.${cIndex}.label`) }}
             />
             <Button
-              data-test="remove-competence-button"
+              data-test="delete-competence-button"
               type="button"
               priority="tertiary no outline"
               iconId="fr-icon-delete-line"
@@ -102,6 +104,19 @@ export const CompetenceBlocForm = ({
       >
         Ajouter une compétence
       </Button>
+      <hr className="mt-6 mb-1" />
+      {onDeleteCompetenceBlocButtonClick && (
+        <Button
+          data-test="delete-competence-bloc-button"
+          type="button"
+          priority="tertiary no outline"
+          iconId="fr-icon-delete-line"
+          iconPosition="left"
+          onClick={onDeleteCompetenceBlocButtonClick}
+        >
+          Supprimer ce bloc
+        </Button>
+      )}
       <FormButtons
         backUrl={backUrl}
         formState={{