diff --git a/ui/src/components/SchemaForm/index.tsx b/ui/src/components/SchemaForm/index.tsx index 34f5b2c6..f811e81b 100644 --- a/ui/src/components/SchemaForm/index.tsx +++ b/ui/src/components/SchemaForm/index.tsx @@ -148,6 +148,35 @@ const SchemaForm: ForwardRefRenderFunction = ( } const keys = Object.keys(properties); + /** + * Prevent components such as `select` from having default values, + * which are not generated on `formData` + */ + const setDefaultValueAsDomBehaviour = () => { + keys.forEach((k) => { + const formVal = formData[k]?.value; + const metaProp = properties[k]; + const uiCtrl = uiSchema[k]?.['ui:widget']; + if ( + !metaProp || + !uiCtrl || + formVal || + formVal === 0 || + formVal === false + ) { + return; + } + if (uiCtrl === 'select' && metaProp.enum?.[0] !== undefined) { + formData[k] = { + errorMsg: '', + isInvalid: false, + value: metaProp.enum?.[0], + }; + console.log('formData[k]: ', k, formData[k]); + } + }); + }; + setDefaultValueAsDomBehaviour(); const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; @@ -297,16 +326,17 @@ const SchemaForm: ForwardRefRenderFunction = ( } }; - const handleCheckboxChange = ( + const handleInputCheck = ( e: React.ChangeEvent, index: number, ) => { - const { name } = e.target; + const { name, checked } = e.currentTarget; + const freshVal = checked ? schema.properties[name]?.enum?.[index] : ''; const data = { ...formData, [name]: { ...formData[name], - value: schema.properties[name]?.enum?.[index], + value: freshVal, isInvalid: false, }, }; @@ -324,6 +354,7 @@ const SchemaForm: ForwardRefRenderFunction = ( {keys.map((key) => { const { title, description, label } = properties[key]; const { 'ui:widget': widget = 'input' } = uiSchema[key] || {}; + if (widget === 'select') { return ( = ( ); } + if (widget === 'checkbox' || widget === 'radio') { return ( = ( feedback={formData[key]?.errorMsg} feedbackType="invalid" isInvalid={formData[key].isInvalid} - onChange={(e) => handleCheckboxChange(e, index)} + onChange={(e) => handleInputCheck(e, index)} /> ); })} @@ -544,11 +576,8 @@ export const initFormData = (schema: JSONSchema): Type.FormDataType => { const formData: Type.FormDataType = {}; Object.keys(schema.properties).forEach((key) => { const prop = schema.properties[key]; - let defaultVal = prop?.default; - if (typeof defaultVal === 'undefined' && Array.isArray(prop?.enum)) { - // eslint-disable-next-line prefer-destructuring - defaultVal = prop.enum[0]; - } + const defaultVal = prop?.default; + formData[key] = { value: defaultVal, isInvalid: false, diff --git a/ui/src/pages/Admin/Plugins/Config/index.tsx b/ui/src/pages/Admin/Plugins/Config/index.tsx index 75edfb66..2a5bc0c1 100644 --- a/ui/src/pages/Admin/Plugins/Config/index.tsx +++ b/ui/src/pages/Admin/Plugins/Config/index.tsx @@ -16,8 +16,7 @@ const Config = () => { const { data } = useQueryPluginConfig({ plugin_slug_name: slug_name }); const Toast = useToast(); const [schema, setSchema] = useState(null); - - const uiSchema: UISchema = {}; + const [uiSchema, setUISchema] = useState(); const required: string[] = []; const [formData, setFormData] = useState(null); @@ -27,7 +26,7 @@ const Config = () => { return; } const properties: JSONSchema['properties'] = {}; - + const uiConf: UISchema = {}; data.config_fields?.forEach((item) => { properties[item.name] = { type: 'string', @@ -42,28 +41,27 @@ const Config = () => { (option) => option.label, ); } - + uiConf[item.name] = {}; + uiConf[item.name]['ui:widget'] = item.type; if (item.ui_options) { if ((item.ui_options as InputOptions & { input_type })?.input_type) { (item.ui_options as InputOptions).inputType = ( item.ui_options as InputOptions & { input_type } ).input_type; } - uiSchema[item.name] = { - 'ui:options': item.ui_options, - }; + uiConf[item.name]['ui:options'] = item.ui_options; } if (item.required) { required.push(item.name); } }); - const result = { title: data?.name || '', required, properties, }; setSchema(result); + setUISchema(uiConf); setFormData(initFormData(result)); }, [data?.config_fields]);