mirror of
https://github.com/ansible/awx.git
synced 2026-01-23 23:41:23 -03:30
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:
parent
5a7a1b8f20
commit
560b4ebf71
@ -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)) {
|
||||
|
||||
@ -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 || '';
|
||||
}
|
||||
|
||||
@ -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 => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user