mirror of
https://github.com/harness/drone.git
synced 2025-05-19 02:20:03 +08:00
Merge branch 'align-plugins-ux' of _OKE5H2PQKOUfzFFDuD4FA/default/CODE/gitness (#588)
This commit is contained in:
commit
c01a3fcc69
@ -4,12 +4,17 @@
|
||||
}
|
||||
|
||||
.pluginIcon {
|
||||
background: var(--teal-200) !important;
|
||||
padding: var(--spacing-small) var(--spacing-3) var(--spacing-small) var(--spacing-3) !important;
|
||||
background: var(--grey-100) !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.pluginCard {
|
||||
margin: var(--spacing-medium);
|
||||
padding: var(--spacing-medium) !important;
|
||||
}
|
||||
|
||||
.plugin {
|
||||
border: 1px solid var(--grey-100);
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -64,3 +69,7 @@
|
||||
height: calc(100% - var(--spacing-large) - var(--spacing-xxlarge));
|
||||
margin: var(--spacing-large) var(--spacing-xxlarge) var(--spacing-xxlarge) var(--spacing-xxlarge) !important;
|
||||
}
|
||||
|
||||
.pluginCategory {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
@ -6,6 +6,8 @@ export declare const form: string
|
||||
export declare const formFields: string
|
||||
export declare const indent: string
|
||||
export declare const plugin: string
|
||||
export declare const pluginCard: string
|
||||
export declare const pluginCategory: string
|
||||
export declare const pluginDesc: string
|
||||
export declare const pluginDetailsPanel: string
|
||||
export declare const pluginIcon: string
|
||||
|
@ -4,11 +4,12 @@ import { parse } from 'yaml'
|
||||
import { capitalize, get, omit, set } from 'lodash-es'
|
||||
import { Classes, PopoverInteractionKind, PopoverPosition } from '@blueprintjs/core'
|
||||
import { Color, FontVariation } from '@harnessio/design-system'
|
||||
import { Icon, type IconName } from '@harnessio/icons'
|
||||
import { Icon, IconProps } from '@harnessio/icons'
|
||||
import {
|
||||
Accordion,
|
||||
Button,
|
||||
ButtonVariation,
|
||||
Card,
|
||||
Container,
|
||||
ExpandingSearchInput,
|
||||
FormInput,
|
||||
@ -44,7 +45,7 @@ interface PluginCategoryInterface {
|
||||
category: PluginCategory
|
||||
name: string
|
||||
description: string
|
||||
icon: IconName
|
||||
icon: IconProps
|
||||
}
|
||||
|
||||
interface PluginInsertionTemplateInterface {
|
||||
@ -95,13 +96,13 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
|
||||
category: PluginCategory.Harness,
|
||||
name: capitalize(getString('run')),
|
||||
description: getString('pluginsPanel.run.helptext'),
|
||||
icon: 'run-step'
|
||||
icon: { name: 'run-step', size: 15 }
|
||||
},
|
||||
{
|
||||
category: PluginCategory.Drone,
|
||||
name: capitalize(getString('plugins.title')),
|
||||
description: getString('pluginsPanel.plugins.helptext'),
|
||||
icon: 'ci-infra'
|
||||
icon: { name: 'plugin-ci-step', size: 18 }
|
||||
}
|
||||
]
|
||||
|
||||
@ -140,36 +141,54 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
|
||||
}
|
||||
}, [query])
|
||||
|
||||
const handlePluginCategoryClick = useCallback((selectedCategory: PluginCategory) => {
|
||||
setCategory(selectedCategory)
|
||||
if (selectedCategory === PluginCategory.Drone) {
|
||||
setPanelView(PluginPanelView.Listing)
|
||||
} else if (selectedCategory === PluginCategory.Harness) {
|
||||
setPlugin(RunStep)
|
||||
setPanelView(PluginPanelView.Configuration)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const renderPluginCategories = (): JSX.Element => {
|
||||
return (
|
||||
<>
|
||||
{PluginCategories.map((item: PluginCategoryInterface) => {
|
||||
const { name, category: pluginCategory, description, icon } = item
|
||||
return (
|
||||
<Layout.Horizontal
|
||||
onClick={() => {
|
||||
setCategory(pluginCategory)
|
||||
if (pluginCategory === PluginCategory.Drone) {
|
||||
setPanelView(PluginPanelView.Listing)
|
||||
} else if (pluginCategory === PluginCategory.Harness) {
|
||||
setPlugin(RunStep)
|
||||
setPanelView(PluginPanelView.Configuration)
|
||||
}
|
||||
}}
|
||||
key={pluginCategory}
|
||||
padding={{ left: 'medium', right: 'medium', top: 'medium', bottom: 'medium' }}
|
||||
flex={{ justifyContent: 'flex-start' }}
|
||||
className={css.plugin}>
|
||||
<Container padding="small" className={css.pluginIcon}>
|
||||
<Icon name={icon} />
|
||||
</Container>
|
||||
<Layout.Vertical padding={{ left: 'small' }}>
|
||||
<Text color={Color.PRIMARY_7} font={{ variation: FontVariation.BODY2 }}>
|
||||
{name}
|
||||
</Text>
|
||||
<Text font={{ variation: FontVariation.SMALL }}>{description}</Text>
|
||||
</Layout.Vertical>
|
||||
</Layout.Horizontal>
|
||||
<Card className={css.pluginCard}>
|
||||
<Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
|
||||
<Layout.Horizontal
|
||||
onClick={() => handlePluginCategoryClick(pluginCategory)}
|
||||
key={pluginCategory}
|
||||
flex={{ justifyContent: 'flex-start' }}
|
||||
className={css.plugin}>
|
||||
<Container className={css.pluginIcon}>
|
||||
<Icon {...icon} />
|
||||
</Container>
|
||||
<Layout.Vertical padding={{ left: 'medium' }} spacing="xsmall">
|
||||
<Text
|
||||
color={Color.GREY_900}
|
||||
className={css.pluginCategory}
|
||||
font={{ variation: FontVariation.BODY2_SEMI }}>
|
||||
{name}
|
||||
</Text>
|
||||
<Text color={Color.GREY_500} font={{ variation: FontVariation.SMALL }}>
|
||||
{description}
|
||||
</Text>
|
||||
</Layout.Vertical>
|
||||
</Layout.Horizontal>
|
||||
<Container>
|
||||
<Icon
|
||||
name="arrow-right"
|
||||
size={24}
|
||||
onClick={() => handlePluginCategoryClick(pluginCategory)}
|
||||
className={css.plugin}
|
||||
/>
|
||||
</Container>
|
||||
</Layout.Horizontal>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
@ -219,12 +238,15 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
|
||||
setPlugin(pluginItem)
|
||||
}}
|
||||
key={uid}>
|
||||
<Icon name={'gear'} size={25} />
|
||||
<Layout.Vertical padding={{ left: 'small' }}>
|
||||
<Text font={{ variation: FontVariation.BODY2 }} color={Color.PRIMARY_7}>
|
||||
<Icon name={'plugin-ci-step'} size={25} />
|
||||
<Layout.Vertical padding={{ left: 'small' }} spacing="xsmall">
|
||||
<Text
|
||||
color={Color.GREY_900}
|
||||
className={css.pluginCategory}
|
||||
font={{ variation: FontVariation.BODY2_SEMI }}>
|
||||
{uid}
|
||||
</Text>
|
||||
<Text font={{ variation: FontVariation.SMALL }} className={css.pluginDesc}>
|
||||
<Text color={Color.GREY_500} font={{ variation: FontVariation.SMALL }} className={css.pluginDesc}>
|
||||
{description}
|
||||
</Text>
|
||||
</Layout.Vertical>
|
||||
|
@ -38,9 +38,9 @@ const StarterPipelineV1: Record<string, any> = {
|
||||
steps: [
|
||||
{
|
||||
name: 'build',
|
||||
type: 'script',
|
||||
type: 'run',
|
||||
spec: {
|
||||
image: 'golang',
|
||||
container: 'alpine',
|
||||
run: 'echo "hello world"'
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user