From 928c1c23d33fc4aeaddbb1a8397d78372ae5bf7d Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 27 Sep 2023 16:11:31 -0700
Subject: [PATCH 01/10] initial commit

---
 web/src/components/MultiList/MultiList.tsx    |  79 ++++
 .../MultiList/MultiList.tsx.module.scss       |   3 +
 .../MultiList/MultiList.tsx.module.scss.d.ts  |  19 +
 .../PluginsPanel/PluginsPanel.module.scss     |   4 +
 .../PluginsPanel.module.scss.d.ts             |   1 +
 .../components/PluginsPanel/PluginsPanel.tsx  | 379 ++++++++++--------
 6 files changed, 323 insertions(+), 162 deletions(-)
 create mode 100644 web/src/components/MultiList/MultiList.tsx
 create mode 100644 web/src/components/MultiList/MultiList.tsx.module.scss
 create mode 100644 web/src/components/MultiList/MultiList.tsx.module.scss.d.ts

diff --git a/web/src/components/MultiList/MultiList.tsx b/web/src/components/MultiList/MultiList.tsx
new file mode 100644
index 000000000..55ab76615
--- /dev/null
+++ b/web/src/components/MultiList/MultiList.tsx
@@ -0,0 +1,79 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { get } from 'lodash'
+import { FormikContextType, connect } from 'formik'
+import { Layout, Text, FormInput, Button, ButtonVariation, ButtonSize } from '@harnessio/uicore'
+import { FontVariation } from '@harnessio/design-system'
+import { useStrings } from 'framework/strings'
+
+import css from './MultiList.tsx.module.scss'
+
+interface MultiListConnectedProps extends MultiListProps {
+  formik?: FormikContextType<any>
+}
+
+interface MultiListProps {
+  name: string
+  label: string
+  readOnly?: boolean
+}
+
+export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedProps): JSX.Element => {
+  const { getString } = useStrings()
+  const [rowCount, setRowCount] = useState<number>(0)
+
+  useEffect(() => {
+    formik?.setFieldValue(name, getListValues())
+  }, [rowCount])
+
+  const getListValues = useCallback((): string[] => {
+    const existingValues = []
+    for (let fieldIdx = 0; fieldIdx < rowCount; fieldIdx++) {
+      const fieldName = getFieldName(fieldIdx)
+      const fieldValue = get(formik?.values, fieldName)
+      if (fieldValue) {
+        existingValues.push(get(formik?.values, getFieldName(fieldIdx)))
+      }
+    }
+    return existingValues
+  }, [rowCount])
+
+  const getFieldName = useCallback(
+    (index: number): string => {
+      return `${name}-${index}`
+    },
+    [name]
+  )
+
+  const handleAdd = (): void => {
+    setRowCount((existingCount: number) => existingCount + 1)
+  }
+
+  const renderRow = useCallback((rowIndex: number): React.ReactElement => {
+    return <FormInput.Text name={getFieldName(rowIndex)} disabled={readOnly} />
+  }, [])
+
+  const renderRows = useCallback((numOfRows: number): React.ReactElement => {
+    const rows: React.ReactElement[] = []
+    for (let idx = 0; idx < numOfRows; idx++) {
+      rows.push(renderRow(idx))
+    }
+    return <Layout.Vertical spacing="small">{rows}</Layout.Vertical>
+  }, [])
+
+  return (
+    <Layout.Vertical spacing="xsmall">
+      <Text font={{ variation: FontVariation.FORM_LABEL }}>{label}</Text>
+      {renderRows(rowCount)}
+      <Button
+        text={getString('addLabel')}
+        rightIcon="plus"
+        variation={ButtonVariation.PRIMARY}
+        size={ButtonSize.SMALL}
+        className={css.addBtn}
+        onClick={handleAdd}
+      />
+    </Layout.Vertical>
+  )
+}
+
+export default connect(MultiList)
diff --git a/web/src/components/MultiList/MultiList.tsx.module.scss b/web/src/components/MultiList/MultiList.tsx.module.scss
new file mode 100644
index 000000000..18caa6d41
--- /dev/null
+++ b/web/src/components/MultiList/MultiList.tsx.module.scss
@@ -0,0 +1,3 @@
+.addBtn {
+  width: fit-content;
+}
diff --git a/web/src/components/MultiList/MultiList.tsx.module.scss.d.ts b/web/src/components/MultiList/MultiList.tsx.module.scss.d.ts
new file mode 100644
index 000000000..e4340bfcb
--- /dev/null
+++ b/web/src/components/MultiList/MultiList.tsx.module.scss.d.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2023 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+// This is an auto-generated file
+export declare const addBtn: string
diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss b/web/src/components/PluginsPanel/PluginsPanel.module.scss
index 804657251..ca4f0a7dd 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.module.scss
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss
@@ -68,6 +68,10 @@
 .formFields {
   height: calc(100% - var(--spacing-xlarge));
   overflow-y: scroll;
+
+  .toggle {
+    margin-left: var(--spacing-1) !important;
+  }
 }
 
 .search {
diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
index 47b83ce46..4e6379c10 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
@@ -29,3 +29,4 @@ export declare const pluginDetailsPanel: string
 export declare const pluginIcon: string
 export declare const plugins: string
 export declare const search: string
+export declare const toggle: string
diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index f08d9cbfc..ab09952d4 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useEffect, useState } from 'react'
-import { Formik } from 'formik'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { Formik, FormikContextType } from 'formik'
 import { parse } from 'yaml'
 import { capitalize, get, has, omit, set } from 'lodash-es'
 import { Classes, PopoverInteractionKind, PopoverPosition } from '@blueprintjs/core'
@@ -36,6 +36,7 @@ import {
 } from '@harnessio/uicore'
 import type { TypesPlugin } from 'services/code'
 import { useStrings } from 'framework/strings'
+import { MultiList } from 'components/MultiList/MultiList'
 
 import css from './PluginsPanel.module.scss'
 
@@ -47,8 +48,16 @@ export interface PluginForm {
   [key: string]: string | boolean | object
 }
 
+enum ValueType {
+  STRING = 'string',
+  BOOLEAN = 'boolean',
+  NUMBER = 'number',
+  ARRAY = 'array',
+  OBJECT = 'object'
+}
+
 interface PluginInput {
-  type: 'string'
+  type: ValueType
   description?: string
   default?: string
   options?: { isExtended?: boolean }
@@ -106,14 +115,22 @@ const RunStep: TypesPlugin = {
   uid: 'run'
 }
 
+const DockerTemp: TypesPlugin = {
+  uid: 'docker',
+  description: 'The Docker plugin can be used to build and publish images to the Docker\nregistry.\n',
+  logo: '',
+  spec: '{\n  "kind": "plugin",\n  "type": "step",\n  "name": "docker",\n  "spec": {\n    "name": "Docker",\n    "description": "The Docker plugin can be used to build and publish images to the Docker\\nregistry.\\n",\n    "step": {\n      "type": "script",\n      "spec": {\n        "image": "plugins/docker",\n        "envs": {\n          "PLUGIN_ADD_HOST": "${{ inputs.add_host }}",\n          "PLUGIN_AUTO_TAG": "${{ inputs.auto_tag }}",\n          "PLUGIN_AUTO_TAG_SUFFIX": "${{ inputs.auto_tag_suffix }}",\n          "PLUGIN_BIP": "${{ inputs.bip }}",\n          "PLUGIN_BUILD_ARGS": "${{ inputs.build_args }}",\n          "PLUGIN_BUILD_ARGS_FROM_ENV": "${{ inputs.build_args_from_env }}",\n          "PLUGIN_CACHE_FROM": "${{ inputs.cache_from }}",\n          "PLUGIN_COMPRESS": "${{ inputs.compress }}",\n          "PLUGIN_CONTEXT": "${{ inputs.context }}",\n          "PLUGIN_CUSTOM_DNS": "${{ inputs.custom_dns }}",\n          "PLUGIN_CUSTOM_DNS_SEARCH": "${{ inputs.custom_dns_search }}",\n          "PLUGIN_CUSTOM_LABELS": "${{ inputs.custom_labels }}",\n          "PLUGIN_DAEMON_OFF": "${{ inputs.daemon_off }}",\n          "PLUGIN_DEBUG": "${{ inputs.debug }}",\n          "PLUGIN_DOCKERFILE": "${{ inputs.dockerfile }}",\n          "PLUGIN_DRY_RUN": "${{ inputs.dry_run }}",\n          "PLUGIN_EMAIL": "${{ inputs.email }}",\n          "PLUGIN_EXPERIMENTAL": "${{ inputs.experimental }}",\n          "PLUGIN_FORCE_TAG": "${{ inputs.force_tag }}",\n          "PLUGIN_INSECURE": "${{ inputs.insecure }}",\n          "PLUGIN_IPV6": "${{ inputs.ipv6 }}",\n          "PLUGIN_LABEL_SCHEMA": "${{ inputs.label_schema }}",\n          "PLUGIN_LAUNCH_DEBUG": "${{ inputs.launch_debug }}",\n          "PLUGIN_MIRROR": "${{ inputs.mirror }}",\n          "PLUGIN_MTU": "${{ inputs.mtu }}",\n          "PLUGIN_NO_CACHE": "${{ inputs.no_cache }}",\n          "PLUGIN_PASSWORD": "${{ inputs.password }}",\n          "PLUGIN_PLATFORM": "${{ inputs.platform }}",\n          "PLUGIN_PULL_IMAGE": "${{ inputs.pull_image }}",\n          "PLUGIN_PURGE": "${{ inputs.purge }}",\n          "PLUGIN_REGISTRY": "${{ inputs.registry }}",\n          "PLUGIN_REPO": "${{ inputs.repo }}",\n          "PLUGIN_SECRET": "${{ inputs.secret }}",\n          "PLUGIN_SQUASH": "${{ inputs.squash }}",\n          "PLUGIN_SSH-AGENT-KEY": "${{ inputs.ssh-agent-key }}",\n          "PLUGIN_STORAGE_DRIVER": "${{ inputs.storage_driver }}",\n          "PLUGIN_STORAGE_PATH": "${{ inputs.storage_path }}",\n          "PLUGIN_TAGS": "${{ inputs.tags }}",\n          "PLUGIN_TARGET": "${{ inputs.target }}",\n          "PLUGIN_USERNAME": "${{ inputs.username }}"\n        }\n      }\n    },\n    "inputs": {\n      "add_host": {\n        "type": "string",\n        "description": "additional host:IP mapping"\n      },\n      "auto_tag": {\n        "type": "boolean",\n        "description": "generate tag names automatically based on git branch and git tag"\n      },\n      "auto_tag_suffix": {\n        "type": "string",\n        "description": "generate tag names with this suffix"\n      },\n      "bip": {\n        "type": "boolean",\n        "description": "use for pass bridge ip"\n      },\n      "build_args": {\n        "type": "string",\n        "description": "pass custom arguments to docker build"\n      },\n      "build_args_from_env": {\n        "type": "string",\n        "description": "pass the envvars as custom arguments to docker build"\n      },\n      "cache_from": {\n        "type": "string",\n        "description": "images to consider as cache sources"\n      },\n      "compress": {\n        "type": "boolean",\n        "description": "compress the build context using gzip"\n      },\n      "context": {\n        "type": "string",\n        "description": "the context path to use, defaults to root of the git repo"\n      },\n      "custom_dns": {\n        "type": "string",\n        "description": "set custom dns servers for the container"\n      },\n      "custom_dns_search": {\n        "type": "string",\n        "description": "docker daemon dns search domains"\n      },\n      "custom_labels": {\n        "type": "string",\n        "description": "additional k=v labels"\n      },\n      "daemon_off": {\n        "type": "boolean",\n        "description": "don\'t start the docker daemon"\n      },\n      "debug": {\n        "type": "boolean",\n        "description": "launch the docker daemon in verbose debug mode"\n      },\n      "dockerfile": {\n        "type": "string",\n        "description": "dockerfile to be used",\n        "default": "Dockerfile"\n      },\n      "dry_run": {\n        "type": "string",\n        "description": "boolean if the docker image should not be pushed at the end"\n      },\n      "email": {\n        "type": "string",\n        "description": "docker email"\n      },\n      "experimental": {\n        "type": "boolean",\n        "description": "docker daemon Experimental mode"\n      },\n      "force_tag": {\n        "type": "boolean",\n        "description": "replace existing matched image tags"\n      },\n      "insecure": {\n        "type": "boolean",\n        "description": "enable insecure communication to this registry"\n      },\n      "ipv6": {\n        "type": "string",\n        "description": "docker daemon IPv6 networking"\n      },\n      "label_schema": {\n        "type": "string",\n        "description": "label-schema labels"\n      },\n      "launch_debug": {\n        "type": "boolean",\n        "description": "launch the docker daemon in verbose debug mode"\n      },\n      "mirror": {\n        "type": "string",\n        "description": "use a mirror registry instead of pulling images directly from the central Hub"\n      },\n      "mtu": {\n        "type": "string",\n        "description": "docker daemon custom mtu setting"\n      },\n      "no_cache": {\n        "type": "string",\n        "description": "do not use cached intermediate containers"\n      },\n      "password": {\n        "type": "string",\n        "description": "authenticates with this password",\n        "mask": true\n      },\n      "platform": {\n        "type": "string",\n        "description": "specify the target platform for the build output, (for example, linux/amd64, linux/arm64, or darwin/amd64)."\n      },\n      "pull_image": {\n        "type": "boolean",\n        "description": "force pull base image at build time"\n      },\n      "purge": {\n        "type": "boolean",\n        "description": "boolean if cleanup of the docker image should be done at the end",\n        "default": "true"\n      },\n      "registry": {\n        "type": "string",\n        "description": "authenticates to this registry"\n      },\n      "repo": {\n        "type": "string",\n        "description": "repository name for the image"\n      },\n      "secret": {\n        "type": "string",\n        "description": "Use buildkit to pass secrets to the dockerbuild. Eg `id=mysecret,src=secret-file`"\n      },\n      "squash": {\n        "type": "boolean",\n        "description": "squash the layers at build time"\n      },\n      "ssh-agent-key": {\n        "type": "string",\n        "description": "private key to use for ssh passthrough, see https://docs.docker.com/engine/reference/commandline/buildx_build/#ssh\\n",\n        "mask": true\n      },\n      "storage_driver": {\n        "type": "string",\n        "description": "supports `aufs`, `overlay` or `vfs` drivers"\n      },\n      "storage_path": {\n        "type": "string",\n        "description": "docker daemon storage path"\n      },\n      "tags": {\n        "type": "array",\n        "description": "repository tag(s) for the image"\n      },\n      "target": {\n        "type": "string",\n        "description": "the build target to use, must be defined in the docker file"\n      },\n      "username": {\n        "type": "string",\n        "description": "authenticates with this username"\n      }\n    }\n  }\n}\n'
+}
+
 export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.Element => {
   const { getString } = useStrings()
-  const [category, setCategory] = useState<PluginCategory>()
-  const [panelView, setPanelView] = useState<PluginPanelView>(PluginPanelView.Category)
-  const [plugin, setPlugin] = useState<TypesPlugin>()
+  const [category, setCategory] = useState<PluginCategory>(PluginCategory.Drone)
+  const [panelView, setPanelView] = useState<PluginPanelView>(PluginPanelView.Configuration)
+  const [plugin, setPlugin] = useState<TypesPlugin>(DockerTemp)
   const [plugins, setPlugins] = useState<TypesPlugin[]>([])
   const [query, setQuery] = useState<string>('')
   const [loading, setLoading] = useState<boolean>(false)
+  const formikRef = useRef<FormikContextType<PluginForm>>()
 
   const PluginCategories: PluginCategoryInterface[] = [
     {
@@ -315,18 +332,45 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
 
   const renderPluginFormField = ({ name, properties }: { name: string; properties: PluginInput }): JSX.Element => {
     const { type, options } = properties
-    const { isExtended } = options || {}
-    const WrapperComponent = isExtended ? FormInput.TextArea : FormInput.Text
-    return type === 'string' ? (
-      <WrapperComponent
-        name={name}
-        label={generateLabelForPluginField({ name, properties })}
-        style={{ width: '100%' }}
-        key={name}
-      />
-    ) : (
-      <></>
-    )
+
+    switch (type) {
+      case ValueType.STRING: {
+        const { isExtended } = options || {}
+        const WrapperComponent = isExtended ? FormInput.TextArea : FormInput.Text
+        return (
+          <WrapperComponent
+            name={name}
+            label={generateLabelForPluginField({ name, properties })}
+            style={{ width: '100%' }}
+            key={name}
+          />
+        )
+      }
+      case ValueType.BOOLEAN:
+        return (
+          <Container className={css.toggle}>
+            <FormInput.Toggle
+              name={name}
+              label={generateLabelForPluginField({ name, properties }) as string}
+              style={{ width: '100%' }}
+              key={name}
+            />
+          </Container>
+        )
+      case ValueType.ARRAY:
+        return (
+          <Container margin={{ bottom: 'large' }}>
+            <MultiList
+              name={name}
+              label={generateLabelForPluginField({ name, properties }) as string}
+              formik={formikRef.current}
+            />
+          </Container>
+        )
+
+      default:
+        return <></>
+    }
   }
 
   const constructPayloadForYAMLInsertion = (pluginFormData: PluginForm, pluginMetadata?: TypesPlugin): PluginForm => {
@@ -403,7 +447,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
             name="arrow-left"
             size={18}
             onClick={() => {
-              setPlugin(undefined)
+              // setPlugin(undefined)
               if (category === PluginCategory.Drone) {
                 setPanelView(PluginPanelView.Listing)
               } else if (category === PluginCategory.Harness) {
@@ -423,150 +467,161 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
             initialValues={getInitialFormValues(pluginInputs)}
             onSubmit={(formData: PluginForm) => {
               onPluginAddUpdate?.(false, constructPayloadForYAMLInsertion(formData, plugin))
-            }}>
-            <FormikForm height="100%" flex={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
-              <Layout.Vertical flex={{ alignItems: 'flex-start' }} height="inherit" spacing="medium">
-                <Layout.Vertical
-                  width="100%"
-                  className={css.formFields}
-                  spacing="xsmall"
-                  flex={{ justifyContent: 'space-between' }}>
-                  {category === PluginCategory.Harness ? (
-                    <Layout.Vertical width="inherit">
-                      <FormInput.Text name={'name'} label={getString('name')} style={{ width: '100%' }} key={'name'} />
-                      <FormInput.TextArea
-                        name={'script'}
-                        label={getString('pluginsPanel.run.script')}
-                        style={{ width: '100%' }}
-                        key={'script'}
-                      />
-                      <FormInput.Select
-                        name={'shell'}
-                        label={getString('pluginsPanel.run.shell')}
-                        style={{ width: '100%' }}
-                        key={'shell'}
-                        items={[
-                          { label: getString('pluginsPanel.run.sh'), value: 'sh' },
-                          { label: getString('pluginsPanel.run.bash'), value: 'bash' },
-                          { label: getString('pluginsPanel.run.powershell'), value: 'powershell' },
-                          { label: getString('pluginsPanel.run.pwsh'), value: 'pwsh' }
-                        ]}
-                      />
-                      <Accordion activeId="">
-                        <Accordion.Panel
-                          id="container"
-                          summary="Container"
-                          details={
-                            <Layout.Vertical className={css.indent}>
-                              <FormInput.Text
-                                name={'container.image'}
-                                label={getString('pluginsPanel.run.image')}
-                                style={{ width: '100%' }}
-                                key={'container.image'}
-                              />
-                              <FormInput.Select
-                                name={'container.pull'}
-                                label={getString('pluginsPanel.run.pull')}
-                                style={{ width: '100%' }}
-                                key={'container.pull'}
-                                items={[
-                                  { label: getString('pluginsPanel.run.always'), value: 'always' },
-                                  { label: getString('pluginsPanel.run.never'), value: 'never' },
-                                  { label: getString('pluginsPanel.run.ifNotExists'), value: 'if-not-exists' }
-                                ]}
-                              />
-                              <FormInput.Text
-                                name={'container.entrypoint'}
-                                label={getString('pluginsPanel.run.entrypoint')}
-                                style={{ width: '100%' }}
-                                key={'container.entrypoint'}
-                              />
-                              <FormInput.Text
-                                name={'container.network'}
-                                label={getString('pluginsPanel.run.network')}
-                                style={{ width: '100%' }}
-                                key={'container.network'}
-                              />
-                              <FormInput.Text
-                                name={'container.networkMode'}
-                                label={getString('pluginsPanel.run.networkMode')}
-                                style={{ width: '100%' }}
-                                key={'container.networkMode'}
-                              />
-                              <FormInput.Toggle
-                                name={'container.privileged'}
-                                label={getString('pluginsPanel.run.privileged')}
-                                style={{ width: '100%' }}
-                                key={'container.privileged'}
-                              />
-                              <FormInput.Text
-                                name={'container.user'}
-                                label={getString('user')}
-                                style={{ width: '100%' }}
-                                key={'container.user'}
-                              />
-                              <Accordion activeId="">
-                                <Accordion.Panel
-                                  id="container.credentials"
-                                  summary={getString('pluginsPanel.run.credentials')}
-                                  details={
-                                    <Layout.Vertical className={css.indent}>
-                                      <FormInput.Text
-                                        name={'container.credentials.username'}
-                                        label={getString('pluginsPanel.run.username')}
-                                        style={{ width: '100%' }}
-                                        key={'container.credentials.username'}
-                                      />
-                                      <FormInput.Text
-                                        name={'container.credentials.password'}
-                                        label={getString('pluginsPanel.run.password')}
-                                        style={{ width: '100%' }}
-                                        key={'container.credentials.password'}
-                                      />
-                                    </Layout.Vertical>
-                                  }
-                                />
-                              </Accordion>
-                            </Layout.Vertical>
-                          }
-                        />
-                        <Accordion.Panel
-                          id="mount"
-                          summary="Mount"
-                          details={
-                            <Layout.Vertical className={css.indent}>
-                              <FormInput.Text
-                                name={'mount.name'}
-                                label={getString('name')}
-                                style={{ width: '100%' }}
-                                key={'mount.name'}
-                              />
-                              <FormInput.Text
-                                name={'mount.path'}
-                                label={getString('pluginsPanel.run.path')}
-                                style={{ width: '100%' }}
-                                key={'mount.path'}
-                              />
-                            </Layout.Vertical>
-                          }
-                        />
-                      </Accordion>
+            }}
+            validate={(formData: PluginForm) => console.log(formData)}>
+            {formik => {
+              formikRef.current = formik
+              return (
+                <FormikForm height="100%" flex={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
+                  <Layout.Vertical flex={{ alignItems: 'flex-start' }} height="inherit" spacing="medium">
+                    <Layout.Vertical
+                      width="100%"
+                      className={css.formFields}
+                      spacing="xsmall"
+                      flex={{ justifyContent: 'space-between' }}>
+                      {category === PluginCategory.Harness ? (
+                        <Layout.Vertical width="inherit">
+                          <FormInput.Text
+                            name={'name'}
+                            label={getString('name')}
+                            style={{ width: '100%' }}
+                            key={'name'}
+                          />
+                          <FormInput.TextArea
+                            name={'script'}
+                            label={getString('pluginsPanel.run.script')}
+                            style={{ width: '100%' }}
+                            key={'script'}
+                          />
+                          <FormInput.Select
+                            name={'shell'}
+                            label={getString('pluginsPanel.run.shell')}
+                            style={{ width: '100%' }}
+                            key={'shell'}
+                            items={[
+                              { label: getString('pluginsPanel.run.sh'), value: 'sh' },
+                              { label: getString('pluginsPanel.run.bash'), value: 'bash' },
+                              { label: getString('pluginsPanel.run.powershell'), value: 'powershell' },
+                              { label: getString('pluginsPanel.run.pwsh'), value: 'pwsh' }
+                            ]}
+                          />
+                          <Accordion activeId="">
+                            <Accordion.Panel
+                              id="container"
+                              summary="Container"
+                              details={
+                                <Layout.Vertical className={css.indent}>
+                                  <FormInput.Text
+                                    name={'container.image'}
+                                    label={getString('pluginsPanel.run.image')}
+                                    style={{ width: '100%' }}
+                                    key={'container.image'}
+                                  />
+                                  <FormInput.Select
+                                    name={'container.pull'}
+                                    label={getString('pluginsPanel.run.pull')}
+                                    style={{ width: '100%' }}
+                                    key={'container.pull'}
+                                    items={[
+                                      { label: getString('pluginsPanel.run.always'), value: 'always' },
+                                      { label: getString('pluginsPanel.run.never'), value: 'never' },
+                                      { label: getString('pluginsPanel.run.ifNotExists'), value: 'if-not-exists' }
+                                    ]}
+                                  />
+                                  <FormInput.Text
+                                    name={'container.entrypoint'}
+                                    label={getString('pluginsPanel.run.entrypoint')}
+                                    style={{ width: '100%' }}
+                                    key={'container.entrypoint'}
+                                  />
+                                  <FormInput.Text
+                                    name={'container.network'}
+                                    label={getString('pluginsPanel.run.network')}
+                                    style={{ width: '100%' }}
+                                    key={'container.network'}
+                                  />
+                                  <FormInput.Text
+                                    name={'container.networkMode'}
+                                    label={getString('pluginsPanel.run.networkMode')}
+                                    style={{ width: '100%' }}
+                                    key={'container.networkMode'}
+                                  />
+                                  <FormInput.Toggle
+                                    name={'container.privileged'}
+                                    label={getString('pluginsPanel.run.privileged')}
+                                    style={{ width: '100%' }}
+                                    key={'container.privileged'}
+                                  />
+                                  <FormInput.Text
+                                    name={'container.user'}
+                                    label={getString('user')}
+                                    style={{ width: '100%' }}
+                                    key={'container.user'}
+                                  />
+                                  <Accordion activeId="">
+                                    <Accordion.Panel
+                                      id="container.credentials"
+                                      summary={getString('pluginsPanel.run.credentials')}
+                                      details={
+                                        <Layout.Vertical className={css.indent}>
+                                          <FormInput.Text
+                                            name={'container.credentials.username'}
+                                            label={getString('pluginsPanel.run.username')}
+                                            style={{ width: '100%' }}
+                                            key={'container.credentials.username'}
+                                          />
+                                          <FormInput.Text
+                                            name={'container.credentials.password'}
+                                            label={getString('pluginsPanel.run.password')}
+                                            style={{ width: '100%' }}
+                                            key={'container.credentials.password'}
+                                          />
+                                        </Layout.Vertical>
+                                      }
+                                    />
+                                  </Accordion>
+                                </Layout.Vertical>
+                              }
+                            />
+                            <Accordion.Panel
+                              id="mount"
+                              summary="Mount"
+                              details={
+                                <Layout.Vertical className={css.indent}>
+                                  <FormInput.Text
+                                    name={'mount.name'}
+                                    label={getString('name')}
+                                    style={{ width: '100%' }}
+                                    key={'mount.name'}
+                                  />
+                                  <FormInput.Text
+                                    name={'mount.path'}
+                                    label={getString('pluginsPanel.run.path')}
+                                    style={{ width: '100%' }}
+                                    key={'mount.path'}
+                                  />
+                                </Layout.Vertical>
+                              }
+                            />
+                          </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>
-                  ) : 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' }}>
-                  <Button variation={ButtonVariation.PRIMARY} text={getString('addLabel')} type="submit" />
-                </Container>
-              </Layout.Vertical>
-            </FormikForm>
+                    <Container margin={{ top: 'small', bottom: 'small' }}>
+                      <Button variation={ButtonVariation.PRIMARY} text={getString('addLabel')} type="submit" />
+                    </Container>
+                  </Layout.Vertical>
+                </FormikForm>
+              )
+            }}
           </Formik>
         </Container>
       </Layout.Vertical>

From 47b2e8f2f877e4a99516ed999bc54eaaa73ae0fa Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 27 Sep 2023 16:56:54 -0700
Subject: [PATCH 02/10] fix css file name

---
 .../{MultiList.tsx.module.scss => MultiList.module.scss}        | 0
 ...ultiList.tsx.module.scss.d.ts => MultiList.module.scss.d.ts} | 0
 web/src/components/MultiList/MultiList.tsx                      | 2 +-
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename web/src/components/MultiList/{MultiList.tsx.module.scss => MultiList.module.scss} (100%)
 rename web/src/components/MultiList/{MultiList.tsx.module.scss.d.ts => MultiList.module.scss.d.ts} (100%)

diff --git a/web/src/components/MultiList/MultiList.tsx.module.scss b/web/src/components/MultiList/MultiList.module.scss
similarity index 100%
rename from web/src/components/MultiList/MultiList.tsx.module.scss
rename to web/src/components/MultiList/MultiList.module.scss
diff --git a/web/src/components/MultiList/MultiList.tsx.module.scss.d.ts b/web/src/components/MultiList/MultiList.module.scss.d.ts
similarity index 100%
rename from web/src/components/MultiList/MultiList.tsx.module.scss.d.ts
rename to web/src/components/MultiList/MultiList.module.scss.d.ts
diff --git a/web/src/components/MultiList/MultiList.tsx b/web/src/components/MultiList/MultiList.tsx
index 55ab76615..baa14f5a0 100644
--- a/web/src/components/MultiList/MultiList.tsx
+++ b/web/src/components/MultiList/MultiList.tsx
@@ -5,7 +5,7 @@ import { Layout, Text, FormInput, Button, ButtonVariation, ButtonSize } from '@h
 import { FontVariation } from '@harnessio/design-system'
 import { useStrings } from 'framework/strings'
 
-import css from './MultiList.tsx.module.scss'
+import css from './MultiList.module.scss'
 
 interface MultiListConnectedProps extends MultiListProps {
   formik?: FormikContextType<any>

From 1958193ec4ea3f92d9d5f19da35a978a9a570f25 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 27 Sep 2023 22:26:41 -0700
Subject: [PATCH 03/10] implementation complete for item add

---
 web/src/components/MultiList/MultiList.tsx    | 48 ++++++++++---------
 .../components/PluginsPanel/PluginsPanel.tsx  | 12 ++++-
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/web/src/components/MultiList/MultiList.tsx b/web/src/components/MultiList/MultiList.tsx
index baa14f5a0..c82b31f14 100644
--- a/web/src/components/MultiList/MultiList.tsx
+++ b/web/src/components/MultiList/MultiList.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import { get } from 'lodash'
+import { debounce } from 'lodash'
 import { FormikContextType, connect } from 'formik'
-import { Layout, Text, FormInput, Button, ButtonVariation, ButtonSize } from '@harnessio/uicore'
+import { Layout, Text, FormInput, Button, ButtonVariation, ButtonSize, Container } from '@harnessio/uicore'
 import { FontVariation } from '@harnessio/design-system'
 import { useStrings } from 'framework/strings'
 
@@ -20,22 +20,11 @@ interface MultiListProps {
 export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedProps): JSX.Element => {
   const { getString } = useStrings()
   const [rowCount, setRowCount] = useState<number>(0)
+  const [values, setValues] = useState<string[]>([])
 
   useEffect(() => {
-    formik?.setFieldValue(name, getListValues())
-  }, [rowCount])
-
-  const getListValues = useCallback((): string[] => {
-    const existingValues = []
-    for (let fieldIdx = 0; fieldIdx < rowCount; fieldIdx++) {
-      const fieldName = getFieldName(fieldIdx)
-      const fieldValue = get(formik?.values, fieldName)
-      if (fieldValue) {
-        existingValues.push(get(formik?.values, getFieldName(fieldIdx)))
-      }
-    }
-    return existingValues
-  }, [rowCount])
+    formik?.setFieldValue(name, values)
+  }, [values])
 
   const getFieldName = useCallback(
     (index: number): string => {
@@ -44,12 +33,23 @@ export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedP
     [name]
   )
 
-  const handleAdd = (): void => {
+  const handleAddRowToList = (): void => {
     setRowCount((existingCount: number) => existingCount + 1)
   }
 
+  const handleAddItemToList = (event: React.FormEvent<HTMLInputElement>): void => {
+    const value = (event.target as HTMLInputElement).value
+    setValues((existingValues: string[]) => [...existingValues, value])
+  }
+
+  const debouncedAddItemToList = useCallback(debounce(handleAddItemToList, 300), [handleAddItemToList])
+
   const renderRow = useCallback((rowIndex: number): React.ReactElement => {
-    return <FormInput.Text name={getFieldName(rowIndex)} disabled={readOnly} />
+    return (
+      <Container margin={{ bottom: 'none' }}>
+        <FormInput.Text name={getFieldName(rowIndex)} disabled={readOnly} onChange={debouncedAddItemToList} />
+      </Container>
+    )
   }, [])
 
   const renderRows = useCallback((numOfRows: number): React.ReactElement => {
@@ -57,20 +57,22 @@ export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedP
     for (let idx = 0; idx < numOfRows; idx++) {
       rows.push(renderRow(idx))
     }
-    return <Layout.Vertical spacing="small">{rows}</Layout.Vertical>
+    return <Layout.Vertical>{rows}</Layout.Vertical>
   }, [])
 
   return (
-    <Layout.Vertical spacing="xsmall">
-      <Text font={{ variation: FontVariation.FORM_LABEL }}>{label}</Text>
-      {renderRows(rowCount)}
+    <Layout.Vertical spacing="small">
+      <Layout.Vertical>
+        <Text font={{ variation: FontVariation.FORM_LABEL }}>{label}</Text>
+        {rowCount > 0 && <Container padding={{ top: 'small' }}>{renderRows(rowCount)}</Container>}
+      </Layout.Vertical>
       <Button
         text={getString('addLabel')}
         rightIcon="plus"
         variation={ButtonVariation.PRIMARY}
         size={ButtonSize.SMALL}
         className={css.addBtn}
-        onClick={handleAdd}
+        onClick={handleAddRowToList}
       />
     </Layout.Vertical>
   )
diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index ab09952d4..f673fa4ba 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -17,7 +17,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Formik, FormikContextType } from 'formik'
 import { parse } from 'yaml'
-import { capitalize, get, has, omit, set } from 'lodash-es'
+import { capitalize, get, has, omit, pick, set } from 'lodash-es'
 import { Classes, PopoverInteractionKind, PopoverPosition } from '@blueprintjs/core'
 import { Color, FontVariation } from '@harnessio/design-system'
 import { Icon, IconProps } from '@harnessio/icons'
@@ -373,6 +373,11 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
     }
   }
 
+  /* Ensures no junk/unrecognized form values are set in the YAML */
+  const sanitizeFormData = useCallback((existingFormData: PluginForm, pluginInputs: PluginInputs): PluginForm => {
+    return pick(existingFormData, Object.keys(pluginInputs))
+  }, [])
+
   const constructPayloadForYAMLInsertion = (pluginFormData: PluginForm, pluginMetadata?: TypesPlugin): PluginForm => {
     const { name, container = {} } = pluginFormData
     let payload = { ...PluginInsertionTemplate }
@@ -466,7 +471,10 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
           <Formik<PluginForm>
             initialValues={getInitialFormValues(pluginInputs)}
             onSubmit={(formData: PluginForm) => {
-              onPluginAddUpdate?.(false, constructPayloadForYAMLInsertion(formData, plugin))
+              onPluginAddUpdate?.(
+                false,
+                constructPayloadForYAMLInsertion(sanitizeFormData(formData, pluginInputs), plugin)
+              )
             }}
             validate={(formData: PluginForm) => console.log(formData)}>
             {formik => {

From f48f947a6f31f72c67e676e3d2de77743fe83264 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 27 Sep 2023 22:53:59 -0700
Subject: [PATCH 04/10] implementation complete for item/row delete

---
 .../MultiList/MultiList.module.scss           |  4 ++
 .../MultiList/MultiList.module.scss.d.ts      |  1 +
 web/src/components/MultiList/MultiList.tsx    | 55 ++++++++++++++++---
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/web/src/components/MultiList/MultiList.module.scss b/web/src/components/MultiList/MultiList.module.scss
index 18caa6d41..7e4ccd8ec 100644
--- a/web/src/components/MultiList/MultiList.module.scss
+++ b/web/src/components/MultiList/MultiList.module.scss
@@ -1,3 +1,7 @@
 .addBtn {
   width: fit-content;
 }
+
+.deleteRowBtn {
+  cursor: pointer;
+}
diff --git a/web/src/components/MultiList/MultiList.module.scss.d.ts b/web/src/components/MultiList/MultiList.module.scss.d.ts
index e4340bfcb..4447e54b9 100644
--- a/web/src/components/MultiList/MultiList.module.scss.d.ts
+++ b/web/src/components/MultiList/MultiList.module.scss.d.ts
@@ -17,3 +17,4 @@
 /* eslint-disable */
 // This is an auto-generated file
 export declare const addBtn: string
+export declare const deleteRowBtn: string
diff --git a/web/src/components/MultiList/MultiList.tsx b/web/src/components/MultiList/MultiList.tsx
index c82b31f14..c4f38231c 100644
--- a/web/src/components/MultiList/MultiList.tsx
+++ b/web/src/components/MultiList/MultiList.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import { debounce } from 'lodash'
+import { debounce, omit } from 'lodash'
 import { FormikContextType, connect } from 'formik'
 import { Layout, Text, FormInput, Button, ButtonVariation, ButtonSize, Container } from '@harnessio/uicore'
 import { FontVariation } from '@harnessio/design-system'
+import { Icon } from '@harnessio/icons'
 import { useStrings } from 'framework/strings'
 
 import css from './MultiList.module.scss'
@@ -23,7 +24,11 @@ export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedP
   const [values, setValues] = useState<string[]>([])
 
   useEffect(() => {
-    formik?.setFieldValue(name, values)
+    if (values.length > 0) {
+      formik?.setFieldValue(name, values)
+    } else {
+      cleanupField()
+    }
   }, [values])
 
   const getFieldName = useCallback(
@@ -33,22 +38,54 @@ export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedP
     [name]
   )
 
-  const handleAddRowToList = (): void => {
+  const handleAddRowToList = useCallback((): void => {
     setRowCount((existingCount: number) => existingCount + 1)
-  }
+  }, [])
 
-  const handleAddItemToList = (event: React.FormEvent<HTMLInputElement>): void => {
+  const handleRemoveRowFromList = useCallback((removedRowIdx: number): void => {
+    setRowCount((existingCount: number) => existingCount - 1)
+    removeItemFromList(removedRowIdx)
+  }, [])
+
+  const handleAddItemToList = useCallback((event: React.FormEvent<HTMLInputElement>): void => {
     const value = (event.target as HTMLInputElement).value
     setValues((existingValues: string[]) => [...existingValues, value])
-  }
+  }, [])
+
+  const removeItemFromList = useCallback((removedRowIdx: number): void => {
+    setValues((existingValues: string[]) => {
+      const existingValuesCopy = [...existingValues]
+      if (removedRowIdx > -1) {
+        existingValuesCopy.splice(removedRowIdx, 1)
+        return existingValuesCopy
+      }
+      return existingValues
+    })
+  }, [])
+
+  const cleanupField = useCallback((): void => {
+    formik?.setValues(omit({ ...formik?.values }, name))
+  }, [formik?.values])
 
   const debouncedAddItemToList = useCallback(debounce(handleAddItemToList, 300), [handleAddItemToList])
 
   const renderRow = useCallback((rowIndex: number): React.ReactElement => {
     return (
-      <Container margin={{ bottom: 'none' }}>
-        <FormInput.Text name={getFieldName(rowIndex)} disabled={readOnly} onChange={debouncedAddItemToList} />
-      </Container>
+      <Layout.Horizontal margin={{ bottom: 'none' }} flex={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <Container width="90%">
+          <FormInput.Text name={getFieldName(rowIndex)} disabled={readOnly} onChange={debouncedAddItemToList} />
+        </Container>
+        <Icon
+          name="code-delete"
+          size={25}
+          padding={{ bottom: 'medium' }}
+          className={css.deleteRowBtn}
+          onClick={event => {
+            event.preventDefault()
+            handleRemoveRowFromList(rowIndex)
+          }}
+        />
+      </Layout.Horizontal>
     )
   }, [])
 

From 1d9af067f2743db1b6fd5d4b2cc06eb13e3750c8 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 28 Sep 2023 12:32:58 -0700
Subject: [PATCH 05/10] increase debounce duration

---
 web/src/components/MultiList/MultiList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/MultiList/MultiList.tsx b/web/src/components/MultiList/MultiList.tsx
index c4f38231c..c587e7847 100644
--- a/web/src/components/MultiList/MultiList.tsx
+++ b/web/src/components/MultiList/MultiList.tsx
@@ -67,7 +67,7 @@ export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedP
     formik?.setValues(omit({ ...formik?.values }, name))
   }, [formik?.values])
 
-  const debouncedAddItemToList = useCallback(debounce(handleAddItemToList, 300), [handleAddItemToList])
+  const debouncedAddItemToList = useCallback(debounce(handleAddItemToList, 500), [handleAddItemToList])
 
   const renderRow = useCallback((rowIndex: number): React.ReactElement => {
     return (

From 8fdcecf75c2a4346178d32ce0d2d3788c2a330a4 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 28 Sep 2023 13:57:35 -0700
Subject: [PATCH 06/10] minor bug fixes

---
 web/src/components/MultiList/MultiList.tsx | 102 +++++++++++++--------
 1 file changed, 64 insertions(+), 38 deletions(-)

diff --git a/web/src/components/MultiList/MultiList.tsx b/web/src/components/MultiList/MultiList.tsx
index c587e7847..7783fa247 100644
--- a/web/src/components/MultiList/MultiList.tsx
+++ b/web/src/components/MultiList/MultiList.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { debounce, omit } from 'lodash'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { debounce, has, omit } from 'lodash'
 import { FormikContextType, connect } from 'formik'
 import { Layout, Text, FormInput, Button, ButtonVariation, ButtonSize, Container } from '@harnessio/uicore'
 import { FontVariation } from '@harnessio/design-system'
@@ -20,16 +20,25 @@ interface MultiListProps {
 
 export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedProps): JSX.Element => {
   const { getString } = useStrings()
-  const [rowCount, setRowCount] = useState<number>(0)
-  const [values, setValues] = useState<string[]>([])
+  const [valueMap, setValueMap] = useState<Map<string, string>>(new Map<string, string>([]))
+  /*
+  <field-name-1>: <field-value-1>,
+  <field-name-2>: <field-value-2>
+  */
+  const counter = useRef<number>(0)
 
   useEffect(() => {
+    const values = Array.from(valueMap.values())
     if (values.length > 0) {
       formik?.setFieldValue(name, values)
     } else {
       cleanupField()
     }
-  }, [values])
+  }, [valueMap])
+
+  const cleanupField = useCallback((): void => {
+    formik?.setValues(omit({ ...formik?.values }, name))
+  }, [formik?.values])
 
   const getFieldName = useCallback(
     (index: number): string => {
@@ -39,41 +48,58 @@ export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedP
   )
 
   const handleAddRowToList = useCallback((): void => {
-    setRowCount((existingCount: number) => existingCount + 1)
-  }, [])
-
-  const handleRemoveRowFromList = useCallback((removedRowIdx: number): void => {
-    setRowCount((existingCount: number) => existingCount - 1)
-    removeItemFromList(removedRowIdx)
-  }, [])
-
-  const handleAddItemToList = useCallback((event: React.FormEvent<HTMLInputElement>): void => {
-    const value = (event.target as HTMLInputElement).value
-    setValues((existingValues: string[]) => [...existingValues, value])
-  }, [])
-
-  const removeItemFromList = useCallback((removedRowIdx: number): void => {
-    setValues((existingValues: string[]) => {
-      const existingValuesCopy = [...existingValues]
-      if (removedRowIdx > -1) {
-        existingValuesCopy.splice(removedRowIdx, 1)
-        return existingValuesCopy
+    setValueMap((existingValueMap: Map<string, string>) => {
+      const rowKeyToAdd = getFieldName(counter.current)
+      if (!existingValueMap.has(rowKeyToAdd)) {
+        const existingValueMapClone = new Map(existingValueMap)
+        existingValueMapClone.set(rowKeyToAdd, '') /* Add key <field-name-1>, <field-name-2>, ... */
+        counter.current++ /* this counter always increases, even if a row is removed. This ensures no key collision in the existing value map. */
+        return existingValueMapClone
       }
-      return existingValues
+      return existingValueMap
     })
   }, [])
 
-  const cleanupField = useCallback((): void => {
-    formik?.setValues(omit({ ...formik?.values }, name))
-  }, [formik?.values])
+  const handleRemoveRowFromList = useCallback((removedRowKey: string): void => {
+    setValueMap((existingValueMap: Map<string, string>) => {
+      if (existingValueMap.has(removedRowKey)) {
+        const existingValueMapClone = new Map(existingValueMap)
+        existingValueMapClone.delete(removedRowKey)
+        return existingValueMapClone
+      }
+      return existingValueMap
+    })
+    /* remove <field-name-1>, <field-name-2>, ... from formik values, if exist */
+    if (removedRowKey && has(formik?.values, removedRowKey)) {
+      formik?.setValues(omit({ ...formik?.values }, removedRowKey))
+    }
+  }, [])
 
-  const debouncedAddItemToList = useCallback(debounce(handleAddItemToList, 500), [handleAddItemToList])
+  const handleAddItemToRow = useCallback((rowKey: string, insertedValue: string): void => {
+    setValueMap((existingValueMap: Map<string, string>) => {
+      if (existingValueMap.has(rowKey)) {
+        const existingValueMapClone = new Map(existingValueMap)
+        existingValueMapClone.set(rowKey, insertedValue)
+        return existingValueMapClone
+      }
+      return existingValueMap
+    })
+  }, [])
 
-  const renderRow = useCallback((rowIndex: number): React.ReactElement => {
+  const debouncedAddItemToList = useCallback(debounce(handleAddItemToRow, 500), [handleAddItemToRow])
+
+  const renderRow = useCallback((rowKey: string): React.ReactElement => {
     return (
       <Layout.Horizontal margin={{ bottom: 'none' }} flex={{ justifyContent: 'space-between', alignItems: 'center' }}>
         <Container width="90%">
-          <FormInput.Text name={getFieldName(rowIndex)} disabled={readOnly} onChange={debouncedAddItemToList} />
+          <FormInput.Text
+            name={rowKey}
+            disabled={readOnly}
+            onChange={event => {
+              const value = (event.target as HTMLInputElement).value
+              debouncedAddItemToList(rowKey, value)
+            }}
+          />
         </Container>
         <Icon
           name="code-delete"
@@ -82,26 +108,26 @@ export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedP
           className={css.deleteRowBtn}
           onClick={event => {
             event.preventDefault()
-            handleRemoveRowFromList(rowIndex)
+            handleRemoveRowFromList(rowKey)
           }}
         />
       </Layout.Horizontal>
     )
   }, [])
 
-  const renderRows = useCallback((numOfRows: number): React.ReactElement => {
+  const renderRows = useCallback((): React.ReactElement => {
     const rows: React.ReactElement[] = []
-    for (let idx = 0; idx < numOfRows; idx++) {
-      rows.push(renderRow(idx))
-    }
+    valueMap.forEach((_value: string, key: string) => {
+      rows.push(renderRow(key))
+    })
     return <Layout.Vertical>{rows}</Layout.Vertical>
-  }, [])
+  }, [valueMap])
 
   return (
     <Layout.Vertical spacing="small">
       <Layout.Vertical>
         <Text font={{ variation: FontVariation.FORM_LABEL }}>{label}</Text>
-        {rowCount > 0 && <Container padding={{ top: 'small' }}>{renderRows(rowCount)}</Container>}
+        {valueMap.size > 0 && <Container padding={{ top: 'small' }}>{renderRows()}</Container>}
       </Layout.Vertical>
       <Button
         text={getString('addLabel')}

From 4736b827ad5e49512095379f96e468e01ba9a6d8 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 28 Sep 2023 14:04:21 -0700
Subject: [PATCH 07/10] improve documentation

---
 web/src/components/MultiList/MultiList.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/src/components/MultiList/MultiList.tsx b/web/src/components/MultiList/MultiList.tsx
index 7783fa247..2a9686bc4 100644
--- a/web/src/components/MultiList/MultiList.tsx
+++ b/web/src/components/MultiList/MultiList.tsx
@@ -18,12 +18,19 @@ interface MultiListProps {
   readOnly?: boolean
 }
 
+/* Allows user to create following structure:
+<field-name>:
+  - <field-value-1>,
+  - <field-value-2>,
+  ...
+  */
 export const MultiList = ({ name, label, readOnly, formik }: MultiListConnectedProps): JSX.Element => {
   const { getString } = useStrings()
   const [valueMap, setValueMap] = useState<Map<string, string>>(new Map<string, string>([]))
   /*
   <field-name-1>: <field-value-1>,
-  <field-name-2>: <field-value-2>
+  <field-name-2>: <field-value-2>,
+  ...
   */
   const counter = useRef<number>(0)
 

From ac8aa1d1726fa451de056c429839889458b99369 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 28 Sep 2023 14:07:01 -0700
Subject: [PATCH 08/10] minor revert

---
 web/src/components/PluginsPanel/PluginsPanel.tsx | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index f673fa4ba..75ab28993 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -115,18 +115,11 @@ const RunStep: TypesPlugin = {
   uid: 'run'
 }
 
-const DockerTemp: TypesPlugin = {
-  uid: 'docker',
-  description: 'The Docker plugin can be used to build and publish images to the Docker\nregistry.\n',
-  logo: '',
-  spec: '{\n  "kind": "plugin",\n  "type": "step",\n  "name": "docker",\n  "spec": {\n    "name": "Docker",\n    "description": "The Docker plugin can be used to build and publish images to the Docker\\nregistry.\\n",\n    "step": {\n      "type": "script",\n      "spec": {\n        "image": "plugins/docker",\n        "envs": {\n          "PLUGIN_ADD_HOST": "${{ inputs.add_host }}",\n          "PLUGIN_AUTO_TAG": "${{ inputs.auto_tag }}",\n          "PLUGIN_AUTO_TAG_SUFFIX": "${{ inputs.auto_tag_suffix }}",\n          "PLUGIN_BIP": "${{ inputs.bip }}",\n          "PLUGIN_BUILD_ARGS": "${{ inputs.build_args }}",\n          "PLUGIN_BUILD_ARGS_FROM_ENV": "${{ inputs.build_args_from_env }}",\n          "PLUGIN_CACHE_FROM": "${{ inputs.cache_from }}",\n          "PLUGIN_COMPRESS": "${{ inputs.compress }}",\n          "PLUGIN_CONTEXT": "${{ inputs.context }}",\n          "PLUGIN_CUSTOM_DNS": "${{ inputs.custom_dns }}",\n          "PLUGIN_CUSTOM_DNS_SEARCH": "${{ inputs.custom_dns_search }}",\n          "PLUGIN_CUSTOM_LABELS": "${{ inputs.custom_labels }}",\n          "PLUGIN_DAEMON_OFF": "${{ inputs.daemon_off }}",\n          "PLUGIN_DEBUG": "${{ inputs.debug }}",\n          "PLUGIN_DOCKERFILE": "${{ inputs.dockerfile }}",\n          "PLUGIN_DRY_RUN": "${{ inputs.dry_run }}",\n          "PLUGIN_EMAIL": "${{ inputs.email }}",\n          "PLUGIN_EXPERIMENTAL": "${{ inputs.experimental }}",\n          "PLUGIN_FORCE_TAG": "${{ inputs.force_tag }}",\n          "PLUGIN_INSECURE": "${{ inputs.insecure }}",\n          "PLUGIN_IPV6": "${{ inputs.ipv6 }}",\n          "PLUGIN_LABEL_SCHEMA": "${{ inputs.label_schema }}",\n          "PLUGIN_LAUNCH_DEBUG": "${{ inputs.launch_debug }}",\n          "PLUGIN_MIRROR": "${{ inputs.mirror }}",\n          "PLUGIN_MTU": "${{ inputs.mtu }}",\n          "PLUGIN_NO_CACHE": "${{ inputs.no_cache }}",\n          "PLUGIN_PASSWORD": "${{ inputs.password }}",\n          "PLUGIN_PLATFORM": "${{ inputs.platform }}",\n          "PLUGIN_PULL_IMAGE": "${{ inputs.pull_image }}",\n          "PLUGIN_PURGE": "${{ inputs.purge }}",\n          "PLUGIN_REGISTRY": "${{ inputs.registry }}",\n          "PLUGIN_REPO": "${{ inputs.repo }}",\n          "PLUGIN_SECRET": "${{ inputs.secret }}",\n          "PLUGIN_SQUASH": "${{ inputs.squash }}",\n          "PLUGIN_SSH-AGENT-KEY": "${{ inputs.ssh-agent-key }}",\n          "PLUGIN_STORAGE_DRIVER": "${{ inputs.storage_driver }}",\n          "PLUGIN_STORAGE_PATH": "${{ inputs.storage_path }}",\n          "PLUGIN_TAGS": "${{ inputs.tags }}",\n          "PLUGIN_TARGET": "${{ inputs.target }}",\n          "PLUGIN_USERNAME": "${{ inputs.username }}"\n        }\n      }\n    },\n    "inputs": {\n      "add_host": {\n        "type": "string",\n        "description": "additional host:IP mapping"\n      },\n      "auto_tag": {\n        "type": "boolean",\n        "description": "generate tag names automatically based on git branch and git tag"\n      },\n      "auto_tag_suffix": {\n        "type": "string",\n        "description": "generate tag names with this suffix"\n      },\n      "bip": {\n        "type": "boolean",\n        "description": "use for pass bridge ip"\n      },\n      "build_args": {\n        "type": "string",\n        "description": "pass custom arguments to docker build"\n      },\n      "build_args_from_env": {\n        "type": "string",\n        "description": "pass the envvars as custom arguments to docker build"\n      },\n      "cache_from": {\n        "type": "string",\n        "description": "images to consider as cache sources"\n      },\n      "compress": {\n        "type": "boolean",\n        "description": "compress the build context using gzip"\n      },\n      "context": {\n        "type": "string",\n        "description": "the context path to use, defaults to root of the git repo"\n      },\n      "custom_dns": {\n        "type": "string",\n        "description": "set custom dns servers for the container"\n      },\n      "custom_dns_search": {\n        "type": "string",\n        "description": "docker daemon dns search domains"\n      },\n      "custom_labels": {\n        "type": "string",\n        "description": "additional k=v labels"\n      },\n      "daemon_off": {\n        "type": "boolean",\n        "description": "don\'t start the docker daemon"\n      },\n      "debug": {\n        "type": "boolean",\n        "description": "launch the docker daemon in verbose debug mode"\n      },\n      "dockerfile": {\n        "type": "string",\n        "description": "dockerfile to be used",\n        "default": "Dockerfile"\n      },\n      "dry_run": {\n        "type": "string",\n        "description": "boolean if the docker image should not be pushed at the end"\n      },\n      "email": {\n        "type": "string",\n        "description": "docker email"\n      },\n      "experimental": {\n        "type": "boolean",\n        "description": "docker daemon Experimental mode"\n      },\n      "force_tag": {\n        "type": "boolean",\n        "description": "replace existing matched image tags"\n      },\n      "insecure": {\n        "type": "boolean",\n        "description": "enable insecure communication to this registry"\n      },\n      "ipv6": {\n        "type": "string",\n        "description": "docker daemon IPv6 networking"\n      },\n      "label_schema": {\n        "type": "string",\n        "description": "label-schema labels"\n      },\n      "launch_debug": {\n        "type": "boolean",\n        "description": "launch the docker daemon in verbose debug mode"\n      },\n      "mirror": {\n        "type": "string",\n        "description": "use a mirror registry instead of pulling images directly from the central Hub"\n      },\n      "mtu": {\n        "type": "string",\n        "description": "docker daemon custom mtu setting"\n      },\n      "no_cache": {\n        "type": "string",\n        "description": "do not use cached intermediate containers"\n      },\n      "password": {\n        "type": "string",\n        "description": "authenticates with this password",\n        "mask": true\n      },\n      "platform": {\n        "type": "string",\n        "description": "specify the target platform for the build output, (for example, linux/amd64, linux/arm64, or darwin/amd64)."\n      },\n      "pull_image": {\n        "type": "boolean",\n        "description": "force pull base image at build time"\n      },\n      "purge": {\n        "type": "boolean",\n        "description": "boolean if cleanup of the docker image should be done at the end",\n        "default": "true"\n      },\n      "registry": {\n        "type": "string",\n        "description": "authenticates to this registry"\n      },\n      "repo": {\n        "type": "string",\n        "description": "repository name for the image"\n      },\n      "secret": {\n        "type": "string",\n        "description": "Use buildkit to pass secrets to the dockerbuild. Eg `id=mysecret,src=secret-file`"\n      },\n      "squash": {\n        "type": "boolean",\n        "description": "squash the layers at build time"\n      },\n      "ssh-agent-key": {\n        "type": "string",\n        "description": "private key to use for ssh passthrough, see https://docs.docker.com/engine/reference/commandline/buildx_build/#ssh\\n",\n        "mask": true\n      },\n      "storage_driver": {\n        "type": "string",\n        "description": "supports `aufs`, `overlay` or `vfs` drivers"\n      },\n      "storage_path": {\n        "type": "string",\n        "description": "docker daemon storage path"\n      },\n      "tags": {\n        "type": "array",\n        "description": "repository tag(s) for the image"\n      },\n      "target": {\n        "type": "string",\n        "description": "the build target to use, must be defined in the docker file"\n      },\n      "username": {\n        "type": "string",\n        "description": "authenticates with this username"\n      }\n    }\n  }\n}\n'
-}
-
 export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.Element => {
   const { getString } = useStrings()
-  const [category, setCategory] = useState<PluginCategory>(PluginCategory.Drone)
-  const [panelView, setPanelView] = useState<PluginPanelView>(PluginPanelView.Configuration)
-  const [plugin, setPlugin] = useState<TypesPlugin>(DockerTemp)
+  const [category, setCategory] = useState<PluginCategory>()
+  const [panelView, setPanelView] = useState<PluginPanelView>(PluginPanelView.Category)
+  const [plugin, setPlugin] = useState<TypesPlugin>()
   const [plugins, setPlugins] = useState<TypesPlugin[]>([])
   const [query, setQuery] = useState<string>('')
   const [loading, setLoading] = useState<boolean>(false)

From 240728666f500165650c47851abc5aebd9598077 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 28 Sep 2023 14:08:55 -0700
Subject: [PATCH 09/10] minor revert

---
 web/src/components/PluginsPanel/PluginsPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index 75ab28993..4dcf9f26b 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -445,7 +445,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
             name="arrow-left"
             size={18}
             onClick={() => {
-              // setPlugin(undefined)
+              setPlugin(undefined)
               if (category === PluginCategory.Drone) {
                 setPanelView(PluginPanelView.Listing)
               } else if (category === PluginCategory.Harness) {

From 138390313ca24558e9e9fa33d3c7707cb99d426c Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 28 Sep 2023 14:24:08 -0700
Subject: [PATCH 10/10] added license headers

---
 .../components/MultiList/MultiList.module.scss   | 16 ++++++++++++++++
 web/src/components/MultiList/MultiList.tsx       | 16 ++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/web/src/components/MultiList/MultiList.module.scss b/web/src/components/MultiList/MultiList.module.scss
index 7e4ccd8ec..711353972 100644
--- a/web/src/components/MultiList/MultiList.module.scss
+++ b/web/src/components/MultiList/MultiList.module.scss
@@ -1,3 +1,19 @@
+/*
+ * Copyright 2023 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 .addBtn {
   width: fit-content;
 }
diff --git a/web/src/components/MultiList/MultiList.tsx b/web/src/components/MultiList/MultiList.tsx
index 2a9686bc4..c232e214a 100644
--- a/web/src/components/MultiList/MultiList.tsx
+++ b/web/src/components/MultiList/MultiList.tsx
@@ -1,3 +1,19 @@
+/*
+ * Copyright 2023 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { debounce, has, omit } from 'lodash'
 import { FormikContextType, connect } from 'formik'