Notification tab in admin

cypress/cypress.config.ts

@@ -8,6 +8,16 @@ const htmlValidateConfig = {
 
 export default defineConfig({
   projectId: "vctxdm",
+  env: {
+    config: {
+      baseApiRoute: "/api/",
+      defaultFieldOptions: {
+        // Temp fix, Cypress seems to report elements as disabled when they are not https://github.com/cypress-io/cypress/issues/5827
+        force: true,
+      },
+      timeForEventCrawler: 10000,
+    },
+  },
   e2e: {
     specPattern: "e2e/**/*.cy.{js,jsx,ts,tsx}",
     setupNodeEvents(on) {

cypress/cypress/support/admin/commands.ts

@@ -1,6 +1,6 @@
 import { domElementIds } from "../../../../shared/src";
 
-const baseApiRoute = "/api/";
+const { baseApiRoute } = Cypress.env("config");
 
 Cypress.Commands.add("connectToAdmin", () => {
   cy.intercept("POST", `${baseApiRoute}admin/login`).as("loginRequest");
@@ -18,7 +18,7 @@ Cypress.Commands.add("connectToAdmin", () => {
 });
 
 Cypress.Commands.add("openEmailInAdmin", ({ emailType, elementIndex = 0 }) => {
-  cy.get(".fr-tabs__tab").contains("Emails").click();
+  cy.get(".fr-tabs__tab").contains("Notifications").click();
   const accordionButton = cy
     .get(`.fr-accordion__btn:contains(${emailType})`)
     .eq(elementIndex);

cypress/cypress/support/conventionForm/commands.ts

@@ -11,7 +11,7 @@ import {
 import { faker } from "@faker-js/faker/locale/fr";
 
 const conventionFormUrl = `${frontRoutes.conventionImmersionRoute}`;
-const baseApiRoute = "/api/";
+const { baseApiRoute, defaultFieldOptions } = Cypress.env("config");
 let currentStep = 1;
 
 Cypress.Commands.add("submitBasicConventionForm", () => {
@@ -39,9 +39,7 @@ Cypress.Commands.add("submitBasicConventionForm", () => {
   cy.get(
     `#${domElementIds.conventionImmersionRoute.conventionSection.agencyDepartment}`,
   )
-    .select("86", {
-      force: true,
-    })
+    .select("86", defaultFieldOptions)
     .should("have.value", "86");
 
   cy.wait("@agenciesRequest");
@@ -134,19 +132,13 @@ Cypress.Commands.add("submitBasicConventionForm", () => {
   openNextSection(); // Open immersion details section
   cy.get(
     `#${domElementIds.conventionImmersionRoute.conventionSection.individualProtection} input:first-of-type`,
-  ).check({
-    force: true,
-  });
+  ).check(defaultFieldOptions);
   cy.get(
     `#${domElementIds.conventionImmersionRoute.conventionSection.sanitaryPrevention} input:first-of-type`,
-  ).check({
-    force: true,
-  });
+  ).check(defaultFieldOptions);
   cy.get(
     `#${domElementIds.conventionImmersionRoute.conventionSection.immersionObjective} input:first-of-type`,
-  ).check({
-    force: true, // DSFR, label:before is covering the input
-  });
+  ).check(defaultFieldOptions);
   cy.get(
     `#${domElementIds.conventionImmersionRoute.conventionSection.immersionAppellation}`,
   ).type(faker.name.jobType());

cypress/cypress/support/selectors/commands.ts

@@ -1,3 +1,5 @@
+const { defaultFieldOptions } = Cypress.env("config");
+
 Cypress.Commands.add(
   "doIfElementExists",
   (selector: string, callback: () => void) => {
@@ -22,8 +24,6 @@ Cypress.Commands.add("fillSelect", ({ element, predicateValue }) => {
             (option: HTMLOptionElement) => option.value === predicateValue,
           )
       : randomNumber(1, $options.length - 1);
-    return cy.get(selector).select(selectedIndex, {
-      force: true,
-    });
+    return cy.get(selector).select(selectedIndex, defaultFieldOptions);
   });
 });

cypress/cypress/utils/log.ts

@@ -0,0 +1,6 @@
+export const disableUrlLogging = () => {
+  cy.on("log:added", () => {
+    const logs = window.top.document.querySelectorAll(".command-name-new-url");
+    logs.forEach((log) => log.classList.add("hidden"));
+  });
+};

cypress/e2e/conventionWorkflow.spec.cy.ts

@@ -8,9 +8,9 @@ import {
 import { disableUrlLogging } from "../cypress/utils/log";
 import { addBusinessDays, format } from "date-fns";
 
-const baseApiRoute = "/api/";
+const { baseApiRoute, defaultFieldOptions, timeForEventCrawler } =
+  Cypress.env("config");
 const selectedAgencyId = "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa";
-const timeForEventCrawler = 20000;
 
 describe("Convention full workflow", () => {
   const conventionData = {
@@ -63,9 +63,7 @@ describe("Convention full workflow", () => {
         );
         cy.get(
           `#draft-modal #${domElementIds.manageConvention.justificationModalSubmitButton}`,
-        ).click({
-          force: true,
-        });
+        ).click(defaultFieldOptions);
         cy.wait("@updateConventionRequest")
           .its("response.statusCode")
           .should("eq", 200);

cypress/e2e/establishmentWorkflow.spec.cy.ts

@@ -10,7 +10,7 @@ import {
   immersionOffersRoute,
 } from "shared";
 
-const baseApiRoute = "/api/";
+const { baseApiRoute, defaultFieldOptions } = Cypress.env("config");
 const providedSiret = "41433740200039";
 const providedLocation = "Tain-l'Hermitage";
 
@@ -75,9 +75,7 @@ describe("Establishment creation and modification workflow", () => {
     ).should("not.have.value", "");
     cy.get(`#${domElementIds.establishment.appellations} .fr-input`).type(
       "boulang",
-      {
-        force: true, // To avoid typing in disabled input (cf. https://github.com/cypress-io/cypress/issues/5827)
-      },
+      defaultFieldOptions,
     );
 
     cy.wait("@autocompleteAppellationRequest");
@@ -92,33 +90,23 @@ describe("Establishment creation and modification workflow", () => {
     );
     cy.get(`#${domElementIds.establishment.businessContact.firstName}`).type(
       faker.name.firstName(),
-      {
-        force: true,
-      },
+      defaultFieldOptions,
     );
     cy.get(`#${domElementIds.establishment.businessContact.lastName}`).type(
       faker.name.lastName(),
-      {
-        force: true,
-      },
+      defaultFieldOptions,
     );
     cy.get(`#${domElementIds.establishment.businessContact.job}`).type(
       faker.name.jobTitle(),
-      {
-        force: true,
-      },
+      defaultFieldOptions,
     );
     cy.get(`#${domElementIds.establishment.businessContact.phone}`).type(
       faker.phone.number("06########"),
-      {
-        force: true,
-      },
+      defaultFieldOptions,
     );
     cy.get(`#${domElementIds.establishment.businessContact.email}`).type(
       faker.internet.email(),
-      {
-        force: true,
-      },
+      defaultFieldOptions,
     );
     cy.get(`#${domElementIds.establishment.submitButton}`).click();
     cy.wait("@addFormEstablishmentRequest")
@@ -225,19 +213,13 @@ const editAndSubmitModifiedEstablishment = () => {
     .should("have.value", providedSiret);
   cy.get(`#${domElementIds.establishment.businessContact.job}`)
     .clear()
-    .type(faker.name.jobTitle(), {
-      force: true,
-    });
+    .type(faker.name.jobTitle(), defaultFieldOptions);
   cy.get(`#${domElementIds.establishment.businessContact.phone}`)
     .clear()
-    .type(faker.phone.number("06########"), {
-      force: true,
-    });
+    .type(faker.phone.number("06########"), defaultFieldOptions);
   cy.get(`#${domElementIds.establishment.businessContact.email}`)
     .clear()
-    .type(faker.internet.email(), {
-      force: true,
-    });
+    .type(faker.internet.email(), defaultFieldOptions);
   cy.get(`#${domElementIds.establishment.submitButton}`).click();
   cy.wait("@addFormEstablishmentRequest")
     .its("response.statusCode")

front/src/app/pages/admin/AdminPage.tsx

@@ -83,7 +83,7 @@ export const AdminPage = ({
           <div className={fr.cx("fr-col-12", "fr-p-2w", "fr-mt-4w")}>
             <Tabs
               selectedTabId={currentTab}
-              tabs={adminTabs.filter((tab) => tab.tabId !== "notifications")}
+              tabs={adminTabs}
               onTabChange={(tab) => {
                 if (isAdminTab(tab))
                   routes