diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx index b343ffcc1c..07d96b335d 100644 --- a/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx +++ b/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 ( { @@ -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 ( - {question.choices.split('\n').map(opt => ( + {options.map(opt => ( ))} diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.test.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.test.jsx new file mode 100644 index 0000000000..8d27a05596 --- /dev/null +++ b/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( + + + + ); + }); + + 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( + + + + ); + }); + + 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'); + }); +}); diff --git a/awx/ui_next/src/types.js b/awx/ui_next/src/types.js index d631f27634..3be7f55bc5 100644 --- a/awx/ui_next/src/types.js +++ b/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({