(fix) O3-4493: Disable save question button when concept is invalid (#411)

* disable Save button when concept is invalid

* update interactive builder e2e test to use a valid concept ID

* Move concept validity check to context

* Fix e2e tests

* Fix unit tests

* Fix bug in question modal

---------

Co-authored-by: Nethmi Rodrigo <[email protected]>

Author: Bharath-K-Shetty

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();
@@ -184,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/modals/question/form-field-context.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/question-form/common/concept-search/concept-search.component.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.test.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/question-types/inputs/obs/obs-type-question.component.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.test.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> = [

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

@@ -12,7 +12,7 @@ const componentMap: Partial<Record<QuestionType, React.FC>> = {
 
 const QuestionTypeComponent: React.FC = () => {
   const { formField } = useFormField();
-  const Component = componentMap[formField.type];
+  const Component = componentMap[formField.type as QuestionType];
   if (!Component) {
     console.error(`No component found for questiontype: ${formField.type}`);
     return null;

src/components/interactive-builder/modals/question/question.modal.tsx

@@ -44,7 +44,7 @@ const QuestionModalContent: React.FC<QuestionModalProps> = ({
   onSchemaChange,
 }) => {
   const { t } = useTranslation();
-  const { formField, setFormField } = useFormField();
+  const { formField, setFormField, isConceptValid } = useFormField();
 
   /**
    * NOTE - this does not support nested obsGroup questions
@@ -205,6 +205,9 @@ const QuestionModalContent: React.FC<QuestionModalProps> = ({
             disabled={
               !formField ||
               !formField.id ||
+              !isConceptValid ||
+              (formField.type === 'obs' &&
+                (!formField.questionOptions?.concept || formField.questionOptions?.concept === '')) ||
               (!formField.questions && checkIfQuestionIdExists(formField.id)) ||
               !formField.questionOptions?.rendering
             }