Fixes bug where UI wasn't handling an array of survey answer choices

awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-
 import { t } from '@lingui/macro';
 import { useField } from 'formik';
 import {
@@ -99,7 +98,13 @@ function MultipleChoiceField({ question }) {
   const id = `survey-question-${question.variable}`;
   const isValid = !(meta.touched && meta.error);
 
-  const options = question.choices.split('\n');
+  let options = [];
+
+  if (typeof question.choices === 'string') {
+    options = question.choices.split('\n');
+  } else if (Array.isArray(question.choices)) {
+    options = [...question.choices];
+  }
 
   return (
     <FormGroup
@@ -119,7 +124,6 @@ function MultipleChoiceField({ question }) {
         selections={field.value}
         variant={SelectVariant.single}
         id={id}
-        isValid={isValid}
         isOpen={isOpen}
         placeholderText={t`Select an option`}
         onClear={() => {
@@ -145,6 +149,14 @@ function MultiSelectField({ question }) {
   const hasActualValue = !question.required || meta.value?.length > 0;
   const isValid = !meta.touched || (!meta.error && hasActualValue);
 
+  let options = [];
+
+  if (typeof question.choices === 'string') {
+    options = question.choices.split('\n');
+  } else if (Array.isArray(question.choices)) {
+    options = [...question.choices];
+  }
+
   return (
     <FormGroup
       fieldId={id}
@@ -176,7 +188,7 @@ function MultiSelectField({ question }) {
           helpers.setValue([]);
         }}
       >
-        {question.choices.split('\n').map(opt => (
+        {options.map(opt => (
           <SelectOption key={opt} value={opt} />
         ))}
       </Select>

awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.test.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { Formik } from 'formik';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import SurveyStep from './SurveyStep';
+
+describe('SurveyStep', () => {
+  test('should handle choices as a string', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Formik initialValues={{ job_type: 'run' }}>
+          <SurveyStep
+            surveyConfig={{
+              name: 'survey',
+              description: '',
+              spec: [
+                {
+                  question_name: 'q1',
+                  question_description: '',
+                  required: true,
+                  type: 'multiplechoice',
+                  variable: 'q1',
+                  min: null,
+                  max: null,
+                  default: '',
+                  choices: '1\n2\n3\n4\n5\n6',
+                },
+              ],
+            }}
+          />
+        </Formik>
+      );
+    });
+
+    await act(async () => {
+      wrapper.find('SelectToggle').simulate('click');
+    });
+    wrapper.update();
+    const selectOptions = wrapper.find('SelectOption');
+    expect(selectOptions.at(0).prop('value')).toEqual('1');
+    expect(selectOptions.at(1).prop('value')).toEqual('2');
+    expect(selectOptions.at(2).prop('value')).toEqual('3');
+    expect(selectOptions.at(3).prop('value')).toEqual('4');
+    expect(selectOptions.at(4).prop('value')).toEqual('5');
+    expect(selectOptions.at(5).prop('value')).toEqual('6');
+  });
+  test('should handle choices as an array', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Formik initialValues={{ job_type: 'run' }}>
+          <SurveyStep
+            surveyConfig={{
+              name: 'survey',
+              description: '',
+              spec: [
+                {
+                  question_name: 'q1',
+                  question_description: '',
+                  required: true,
+                  type: 'multiplechoice',
+                  variable: 'q1',
+                  min: null,
+                  max: null,
+                  default: '',
+                  choices: ['1', '2', '3', '4', '5', '6'],
+                },
+              ],
+            }}
+          />
+        </Formik>
+      );
+    });
+
+    await act(async () => {
+      wrapper.find('SelectToggle').simulate('click');
+    });
+    wrapper.update();
+    const selectOptions = wrapper.find('SelectOption');
+    expect(selectOptions.at(0).prop('value')).toEqual('1');
+    expect(selectOptions.at(1).prop('value')).toEqual('2');
+    expect(selectOptions.at(2).prop('value')).toEqual('3');
+    expect(selectOptions.at(3).prop('value')).toEqual('4');
+    expect(selectOptions.at(4).prop('value')).toEqual('5');
+    expect(selectOptions.at(5).prop('value')).toEqual('6');
+  });
+});

awx/ui_next/src/types.js

@@ -348,7 +348,7 @@ export const SurveyQuestion = shape({
   min: number,
   max: number,
   default: string,
-  choices: string,
+  choices: oneOfType([string, arrayOf(string)]),
 });
 
 export const Survey = shape({