flush out validators, survey questions

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

@@ -1,14 +1,23 @@
 import React, { useCallback, useEffect } from 'react';
 import { withI18n } from '@lingui/react';
+import { useField } from 'formik';
 import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '@api';
 import { Form } from '@patternfly/react-core';
 import FormField from '@components/FormField';
+import AnsibleSelect from '@components/AnsibleSelect';
 import ContentLoading from '@components/ContentLoading';
 import ContentError from '@components/ContentError';
 import useRequest from '@util/useRequest';
-import { required } from '@util/validators';
+import {
+  required,
+  minMaxValue,
+  maxLength,
+  minLength,
+  integer,
+  combine,
+} from '@util/validators';
 
-function InventoryStep({ template, i18n }) {
+function SurveyStep({ template, i18n }) {
   const { result: survey, request: fetchSurvey, isLoading, error } = useRequest(
     useCallback(async () => {
       const { data } =
@@ -29,21 +38,33 @@ function InventoryStep({ template, i18n }) {
     return <ContentLoading />;
   }
 
+  const fieldTypes = {
+    text: TextField,
+    textarea: TextField,
+    password: TextField,
+    multiplechoice: MultipleChoiceField,
+    multiselect: MultiSelectField,
+    integer: NumberField,
+    float: NumberField,
+  };
   return (
     <Form>
-      {survey.spec.map(question => (
-        <SurveyQuestion
-          key={question.variable}
-          question={question}
-          i18n={i18n}
-        />
-      ))}
+      {survey.spec.map(question => {
+        const Field = fieldTypes[question.type];
+        return (
+          <Field key={question.variable} question={question} i18n={i18n} />
+        );
+      })}
     </Form>
   );
 }
 
-function SurveyQuestion({ question, i18n }) {
-  const isNumeric = question.type === 'number' || question.type === 'integer';
+function TextField({ question, i18n }) {
+  const validators = [
+    question.required ? required(null, i18n) : null,
+    question.min ? minLength(question.min, i18n) : null,
+    question.max ? maxLength(question.max, i18n) : null,
+  ];
   return (
     <FormField
       id={`survey-question-${question.variable}`}
@@ -51,14 +72,66 @@ function SurveyQuestion({ question, i18n }) {
       label={question.question_name}
       tooltip={question.question_description}
       isRequired={question.required}
-      validate={question.required ? required(null, i18n) : null}
-      type={isNumeric ? 'number' : question.type}
-      min={isNumeric ? question.min : null}
-      max={isNumeric ? question.max : null}
-      minLength={!isNumeric ? question.min : null}
-      maxLength={!isNumeric ? question.max : null}
+      validate={combine(validators)}
+      type={question.type}
+      minLength={question.min}
+      maxLength={question.max}
     />
   );
 }
 
-export default withI18n()(InventoryStep);
+function NumberField({ question, i18n }) {
+  const validators = [
+    question.required ? required(null, i18n) : null,
+    minMaxValue(question.min, question.max, i18n),
+    question.type === 'integer' ? integer(i18n) : null,
+  ];
+  return (
+    <FormField
+      id={`survey-question-${question.variable}`}
+      name={question.variable}
+      label={question.question_name}
+      tooltip={question.question_description}
+      isRequired={question.required}
+      validate={combine(validators)}
+      type="number"
+      min={question.min}
+      max={question.max}
+    />
+  );
+}
+
+function MultipleChoiceField({ question, i18n }) {
+  const [field, meta] = useField(question.question_name);
+  console.log(question, field);
+  return (
+    <AnsibleSelect
+      id={`survey-question-${question.variable}`}
+      isValid={!meta.errors}
+      {...field}
+      data={question.choices.split('/n').map(opt => ({
+        key: opt,
+        value: opt,
+        label: opt,
+      }))}
+    />
+  );
+}
+
+function MultiSelectField({ question, i18n }) {
+  const [field, meta] = useField(question.question_name);
+  return (
+    <AnsibleSelect
+      id={`survey-question-${question.variable}`}
+      isValid={!meta.errors}
+      {...field}
+      data={question.choices.split('/n').map(opt => ({
+        key: opt,
+        value: opt,
+        label: opt,
+      }))}
+    />
+  );
+}
+
+export default withI18n()(SurveyStep);

awx/ui_next/src/components/StatusIcon/StatusIcon.test.jsx

@@ -27,7 +27,6 @@ describe('StatusIcon', () => {
   });
   test('renders a successful status when host status is "ok"', () => {
     const wrapper = mount(<StatusIcon status="ok" />);
-    wrapper.debug();
     expect(wrapper).toHaveLength(1);
     expect(wrapper.find('StatusIcon__SuccessfulTop')).toHaveLength(1);
     expect(wrapper.find('StatusIcon__SuccessfulBottom')).toHaveLength(1);

awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx

@@ -199,6 +199,7 @@ function SurveyQuestionForm({
                     t`Each answer choice must be on a separate line.`
                   )}
                   isRequired
+                  rows="10"
                 />
                 <FormField
                   id="question-default"

awx/ui_next/src/util/validators.jsx

@@ -25,6 +25,15 @@ export function maxLength(max, i18n) {
   };
 }
 
+export function minLength(min, i18n) {
+  return value => {
+    if (value.trim().length < min) {
+      return i18n._(t`This field must be at least ${min} characters`);
+    }
+    return undefined;
+  };
+}
+
 export function minMaxValue(min, max, i18n) {
   return value => {
     if (value < min || value > max) {
@@ -57,10 +66,21 @@ export function noWhiteSpace(i18n) {
   };
 }
 
+export function integer(i18n) {
+  return value => {
+    const str = String(value);
+    if (/[^0-9]/.test(str)) {
+      return i18n._(t`This field must be an integer`);
+    }
+    return undefined;
+  };
+}
+
 export function combine(validators) {
   return value => {
     for (let i = 0; i < validators.length; i++) {
-      const error = validators[i](value);
+      const validate = validators[i];
+      const error = validate ? validate(value) : null;
       if (error) {
         return error;
       }

awx/ui_next/src/util/validators.test.js

@@ -1,4 +1,11 @@
-import { required, maxLength, noWhiteSpace, combine } from './validators';
+import {
+  required,
+  minLength,
+  maxLength,
+  noWhiteSpace,
+  integer,
+  combine,
+} from './validators';
 
 const i18n = { _: val => val };
 
@@ -52,6 +59,21 @@ describe('validators', () => {
     });
   });
 
+  test('minLength accepts value above min', () => {
+    expect(minLength(3, i18n)('snazzy')).toBeUndefined();
+  });
+
+  test('minLength accepts value equal to min', () => {
+    expect(minLength(10, i18n)('abracadbra')).toBeUndefined();
+  });
+
+  test('minLength rejects value below min', () => {
+    expect(minLength(12, i18n)('abracadbra')).toEqual({
+      id: 'This field must be at least {min} characters',
+      values: { min: 12 },
+    });
+  });
+
   test('noWhiteSpace returns error', () => {
     expect(noWhiteSpace(i18n)('this has spaces')).toEqual({
       id: 'This field must not contain spaces',
@@ -68,6 +90,26 @@ describe('validators', () => {
     expect(noWhiteSpace(i18n)('this_has_no_whitespace')).toBeUndefined();
   });
 
+  test('integer should accept integer (number)', () => {
+    expect(integer(i18n)(13)).toBeUndefined();
+  });
+
+  test('integer should accept integer (string)', () => {
+    expect(integer(i18n)('13')).toBeUndefined();
+  });
+
+  test('integer should reject decimal/float', () => {
+    expect(integer(i18n)(13.1)).toEqual({
+      id: 'This field must be an integer',
+    });
+  });
+
+  test('integer should reject string containing alphanum', () => {
+    expect(integer(i18n)('15a')).toEqual({
+      id: 'This field must be an integer',
+    });
+  });
+
   test('combine should run all validators', () => {
     const validators = [required(null, i18n), noWhiteSpace(i18n)];
     expect(combine(validators)('')).toEqual({
@@ -78,4 +120,12 @@ describe('validators', () => {
     });
     expect(combine(validators)('ok')).toBeUndefined();
   });
+
+  test('combine should skip null validators', () => {
+    const validators = [required(null, i18n), null];
+    expect(combine(validators)('')).toEqual({
+      id: 'This field must not be blank',
+    });
+    expect(combine(validators)('ok')).toBeUndefined();
+  });
 });