merge survey fields into rest of jt promt form

This commit is contained in:
Keith Grant 2020-05-06 16:38:08 -07:00
parent da8f486c5d
commit 59e3306a3c
4 changed files with 18 additions and 51 deletions

View File

@ -16,7 +16,6 @@ function LaunchPrompt({ config, resource, onLaunch, onCancel, i18n }) {
validate,
visitStep,
visitAllSteps,
// formErrors,
contentError,
} = useSteps(config, resource, i18n);

View File

@ -32,7 +32,6 @@ function OtherPromptsStep({ config, i18n }) {
of hosts that will be managed or affected by the playbook. Multiple
patterns are allowed. Refer to Ansible documentation for more
information and examples on patterns.`)}
isRequired
/>
)}
{config.ask_verbosity_on_launch && <VerbosityField i18n={i18n} />}

View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import { withI18n } from '@lingui/react';
import { Formik, useField } from 'formik';
import { useField } from 'formik';
import {
Form,
FormGroup,
@ -21,35 +21,6 @@ import {
import { Survey } from '@types';
function SurveyStep({ survey, i18n }) {
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} />
);
}
SurveyStep.propTypes = {
survey: Survey.isRequired,
};
// 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.
function SurveySubForm({ survey, initialValues, i18n }) {
const [, , surveyFieldHelpers] = useField('survey');
useEffect(() => {
// set survey initial values to parent form
surveyFieldHelpers.setValue(initialValues);
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, []);
const fieldTypes = {
text: TextField,
textarea: TextField,
@ -60,21 +31,19 @@ function SurveySubForm({ survey, initialValues, i18n }) {
float: NumberField,
};
return (
<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>
<Form>
{survey.spec.map(question => {
const Field = fieldTypes[question.type];
return (
<Field key={question.variable} question={question} i18n={i18n} />
);
})}
</Form>
);
}
SurveyStep.propTypes = {
survey: Survey.isRequired,
};
function TextField({ question, i18n }) {
const validators = [
@ -85,7 +54,7 @@ function TextField({ question, i18n }) {
return (
<FormField
id={`survey-question-${question.variable}`}
name={question.variable}
name={`survey_${question.variable}`}
label={question.question_name}
tooltip={question.question_description}
isRequired={question.required}
@ -106,7 +75,7 @@ function NumberField({ question, i18n }) {
return (
<FormField
id={`survey-question-${question.variable}`}
name={question.variable}
name={`survey_${question.variable}`}
label={question.question_name}
tooltip={question.question_description}
isRequired={question.required}
@ -119,7 +88,7 @@ function NumberField({ question, i18n }) {
}
function MultipleChoiceField({ question }) {
const [field, meta] = useField(question.variable);
const [field, meta] = useField(`survey_${question.variable}`);
const id = `survey-question-${question.variable}`;
const isValid = !(meta.touched && meta.error);
return (
@ -147,7 +116,7 @@ function MultipleChoiceField({ question }) {
function MultiSelectField({ question }) {
const [isOpen, setIsOpen] = useState(false);
const [field, meta, helpers] = useField(question.variable);
const [field, meta, helpers] = useField(`survey_${question.variable}`);
const id = `survey-question-${question.variable}`;
const isValid = !(meta.touched && meta.error);
return (

View File

@ -35,7 +35,7 @@ export default function useSurveyStep(config, resource, visitedSteps, i18n) {
survey.spec.forEach(question => {
const errMessage = validateField(
question,
values[question.variable],
values[`survey_${question.variable}`],
i18n
);
if (errMessage) {