diff --git a/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js b/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js
index c2936a2417..753439b3de 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js
+++ b/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 =
- i === formData.formattedChoices.length - 1
- ? choices.concat(`${choice}`)
- : choices.concat(`${choice}\n`);
+ choices.push(choice);
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];
diff --git a/awx/ui/src/screens/Template/Survey/SurveyQuestionEdit.js b/awx/ui/src/screens/Template/Survey/SurveyQuestionEdit.js
index 59dbfbb989..95f864d3f5 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyQuestionEdit.js
+++ b/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 =
- i === submittedData.formattedChoices.length - 1
- ? choices.concat(`${choice}`)
- : choices.concat(`${choice}\n`);
+ choices.push(choice);
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),
diff --git a/awx/ui/src/screens/Template/Survey/SurveyQuestionEdit.test.js b/awx/ui/src/screens/Template/Survey/SurveyQuestionEdit.test.js
index ab7ea59d55..11d6db38c7 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyQuestionEdit.test.js
+++ b/awx/ui/src/screens/Template/Survey/SurveyQuestionEdit.test.js
@@ -41,18 +41,16 @@ describe('', () => {
],
});
updateSurvey = jest.fn();
- act(() => {
- wrapper = mountWithContexts(
-
-
-
-
- ,
- {
- context: { router: { history } },
- }
- );
- });
+ wrapper = mountWithContexts(
+
+
+
+
+ ,
+ {
+ context: { router: { history } },
+ }
+ );
});
test('should render form', () => {
@@ -147,4 +145,164 @@ describe('', () => {
);
});
});
+
+ 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(
+
+
+
+
+ ,
+ {
+ 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(
+
+
+
+
+ ,
+ {
+ 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(
+
+
+
+
+ ,
+ {
+ 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(
+
+
+
+
+ ,
+ {
+ 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');
+ });
});
diff --git a/awx/ui/src/screens/Template/Survey/SurveyQuestionForm.js b/awx/ui/src/screens/Template/Survey/SurveyQuestionForm.js
index 300479c2da..7d7f198de8 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyQuestionForm.js
+++ b/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) => {
- if (question.default.split('\n').includes(c)) {
+ const choices = Array.isArray(question.choices)
+ ? 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,
};
}
diff --git a/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js b/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js
index f3c84a6371..0415a60c8a 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js
+++ b/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 &&
- q.choices
- .split('\n')
- .map((option) => )}
+ {choices.length > 0 &&
+ choices.map((option) => (
+
+ ))}
);
break;