Skip to content

Commit d040acb

Browse files
radhakrishna68Harness
radhakrishna68
authored and
Harness
committed
feat: [UUI-1025]: Drawer designs for steps and stages (#11065)
* 8b7a91 Fixed comment * 4b350a feat: [UUI-1025]: Drawer designs for steps and stages
1 parent 6b2eae7 commit d040acb

11 files changed

Lines changed: 79 additions & 109 deletions

File tree

‎packages/forms/playground/src/implementation/canary-inputs/common/multi-type-select-button.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { JSX } from 'react'
1+
import * as React from 'react'
22

33
import { Button, ButtonProps, DropdownMenu, IconPropsV2, IconV2 } from '@harnessio/ui/components'
44

@@ -14,22 +14,23 @@ export interface StyledMultiTypeSelectProps extends MultiTypeSelectProps {
1414
className?: string
1515
buttonClassName?: string
1616
variant?: ButtonProps['variant']
17+
size?: ButtonProps['size']
1718
style?: React.CSSProperties
1819
allowedValueTypes?: InputValueType[]
1920
}
2021

2122
const getButtonIcon = (inputValueType: InputValueType) => {
2223
switch (inputValueType) {
2324
case 'fixed':
24-
return <IconV2 name="code-brackets" size="xs" className="text-cn-blue-surface" />
25+
return <IconV2 name="code-brackets" size="xs" className="text-cn-blue-outline" />
2526
case 'runtime':
26-
return <IconV2 name="code" size="xs" className="text-cn-purple-surface" />
27+
return <IconV2 name="code" size="xs" className="text-cn-purple-outline" />
2728
case 'expression':
28-
return <IconV2 name="variables" size="xs" className="text-cn-orange-surface" />
29+
return <IconV2 name="variables" size="xs" className="text-cn-orange-outline" />
2930
}
3031
}
3132

32-
function MultiTypeSelectForPrefix(props: MultiTypeSelectProps): JSX.Element {
33+
function MultiTypeSelectForPrefix(props: MultiTypeSelectProps): React.JSX.Element {
3334
return (
3435
<MultiTypeSelectBase
3536
{...props}
@@ -41,17 +42,18 @@ function MultiTypeSelectForPrefix(props: MultiTypeSelectProps): JSX.Element {
4142
)
4243
}
4344

44-
function MultiTypeSelectForLabel(props: MultiTypeSelectProps): JSX.Element {
45-
return <MultiTypeSelectBase {...props} variant="outline" />
45+
function MultiTypeSelectForLabel(props: MultiTypeSelectProps): React.JSX.Element {
46+
return <MultiTypeSelectBase {...props} variant="outline" size="xs" />
4647
}
4748

48-
function MultiTypeSelectBase(props: StyledMultiTypeSelectProps): JSX.Element {
49+
function MultiTypeSelectBase(props: StyledMultiTypeSelectProps): React.JSX.Element {
4950
const {
5051
inputValueType,
5152
setInputValueType,
5253
className,
5354
buttonClassName,
5455
variant = 'outline',
56+
size,
5557
style,
5658
allowedValueTypes
5759
} = props
@@ -60,19 +62,19 @@ function MultiTypeSelectBase(props: StyledMultiTypeSelectProps): JSX.Element {
6062
{
6163
value: 'fixed',
6264
icon: 'code-brackets',
63-
iconClassName: 'text-cn-blue-surface',
65+
iconClassName: 'text-cn-blue-outline',
6466
title: 'Fixed'
6567
},
6668
{
6769
value: 'runtime',
6870
icon: 'code',
69-
iconClassName: 'text-cn-purple-surface',
71+
iconClassName: 'text-cn-purple-outline',
7072
title: 'Runtime'
7173
},
7274
{
7375
value: 'expression',
7476
icon: 'variables',
75-
iconClassName: 'text-cn-orange-surface',
77+
iconClassName: 'text-cn-orange-outline',
7678
title: 'Expression'
7779
}
7880
]
@@ -86,7 +88,7 @@ function MultiTypeSelectBase(props: StyledMultiTypeSelectProps): JSX.Element {
8688
return (
8789
<DropdownMenu.Root>
8890
<DropdownMenu.Trigger className={className}>
89-
<Button variant={variant} style={style} iconOnly className={buttonClassName}>
91+
<Button variant={variant} size={size} style={style} iconOnly className={buttonClassName}>
9092
{getButtonIcon(inputValueType)}
9193
</Button>
9294
</DropdownMenu.Trigger>

‎packages/views/src/unified-pipeline-studio/components/entity-form/unified-pipeline-studio-entity-form.tsx‎

Lines changed: 26 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { ElementType, useEffect, useState } from 'react'
1+
import { useEffect, useMemo, useState } from 'react'
22

3-
import { Button, ButtonLayout, Drawer, EntityFormLayout, IconV2, Skeleton, Text } from '@harnessio/ui/components'
43
import { useUnifiedPipelineStudioContext } from '@views/unified-pipeline-studio/context/unified-pipeline-studio-context'
54
import { addNameInput } from '@views/unified-pipeline-studio/utils/entity-form-utils'
65
import { get, isEmpty, isUndefined, omit, omitBy } from 'lodash-es'
@@ -15,45 +14,18 @@ import {
1514
RootForm,
1615
useZodValidationResolver
1716
} from '@harnessio/forms'
17+
import { Button, ButtonLayout, Drawer, IconV2, Skeleton, Text } from '@harnessio/ui/components'
1818

1919
import { getHarnessSteOrGroupIdentifier, getHarnessStepOrGroupDefinition, isHarnessGroup } from '../steps/harness-steps'
2020
import { TEMPLATE_CD_STEP_IDENTIFIER, TEMPLATE_CI_STEP_IDENTIFIER } from '../steps/types'
2121

22-
const componentsMap: Record<
23-
'true' | 'false',
24-
{
25-
Header: ElementType
26-
Title: ElementType
27-
Description: ElementType
28-
Body: ElementType
29-
Footer: ElementType
30-
}
31-
> = {
32-
true: {
33-
Header: Drawer.Header,
34-
Title: Drawer.Title,
35-
Description: Drawer.Description,
36-
Body: Drawer.Body,
37-
Footer: Drawer.Footer
38-
},
39-
false: {
40-
Header: EntityFormLayout.Header,
41-
Title: EntityFormLayout.Title,
42-
Description: EntityFormLayout.Description,
43-
Body: EntityFormLayout.Form,
44-
Footer: EntityFormLayout.Footer
45-
}
46-
}
47-
4822
interface UnifiedPipelineStudioEntityFormProps {
4923
requestClose: () => void
50-
isDrawer?: boolean
5124
isDirtyRef: { current?: boolean }
5225
}
5326

5427
export const UnifiedPipelineStudioEntityForm = (props: UnifiedPipelineStudioEntityFormProps) => {
55-
const { requestClose, isDrawer = false, isDirtyRef } = props
56-
const { Header, Title, Description, Body, Footer } = componentsMap[isDrawer ? 'true' : 'false']
28+
const { requestClose, isDirtyRef } = props
5729
const {
5830
yamlRevision,
5931
addStepIntention,
@@ -162,6 +134,19 @@ export const UnifiedPipelineStudioEntityForm = (props: UnifiedPipelineStudioEnti
162134

163135
const loading = !formDefinition || externalLoading
164136

137+
const stepDrawerTitle = useMemo(() => {
138+
const stepDrawerRaw =
139+
formEntity?.data?.identifier ??
140+
defaultStepValues[TEMPLATE_CI_STEP_IDENTIFIER]?.uses ??
141+
defaultStepValues[TEMPLATE_CD_STEP_IDENTIFIER]?.uses ??
142+
''
143+
const harnessDef =
144+
stepDrawerRaw && !stepDrawerRaw.includes('@') && !stepDrawerRaw.includes('/')
145+
? getHarnessStepOrGroupDefinition(stepDrawerRaw, stepsDefinitions)
146+
: undefined
147+
return harnessDef?.name ?? stepDrawerRaw
148+
}, [defaultStepValues, formEntity, stepsDefinitions])
149+
165150
return (
166151
<RootForm
167152
autoFocusPath={formDefinition?.inputs?.[0]?.path}
@@ -237,17 +222,11 @@ export const UnifiedPipelineStudioEntityForm = (props: UnifiedPipelineStudioEnti
237222

238223
return (
239224
<>
240-
<Header>
241-
<Title>
242-
{editStepIntention ? 'Edit' : 'Add'} Step :{' '}
243-
{formEntity?.data?.identifier ??
244-
defaultStepValues[TEMPLATE_CI_STEP_IDENTIFIER]?.uses ??
245-
defaultStepValues[TEMPLATE_CD_STEP_IDENTIFIER]?.uses}
246-
</Title>
247-
<Description>{formEntity?.data.description}</Description>
248-
{/*<AIButton label="AI Autofill" />*/}
249-
</Header>
250-
<Body>
225+
<Drawer.Header>
226+
<Drawer.Tagline>{editStepIntention ? 'Edit step' : 'Add step'}</Drawer.Tagline>
227+
<Drawer.Title>{stepDrawerTitle}</Drawer.Title>
228+
</Drawer.Header>
229+
<Drawer.Body>
251230
{/* <StepFormSection.Header> */}
252231
{/* <StepFormSection.Title>General</StepFormSection.Title> */}
253232
{/* <StepFormSection.Description>Read documentation to learn more.</StepFormSection.Description> */}
@@ -259,15 +238,12 @@ export const UnifiedPipelineStudioEntityForm = (props: UnifiedPipelineStudioEnti
259238
) : (
260239
<RenderForm className="space-y-cn-xl" factory={inputComponentFactory} inputs={formDefinition} />
261240
)}
262-
</Body>
263-
<Footer>
241+
</Drawer.Body>
242+
<Drawer.Footer>
264243
<ButtonLayout.Root>
265-
<ButtonLayout.Primary className="flex gap-x-cn-sm">
244+
<ButtonLayout.Primary className="gap-x-cn-sm flex">
266245
<Button disabled={loading || !!error?.message} onClick={() => rootForm.submitForm()}>
267-
Submit
268-
</Button>
269-
<Button variant="secondary" onClick={requestClose}>
270-
Cancel
246+
{editStepIntention ? 'Update step' : 'Add step'}
271247
</Button>
272248
</ButtonLayout.Primary>
273249
{!!editStepIntention && (
@@ -287,7 +263,7 @@ export const UnifiedPipelineStudioEntityForm = (props: UnifiedPipelineStudioEnti
287263
</ButtonLayout.Secondary>
288264
)}
289265
</ButtonLayout.Root>
290-
</Footer>
266+
</Drawer.Footer>
291267
</>
292268
)
293269
}}

‎packages/views/src/unified-pipeline-studio/components/graph-implementation/context-menu/stage-group-add-in-node-context-menu.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const StageGroupAddInNodeContextMenu = () => {
2424
>
2525
<DropdownMenu.IconItem
2626
icon="plus"
27-
title="Add Stage"
27+
title="Add stage"
2828
key={`add-${YamlEntityType.Stage}`}
2929
onSelect={() => {
3030
onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.Stage)
@@ -33,15 +33,15 @@ export const StageGroupAddInNodeContextMenu = () => {
3333
<DropdownMenu.Separator />
3434
<DropdownMenu.IconItem
3535
icon="plus"
36-
title="Add Serial group"
36+
title="Add serial group"
3737
key={`add-${YamlEntityType.SerialStageGroup}`}
3838
onSelect={() => {
3939
onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.SerialStageGroup)
4040
}}
4141
/>
4242
<DropdownMenu.IconItem
4343
icon="plus"
44-
title="Add Parallel group"
44+
title="Add parallel group"
4545
key={`add-${YamlEntityType.ParallelStageGroup}`}
4646
onSelect={() => {
4747
onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.ParallelStageGroup)

‎packages/views/src/unified-pipeline-studio/components/graph-implementation/context-menu/stage-group-floating-add-node-context-menu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const StageGroupFloatingAddNodeContextMenu = ({ outsidePosition }: { outs
2424
>
2525
<DropdownMenu.IconItem
2626
icon="plus"
27-
title="Add Serial Stages Group"
27+
title="Add serial stages group"
2828
key={`add-${YamlEntityType.SerialStageGroup}-before`}
2929
onSelect={() => {
3030
onAddIntention(contextMenuData.nodeData, outsidePosition, YamlEntityType.SerialStageGroup)
@@ -33,7 +33,7 @@ export const StageGroupFloatingAddNodeContextMenu = ({ outsidePosition }: { outs
3333
<DropdownMenu.Separator />
3434
<DropdownMenu.IconItem
3535
icon="plus"
36-
title="Add Parallel Stages Group"
36+
title="Add parallel stages group"
3737
key={`add-${YamlEntityType.ParallelStageGroup}-before`}
3838
onSelect={() => {
3939
onAddIntention(contextMenuData.nodeData, outsidePosition, YamlEntityType.ParallelStageGroup)

‎packages/views/src/unified-pipeline-studio/components/graph-implementation/context-menu/stage-group-node-context-menu.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@ export const StageGroupNodeContextMenu = () => {
3434
<DropdownMenu.Separator />
3535
<DropdownMenu.IconItem
3636
icon="plus"
37-
title="Add Serial Stages Group before"
37+
title="Add serial stages group before"
3838
key={`add-${YamlEntityType.SerialStageGroup}-before`}
3939
onSelect={() => {
4040
onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.SerialStageGroup)
4141
}}
4242
/>
4343
<DropdownMenu.IconItem
4444
icon="plus"
45-
title="Add Serial Stages Group after"
45+
title="Add serial stages group after"
4646
key={`add-${YamlEntityType.SerialStageGroup}-after`}
4747
onSelect={() => {
4848
onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.SerialStageGroup)
@@ -51,15 +51,15 @@ export const StageGroupNodeContextMenu = () => {
5151
<DropdownMenu.Separator />
5252
<DropdownMenu.IconItem
5353
icon="plus"
54-
title="Add Parallel Stages Group before"
54+
title="Add parallel stages group before"
5555
key={`add-${YamlEntityType.ParallelStageGroup}-before`}
5656
onSelect={() => {
5757
onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.ParallelStageGroup)
5858
}}
5959
/>
6060
<DropdownMenu.IconItem
6161
icon="plus"
62-
title="Add Parallel Stages Group after"
62+
title="Add parallel stages group after"
6363
key={`add-${YamlEntityType.ParallelStageGroup}-after`}
6464
onSelect={() => {
6565
onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.ParallelStageGroup)

‎packages/views/src/unified-pipeline-studio/components/palette-drawer/unified-pipeline-step-palette-drawer.tsx‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { ElementType, useCallback, useMemo, useRef } from 'react'
22

3+
import { useUnifiedPipelineStudioContext } from '@views/unified-pipeline-studio/context/unified-pipeline-studio-context'
4+
import { RightDrawer } from '@views/unified-pipeline-studio/types/right-drawer-types'
5+
36
import {
4-
Button,
5-
ButtonLayout,
67
Drawer,
78
EntityFormLayout,
89
Layout,
@@ -12,8 +13,6 @@ import {
1213
Spacer,
1314
Text
1415
} from '@harnessio/ui/components'
15-
import { useUnifiedPipelineStudioContext } from '@views/unified-pipeline-studio/context/unified-pipeline-studio-context'
16-
import { RightDrawer } from '@views/unified-pipeline-studio/types/right-drawer-types'
1716

1817
import { harnessStepGroups, harnessSteps } from '../steps/harness-steps'
1918
import { StepPaletteSection } from './components/step-palette-section'
@@ -24,31 +23,27 @@ const componentsMap: Record<
2423
Header: ElementType
2524
Title: ElementType
2625
Body: ElementType
27-
Footer: ElementType
2826
}
2927
> = {
3028
true: {
3129
Header: Drawer.Header,
3230
Title: Drawer.Title,
33-
Body: Drawer.Body,
34-
Footer: Drawer.Footer
31+
Body: Drawer.Body
3532
},
3633
false: {
3734
Header: EntityFormLayout.Header,
3835
Title: EntityFormLayout.Title,
39-
Body: 'div',
40-
Footer: EntityFormLayout.Footer
36+
Body: 'div'
4137
}
4238
}
4339

4440
interface PipelineStudioStepFormProps {
45-
requestClose: () => void
4641
isDrawer?: boolean
4742
}
4843

4944
export const UnifiedPipelineStudioStepPalette = (props: PipelineStudioStepFormProps): JSX.Element => {
50-
const { requestClose, isDrawer = false } = props
51-
const { Header, Title, Body, Footer } = componentsMap[isDrawer ? 'true' : 'false']
45+
const { isDrawer = false } = props
46+
const { Header, Title, Body } = componentsMap[isDrawer ? 'true' : 'false']
5247
const { setFormEntity, setRightDrawer, useTemplateListStore } = useUnifiedPipelineStudioContext()
5348
const {
5449
page,
@@ -88,7 +83,7 @@ export const UnifiedPipelineStudioStepPalette = (props: PipelineStudioStepFormPr
8883
return (
8984
<>
9085
<Header>
91-
<Title>Add Step</Title>
86+
<Title>Add step</Title>
9287
<SearchInput
9388
autoFocus
9489
id="search"
@@ -159,15 +154,6 @@ export const UnifiedPipelineStudioStepPalette = (props: PipelineStudioStepFormPr
159154
<Spacer size={8} />
160155
</Layout.Flex>
161156
</Body>
162-
<Footer>
163-
<ButtonLayout.Root>
164-
<ButtonLayout.Secondary>
165-
<Button variant="secondary" onClick={requestClose}>
166-
Cancel
167-
</Button>
168-
</ButtonLayout.Secondary>
169-
</ButtonLayout.Root>
170-
</Footer>
171157
</>
172158
)
173159
}

‎packages/views/src/unified-pipeline-studio/components/stage-config/form-definition/stage-form-definition.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const inputs: InputDefinition[] = [
4242
{
4343
inputType: 'list',
4444
path: `variables`,
45-
label: 'Stage Variables',
45+
label: 'Stage variables',
4646
inputConfig: {
4747
layout: 'grid',
4848
inputs: [

0 commit comments

Comments
 (0)