From a324753180a95a6bc313e413ddbe770447f6d066 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Mon, 11 Apr 2022 14:28:01 -0700 Subject: [PATCH 1/2] support survey choices in array format --- .../screens/Template/Survey/SurveyQuestionAdd.js | 14 +++++++------- .../screens/Template/Survey/SurveyQuestionEdit.js | 12 +++++------- .../screens/Template/Survey/SurveyQuestionForm.js | 12 +++++++++--- .../screens/Template/Survey/SurveyReorderModal.js | 11 +++++++---- 4 files changed, 28 insertions(+), 21 deletions(-) diff --git a/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js b/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js index c2936a2417..5e5e594514 100644 --- a/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js +++ b/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js @@ -19,17 +19,17 @@ 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); + // i === formData.formattedChoices.length - 1 + // ? choices.concat(`${choice}`) + // : choices.concat(`${choice}\n`); if (isDefault) { defaultAnswers = i === formData.formattedChoices.length - 1 @@ -38,7 +38,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/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..1707644962 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; From f4b0bd68bd7ea07a9621ad0ee6f893d4c81f65ca Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Tue, 12 Apr 2022 10:08:20 -0700 Subject: [PATCH 2/2] add tests for array/string survey multi-select --- .../Template/Survey/SurveyQuestionAdd.js | 3 - .../Survey/SurveyQuestionEdit.test.js | 182 ++++++++++++++++-- .../Template/Survey/SurveyReorderModal.js | 2 +- 3 files changed, 171 insertions(+), 16 deletions(-) diff --git a/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js b/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js index 5e5e594514..753439b3de 100644 --- a/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js +++ b/awx/ui/src/screens/Template/Survey/SurveyQuestionAdd.js @@ -27,9 +27,6 @@ export default function SurveyQuestionAdd({ survey, updateSurvey }) { let defaultAnswers = ''; formData.formattedChoices.forEach(({ choice, isDefault }, i) => { choices.push(choice); - // i === formData.formattedChoices.length - 1 - // ? choices.concat(`${choice}`) - // : choices.concat(`${choice}\n`); if (isDefault) { defaultAnswers = i === formData.formattedChoices.length - 1 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/SurveyReorderModal.js b/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js index 1707644962..0415a60c8a 100644 --- a/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js +++ b/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js @@ -117,7 +117,7 @@ function SurveyReorderModal({ let component = null; const choices = Array.isArray(q.choices) ? q.choices - : q.choices.split('\n'); + : (q.choices || '').split('\n'); switch (q.type) { case 'password': component = (