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
This commit is contained in:
Alex Corey 2021-06-16 15:00:54 -04:00 committed by Shane McDonald
parent 5a7a1b8f20
commit 560b4ebf71
No known key found for this signature in database
GPG Key ID: 6F374AF6E9EB9374
3 changed files with 36 additions and 16 deletions

View File

@ -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)) {

View File

@ -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 || '';
}

View File

@ -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 => {