Merge prompt extra_vars before POSTing

* Merge the extra_vars field with survey question responses before sending
to API
* Clean up select and multi-select survey fields

awx/ui_next/src/components/FormField/FieldTooltip.jsx

@@ -8,19 +8,26 @@ const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
   margin-left: 10px;
 `;
 
-function FieldTooltip({ content }) {
+function FieldTooltip({ content, ...rest }) {
+  if (!content) {
+    return null;
+  }
   return (
     <Tooltip
       position="right"
       content={content}
       trigger="click mouseenter focus"
+      {...rest}
     >
       <QuestionCircleIcon />
     </Tooltip>
   );
 }
 FieldTooltip.propTypes = {
-  content: node.isRequired,
+  content: node,
+};
+FieldTooltip.defaultProps = {
+  content: null,
 };
 
 export default FieldTooltip;

awx/ui_next/src/components/FormField/FormField.jsx

@@ -1,18 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useField } from 'formik';
-import {
-  FormGroup,
-  TextInput,
-  TextArea,
-  Tooltip,
-} from '@patternfly/react-core';
-import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
-import styled from 'styled-components';
-
-const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
-  margin-left: 10px;
-`;
+import { FormGroup, TextInput, TextArea } from '@patternfly/react-core';
+import FieldTooltip from './FieldTooltip';
 
 function FormField(props) {
   const {
@@ -40,15 +30,7 @@ function FormField(props) {
           isValid={isValid}
           label={label}
         >
-          {tooltip && (
-            <Tooltip
-              content={tooltip}
-              maxWidth={tooltipMaxWidth}
-              position="right"
-            >
-              <QuestionCircleIcon />
-            </Tooltip>
-          )}
+          <FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />
           <TextArea
             id={id}
             isRequired={isRequired}
@@ -69,15 +51,7 @@ function FormField(props) {
           isValid={isValid}
           label={label}
         >
-          {tooltip && (
-            <Tooltip
-              content={tooltip}
-              maxWidth={tooltipMaxWidth}
-              position="right"
-            >
-              <QuestionCircleIcon />
-            </Tooltip>
-          )}
+          <FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />
           <TextInput
             id={id}
             isRequired={isRequired}

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

@@ -8,6 +8,7 @@ import CredentialsStep from './CredentialsStep';
 import OtherPromptsStep from './OtherPromptsStep';
 import SurveyStep from './SurveyStep';
 import PreviewStep from './PreviewStep';
+import mergeExtraVars from './mergeExtraVars';
 
 function LaunchPrompt({ config, resource, onLaunch, onCancel, i18n }) {
   const steps = [];
@@ -69,6 +70,7 @@ function LaunchPrompt({ config, resource, onLaunch, onCancel, i18n }) {
     });
   }
   if (config.survey_enabled) {
+    initialValues.survey = {};
     steps.push({
       name: i18n._(t`Survey`),
       component: <SurveyStep template={resource} />,
@@ -93,7 +95,7 @@ function LaunchPrompt({ config, resource, onLaunch, onCancel, i18n }) {
     setValue('limit', values.limit);
     setValue('job_tags', values.job_tags);
     setValue('skip_tags', values.skip_tags);
-    setValue('extra_vars', values.extra_vars);
+    setValue('extra_vars', mergeExtraVars(values.extra_vars, values.survey));
     onLaunch(postValues);
   };
 

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

@@ -1,9 +1,15 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { withI18n } from '@lingui/react';
-import { useField } from 'formik';
+import { Formik, useField } from 'formik';
 import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '@api';
-import { Form } from '@patternfly/react-core';
-import FormField from '@components/FormField';
+import {
+  Form,
+  FormGroup,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core';
+import FormField, { FieldTooltip } from '@components/FormField';
 import AnsibleSelect from '@components/AnsibleSelect';
 import ContentLoading from '@components/ContentLoading';
 import ContentError from '@components/ContentError';
@@ -38,6 +44,27 @@ function SurveyStep({ template, i18n }) {
     return <ContentLoading />;
   }
 
+  const initialValues = {};
+  survey.spec.forEach(question => {
+    if (question.type === 'multiselect') {
+      initialValues[question.variable] = question.default.split('\n');
+    } else {
+      initialValues[question.variable] = question.default;
+    }
+  });
+
+  return (
+    <SurveySubForm survey={survey} initialValues={initialValues} i18n={i18n} />
+  );
+}
+
+function SurveySubForm({ survey, initialValues, i18n }) {
+  const [, , surveyFieldHelpers] = useField('survey');
+  useEffect(() => {
+    surveyFieldHelpers.setValue(initialValues);
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, []);
+
   const fieldTypes = {
     text: TextField,
     textarea: TextField,
@@ -47,15 +74,24 @@ function SurveyStep({ template, i18n }) {
     integer: NumberField,
     float: NumberField,
   };
+  // This is a nested Formik form to perform validation on individual
+  // survey questions. When changes to the inner form occur (onBlur), the
+  // values for all questions are added to the outer form's `survey` field
+  // as a single object.
   return (
-    <Form>
-      {survey.spec.map(question => {
-        const Field = fieldTypes[question.type];
-        return (
-          <Field key={question.variable} question={question} i18n={i18n} />
-        );
-      })}
-    </Form>
+    <Formik initialValues={initialValues}>
+      {({ values }) => (
+        <Form onBlur={() => surveyFieldHelpers.setValue(values)}>
+          {' '}
+          {survey.spec.map(question => {
+            const Field = fieldTypes[question.type];
+            return (
+              <Field key={question.variable} question={question} i18n={i18n} />
+            );
+          })}
+        </Form>
+      )}
+    </Formik>
   );
 }
 
@@ -101,36 +137,66 @@ function NumberField({ question, i18n }) {
   );
 }
 
-function MultipleChoiceField({ question, i18n }) {
-  const [field, meta] = useField(question.question_name);
-  console.log(question, field);
+function MultipleChoiceField({ question }) {
+  const [field, meta] = useField(question.variable);
+  const id = `survey-question-${question.variable}`;
+  const isValid = !(meta.touched && meta.error);
   return (
-    <AnsibleSelect
-      id={`survey-question-${question.variable}`}
-      isValid={!meta.errors}
-      {...field}
-      data={question.choices.split('/n').map(opt => ({
-        key: opt,
-        value: opt,
-        label: opt,
-      }))}
-    />
+    <FormGroup
+      fieldId={id}
+      helperTextInvalid={meta.error}
+      isRequired={question.required}
+      isValid={isValid}
+      label={question.question_name}
+    >
+      <FieldTooltip content={question.question_description} />
+      <AnsibleSelect
+        id={id}
+        isValid={isValid}
+        {...field}
+        data={question.choices.split('\n').map(opt => ({
+          key: opt,
+          value: opt,
+          label: opt,
+        }))}
+      />
+    </FormGroup>
   );
 }
 
-function MultiSelectField({ question, i18n }) {
-  const [field, meta] = useField(question.question_name);
+function MultiSelectField({ question }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [field, meta, helpers] = useField(question.variable);
+  const id = `survey-question-${question.variable}`;
+  const isValid = !(meta.touched && meta.error);
   return (
-    <AnsibleSelect
-      id={`survey-question-${question.variable}`}
-      isValid={!meta.errors}
-      {...field}
-      data={question.choices.split('/n').map(opt => ({
-        key: opt,
-        value: opt,
-        label: opt,
-      }))}
-    />
+    <FormGroup
+      fieldId={id}
+      helperTextInvalid={meta.error}
+      isRequired={question.required}
+      isValid={isValid}
+      label={question.question_name}
+    >
+      <FieldTooltip content={question.question_description} />
+      <Select
+        variant={SelectVariant.typeaheadMulti}
+        id={id}
+        onToggle={setIsOpen}
+        onSelect={(event, option) => {
+          if (field.value.includes(option)) {
+            helpers.setValue(field.value.filter(o => o !== option));
+          } else {
+            helpers.setValue(field.value.concat(option));
+          }
+        }}
+        isExpanded={isOpen}
+        selections={field.value}
+      >
+        {question.choices.split('\n').map(opt => (
+          <SelectOption key={opt} value={opt} />
+        ))}
+      </Select>
+    </FormGroup>
   );
 }
 

awx/ui_next/src/components/LaunchPrompt/mergeExtraVars.js

@@ -0,0 +1,11 @@
+import yaml from 'js-yaml';
+
+export default function mergeExtraVars(extraVars, survey = {}) {
+  const vars = yaml.safeLoad(extraVars) || {};
+  return {
+    ...vars,
+    ...survey,
+  };
+}
+
+// TODO: "safe" version that obscures passwords for preview step

awx/ui_next/src/components/LaunchPrompt/mergeExtraVars.test.js

@@ -0,0 +1,34 @@
+import mergeExtraVars from './mergeExtraVars';
+
+describe('mergeExtraVars', () => {
+  test('should handle yaml string', () => {
+    const yaml = '---\none: 1\ntwo: 2';
+    expect(mergeExtraVars(yaml)).toEqual({
+      one: 1,
+      two: 2,
+    });
+  });
+
+  test('should handle json string', () => {
+    const jsonString = '{"one": 1, "two": 2}';
+    expect(mergeExtraVars(jsonString)).toEqual({
+      one: 1,
+      two: 2,
+    });
+  });
+
+  test('should handle empty string', () => {
+    expect(mergeExtraVars('')).toEqual({});
+  });
+
+  test('should merge survey results into extra vars object', () => {
+    const yaml = '---\none: 1\ntwo: 2';
+    const survey = { foo: 'bar', bar: 'baz' };
+    expect(mergeExtraVars(yaml, survey)).toEqual({
+      one: 1,
+      two: 2,
+      foo: 'bar',
+      bar: 'baz',
+    });
+  });
+});

awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap

@@ -322,6 +322,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
               className="pf-c-backdrop"
             >
               <FocusTrap
+                _createFocusTrap={[Function]}
                 active={true}
                 className="pf-l-bullseye"
                 focusTrapOptions={
@@ -330,6 +331,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                   }
                 }
                 paused={false}
+                tag="div"
               >
                 <div
                   className="pf-l-bullseye"