Merge branch 'align-plugins-ux' of _OKE5H2PQKOUfzFFDuD4FA/default/CODE/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
+            <Card className={css.pluginCard}>
-              onClick={() => {
+              <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
-                setCategory(pluginCategory)
+                <Layout.Horizontal
-                if (pluginCategory === PluginCategory.Drone) {
+                  onClick={() => handlePluginCategoryClick(pluginCategory)}
-                  setPanelView(PluginPanelView.Listing)
+                  key={pluginCategory}
-                } else if (pluginCategory === PluginCategory.Harness) {
+                  flex={{ justifyContent: 'flex-start' }}
-                  setPlugin(RunStep)
+                  className={css.plugin}>
-                  setPanelView(PluginPanelView.Configuration)
+                  <Container className={css.pluginIcon}>
-                }
+                    <Icon {...icon} />
-              }}
+                  </Container>
-              key={pluginCategory}
+                  <Layout.Vertical padding={{ left: 'medium' }} spacing="xsmall">
-              padding={{ left: 'medium', right: 'medium', top: 'medium', bottom: 'medium' }}
+                    <Text
-              flex={{ justifyContent: 'flex-start' }}
+                      color={Color.GREY_900}
-              className={css.plugin}>
+                      className={css.pluginCategory}
-              <Container padding="small" className={css.pluginIcon}>
+                      font={{ variation: FontVariation.BODY2_SEMI }}>
-                <Icon name={icon} />
+                      {name}
-              </Container>
+                    </Text>
-              <Layout.Vertical padding={{ left: 'small' }}>
+                    <Text color={Color.GREY_500} font={{ variation: FontVariation.SMALL }}>
-                <Text color={Color.PRIMARY_7} font={{ variation: FontVariation.BODY2 }}>
+                      {description}
-                  {name}
+                    </Text>
-                </Text>
+                  </Layout.Vertical>
-                <Text font={{ variation: FontVariation.SMALL }}>{description}</Text>
+                </Layout.Horizontal>
-              </Layout.Vertical>
+                <Container>
-            </Layout.Horizontal>
+                  <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} />
+                <Icon name={'plugin-ci-step'} size={25} />
-                <Layout.Vertical padding={{ left: 'small' }}>
+                <Layout.Vertical padding={{ left: 'small' }} spacing="xsmall">
-                  <Text font={{ variation: FontVariation.BODY2 }} color={Color.PRIMARY_7}>
+                  <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"'
               }
             }