(feat) O3-3958: Add a select all option for concept answers

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

@@ -30,14 +30,14 @@ const formDetails = {
                 rendering: 'radio',
                 concept: '89c5bc03-8ce2-40d8-a77d-20b5a62a1ca1',
                 answers: [
-                  {
-                    concept: '1066AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-                    label: 'No',
-                  },
                   {
                     concept: '1065AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
                     label: 'Yes',
                   },
+                  {
+                    concept: '1066AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                    label: 'No',
+                  },
                 ],
               },
             },
@@ -183,12 +183,6 @@ test('Create a form using the interactive builder', async ({ page, context }) =>
     await formBuilderPage.page.getByRole('menuitem', { name: /tested for covid 19/i }).click();
   });
 
-  await test.step('And then I select `Yes` and `No` as the answers to display', async () => {
-    await formBuilderPage.selectAnswersDropdown().click();
-    await formBuilderPage.page.getByRole('option', { name: 'No' }).click();
-    await formBuilderPage.page.getByRole('option', { name: 'Yes' }).click();
-  });
-
   await test.step('And then I click on `Save`', async () => {
     await expect(formBuilderPage.saveButton()).toBeEnabled();
     await formBuilderPage.saveButton().click();
@@ -243,34 +237,9 @@ test('Create a form using the interactive builder', async ({ page, context }) =>
       ],
       pages: [
         {
-          label: 'Screening',
+          ...formDetails.pages[0],
           sections: [
-            {
-              label: 'Testing history',
-              isExpanded: 'true',
-              questions: [
-                {
-                  type: 'obs',
-                  questionOptions: {
-                    rendering: 'radio',
-                    concept: '89c5bc03-8ce2-40d8-a77d-20b5a62a1ca1',
-                    answers: [
-                      {
-                        concept: '1066AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-                        label: 'No',
-                      },
-                      {
-                        concept: '1065AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-                        label: 'Yes',
-                      },
-                    ],
-                  },
-                  id: 'everTestedForCovid19',
-                  label: 'Have you been ever been tested for COVID-19?',
-                  required: true,
-                },
-              ],
-            },
+            formDetails.pages[0].sections[0],
             {
               label: 'Visit Details',
               isExpanded: 'true',

src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx

@@ -19,12 +19,31 @@ const SelectAnswers: React.FC = () => {
   const [addedAnswers, setAddedAnswers] = useState<AnswerItem[]>([]);
   const [invalidAnswerIds, setInvalidAnswerIds] = useState<string[]>([]);
 
+  // Reset the additionally selected answers when the concept changes
   useEffect(() => {
     if (!concept) {
       setAddedAnswers([]);
     }
   }, [concept]);
 
+  // Initialize the selected answers to be the concept's answers
+  useEffect(() => {
+    if (concept?.answers?.length && !formField.questionOptions?.answers?.length) {
+      const initialAnswers = concept.answers.map((answer) => ({
+        concept: answer.uuid,
+        label: answer.display,
+      }));
+
+      setFormField((prevField) => ({
+        ...prevField,
+        questionOptions: {
+          ...prevField.questionOptions,
+          answers: initialAnswers,
+        },
+      }));
+    }
+  }, [concept, formField.questionOptions?.answers, setFormField]);
+
   const selectedAnswers = useMemo(() => {
     const answers =
       formField.questionOptions?.answers?.map((answer) => ({
@@ -37,10 +56,12 @@ const SelectAnswers: React.FC = () => {
 
   const handleSelectAnswers = useCallback(
     ({ selectedItems }: { selectedItems: Array<AnswerItem> }) => {
-      const mappedAnswers = selectedItems.map((answer) => ({
-        concept: answer.id,
-        label: answer.text,
-      }));
+      const mappedAnswers = selectedItems
+        .filter((answer) => answer.id !== 'select-all')
+        .map((answer) => ({
+          concept: answer.id,
+          label: answer.text,
+        }));
 
       setFormField((prevField) => {
         const currentAnswers = prevField.questionOptions?.answers || [];
@@ -131,7 +152,15 @@ const SelectAnswers: React.FC = () => {
         text: answer.label,
       }));
 
-    return [...answersFromConceptWithLabelsFromFormField, ...additionalAnswers];
+    return [
+      ...answersFromConceptWithLabelsFromFormField,
+      ...additionalAnswers,
+      {
+        id: 'select-all',
+        text: 'Select all options',
+        isSelectAll: true,
+      },
+    ];
   }, [concept?.answers, formField.questionOptions?.answers]);
 
   const validateAnswers = useCallback(async () => {
@@ -142,7 +171,10 @@ const SelectAnswers: React.FC = () => {
 
     const originalAnswerIds = new Set((concept?.answers || []).map((ans) => ans.uuid));
     const invalidIds: string[] = [];
-    const uniqueAnswers = Array.from(new Map(answerItems.map((a) => [a.id, a])).values());
+    // Filter out the 'select-all' option before validation
+    const uniqueAnswers = Array.from(
+      new Map(answerItems.filter((a) => a.id !== 'select-all').map((a) => [a.id, a])).values(),
+    );
 
     for (const answer of uniqueAnswers) {
       if (!originalAnswerIds.has(answer.id)) {
@@ -170,7 +202,7 @@ const SelectAnswers: React.FC = () => {
 
   return (
     <Stack gap={5}>
-      {answerItems.length > 0 && (
+      {answerItems.length > 1 && (
         <MultiSelect
           className={styles.multiSelect}
           direction="bottom"

src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.test.tsx

@@ -68,7 +68,7 @@ describe('Select answers component', () => {
     ).toBeInTheDocument();
   });
 
-  it('lets user select answers provided by concept', async () => {
+  it('shows answers provided by concept as selected initially', async () => {
     const user = userEvent.setup();
     renderComponent();
     const answersMenu = screen.getByRole('combobox', {
@@ -77,16 +77,20 @@ describe('Select answers component', () => {
     expect(answersMenu).toBeInTheDocument();
 
     await user.click(answersMenu);
-    const answerOption1 = screen.getByRole('option', { name: /answer 1/i });
+    const answerOption1 = screen.getByRole('checkbox', {
+      name: /answer 1/i,
+    });
     expect(answerOption1).toBeInTheDocument();
-    expect(screen.getByText(/answer 2/i)).toBeInTheDocument();
-    await user.click(answerOption1);
+    expect(
+      screen.getByRole('checkbox', {
+        name: /answer 2/i,
+      }),
+    ).toBeInTheDocument();
 
     expect(screen.getByTitle(/answer 1/i)).toBeInTheDocument();
+    expect(screen.getByTitle(/answer 2/i)).toBeInTheDocument();
     expect(
-      screen.getByRole('combobox', {
-        name: /select answers to display/i,
-      }),
+      screen.getByText(/total items selected: 2 answer 1answer 2,to clear selection, press delete or backspace/i),
     ).toBeInTheDocument();
   });