✨(back-office) manage new field appendix into back office

Allow to display / edit appendix field into our back office
openfun · Oct 22, 2024 · a841f0b · a841f0b
1 parent ed99002
commit a841f0b
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,7 +11,7 @@ and this project adheres to
 ### Added
 
 - Add `appendix` field on `ContractDefinition` model
-- Bind `appendix` field to `AdminContractDefinitionSerializer`
+- Allow to edit `appendix` `ContractDefinition` field through the back office
 
 ## [2.8.0] - 2024-10-16
 

diff --git a/src/frontend/admin/src/components/presentational/inputs/markdown/MardownComponent.tsx b/src/frontend/admin/src/components/presentational/inputs/markdown/MardownComponent.tsx
@@ -11,7 +11,7 @@ type Props = {
   onChange: (markdown: Maybe<string>) => void;
 };
 
-export function MarkdownComponent({ value, onChange }: Props) {
+export function MarkdownComponent(props: Props) {
   const [markdownCommands, setMarkdownCommands] =
     useState<typeof import("@uiw/react-md-editor").commands>();
 
@@ -57,7 +57,6 @@ export function MarkdownComponent({ value, onChange }: Props) {
       data-testid="md-editor"
       autoFocus={false}
       height={300}
-      value={value}
       data-color-mode="light"
       commands={[
         bold,
@@ -88,7 +87,7 @@ export function MarkdownComponent({ value, onChange }: Props) {
         orderedListCommand,
         checkedListCommand,
       ]}
-      onChange={onChange}
+      {...props}
     />
   );
 }
diff --git a/...ontend/admin/src/components/templates/contract-definition/form/ContractDefinitionForm.tsx b/...ontend/admin/src/components/templates/contract-definition/form/ContractDefinitionForm.tsx
@@ -56,6 +56,11 @@ const messages = defineMessages({
     defaultMessage: "Body",
     description: "Label for the body input",
   },
+  appendixLabel: {
+    id: "components.templates.contractDefinitions.form.appendixLabel",
+    defaultMessage: "Appendix",
+    description: "Label for the appendix input",
+  },
 });
 
 interface Props {
@@ -81,6 +86,7 @@ export function ContractDefinitionForm({
     title: Yup.string().required(),
     description: Yup.string().required(),
     body: Yup.string().required(),
+    appendix: Yup.string(),
     language: Yup.string().required(),
     name: Yup.string().required(),
   });
@@ -90,6 +96,7 @@ export function ContractDefinitionForm({
       title: defaultContractDefinition?.title ?? "",
       description: removeEOL(defaultContractDefinition?.description),
       body: removeEOL(defaultContractDefinition?.body),
+      appendix: removeEOL(defaultContractDefinition?.appendix),
       name: "contract_definition",
       language: defaultContractDefinition?.language ?? "fr-fr",
     };
@@ -126,6 +133,7 @@ export function ContractDefinitionForm({
   };
 
   const bodyValue = methods.watch("body");
+  const appendixValue = methods.watch("appendix");
 
   return (
     <Box padding={4}>
@@ -169,12 +177,16 @@ export function ContractDefinitionForm({
               />
             </Grid>
             <Grid xs={12}>
-              <Typography variant="subtitle2">
+              <Typography
+                variant="subtitle2"
+                color={methods.formState.errors.body && "error"}
+              >
                 {intl.formatMessage(messages.bodyLabel)}
               </Typography>
             </Grid>
             <Grid xs={12}>
               <MarkdownComponent
+                data-testid="md-editor-body"
                 value={bodyValue ?? ""}
                 onChange={(markdown) => {
                   methods.setValue("body", markdown ?? "", {
@@ -193,6 +205,35 @@ export function ContractDefinitionForm({
                 )}
               />
             </Grid>
+            <Grid xs={12}>
+              <Typography
+                variant="subtitle2"
+                color={methods.formState.errors.appendix && "error"}
+              >
+                {intl.formatMessage(messages.appendixLabel)}
+              </Typography>
+            </Grid>
+            <Grid xs={12}>
+              <MarkdownComponent
+                data-testid="md-editor-appendix"
+                value={appendixValue ?? ""}
+                onChange={(markdown) => {
+                  methods.setValue("appendix", markdown ?? "", {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  });
+                }}
+              />
+              <ErrorMessage
+                errors={methods.formState.errors}
+                name="appendix"
+                render={(data) => (
+                  <FormHelperText sx={{ marginLeft: "14px" }} error={true}>
+                    {data.message}
+                  </FormHelperText>
+                )}
+              />
+            </Grid>
           </Grid>
         </RHFValuesChange>
       </RHFProvider>

diff --git a/src/frontend/admin/src/services/api/models/ContractDefinition.ts b/src/frontend/admin/src/services/api/models/ContractDefinition.ts
@@ -5,6 +5,7 @@ export type ContractDefinition = {
   title: string;
   description?: string;
   body?: string;
+  appendix?: string;
   language: string;
   name: string;
 };

diff --git a/src/frontend/admin/src/services/factories/contract-definition/index.ts b/src/frontend/admin/src/services/factories/contract-definition/index.ts
@@ -9,6 +9,7 @@ const build = (): ContractDefinition => {
     language: "fr-fr",
     name: "contract_definition",
     body: "### Contract body",
+    appendix: "### Contract appendix",
   };
 };
 

diff --git a/src/frontend/admin/src/tests/contract-definitions/contract-definition.test.e2e.ts b/src/frontend/admin/src/tests/contract-definitions/contract-definition.test.e2e.ts
@@ -60,7 +60,11 @@ test.describe("Contract definition form", () => {
     await expect(page.getByLabel("Description")).toHaveCount(1);
     await expect(page.getByRole("heading", { name: "Body" })).toBeVisible();
     await expect(
-      page.getByTestId("md-editor").getByRole("textbox"),
+      page.getByTestId("md-editor-body").getByRole("textbox"),
+    ).toHaveCount(1);
+    await expect(page.getByRole("heading", { name: "Appendix" })).toBeVisible();
+    await expect(
+      page.getByTestId("md-editor-appendix").getByRole("textbox"),
     ).toHaveCount(1);
   });
 
@@ -73,11 +77,16 @@ test.describe("Contract definition form", () => {
     await page.getByRole("option", { name: "English" }).click();
     await page.getByLabel("Description").click();
     await page.getByLabel("Description").fill("Contract description");
-    await page.getByTestId("md-editor").getByRole("textbox").click();
-    await page
-      .getByTestId("md-editor")
-      .getByRole("textbox")
-      .fill("### Body\n\n> Info");
+    const MdEditorBody = page
+      .getByTestId("md-editor-body")
+      .getByRole("textbox");
+    await MdEditorBody.click();
+    await MdEditorBody.fill("### Body\n\n> Info");
+    const MdEditorAppendix = page
+      .getByTestId("md-editor-appendix")
+      .getByRole("textbox");
+    await MdEditorAppendix.click();
+    await MdEditorAppendix.fill("### Appendix\n\n> Info");
     await page.getByRole("button", { name: "Submit" }).click();
 
     await expect(
@@ -176,8 +185,12 @@ test.describe("Contract definition form", () => {
     );
 
     await expect(
-      page.getByTestId("md-editor").getByRole("textbox"),
+      page.getByTestId("md-editor-body").getByRole("textbox"),
     ).toHaveValue(contractDefinition.body ?? "");
+
+    await expect(
+      page.getByTestId("md-editor-appendix").getByRole("textbox"),
+    ).toHaveValue(contractDefinition.appendix ?? "");
   });
 
   test("Use an contract contract definition from the list as a template via its action menu", async ({
@@ -208,7 +221,11 @@ test.describe("Contract definition form", () => {
     );
 
     await expect(
-      page.getByTestId("md-editor").getByRole("textbox"),
-    ).toHaveValue(contractDefinition.body ?? "");
+      page.getByTestId("md-editor-body").getByRole("textbox"),
+    ).toHaveValue(contractDefinition.body!);
+
+    await expect(
+      page.getByTestId("md-editor-appendix").getByRole("textbox"),
+    ).toHaveValue(contractDefinition.appendix!);
   });
 });
diff --git a/src/frontend/admin/src/tests/product/product.test.e2e.ts b/src/frontend/admin/src/tests/product/product.test.e2e.ts
@@ -198,16 +198,12 @@ test.describe("Product form", () => {
     await page
       .getByLabel("Description", { exact: true })
       .fill("Test contract desc");
-    await page
-      .getByLabel("Add a contract definition")
-      .getByTestId("md-editor")
-      .getByRole("textbox")
-      .click();
-    await page
+    const MdEditorBody = page
       .getByLabel("Add a contract definition")
-      .getByTestId("md-editor")
-      .getByRole("textbox")
-      .fill("> Body");
+      .getByTestId("md-editor-body")
+      .getByRole("textbox");
+    await MdEditorBody.click();
+    await MdEditorBody.fill("> Body");
     await page.getByTestId("submit-button-contract-definition-form").click();
     await expect(
       page.getByRole("heading", { name: "Add a contract" }),