From 1393fcd0e23a06b086fea5aad75db396d513435c Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 20 Sep 2023 02:00:20 -0700
Subject: [PATCH] populate initial values in the plugin form

---
 .../components/PluginsPanel/PluginsPanel.tsx  | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index 6262c2386..c7e25bac0 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -347,11 +347,19 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
     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 pluginInputs = getPluginInputsFromSpec(get(plugin, 'spec', '') as string)
-    if (category === PluginCategory.Drone && Object.keys(pluginInputs).length === 0) {
-      return <></>
-    }
     const allPluginInputs = insertNameFieldToPluginInputs(pluginInputs)
     return (
       <Layout.Vertical spacing="large" className={css.configForm}>
@@ -377,7 +385,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
         </Layout.Horizontal>
         <Container className={css.form}>
           <Formik
-            initialValues={{}}
+            initialValues={getInitialFormValues(pluginInputs)}
             onSubmit={formData => {
               onPluginAddUpdate?.(false, constructPayloadForYAMLInsertion(formData, plugin))
             }}>
@@ -513,12 +521,14 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
                         />
                       </Accordion>
                     </Layout.Vertical>
-                  ) : (
+                  ) : Object.keys(pluginInputs).length > 0 ? (
                     <Layout.Vertical width="inherit">
                       {Object.keys(allPluginInputs).map((field: string) => {
                         return renderPluginFormField({ name: field, properties: get(allPluginInputs, field) })
                       })}
                     </Layout.Vertical>
+                  ) : (
+                    <></>
                   )}
                 </Layout.Vertical>
                 <Container margin={{ top: 'small', bottom: 'small' }}>