feat(admin): added alerts to certification structure page when the structure has no certification authority or no certification registry manager

Author: agarbe

packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/page.tsx

@@ -8,8 +8,9 @@ import { format } from "date-fns";
 import { Accordion } from "@codegouvfr/react-dsfr/Accordion";
 import Tag from "@codegouvfr/react-dsfr/Tag";
 import { SectionCard } from "@/components/card/section-card/SectionCard";
-import Alert from "@codegouvfr/react-dsfr/Alert";
 import { graphqlErrorToast, successToast } from "@/components/toast/toast";
+import { NoCertificationRegistryManagerAlert } from "./structure/_components/NoCertificationRegistryManagerAlert";
+import { NoCertificationAuthorityAlert } from "./structure/_components/NoCertificationAuthorityAlert";
 
 type CertificationForPage = Exclude<
   ReturnType<typeof useUpdateCertificationPage>["certification"],
@@ -194,13 +195,7 @@ const PageContent = ({
               </Info>
               {!certification.certificationAuthorityStructure
                 ?.certificationRegistryManager && (
-                <Alert
-                  data-test="no-certification-registry-manager-alert"
-                  className="mt-4"
-                  severity="warning"
-                  title="Cette structure certificatrice n’a aucun responsable des certifications pour le moment"
-                  description="Vous pouvez éditer et envoyer cette certification mais elle ne pourra être validée et publiée que par un responsable des certifications."
-                />
+                <NoCertificationRegistryManagerAlert className="mt-4" />
               )}
               {certification.certificationAuthorities.length ? (
                 <>
@@ -222,13 +217,7 @@ const PageContent = ({
                   </ul>
                 </>
               ) : (
-                <Alert
-                  data-test="no-certification-authority-alert"
-                  className="mt-4"
-                  severity="warning"
-                  title="Il n’y a pas de gestionnaire des candidatures pour cette certification"
-                  description="Malgré cela, elle sera visible des candidats et des AAP dès sa validation par le responsable des certifications. Lors du premier dossier de faisabilité envoyé, et s’il n’y a toujours pas de gestionnaire des candidatures, le support sera averti du problème."
-                />
+                <NoCertificationAuthorityAlert className="mt-4" />
               )}
             </>
           )}

packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/structure/_components/NoCertificationAuthorityAlert.tsx

@@ -0,0 +1,15 @@
+import { Alert } from "@codegouvfr/react-dsfr/Alert";
+
+export const NoCertificationAuthorityAlert = ({
+  className,
+}: {
+  className?: string;
+}) => (
+  <Alert
+    data-test="no-certification-authority-alert"
+    className={className}
+    severity="warning"
+    title="Il n’y a pas de gestionnaire des candidatures pour cette certification"
+    description="Malgré cela, elle sera visible des candidats et des AAP dès sa validation par le responsable des certifications. Lors du premier dossier de faisabilité envoyé, et s’il n’y a toujours pas de gestionnaire des candidatures, le support sera averti du problème."
+  />
+);

packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/structure/_components/NoCertificationRegistryManagerAlert.tsx

@@ -0,0 +1,15 @@
+import { Alert } from "@codegouvfr/react-dsfr/Alert";
+
+export const NoCertificationRegistryManagerAlert = ({
+  className,
+}: {
+  className?: string;
+}) => (
+  <Alert
+    data-test="no-certification-registry-manager-alert"
+    className={className}
+    severity="warning"
+    title="Cette structure certificatrice n’a aucun responsable des certifications pour le moment"
+    description="Vous pouvez éditer et envoyer cette certification mais elle ne pourra être validée et publiée que par un responsable des certifications."
+  />
+);

packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/structure/_components/StructureForm.tsx

@@ -8,6 +8,8 @@ import { z } from "zod";
 import { useStructureForm } from "./structureForm.hook";
 import { Checkbox } from "@codegouvfr/react-dsfr/Checkbox";
 import { useCallback, useEffect } from "react";
+import { NoCertificationAuthorityAlert } from "./NoCertificationAuthorityAlert";
+import { NoCertificationRegistryManagerAlert } from "./NoCertificationRegistryManagerAlert";
 
 type CertificationForForm = {
   id: string;
@@ -60,6 +62,7 @@ export const StructureForm = ({
 
   const {
     availableCertificationAuthorities,
+    certificationRegistryManagerPresent,
     getCertificationAuthoritiesQueryStatus,
   } = useStructureForm({ certificationAuthorityStructureId });
 
@@ -149,18 +152,24 @@ export const StructureForm = ({
             </option>
           ))}
         </Select>
-        {getCertificationAuthoritiesQueryStatus === "success" && (
-          <Checkbox
-            legend="Gestionnaire(s) des candidatures"
-            options={certificationAuthoritiesFields.map((ca, caIndex) => ({
-              label: ca.label,
-              nativeInputProps: {
-                key: ca.id,
-                ...register(`certificationAuthorities.${caIndex}.checked`),
-              },
-            }))}
-          />
+        {!certificationRegistryManagerPresent && (
+          <NoCertificationRegistryManagerAlert className="my-4" />
         )}
+        {getCertificationAuthoritiesQueryStatus === "success" &&
+          (certificationAuthoritiesFields.length ? (
+            <Checkbox
+              legend="Gestionnaire(s) des candidatures"
+              options={certificationAuthoritiesFields.map((ca, caIndex) => ({
+                label: ca.label,
+                nativeInputProps: {
+                  key: ca.id,
+                  ...register(`certificationAuthorities.${caIndex}.checked`),
+                },
+              }))}
+            />
+          ) : (
+            <NoCertificationAuthorityAlert className="my-4" />
+          ))}
         <FormButtons
           backUrl={`/certifications-v2/${certification.id}`}
           formState={{

packages/reva-admin-react/src/app/(admin)/certifications-v2/[certificationId]/structure/_components/structureForm.hook.ts

@@ -8,6 +8,9 @@ const getCertificationAuthoritiesQuery = graphql(`
   ) {
     certification_authority_getCertificationAuthorityStructure(id: $id) {
       id
+      certificationRegistryManager {
+        id
+      }
       certificationAuthorities {
         id
         label
@@ -44,8 +47,14 @@ export const useStructureForm = ({
       ?.certification_authority_getCertificationAuthorityStructure
       ?.certificationAuthorities || [];
 
+  const certificationRegistryManagerPresent =
+    getCertificationAuthoritiesResponse
+      ?.certification_authority_getCertificationAuthorityStructure
+      ?.certificationRegistryManager;
+
   return {
     getCertificationAuthoritiesQueryStatus,
     availableCertificationAuthorities,
+    certificationRegistryManagerPresent,
   };
 };