webpack/JobWizard/steps/form/Formatter.js
import React from 'react';
import { FormGroup, TextArea } from '@patternfly/react-core';
import PropTypes from 'prop-types';
import SearchBar from 'foremanReact/components/SearchBar';
import { getControllerSearchProps } from 'foremanReact/constants';
import { helpLabel, ResetDefault } from './FormHelpers';
import { SelectField } from './SelectField';
import { ResourceSelect } from './ResourceSelect';
import { DateTimePicker } from '../form/DateTimePicker';
const TemplateSearchField = ({
name,
controller,
url,
labelText,
required,
defaultValue,
setValue,
values,
}) => {
const id = name.replace(/ /g, '-');
const props = getControllerSearchProps(controller.replace('/', '_'), name);
return (
<FormGroup
label={name}
labelIcon={helpLabel(labelText, name)}
labelInfo={
<ResetDefault
defaultValue={defaultValue}
setValue={search => setValue({ ...values, [name]: search })}
/>
}
fieldId={id}
isRequired={required}
className="foreman-search-field"
>
<SearchBar
data={{
...props,
autocomplete: {
id: name,
url,
searchQuery: values[name],
},
}}
onSearch={null}
onSearchChange={search => setValue({ ...values, [name]: search })}
/>
</FormGroup>
);
};
export const formatter = (input, values, setValue) => {
const isSelectType = !!input?.options;
const inputType = input.value_type;
const isTextType = inputType === 'plain' || !inputType; // null defaults to plain
const {
name,
required,
hidden_value: hidden,
resource_type: resourceType,
value_type: valueType,
default: defaultValue,
} = input;
const labelText = input.description;
const value = values[name];
const id = name.replace(/ /g, '-');
const labelInfo = (
<ResetDefault
defaultValue={defaultValue}
setValue={newValue => setValue({ ...values, [name]: newValue })}
/>
);
if (valueType === 'resource') {
return (
<FormGroup
label={name}
fieldId={id}
labelIcon={helpLabel(labelText, name)}
isRequired={required}
key={id}
labelInfo={labelInfo}
>
<ResourceSelect
name={name}
apiKey={resourceType.replace('::', '')}
url={`/ui_job_wizard/resources?resource=${resourceType}`}
selected={value || ''}
setSelected={newValue => setValue({ ...values, [name]: newValue })}
/>
</FormGroup>
);
}
if (isSelectType) {
const options = input.options.split(/\r?\n/).map(option => option.trim());
return (
<SelectField
labelInfo={labelInfo}
key={id}
isRequired={required}
label={name}
fieldId={id}
options={options}
labelIcon={helpLabel(labelText, name)}
value={value}
setValue={newValue => setValue({ ...values, [name]: newValue })}
/>
);
}
if (isTextType) {
return (
<FormGroup
labelInfo={labelInfo}
key={name}
label={name}
labelIcon={helpLabel(labelText, name)}
fieldId={id}
isRequired={required}
>
<TextArea
aria-label={name}
className={hidden ? 'masked-input' : null}
required={required}
rows={2}
id={id}
value={value}
onChange={newValue => setValue({ ...values, [name]: newValue })}
/>
</FormGroup>
);
}
if (inputType === 'date') {
return (
<FormGroup
labelInfo={labelInfo}
key={name}
label={name}
labelIcon={helpLabel(labelText, name)}
fieldId={id}
isRequired={required}
>
<DateTimePicker
ariaLabel={name}
className={hidden ? 'masked-input' : null}
id={id}
dateTime={value}
setDateTime={newValue => setValue({ ...values, [name]: newValue })}
includeSeconds
/>
</FormGroup>
);
}
if (inputType === 'search') {
const controller = input.resource_type_tableize;
return (
<TemplateSearchField
key={id}
name={name}
defaultValue={defaultValue}
controller={controller}
url={`/${controller}/auto_complete_search`}
labelText={labelText}
required={required}
setValue={setValue}
values={values}
/>
);
}
return null;
};
TemplateSearchField.propTypes = {
name: PropTypes.string.isRequired,
controller: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
labelText: PropTypes.string,
required: PropTypes.bool.isRequired,
defaultValue: PropTypes.string,
setValue: PropTypes.func.isRequired,
values: PropTypes.object.isRequired,
};
TemplateSearchField.defaultProps = {
labelText: null,
defaultValue: '',
};