diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss b/web/src/components/PluginsPanel/PluginsPanel.module.scss index 787a102ae..a29a0c08d 100644 --- a/web/src/components/PluginsPanel/PluginsPanel.module.scss +++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss @@ -16,7 +16,7 @@ } .form { - height: 100%; + height: calc(100% - var(--spacing-large) - var(--spacing-xxlarge)); width: 100%; :global { .FormikForm--main { @@ -49,11 +49,18 @@ overflow-y: scroll; } -.panelContent { - height: calc(100% - var(--spacing-large)); -} - .search { width: 50%; height: 35px; } + +.indent { + background: var(--grey-100) !important; + padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-small) var(--spacing-large) !important; + border-radius: 8px; +} + +.configForm { + height: calc(100% - var(--spacing-large) - var(--spacing-xxlarge)); + margin: var(--spacing-large) var(--spacing-xxlarge) var(--spacing-xxlarge) var(--spacing-xxlarge) !important; +} diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts index 8d64c399d..d839420bb 100644 --- a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts +++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts @@ -1,9 +1,10 @@ /* eslint-disable */ // This is an auto-generated file export declare const arrow: string +export declare const configForm: string export declare const form: string export declare const formFields: string -export declare const panelContent: string +export declare const indent: string export declare const plugin: string export declare const pluginDesc: string export declare const pluginDetailsPanel: string diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx index d9d66c528..6262c2386 100644 --- a/web/src/components/PluginsPanel/PluginsPanel.tsx +++ b/web/src/components/PluginsPanel/PluginsPanel.tsx @@ -7,6 +7,7 @@ import type { TypesPlugin } from 'services/code' import { Color, FontVariation } from '@harnessio/design-system' import { Icon, type IconName } from '@harnessio/icons' import { + Accordion, Button, ButtonVariation, Container, @@ -54,7 +55,7 @@ const RunStep: TypesPlugin = { interface PluginInsertionTemplateInterface { name?: string - type: 'plugins' + type: 'plugin' spec: { name: string inputs: { [key: string]: string } @@ -63,7 +64,7 @@ interface PluginInsertionTemplateInterface { const PluginInsertionTemplate: PluginInsertionTemplateInterface = { name: '', - type: 'plugins', + type: 'plugin', spec: { name: '', inputs: { @@ -296,7 +297,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX. pluginFormData: Record, pluginMetadata?: TypesPlugin ): Record => { - const { name, image, script } = pluginFormData + const { name } = pluginFormData switch (category) { case PluginCategory.Drone: let payload = { ...PluginInsertionTemplate } @@ -310,13 +311,11 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX. set(payload, PluginInputsFieldPath, omit(pluginFormData, 'name')) return payload as PluginInsertionTemplateInterface case PluginCategory.Harness: - return image || script - ? { - ...(name && { name }), - type: 'run', - spec: { ...(image && { image }), ...(script && { script }) } - } - : {} + return { + ...(name && { name }), + type: 'run', + spec: pluginFormData + } default: return {} } @@ -350,15 +349,12 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX. const renderPluginConfigForm = useCallback((): JSX.Element => { const pluginInputs = getPluginInputsFromSpec(get(plugin, 'spec', '') as string) - if (Object.keys(pluginInputs).length === 0) { + if (category === PluginCategory.Drone && Object.keys(pluginInputs).length === 0) { return <> } const allPluginInputs = insertNameFieldToPluginInputs(pluginInputs) return ( - + - - - {Object.keys(allPluginInputs).map((field: string) => { - return renderPluginFormField({ name: field, properties: get(allPluginInputs, field) }) - })} + + + {category === PluginCategory.Harness ? ( + + + + + + + + + + + + } + /> + + + + + + + + + + } + /> + + + + + } + /> + + + ) : ( + + {Object.keys(allPluginInputs).map((field: string) => { + return renderPluginFormField({ name: field, properties: get(allPluginInputs, field) }) + })} + + )} -