(feat) Add description field to the interactive builder

e2e/pages/form-builder-page.ts

@@ -37,6 +37,8 @@ export class FormBuilderPage {
     this.page.getByRole("button", { name: /start building/i });
   readonly interactiveFormNameInput = () =>
     this.page.getByRole("textbox", { name: /form name/i });
+  readonly interactiveFormDescriptionInput = () =>
+    this.page.getByRole("textbox", { name: /form description/i });
   readonly createFormButton = () =>
     this.page.getByRole("button", { name: /create form/i });
   readonly addPageButton = () =>
@@ -91,6 +93,9 @@ export class FormBuilderPage {
     await this.interactiveBuilderTab().click();
     await this.startBuildingButton().click();
     await this.interactiveFormNameInput().fill("Covid-19 Screening");
+    await this.interactiveFormDescriptionInput().fill(
+      "A test form for recording COVID-19 screening information"
+    );
     await this.createFormButton().click();
     await expect(this.page.getByText(/form created/i)).toBeVisible();
 
@@ -129,13 +134,11 @@ export class FormBuilderPage {
     await this.formNameInput().fill(formName);
     await this.formVersionInput().click();
     await this.formVersionInput().fill("1.0");
-    await this.formDescriptionInput().click();
-    await this.formDescriptionInput().fill("this is test form description");
     await this.formEncounterType().selectOption("Admission");
     await this.formSaveButton().click();
   }
 
   async searchForm(formName: string) {
-    await this.page.getByRole('searchbox').fill(formName);
+    await this.page.getByRole("searchbox").fill(formName);
   }
 }

package.json

@@ -18,7 +18,7 @@
     "test-e2e": "playwright test",
     "verify": "turbo lint typescript coverage",
     "coverage": "yarn test --coverage --passWithNoTests",
-    "prepare": "husky install",
+    "postinstall": "husky install",
     "extract-translations": "i18next 'src/**/*.component.tsx' --config ./i18next-parser.config.js",
     "ci:bump-form-engine-lib": "yarn up @openmrs/openmrs-form-engine-lib@next"
   },

src/components/interactive-builder/new-form-modal.component.tsx

@@ -8,6 +8,7 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
+  Stack,
   TextInput,
 } from "@carbon/react";
 import { showToast, showNotification } from "@openmrs/esm-framework";
@@ -16,8 +17,8 @@ import type { Schema } from "../../types";
 type NewFormModalProps = {
   schema: Schema;
   onSchemaChange: (schema: Schema) => void;
-  showModal: boolean;
   onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 };
 
 const NewFormModal: React.FC<NewFormModalProps> = ({
@@ -28,11 +29,12 @@ const NewFormModal: React.FC<NewFormModalProps> = ({
 }) => {
   const { t } = useTranslation();
   const [formName, setFormName] = useState("");
+  const [formDescription, setFormDescription] = useState("");
 
-  const updateFormName = () => {
+  const updateSchema = (updates: Partial<Schema>) => {
     try {
-      schema.name = formName;
-      onSchemaChange({ ...schema });
+      const updatedSchema = { ...schema, ...updates };
+      onSchemaChange(updatedSchema);
 
       showToast({
         title: t("success", "Success!"),
@@ -50,6 +52,17 @@ const NewFormModal: React.FC<NewFormModalProps> = ({
     }
   };
 
+  const handleCreateForm = () => {
+    if (formName) {
+      updateSchema({
+        name: formName,
+        description: formDescription,
+      });
+
+      onModalChange(false);
+    }
+  };
+
   return (
     <ComposedModal
       open={showModal}
@@ -59,27 +72,43 @@ const NewFormModal: React.FC<NewFormModalProps> = ({
       <ModalHeader title={t("createNewForm", "Create a new form")} />
       <Form onSubmit={(event) => event.preventDefault()}>
         <ModalBody>
-          <FormGroup legendText={""}>
-            <TextInput
-              id="formName"
-              labelText={t("formName", "Form name")}
-              value={formName}
-              onChange={(event) => setFormName(event.target.value)}
-            />
-          </FormGroup>
+          <Stack gap={5}>
+            <FormGroup legendText={""}>
+              <TextInput
+                id="formName"
+                labelText={t("formName", "Form name")}
+                placeholder={t(
+                  "formNamePlaceholder",
+                  "What the form is called in the system"
+                )}
+                value={formName}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  setFormName(event.target.value)
+                }
+              />
+            </FormGroup>
+            <FormGroup legendText={""}>
+              <TextInput
+                id="formDescription"
+                labelText={t("formDescription", "Form description")}
+                placeholder={t(
+                  "formDescriptionPlaceholder",
+                  "A short description of the form e.g. A form for collecting COVID-19 symptoms"
+                )}
+                value={formDescription}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  setFormDescription(event.target.value)
+                }
+              />
+            </FormGroup>
+          </Stack>
         </ModalBody>
       </Form>
       <ModalFooter>
         <Button kind="secondary" onClick={() => onModalChange(false)}>
           {t("cancel", "Cancel")}
         </Button>
-        <Button
-          disabled={!formName}
-          onClick={() => {
-            updateFormName();
-            onModalChange(false);
-          }}
-        >
+        <Button disabled={!formName} onClick={handleCreateForm}>
           <span>{t("createForm", "Create Form")}</span>
         </Button>
       </ModalFooter>