github/drone
5
0
Fork 0
mirror of https://github.com/harness/drone.git synced 2025-05-10 22:21:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

render for run step, plugin list overflow cleanup

Browse Source
This commit is contained in:
Vardan Bansal 2023-09-20 01:37:31 -07:00
parent f9d2ed938b
commit d16b3995f4
5 changed files with 198 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/PluginsPanel/PluginsPanel.module.scss
View File

@ -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;
}

3
web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts vendored
View File

@ -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

173
web/src/components/PluginsPanel/PluginsPanel.tsx
View File

@ -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: '<step-name>',
type: 'plugins',
type: 'plugin',
spec: {
name: '<plugin-uid-from-database>',
inputs: {
@ -296,7 +297,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
pluginFormData: Record<string, any>,
pluginMetadata?: TypesPlugin
): Record<string, any> => {
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 (
<Layout.Vertical
spacing="large"
padding={{ left: 'xxlarge', top: 'large', right: 'xxlarge', bottom: 'xxlarge' }}
className={css.panelContent}>
<Layout.Vertical spacing="large" className={css.configForm}>
<Layout.Horizontal spacing="small" flex={{ justifyContent: 'flex-start' }}>
<Icon
name="arrow-left"
@ -386,13 +382,148 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
onPluginAddUpdate?.(false, constructPayloadForYAMLInsertion(formData, plugin))
}}>
<FormikForm height="100%" flex={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
<Layout.Vertical flex={{ alignItems: 'flex-start' }} height="100%">
<Layout.Vertical width="100%" className={css.formFields} spacing="xsmall">
{Object.keys(allPluginInputs).map((field: string) => {
return renderPluginFormField({ name: field, properties: get(allPluginInputs, field) })
})}
<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.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="container">
<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'}
/>
<Accordion activeId="container.credentials">
<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>
<FormInput.Text
name={'container.pull'}
label={getString('pluginsPanel.run.pull')}
style={{ width: '100%' }}
key={'container.pull'}
/>
<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.RadioGroup
name={'container.privileged'}
label={getString('pluginsPanel.run.privileged')}
style={{ width: '100%' }}
key={'container.privileged'}
items={[
{ label: 'Yes', value: 'true' },
{ label: 'No', value: 'false' }
]}
/>
<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'}
/>
</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>
) : (
<Layout.Vertical width="inherit">
{Object.keys(allPluginInputs).map((field: string) => {
return renderPluginFormField({ name: field, properties: get(allPluginInputs, field) })
})}
</Layout.Vertical>
)}
</Layout.Vertical>
<Button variation={ButtonVariation.PRIMARY} text={getString('addLabel')} type="submit" />
<Container margin={{ top: 'small', bottom: 'small' }}>
<Button variation={ButtonVariation.PRIMARY} text={getString('addLabel')} type="submit" />
</Container>
</Layout.Vertical>
</FormikForm>
</Formik>

16
web/src/framework/strings/stringTypes.ts
View File

@ -429,7 +429,23 @@ export interface StringsMap {
'plugins.stepLabel': string
'plugins.title': string
'pluginsPanel.plugins.helptext': string
'pluginsPanel.run.bash': string
'pluginsPanel.run.credentials': string
'pluginsPanel.run.entrypoint': string
'pluginsPanel.run.helptext': string
'pluginsPanel.run.image': string
'pluginsPanel.run.network': string
'pluginsPanel.run.networkMode': string
'pluginsPanel.run.password': string
'pluginsPanel.run.path': string
'pluginsPanel.run.powershell': string
'pluginsPanel.run.privileged': string
'pluginsPanel.run.pull': string
'pluginsPanel.run.pwsh': string
'pluginsPanel.run.script': string
'pluginsPanel.run.sh': string
'pluginsPanel.run.shell': string
'pluginsPanel.run.username': string
poweredByAI: string
'pr.ableToMerge': string
'pr.addDescription': string

16
web/src/i18n/strings.en.yaml
View File

@ -718,6 +718,22 @@ pluginsPanel:
helptext: Run a plugin step
run:
helptext: Run a container or a shell command
script: Script
shell: Shell
sh: Sh
bash: Bash
powershell: Powershell
pwsh: Pwsh
image: Image
credentials: Credentials
username: Username
password: Password
pull: Pull
entrypoint: Entrypoint
network: Network
networkMode: Network Mode
privileged: Privileged
path: Path
createNewRepo: Create New repository
importGitRepo: Import Repository
importRepo: