From 9a23a06e8408b6ba9a453d73fb784b4c55ee422b Mon Sep 17 00:00:00 2001 From: Vardan Bansal Date: Wed, 20 Sep 2023 12:48:28 -0700 Subject: [PATCH 1/4] aligning UX --- .../PluginsPanel/PluginsPanel.module.scss | 13 +++- .../PluginsPanel.module.scss.d.ts | 2 + .../components/PluginsPanel/PluginsPanel.tsx | 67 ++++++++++++------- 3 files changed, 56 insertions(+), 26 deletions(-) diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss b/web/src/components/PluginsPanel/PluginsPanel.module.scss index a29a0c08d..b017d87da 100644 --- a/web/src/components/PluginsPanel/PluginsPanel.module.scss +++ b/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; +} diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts index d839420bb..8c973c956 100644 --- a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts +++ b/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 diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx index 00a03685f..4dc7cb3de 100644 --- a/web/src/components/PluginsPanel/PluginsPanel.tsx +++ b/web/src/components/PluginsPanel/PluginsPanel.tsx @@ -9,6 +9,7 @@ import { Accordion, Button, ButtonVariation, + Card, Container, ExpandingSearchInput, FormInput, @@ -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 ( - { - 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}> - - - - - - {name} - - {description} - - + + + handlePluginCategoryClick(pluginCategory)} + key={pluginCategory} + flex={{ justifyContent: 'flex-start' }} + className={css.plugin}> + + + + + + {name} + + + {description} + + + + + handlePluginCategoryClick(pluginCategory)} + className={css.plugin} + /> + + + ) })} From bd22cec2d063d7249ca9ede69b4cec0bca3c8688 Mon Sep 17 00:00:00 2001 From: Vardan Bansal Date: Wed, 20 Sep 2023 12:54:22 -0700 Subject: [PATCH 2/4] update plugin icon --- web/src/components/PluginsPanel/PluginsPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx index 4dc7cb3de..d6a290d49 100644 --- a/web/src/components/PluginsPanel/PluginsPanel.tsx +++ b/web/src/components/PluginsPanel/PluginsPanel.tsx @@ -102,7 +102,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX. category: PluginCategory.Drone, name: capitalize(getString('plugins.title')), description: getString('pluginsPanel.plugins.helptext'), - icon: 'ci-infra' + icon: 'plugin-ci-step' } ] From e1f315b0a2881ec71fc187b295044a6abcf5106a Mon Sep 17 00:00:00 2001 From: Vardan Bansal Date: Wed, 20 Sep 2023 13:10:07 -0700 Subject: [PATCH 3/4] ux clean up and fixing starter pipeline --- web/src/components/PluginsPanel/PluginsPanel.tsx | 11 +++++++---- web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx | 4 ++-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx index d6a290d49..829f4f541 100644 --- a/web/src/components/PluginsPanel/PluginsPanel.tsx +++ b/web/src/components/PluginsPanel/PluginsPanel.tsx @@ -238,12 +238,15 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX. setPlugin(pluginItem) }} key={uid}> - - - + + + {uid} - + {description} diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx index 979898473..34901b9e0 100644 --- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx +++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx @@ -38,9 +38,9 @@ const StarterPipelineV1: Record = { steps: [ { name: 'build', - type: 'script', + type: 'run', spec: { - image: 'golang', + container: 'alpine', run: 'echo "hello world"' } } From 15843ab15f3fd5c14c26c9c15c5f9e93f62d6d5a Mon Sep 17 00:00:00 2001 From: Vardan Bansal Date: Wed, 20 Sep 2023 13:14:05 -0700 Subject: [PATCH 4/4] fix icon size --- web/src/components/PluginsPanel/PluginsPanel.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx index 829f4f541..72a328d1b 100644 --- a/web/src/components/PluginsPanel/PluginsPanel.tsx +++ b/web/src/components/PluginsPanel/PluginsPanel.tsx @@ -4,7 +4,7 @@ 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, @@ -45,7 +45,7 @@ interface PluginCategoryInterface { category: PluginCategory name: string description: string - icon: IconName + icon: IconProps } interface PluginInsertionTemplateInterface { @@ -96,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: 'plugin-ci-step' + icon: { name: 'plugin-ci-step', size: 18 } } ] @@ -165,7 +165,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX. flex={{ justifyContent: 'flex-start' }} className={css.plugin}> - +