Merge branch 'main' of https://github.com/Bharath-K-Shetty/openmrs-esm-form-builder into fix/O3-4320

Author: Bharath-K-Shetty

e2e/pages/form-builder-page.ts

@@ -42,6 +42,7 @@ export class FormBuilderPage {
   readonly pageCreatedMessage = () => this.page.getByText(/new page created/i);
   readonly addSectionButton = () => this.page.getByRole('button', { name: /add section/i });
   readonly sectionNameInput = () => this.page.getByRole('textbox', { name: /enter a section title/i });
+  readonly isExpandedCheckbox = () => this.page.getByTestId('keep-section-expanded-checkbox');
   readonly editSectionButton = () => this.page.getByRole('button', { name: /edit section/i });
   readonly editSectionNameInput = () => this.page.locator('#sectionNameInput');
   readonly deleteSectionButton = () => this.page.getByRole('button', { name: /delete section/i });

e2e/specs/edit-form-with-interactive-builder.spec.ts

@@ -47,37 +47,6 @@ test.beforeEach(async ({ api }) => {
 
 test('Edit a form using the interactive builder', async ({ page, context }) => {
   const formBuilderPage = new FormBuilderPage(page);
-  const formDetails = {
-    encounterType: 'e22e39fd-7db2-45e7-80f1-60fa0d5a4378',
-    name: 'UI Select Form Test',
-    pages: [
-      {
-        label: 'UI Select Test',
-        sections: [
-          {
-            label: 'Visit Details',
-            isExpanded: 'true',
-            questions: [
-              {
-                label: 'Select Provider',
-                type: 'obs',
-                questionOptions: {
-                  rendering: 'text',
-                  concept: 'a-system-defined-concept-uuid',
-                },
-                id: 'sampleQuestion',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    processor: 'EncounterFormProcessor',
-    referencedForms: [],
-    uuid: 'xxx',
-    version: '1',
-    description: 'This is test description',
-  };
 
   await test.step('When I visit the form builder', async () => {
     await formBuilderPage.gotoFormBuilder();
@@ -144,16 +113,29 @@ test('Edit a form using the interactive builder', async ({ page, context }) => {
   });
 
   await test.step('And then I fill in the updated section name', async () => {
-    await formBuilderPage.editSectionNameInput().fill('An edited section');
+    await formBuilderPage.sectionNameInput().fill('An edited section');
     updatedForm.pages[0].sections[0].label = 'An edited section';
   });
 
+  await test.step('And then I check the expand section checkbox', async () => {
+    await page.evaluate(() => {
+      const checkbox = document.querySelector(
+        'input[data-testid="keep-section-expanded-checkbox"]',
+      ) as HTMLInputElement;
+      if (checkbox) {
+        checkbox.click();
+      }
+    });
+    updatedForm.pages[0].sections[0].isExpanded = 'false';
+  });
+
   await test.step('Then I click the `Save` button', async () => {
+    await expect(formBuilderPage.saveButton()).toBeEnabled();
     await formBuilderPage.saveButton().click();
   });
 
   await test.step('Then I should get a success message and the section name should be renamed', async () => {
-    await expect(formBuilderPage.page.getByText(/section renamed/i)).toBeVisible();
+    await expect(formBuilderPage.page.getByText(/section edited/i)).toBeVisible();
     await expect(formBuilderPage.page.getByRole('heading', { level: 1, name: /an edited section/i })).toBeVisible();
     const formTextContent = await formBuilderPage.schemaEditorContent().textContent();
     expect(JSON.parse(formTextContent)).toEqual(updatedForm);
@@ -171,11 +153,21 @@ test('Edit a form using the interactive builder', async ({ page, context }) => {
     };
   });
 
+  await test.step('And then I edit the question concept', async () => {
+    await formBuilderPage.conceptSearchInput().fill('Tested for COVID 19');
+    await formBuilderPage.conceptSearchInput().press('Enter');
+    await formBuilderPage.page.getByRole('menuitem', { name: /tested for covid 19/i }).click();
+    updatedForm.pages[0].sections[0].questions[0].questionOptions = {
+      ...updatedForm.pages[0].sections[0].questions[0].questionOptions,
+      concept: '89c5bc03-8ce2-40d8-a77d-20b5a62a1ca1',
+    };
+  });
+
   await test.step('Then I click the `Save` button', async () => {
     await formBuilderPage.saveButton().click();
   });
 
-  await test.step('Then I should get a success message and the question name should be renamed', async () => {
+  await test.step('Then I should get a success message and the question label should be renamed', async () => {
     await expect(formBuilderPage.page.getByText(/question updated/i)).toBeVisible();
     await expect(formBuilderPage.page.locator('p').getByText(/an edited question label/i)).toBeVisible();
     const formTextContent = await formBuilderPage.schemaEditorContent().textContent();

src/components/interactive-builder/interactive-builder.component.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DndContext, KeyboardSensor, MouseSensor, closestCorners, useSensor, useSensors } from '@dnd-kit/core';
 import { Accordion, AccordionItem, Button, IconButton, InlineLoading } from '@carbon/react';
-import { Add, TrashCan } from '@carbon/react/icons';
+import { Add, TrashCan, Edit } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { showModal, showSnackbar } from '@openmrs/esm-framework';
 import DraggableQuestion from './draggable/draggable-question.component';
@@ -102,6 +102,21 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
     [schema, onSchemaChange],
   );
 
+  const launchEditSectionModal = useCallback(
+    (pageIndex: number, sectionIndex: number) => {
+      const modalType = 'edit';
+      const dispose = showModal('new-section-modal', {
+        closeModal: () => dispose(),
+        pageIndex,
+        sectionIndex,
+        schema,
+        onSchemaChange,
+        modalType,
+      });
+    },
+    [onSchemaChange, schema],
+  );
+
   const launchDeleteSectionModal = useCallback(
     (pageIndex: number, sectionIndex: number) => {
       const dispose = showModal('delete-section-modal', {
@@ -416,12 +431,16 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
                           <>
                             <div style={{ display: 'flex', alignItems: 'center' }}>
                               <div className={styles.editorContainer}>
-                                <EditableValue
-                                  elementType="section"
-                                  id="sectionNameInput"
-                                  value={section.label}
-                                  onSave={(name) => renameSection(name, pageIndex, sectionIndex)}
-                                />
+                                <h1 className={styles['sectionLabel']}>{section.label}</h1>
+                                <IconButton
+                                  enterDelayMs={300}
+                                  kind="ghost"
+                                  label={t('editSection', 'Edit Section')}
+                                  onClick={() => launchEditSectionModal(pageIndex, sectionIndex)}
+                                  size="md"
+                                >
+                                  <Edit />
+                                </IconButton>
                               </div>
                               <IconButton
                                 enterDelayMs={300}

src/components/interactive-builder/interactive-builder.scss

@@ -28,6 +28,10 @@
   margin: layout.$spacing-07 0;
 }
 
+.sectionLabel {
+  @include type.type-style('heading-02');
+}
+
 .explainer {
   margin: layout.$spacing-05 layout.$spacing-03;
 

src/components/interactive-builder/modals/new-section/section.modal.tsx

@@ -7,6 +7,8 @@ interface FormFieldContextType {
   setFormField: (value: FormField | ((prev: FormField) => FormField)) => void;
   concept: Concept;
   setConcept: React.Dispatch<React.SetStateAction<Concept>>;
+  isConceptValid?: boolean;
+  setIsConceptValid?: React.Dispatch<React.SetStateAction<boolean>>;
   updateParentFormField?: (updatedFormField: FormField) => void;
   isObsGrouped?: boolean;
 }
@@ -22,6 +24,7 @@ export const FormFieldProvider: React.FC<{
 }> = ({ children, initialFormField, isObsGrouped = false, selectedConcept = null, updateParentFormField }) => {
   const [formField, setFormFieldInternal] = useState<FormField>(initialFormField);
   const [concept, setConcept] = useState<Concept | null>(selectedConcept);
+  const [isConceptValid, setIsConceptValid] = useState<boolean>(true);
 
   const setFormField = useCallback(
     (valueOrUpdater: FormField | ((prev: FormField) => FormField)) => {
@@ -43,6 +46,8 @@ export const FormFieldProvider: React.FC<{
         setFormField,
         concept,
         setConcept,
+        isConceptValid,
+        setIsConceptValid,
         updateParentFormField,
         isObsGrouped,
       }}

src/components/interactive-builder/modals/question/form-field-context.tsx

@@ -35,7 +35,7 @@ const ConceptSearch: React.FC<ConceptSearchProps> = ({
     isLoadingConcept,
   } = useConceptId(defaultConcept);
   const [selectedConcept, setSelectedConcept] = useState<Concept>(initialConcept);
-  const { concept, setConcept } = useFormField();
+  const { concept, setConcept, setIsConceptValid } = useFormField();
 
   useEffect(() => {
     if (retainConceptInContextAfterSearch && initialConcept && !concept) {
@@ -48,27 +48,35 @@ const ConceptSearch: React.FC<ConceptSearchProps> = ({
     [],
   );
 
+  useEffect(() => {
+    if (conceptLookupError || conceptNameLookupError) {
+      setIsConceptValid(false);
+    }
+  }, [conceptLookupError, conceptNameLookupError, setIsConceptValid]);
+
   const handleConceptSelect = useCallback(
     (concept: Concept) => {
       setConceptToLookup('');
       setSelectedConcept(concept);
       onSelectConcept(concept);
+      setIsConceptValid(true);
     },
-    [onSelectConcept],
+    [onSelectConcept, setIsConceptValid],
   );
 
   const clearSelectedConcept = useCallback(() => {
     setSelectedConcept(null);
     setConceptToLookup('');
+    setIsConceptValid(true);
     if (onClearSelectedConcept) onClearSelectedConcept();
-  }, [onClearSelectedConcept]);
+  }, [onClearSelectedConcept, setIsConceptValid]);
 
   return (
     <>
       <FormLabel className={styles.label}>
         {label ?? t('searchForBackingConcept', 'Search for a backing concept')}
       </FormLabel>
-      {conceptLookupError || conceptNameLookupError ? (
+      {(conceptLookupError || conceptNameLookupError) && (
         <InlineNotification
           kind="error"
           lowContrast
@@ -86,7 +94,7 @@ const ConceptSearch: React.FC<ConceptSearchProps> = ({
                 })
           }
         />
-      ) : null}
+      )}
       {isLoadingConcept ? (
         <InlineLoading className={styles.loader} description={t('loading', 'Loading') + '...'} />
       ) : (
@@ -135,9 +143,8 @@ const ConceptSearch: React.FC<ConceptSearchProps> = ({
                 <strong>"{debouncedConceptToLookup}".</strong>
               </span>
             </Tile>
-
             <div className={styles.oclLauncherBanner}>
-              {<p className={styles.bodyShort01}>{t('conceptSearchHelpText', "Can't find a concept?")}</p>}
+              <p className={styles.bodyShort01}>{t('conceptSearchHelpText', "Can't find a concept?")}</p>
               <a
                 className={styles.oclLink}
                 target="_blank"

src/components/interactive-builder/modals/question/question-form/common/concept-search/concept-search.component.tsx

@@ -45,9 +45,10 @@ jest.mock('@hooks/useConceptId', () => ({
 const onSelectConcept = jest.fn();
 const mockSetFormField = jest.fn();
 const setConcept = jest.fn();
+const setIsConceptValid = jest.fn();
 jest.mock('../../../form-field-context', () => ({
   ...jest.requireActual('../../../form-field-context'),
-  useFormField: () => ({ formField, setFormField: mockSetFormField, setConcept }),
+  useFormField: () => ({ formField, setFormField: mockSetFormField, setConcept, setIsConceptValid }),
 }));
 
 describe('Concept search component', () => {

src/components/interactive-builder/modals/question/question-form/common/concept-search/concept-search.test.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { FormLabel, InlineNotification, FormGroup, Stack } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import ConceptSearch from '../../../common/concept-search/concept-search.component';
@@ -10,9 +10,8 @@ const ObsTypeQuestion: React.FC = () => {
   const { t } = useTranslation();
   const { formField, setFormField, concept, setConcept } = useFormField();
 
-  const getDatePickerType = useCallback((concept: Concept): DatePickerType | null => {
-    const conceptDataType = concept.datatype.name;
-    switch (conceptDataType) {
+  const getDatePickerType = useCallback((selectedConcept: Concept): DatePickerType | null => {
+    switch (selectedConcept.datatype.name) {
       case 'Datetime':
         return 'both';
       case 'Date':

src/components/interactive-builder/modals/question/question-form/question-types/inputs/obs/obs-type-question.component.tsx

@@ -10,6 +10,7 @@ import type { Concept } from '@types';
 
 const mockSetFormField = jest.fn();
 const setConcept = jest.fn();
+const setIsConceptValid = jest.fn();
 const formField: FormField = {
   id: '1',
   type: 'obs',
@@ -20,7 +21,7 @@ const formField: FormField = {
 
 jest.mock('../../../../form-field-context', () => ({
   ...jest.requireActual('../../../../form-field-context'),
-  useFormField: () => ({ formField, setFormField: mockSetFormField, setConcept }),
+  useFormField: () => ({ formField, setFormField: mockSetFormField, setConcept, setIsConceptValid }),
 }));
 
 const concepts: Array<Concept> = [