Merge pull request #12038 from keithjgrant/survey-array

Add array support to survey multiple choice questions

awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js

@@ -19,17 +19,14 @@ export default function SurveyQuestionAdd({ survey, updateSurvey }) {
         );
         return;
       }
-      let choices = '';
-      let defaultAnswers = '';
       if (
         formData.type === 'multiselect' ||
         formData.type === 'multiplechoice'
       ) {
+        const choices = [];
+        let defaultAnswers = '';
         formData.formattedChoices.forEach(({ choice, isDefault }, i) => {
-          choices =
+          choices.push(choice);
-            i === formData.formattedChoices.length - 1
-              ? choices.concat(`${choice}`)
-              : choices.concat(`${choice}\n`);
           if (isDefault) {
             defaultAnswers =
               i === formData.formattedChoices.length - 1
@@ -38,7 +35,7 @@ export default function SurveyQuestionAdd({ survey, updateSurvey }) {
           }
         });
         formData.default = defaultAnswers.trim();
-        formData.choices = choices.trim();
+        formData.choices = choices;
       }
       delete formData.formattedChoices;
       const newSpec = survey?.spec ? survey.spec.concat(formData) : [formData];

awx/ui/src/screens/Template/Survey/SurveyQuestionEdit.js

@@ -58,17 +58,14 @@ export default function SurveyQuestionEdit({ survey, updateSurvey }) {
       if (questionIndex === -1) {
         throw new Error('Question not found in spec');
       }
-      let choices = '';
-      let defaultAnswers = '';
       if (
         submittedData.type === 'multiselect' ||
         submittedData.type === 'multiplechoice'
       ) {
+        const choices = [];
+        let defaultAnswers = '';
         submittedData.formattedChoices.forEach(({ choice, isDefault }, i) => {
-          choices =
+          choices.push(choice);
-            i === submittedData.formattedChoices.length - 1
-              ? choices.concat(`${choice}`)
-              : choices.concat(`${choice}\n`);
           if (isDefault) {
             defaultAnswers =
               i === submittedData.formattedChoices.length - 1
@@ -77,8 +74,9 @@ export default function SurveyQuestionEdit({ survey, updateSurvey }) {
           }
         });
         submittedData.default = defaultAnswers.trim();
-        submittedData.choices = choices.trim();
+        submittedData.choices = choices;
       }
+      delete submittedData.formattedChoices;
 
       await updateSurvey([
         ...survey.spec.slice(0, questionIndex),

awx/ui/src/screens/Template/Survey/SurveyQuestionEdit.test.js

@@ -41,18 +41,16 @@ describe('<SurveyQuestionEdit />', () => {
         ],
       });
       updateSurvey = jest.fn();
-      act(() => {
+      wrapper = mountWithContexts(
-        wrapper = mountWithContexts(
+        <Switch>
-          <Switch>
+          <Route path="/templates/:templateType/:id/survey/edit">
-            <Route path="/templates/:templateType/:id/survey/edit">
+            <SurveyQuestionEdit survey={survey} updateSurvey={updateSurvey} />
-              <SurveyQuestionEdit survey={survey} updateSurvey={updateSurvey} />
+          </Route>
-            </Route>
+        </Switch>,
-          </Switch>,
+        {
-          {
+          context: { router: { history } },
-            context: { router: { history } },
+        }
-          }
+      );
-        );
-      });
     });
 
     test('should render form', () => {
@@ -147,4 +145,164 @@ describe('<SurveyQuestionEdit />', () => {
       );
     });
   });
+
+  test('should handle multiplechoice as array', () => {
+    const survey = {
+      spec: [
+        {
+          question_name: 'What is the foo?',
+          question_description: 'more about the foo',
+          variable: 'foo',
+          required: true,
+          type: 'multiplechoice',
+          choices: ['one', 'two', 'three'],
+          default: '',
+          min: 0,
+          max: 1024,
+        },
+      ],
+    };
+    history = createMemoryHistory({
+      initialEntries: [
+        '/templates/job_templates/1/survey/edit?question_variable=foo',
+      ],
+    });
+    updateSurvey = jest.fn();
+    wrapper = mountWithContexts(
+      <Switch>
+        <Route path="/templates/:templateType/:id/survey/edit">
+          <SurveyQuestionEdit survey={survey} updateSurvey={updateSurvey} />
+        </Route>
+      </Switch>,
+      {
+        context: { router: { history } },
+      }
+    );
+
+    const inputs = wrapper.find('MultipleChoiceField TextInput');
+    expect(inputs).toHaveLength(3);
+    expect(inputs.at(0).prop('value')).toEqual('one');
+    expect(inputs.at(1).prop('value')).toEqual('two');
+    expect(inputs.at(2).prop('value')).toEqual('three');
+  });
+
+  test('should handle multiplechoice as string', () => {
+    const survey = {
+      spec: [
+        {
+          question_name: 'What is the foo?',
+          question_description: 'more about the foo',
+          variable: 'foo',
+          required: true,
+          type: 'multiplechoice',
+          choices: 'one\ntwo\nthree',
+          default: '',
+          min: 0,
+          max: 1024,
+        },
+      ],
+    };
+    history = createMemoryHistory({
+      initialEntries: [
+        '/templates/job_templates/1/survey/edit?question_variable=foo',
+      ],
+    });
+    updateSurvey = jest.fn();
+    wrapper = mountWithContexts(
+      <Switch>
+        <Route path="/templates/:templateType/:id/survey/edit">
+          <SurveyQuestionEdit survey={survey} updateSurvey={updateSurvey} />
+        </Route>
+      </Switch>,
+      {
+        context: { router: { history } },
+      }
+    );
+
+    const inputs = wrapper.find('MultipleChoiceField TextInput');
+    expect(inputs).toHaveLength(3);
+    expect(inputs.at(0).prop('value')).toEqual('one');
+    expect(inputs.at(1).prop('value')).toEqual('two');
+    expect(inputs.at(2).prop('value')).toEqual('three');
+  });
+
+  test('should handle multiselect as array', () => {
+    const survey = {
+      spec: [
+        {
+          question_name: 'What is the foo?',
+          question_description: 'more about the foo',
+          variable: 'foo',
+          required: true,
+          type: 'multiselect',
+          choices: ['one', 'two', 'three'],
+          default: '',
+          min: 0,
+          max: 1024,
+        },
+      ],
+    };
+    history = createMemoryHistory({
+      initialEntries: [
+        '/templates/job_templates/1/survey/edit?question_variable=foo',
+      ],
+    });
+    updateSurvey = jest.fn();
+    wrapper = mountWithContexts(
+      <Switch>
+        <Route path="/templates/:templateType/:id/survey/edit">
+          <SurveyQuestionEdit survey={survey} updateSurvey={updateSurvey} />
+        </Route>
+      </Switch>,
+      {
+        context: { router: { history } },
+      }
+    );
+
+    const inputs = wrapper.find('MultipleChoiceField TextInput');
+    expect(inputs).toHaveLength(3);
+    expect(inputs.at(0).prop('value')).toEqual('one');
+    expect(inputs.at(1).prop('value')).toEqual('two');
+    expect(inputs.at(2).prop('value')).toEqual('three');
+  });
+
+  test('should handle multiselect as string', () => {
+    const survey = {
+      spec: [
+        {
+          question_name: 'What is the foo?',
+          question_description: 'more about the foo',
+          variable: 'foo',
+          required: true,
+          type: 'multiselect',
+          choices: 'one\ntwo\nthree',
+          default: '',
+          min: 0,
+          max: 1024,
+        },
+      ],
+    };
+    history = createMemoryHistory({
+      initialEntries: [
+        '/templates/job_templates/1/survey/edit?question_variable=foo',
+      ],
+    });
+    updateSurvey = jest.fn();
+    wrapper = mountWithContexts(
+      <Switch>
+        <Route path="/templates/:templateType/:id/survey/edit">
+          <SurveyQuestionEdit survey={survey} updateSurvey={updateSurvey} />
+        </Route>
+      </Switch>,
+      {
+        context: { router: { history } },
+      }
+    );
+
+    const inputs = wrapper.find('MultipleChoiceField TextInput');
+    expect(inputs).toHaveLength(3);
+    expect(inputs.at(0).prop('value')).toEqual('one');
+    expect(inputs.at(1).prop('value')).toEqual('two');
+    expect(inputs.at(2).prop('value')).toEqual('three');
+  });
 });

awx/ui/src/screens/Template/Survey/SurveyQuestionForm.js

@@ -120,8 +120,14 @@ function SurveyQuestionForm({
     new_question: !question,
   };
   if (question?.type === 'multiselect' || question?.type === 'multiplechoice') {
-    const newQuestions = question.choices.split('\n').map((c, i) => {
+    const choices = Array.isArray(question.choices)
-      if (question.default.split('\n').includes(c)) {
+      ? question.choices
+      : question.choices.split('\n');
+    const defaults = Array.isArray(question.default)
+      ? question.default
+      : question.default.split('\n');
+    const formattedChoices = choices.map((c, i) => {
+      if (defaults.includes(c)) {
         return { choice: c, isDefault: true, id: i };
       }
 
@@ -136,7 +142,7 @@ function SurveyQuestionForm({
       variable: question?.variable || '',
       min: question?.min || 0,
       max: question?.max || 1024,
-      formattedChoices: newQuestions,
+      formattedChoices,
       new_question: !question,
     };
   }

awx/ui/src/screens/Template/Survey/SurveyReorderModal.js

@@ -115,6 +115,9 @@ function SurveyReorderModal({
 
   const defaultAnswer = (q) => {
     let component = null;
+    const choices = Array.isArray(q.choices)
+      ? q.choices
+      : (q.choices || '').split('\n');
     switch (q.type) {
       case 'password':
         component = (
@@ -162,10 +165,10 @@ function SurveyReorderModal({
             ouiaId={`survey-preview-multiSelect-${q.variable}`}
             noResultsFoundText={t`No results found`}
           >
-            {q.choices.length > 0 &&
+            {choices.length > 0 &&
-              q.choices
+              choices.map((option) => (
-                .split('\n')
+                <SelectOption key={option} value={option} />
-                .map((option) => <SelectOption key={option} value={option} />)}
+              ))}
           </Select>
         );
         break;