From 2edd53cd761117a954e5a0128c636fc0caed20c0 Mon Sep 17 00:00:00 2001
From: Alexandre Garbe <alexandre.garbe@gmail.com>
Date: Wed, 13 Nov 2024 17:11:03 +0100
Subject: [PATCH] feat(admin): add a remove competence button to the update
 competence bloc form

---
 ...e-certification-competence-bloc-page.cy.ts | 16 +++++++
 .../_components/CompetenceBlocForm.tsx        | 45 ++++++++++++-------
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/packages/reva-admin-react/cypress/e2e/certifications/update-certification-competence-bloc-page/update-certification-competence-bloc-page.cy.ts b/packages/reva-admin-react/cypress/e2e/certifications/update-certification-competence-bloc-page/update-certification-competence-bloc-page.cy.ts
index d2e4f7450..935ad0af9 100644
--- a/packages/reva-admin-react/cypress/e2e/certifications/update-certification-competence-bloc-page/update-certification-competence-bloc-page.cy.ts
+++ b/packages/reva-admin-react/cypress/e2e/certifications/update-certification-competence-bloc-page/update-certification-competence-bloc-page.cy.ts
@@ -98,4 +98,20 @@ 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 () {
+    interceptCertificationCompetenceBloc();
+    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="competence-list"] input').should("have.length", 4);
+
+    cy.get('[data-test="remove-competence-button"]').eq(1).click();
+
+    cy.get('[data-test="competence-list"] input').should("have.length", 3);
+  });
 });
diff --git a/packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx b/packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx
index dbdfe3114..1a703f253 100644
--- a/packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx
+++ b/packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx
@@ -47,11 +47,14 @@ export const CompetenceBlocForm = ({
     formState: { isDirty, isSubmitting, errors },
   } = methods;
 
-  const { fields: competencesFields, append: appendCompetenceField } =
-    useFieldArray({
-      control,
-      name: "competences",
-    });
+  const {
+    fields: competencesFields,
+    append: appendCompetence,
+    remove: removeCompetence,
+  } = useFieldArray({
+    control,
+    name: "competences",
+  });
 
   const handleFormSubmit = handleSubmit(onSubmit, (e) => console.log(e));
   return (
@@ -70,16 +73,26 @@ export const CompetenceBlocForm = ({
         data-test="competence-list"
       >
         {competencesFields.map((c, cIndex) => (
-          <Input
-            className="mb-0"
-            label=""
-            state={errors.competences?.[cIndex]?.label ? "error" : "default"}
-            stateRelatedMessage={errors.competences?.[
-              cIndex
-            ]?.label?.message?.toString()}
-            key={c.id}
-            nativeInputProps={{ ...register(`competences.${cIndex}.label`) }}
-          />
+          <div className="flex content-betwee gap-2" key={c.id}>
+            <Input
+              className="mb-0 w-full"
+              label=""
+              state={errors.competences?.[cIndex]?.label ? "error" : "default"}
+              stateRelatedMessage={errors.competences?.[
+                cIndex
+              ]?.label?.message?.toString()}
+              nativeInputProps={{ ...register(`competences.${cIndex}.label`) }}
+            />
+            <Button
+              data-test="remove-competence-button"
+              priority="tertiary no outline"
+              iconId="fr-icon-delete-line"
+              iconPosition="left"
+              onClick={() => removeCompetence(cIndex)}
+            >
+              Supprimer
+            </Button>
+          </div>
         ))}
       </div>
       <Button
@@ -88,7 +101,7 @@ export const CompetenceBlocForm = ({
         iconId="fr-icon-add-line"
         iconPosition="left"
         onClick={() =>
-          appendCompetenceField({ label: "", index: competencesFields.length })
+          appendCompetence({ label: "", index: competencesFields.length })
         }
       >
         Ajouter une compétence