From 560b4ebf71b1b787126bdc4513a6f4287ce21a98 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 16 Jun 2021 15:00:54 -0400
Subject: [PATCH] offers an empty values as a choice on single select survey
 questions that are not required. Also changes the single select component to
 a <Select variant='single'> component following patternfly design guidelines

---
 .../LaunchPrompt/steps/SurveyStep.jsx         | 35 +++++++++++++------
 .../LaunchPrompt/steps/useSurveyStep.jsx      |  3 --
 .../Template/Survey/MultipleChoiceField.jsx   | 14 ++++++--
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx
index e4d0782218..b343ffcc1c 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx
@@ -10,7 +10,6 @@ import {
   SelectVariant,
 } from '@patternfly/react-core';
 import FormField from '../../FormField';
-import AnsibleSelect from '../../AnsibleSelect';
 import Popover from '../../Popover';
 import {
   required,
@@ -92,12 +91,16 @@ function NumberField({ question }) {
 }
 
 function MultipleChoiceField({ question }) {
-  const [field, meta] = useField({
+  const [field, meta, helpers] = useField({
     name: `survey_${question.variable}`,
     validate: question.required ? required(null) : null,
   });
+  const [isOpen, setIsOpen] = useState(false);
   const id = `survey-question-${question.variable}`;
   const isValid = !(meta.touched && meta.error);
+
+  const options = question.choices.split('\n');
+
   return (
     <FormGroup
       fieldId={id}
@@ -107,16 +110,27 @@ function MultipleChoiceField({ question }) {
       label={question.question_name}
       labelIcon={<Popover content={question.question_description} />}
     >
-      <AnsibleSelect
+      <Select
+        onToggle={setIsOpen}
+        onSelect={(event, option) => {
+          helpers.setValue(option);
+          setIsOpen(false);
+        }}
+        selections={field.value}
+        variant={SelectVariant.single}
         id={id}
         isValid={isValid}
-        {...field}
-        data={question.choices.split('\n').map(opt => ({
-          key: opt,
-          value: opt,
-          label: opt,
-        }))}
-      />
+        isOpen={isOpen}
+        placeholderText={t`Select an option`}
+        onClear={() => {
+          helpers.setTouched(true);
+          helpers.setValue('');
+        }}
+      >
+        {options.map(opt => (
+          <SelectOption key={opt} value={opt} />
+        ))}
+      </Select>
     </FormGroup>
   );
 }
@@ -145,6 +159,7 @@ function MultiSelectField({ question }) {
       <Select
         variant={SelectVariant.typeaheadMulti}
         id={id}
+        placeholderText={!field.value.length && t`Select option(s)`}
         onToggle={setIsOpen}
         onSelect={(event, option) => {
           if (field?.value?.includes(option)) {
diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/useSurveyStep.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/useSurveyStep.jsx
index ab535fa8ab..19187d5429 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/useSurveyStep.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/useSurveyStep.jsx
@@ -71,9 +71,6 @@ function getInitialValues(launchConfig, surveyConfig, resource) {
         values[`survey_${question.variable}`] = question.default
           ? question.default.split('\n')
           : [];
-      } else if (question.type === 'multiplechoice') {
-        values[`survey_${question.variable}`] =
-          question.default || question.choices.split('\n')[0];
       } else {
         values[`survey_${question.variable}`] = question.default || '';
       }
diff --git a/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.jsx b/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.jsx
index dff223d7f6..4609e5fb6e 100644
--- a/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.jsx
@@ -15,6 +15,10 @@ const InputGroup = styled(PFInputGroup)`
   padding-bottom: 5px;
 `;
 
+const HelperTextWrapper = styled.div`
+  font-size: var(--pf-c-form__label--FontSize);
+`;
+
 const CheckIcon = styled(PFCheckIcon)`
   color: var(--pf-c-button--m-plain--disabled--Color);
   ${props =>
@@ -53,9 +57,13 @@ function MultipleChoiceField({ label, tooltip }) {
       name="formattedChoices"
       id="formattedChoices"
       helperText={
-        !formattedChoicesField.value[0].choice.trim().length
-          ? t`Type answer then click checkbox on right to select answer as default.`
-          : t`Press 'Enter' to add more answer choices. One answer choice per line. `
+        <HelperTextWrapper>
+          {t`Type answer then click checkbox on right to select answer as
+          default.`}
+          <br />
+          {t`Press 'Enter' to add more answer choices. One answer
+          choice per line.`}
+        </HelperTextWrapper>
       }
       helperTextInvalid={formattedChoicesMeta.error}
       onBlur={e => {