From 35cae6d190ea7e5f3925190d9e90ea2ee3bf0105 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Sun, 13 Aug 2023 09:13:57 +0300
Subject: [PATCH 1/2] (feat) Add description field to the interactive builder

---
 e2e/pages/form-builder-page.ts                |  9 ++-
 .../new-form-modal.component.tsx              | 59 +++++++++++++------
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/e2e/pages/form-builder-page.ts b/e2e/pages/form-builder-page.ts
index 9fad386..59dfff6 100644
--- a/e2e/pages/form-builder-page.ts
+++ b/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);
   }
 }
diff --git a/src/components/interactive-builder/new-form-modal.component.tsx b/src/components/interactive-builder/new-form-modal.component.tsx
index 2a5ad78..95c2ea7 100644
--- a/src/components/interactive-builder/new-form-modal.component.tsx
+++ b/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,35 @@ 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")}
+                value={formName}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  setFormName(event.target.value)
+                }
+              />
+            </FormGroup>
+            <FormGroup legendText={""}>
+              <TextInput
+                id="formDescription"
+                labelText={t("formDescription", "Form description")}
+                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>

From 59955871100801f40a3461a5abeeab2e5bbc1452 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Sun, 13 Aug 2023 09:28:41 +0300
Subject: [PATCH 2/2] Add placeholders to inputs

---
 package.json                                              | 2 +-
 .../interactive-builder/new-form-modal.component.tsx      | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 77ace9f..50212b7 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/components/interactive-builder/new-form-modal.component.tsx b/src/components/interactive-builder/new-form-modal.component.tsx
index 95c2ea7..60b6555 100644
--- a/src/components/interactive-builder/new-form-modal.component.tsx
+++ b/src/components/interactive-builder/new-form-modal.component.tsx
@@ -77,6 +77,10 @@ const NewFormModal: React.FC<NewFormModalProps> = ({
               <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)
@@ -87,6 +91,10 @@ const NewFormModal: React.FC<NewFormModalProps> = ({
               <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)