Merge branch 'align-plugins-ux' of _OKE5H2PQKOUfzFFDuD4FA/default/COD…

…E/gitness (#588)

web/src/components/PluginsPanel/PluginsPanel.module.scss

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

web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts

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

web/src/components/PluginsPanel/PluginsPanel.tsx

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

web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx

@@ -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"'
  }
  }