populate initial values in the plugin form

This commit is contained in:
Vardan Bansal 2023-09-20 02:00:20 -07:00
parent d16b3995f4
commit 1393fcd0e2

View File

@ -347,11 +347,19 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
return {} return {}
}, []) }, [])
const getInitialFormValues = useCallback((pluginInputs: Record<string, any>): Record<string, any> => {
const initialValueMap: Record<string, any> = {}
Object.keys(pluginInputs).forEach((field: string) => {
const value = get(pluginInputs, `${field}.default`)
if (value) {
initialValueMap[field] = value
}
})
return initialValueMap
}, [])
const renderPluginConfigForm = useCallback((): JSX.Element => { const renderPluginConfigForm = useCallback((): JSX.Element => {
const pluginInputs = getPluginInputsFromSpec(get(plugin, 'spec', '') as string) const pluginInputs = getPluginInputsFromSpec(get(plugin, 'spec', '') as string)
if (category === PluginCategory.Drone && Object.keys(pluginInputs).length === 0) {
return <></>
}
const allPluginInputs = insertNameFieldToPluginInputs(pluginInputs) const allPluginInputs = insertNameFieldToPluginInputs(pluginInputs)
return ( return (
<Layout.Vertical spacing="large" className={css.configForm}> <Layout.Vertical spacing="large" className={css.configForm}>
@ -377,7 +385,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
</Layout.Horizontal> </Layout.Horizontal>
<Container className={css.form}> <Container className={css.form}>
<Formik <Formik
initialValues={{}} initialValues={getInitialFormValues(pluginInputs)}
onSubmit={formData => { onSubmit={formData => {
onPluginAddUpdate?.(false, constructPayloadForYAMLInsertion(formData, plugin)) onPluginAddUpdate?.(false, constructPayloadForYAMLInsertion(formData, plugin))
}}> }}>
@ -513,12 +521,14 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
/> />
</Accordion> </Accordion>
</Layout.Vertical> </Layout.Vertical>
) : ( ) : Object.keys(pluginInputs).length > 0 ? (
<Layout.Vertical width="inherit"> <Layout.Vertical width="inherit">
{Object.keys(allPluginInputs).map((field: string) => { {Object.keys(allPluginInputs).map((field: string) => {
return renderPluginFormField({ name: field, properties: get(allPluginInputs, field) }) return renderPluginFormField({ name: field, properties: get(allPluginInputs, field) })
})} })}
</Layout.Vertical> </Layout.Vertical>
) : (
<></>
)} )}
</Layout.Vertical> </Layout.Vertical>
<Container margin={{ top: 'small', bottom: 'small' }}> <Container margin={{ top: 'small', bottom: 'small' }}>