Skip to content

Commit c0d09b3

Browse files
abhinavrastogi-harnesscxraminaandrewgolovanov
committed
feat: design systems graph refactoring (#1020)
* feat: design systems graph refactoring * feat: design systems graph refactoring * feat: design systems graph refactoring * Update shared-style-variables.css upd for pipeline cards colors * Update shared-style-variables.css * Update shared-style-variables.css (#1021) * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * fix: minor changes --------- Co-authored-by: Anastasia Ramina <[email protected]> Co-authored-by: Andrew Golovanov <[email protected]>
1 parent 4a95555 commit c0d09b3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+405
-219
lines changed

‎apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-add-in-node-context-menu.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const StageGroupAddInNodeContextMenu = () => {
2121
style={{ left: `${contextMenuData?.position.x}px`, top: `${contextMenuData?.position.y}px` }}
2222
>
2323
<DropdownMenu.Item
24-
key="add"
24+
key={`add-${YamlEntityType.Stage}`}
2525
className="flex items-center gap-1.5"
2626
onSelect={() => {
2727
onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.Stage)
@@ -32,7 +32,7 @@ export const StageGroupAddInNodeContextMenu = () => {
3232
</DropdownMenu.Item>
3333
<DropdownMenu.Separator />
3434
<DropdownMenu.Item
35-
key="add"
35+
key={`add-${YamlEntityType.SerialStageGroup}`}
3636
className="flex items-center gap-1.5"
3737
onSelect={() => {
3838
onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.SerialStageGroup)
@@ -42,7 +42,7 @@ export const StageGroupAddInNodeContextMenu = () => {
4242
<Text wrap="nowrap">Add Serial group</Text>
4343
</DropdownMenu.Item>
4444
<DropdownMenu.Item
45-
key="add"
45+
key={`add-${YamlEntityType.ParallelStageGroup}`}
4646
className="flex items-center gap-1.5"
4747
onSelect={() => {
4848
onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.ParallelStageGroup)

‎apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-node-context-menu.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const StageGroupNodeContextMenu = () => {
3333
</DropdownMenu.Item>
3434
<DropdownMenu.Separator />
3535
<DropdownMenu.Item
36-
key="add"
36+
key={`add-${YamlEntityType.SerialStageGroup}-before`}
3737
className="flex items-center gap-1.5"
3838
onSelect={() => {
3939
onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.SerialStageGroup)
@@ -43,7 +43,7 @@ export const StageGroupNodeContextMenu = () => {
4343
<Text wrap="nowrap">Add Serial Stages Group before</Text>
4444
</DropdownMenu.Item>
4545
<DropdownMenu.Item
46-
key="add"
46+
key={`add-${YamlEntityType.SerialStageGroup}-after`}
4747
className="flex items-center gap-1.5"
4848
onSelect={() => {
4949
onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.SerialStageGroup)
@@ -54,7 +54,7 @@ export const StageGroupNodeContextMenu = () => {
5454
</DropdownMenu.Item>
5555
<DropdownMenu.Separator />
5656
<DropdownMenu.Item
57-
key="add"
57+
key={`add-${YamlEntityType.ParallelStageGroup}-before`}
5858
className="flex items-center gap-1.5"
5959
onSelect={() => {
6060
onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.ParallelStageGroup)
@@ -64,7 +64,7 @@ export const StageGroupNodeContextMenu = () => {
6464
<Text wrap="nowrap">Add Parallel Stages Group before</Text>
6565
</DropdownMenu.Item>
6666
<DropdownMenu.Item
67-
key="add"
67+
key={`add-${YamlEntityType.ParallelStageGroup}-after`}
6868
className="flex items-center gap-1.5"
6969
onSelect={() => {
7070
onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.ParallelStageGroup)

‎apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-node-context-menu.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const StageNodeContextMenu = (): (() => React.ReactNode)[] | null | any =
3333
</DropdownMenu.Item>
3434
<DropdownMenu.Separator />
3535
<DropdownMenu.Item
36-
key="add"
36+
key="add-before"
3737
className="flex items-center gap-1.5"
3838
onSelect={() => {
3939
onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.Stage) // TODO what to add
@@ -43,7 +43,7 @@ export const StageNodeContextMenu = (): (() => React.ReactNode)[] | null | any =
4343
<Text wrap="nowrap">Add stage before</Text>
4444
</DropdownMenu.Item>
4545
<DropdownMenu.Item
46-
key="add"
46+
key="add-after"
4747
className="flex items-center gap-1.5"
4848
onSelect={() => {
4949
onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.Stage) // TODO what to add

‎apps/design-system/src/subjects/views/pipeline-edit/context-menu/step-group-node-context-menu.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const StepGroupNodeContextMenu = () => {
3333
</DropdownMenu.Item>
3434
<DropdownMenu.Separator />
3535
<DropdownMenu.Item
36-
key="add"
36+
key="add-before"
3737
className="flex items-center gap-1.5"
3838
onSelect={() => {
3939
onAddIntention(contextMenuData.nodeData, 'before')
@@ -43,7 +43,7 @@ export const StepGroupNodeContextMenu = () => {
4343
<Text wrap="nowrap">Add Step/Group before</Text>
4444
</DropdownMenu.Item>
4545
<DropdownMenu.Item
46-
key="add"
46+
key="add-after"
4747
className="flex items-center gap-1.5"
4848
onSelect={() => {
4949
onAddIntention(contextMenuData.nodeData, 'after')

‎apps/design-system/src/subjects/views/pipeline-edit/mocks/demoExecutionMock.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ export const demoExecutionMock = [
44
{
55
type: 'Start',
66
config: {
7-
width: 40,
8-
height: 40,
7+
width: 36,
8+
height: 36,
99
hideDeleteButton: true,
1010
hideBeforeAdd: true,
1111
hideLeftPort: true
@@ -223,8 +223,8 @@ export const demoExecutionMock = [
223223
{
224224
type: 'End',
225225
config: {
226-
width: 40,
227-
height: 40,
226+
width: 36,
227+
height: 36,
228228
hideDeleteButton: true,
229229
hideAfterAdd: true,
230230
hideRightPort: true

‎apps/design-system/src/subjects/views/pipeline-edit/pipeline-edit.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { useState } from 'react'
22

3+
import { CollapseButton } from '@subjects/views/pipeline-edit/pipeline-nodes/components/collapse-button.tsx'
4+
35
import { Button, ButtonGroup, Icon } from '@harnessio/ui/components'
46
import {
57
CommonNodeDataType,
@@ -74,7 +76,7 @@ const PipelineStudioWrapper = () => {
7476

7577
return (
7678
<div // eslint-disable-line jsx-a11y/no-static-element-interactions
77-
className="flex h-screen flex-col"
79+
className="bg-graph-bg-gradient bg-graph-bg-size flex h-screen flex-col"
7880
onClick={() => {
7981
setSelectedPath(undefined)
8082
}}
@@ -118,6 +120,7 @@ const PipelineStudioWrapper = () => {
118120
return { level1: staticPath, level2: '' }
119121
}}
120122
portComponent={CustomPort}
123+
collapseButtonComponent={CollapseButton}
121124
edgesConfig={{ radius: 10, parallelNodeOffset: 10, serialNodeOffset: 10 }}
122125
yamlRevision={yamlRevision}
123126
onYamlRevisionChange={setYamlRevision}

‎apps/design-system/src/subjects/views/pipeline-edit/pipeline-execution.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { useMemo } from 'react'
22

3+
import { CollapseButton } from '@subjects/views/pipeline-edit/pipeline-nodes/components/collapse-button.tsx'
4+
35
import { CanvasProvider, PipelineGraph } from '@harnessio/pipeline-graph'
46
import { PipelineStudioNodeContextMenu, PipelineStudioNodeContextProvider } from '@harnessio/ui/views'
57

@@ -44,6 +46,7 @@ const PipelineExecutionInner = () => {
4446
return { level1: staticPath, level2: '' }
4547
}}
4648
portComponent={CustomPort}
49+
collapseButtonComponent={CollapseButton}
4750
edgesConfig={{ radius: 10, parallelNodeOffset: 10, serialNodeOffset: 10 }}
4851
data={demoExecutionMock}
4952
nodes={nodes}

‎apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/collapse-button.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { CollapseButtonProps } from '@harnessio/pipeline-graph'
2+
import { Button, Icon } from '@harnessio/ui/components'
3+
4+
export const CollapseButton = ({ collapsed, onToggle }: CollapseButtonProps) => {
5+
return (
6+
<Button
7+
className="bg-background-4 hover:bg-background-9 text-icons-1 hover:text-icons-3"
8+
variant="custom"
9+
size="xs_icon"
10+
onMouseDown={e => e.stopPropagation()}
11+
onClick={onToggle}
12+
>
13+
<Icon name={collapsed ? 'collapse-out' : 'collapse-in'} />
14+
</Button>
15+
)
16+
}

‎apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/collapsed-group-node.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { getNestedStepsCount } from '@subjects/views/pipeline-edit/utils/common-step-utils'
2+
13
import { LeafNodeInternalType, ParallelNodeInternalType, SerialNodeInternalType } from '@harnessio/pipeline-graph'
24
import { cn } from '@harnessio/ui/views'
35

@@ -6,8 +8,6 @@ import { CustomParallelStepGroupContentNodeDataType } from '../../nodes/custom-p
68
import { CustomSerialStepGroupContentNodeDataType } from '../../nodes/custom-serial-step-group-content-node'
79
import { StepNodeDataType } from '../../nodes/custom-step-node'
810

9-
export type ExecutionStatusAlign = 'left' | 'right'
10-
1111
export function CollapsedGroupNode({
1212
node,
1313
containerNodeType
@@ -26,6 +26,10 @@ export function CollapsedGroupNode({
2626
const zIndexProp = ['-1', '-2']
2727

2828
const firstNode = nodesToShow.shift()
29+
const counter =
30+
!!firstNode && 'children' in firstNode && Array.isArray(firstNode.children)
31+
? getNestedStepsCount(firstNode?.children)
32+
: undefined
2933

3034
return (
3135
<>
@@ -42,6 +46,8 @@ export function CollapsedGroupNode({
4246
node={firstNode as LeafNodeInternalType<StepNodeDataType>}
4347
icon={firstNode?.data?.icon}
4448
name={firstNode?.data?.name}
49+
counter={counter}
50+
isCollapsedNode
4551
/>
4652

4753
{/* other nodes without content*/}

‎apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/floating-add-button.tsx

+25-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
import { CSSProperties } from 'react'
22

3+
import {
4+
parallelContainerConfig,
5+
serialContainerConfig
6+
} from '@subjects/views/pipeline-edit/mocks/pipelineExecutionMock'
7+
38
import { Button, Icon } from '@harnessio/ui/components'
49

5-
const CONTAINER_WIDTH = '36'
6-
const CONTAINER_HEIGHT = '36'
10+
const CONTAINER_WIDTH = '40'
11+
const CONTAINER_HEIGHT = '40'
712

813
export interface FloatingAddButtonProp {
914
parentNodeType?: 'leaf' | 'serial' | 'parallel'
1015
position: 'before' | 'after'
1116
onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
17+
collapsed?: boolean
1218
}
1319

1420
export function FloatingAddButton(props: FloatingAddButtonProp) {
15-
const { onClick, position, parentNodeType } = props
21+
const { onClick, position, parentNodeType, collapsed } = props
1622

1723
const style: CSSProperties = {}
1824
if (position === 'before' && parentNodeType === 'serial') {
@@ -38,20 +44,31 @@ export function FloatingAddButton(props: FloatingAddButtonProp) {
3844
style.right = '0px'
3945
}
4046

47+
const typeStyleConf =
48+
parentNodeType === 'parallel'
49+
? parallelContainerConfig
50+
: parentNodeType === 'serial'
51+
? serialContainerConfig
52+
: undefined
53+
const buttonMarginTopValue =
54+
!!typeStyleConf && collapsed === false ? typeStyleConf.paddingTop - typeStyleConf.paddingBottom : 0
55+
4156
return (
4257
<div className="group absolute flex size-full items-center justify-center" style={style}>
4358
<Button
44-
className="bg-background-2 hidden size-6 self-center rounded-full p-1 group-hover:flex"
45-
style={{ alignSelf: 'center' }}
46-
variant={'outline'}
47-
size={'sm'}
59+
className="bg-background-9 hidden size-5 self-center rounded-full p-0 group-hover:flex"
60+
style={{
61+
alignSelf: 'center',
62+
marginTop: `${buttonMarginTopValue}px`
63+
}}
64+
variant="outline"
4865
onMouseDown={e => e.stopPropagation()}
4966
onClick={e => {
5067
e.stopPropagation()
5168
onClick(e)
5269
}}
5370
>
54-
<Icon name="plus" size={15} />
71+
<Icon className="text-icons-3" name="bold-plus" size={10} />
5572
</Button>
5673
</div>
5774
)

‎apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/node-menu-trigger.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { FC } from 'react'
2+
3+
import { SerialGroupNodeProps } from '@subjects/views/pipeline-edit/pipeline-nodes/serial-group-node.tsx'
4+
5+
import { Button, Icon } from '@harnessio/ui/components'
6+
7+
export interface NodeMenuTriggerProps {
8+
onEllipsisClick?: SerialGroupNodeProps['onEllipsisClick']
9+
}
10+
11+
export const NodeMenuTrigger: FC<NodeMenuTriggerProps> = ({ onEllipsisClick }) => {
12+
if (!onEllipsisClick) return <></>
13+
14+
return (
15+
<Button
16+
style={{ top: '10px' }}
17+
className="absolute right-2.5 z-10"
18+
variant="ghost"
19+
size="xs_icon"
20+
onMouseDown={e => e.stopPropagation()}
21+
onClick={onEllipsisClick}
22+
>
23+
<Icon className="text-icons-2" name="more-dots-fill" size={12} />
24+
</Button>
25+
)
26+
}

‎apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/components/node-title.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { FC } from 'react'
2+
3+
import { SerialGroupNodeProps } from '@subjects/views/pipeline-edit/pipeline-nodes/serial-group-node.tsx'
4+
5+
export interface NodeTitleProps extends Pick<SerialGroupNodeProps, 'name' | 'onHeaderClick'> {
6+
counter?: number
7+
}
8+
9+
export const NodeTitle: FC<NodeTitleProps> = ({ name, onHeaderClick, counter }) => {
10+
return (
11+
<div className="absolute inset-x-0 top-0 h-0 px-2.5 pt-2.5">
12+
<div
13+
role="button"
14+
tabIndex={0}
15+
title={name}
16+
className="text-foreground-3 text-14 cursor-pointer truncate px-8 pt-0.5 font-medium leading-snug"
17+
onClick={onHeaderClick}
18+
>
19+
{name} <span className="text-foreground-5">({counter})</span>
20+
</div>
21+
</div>
22+
)
23+
}

‎apps/design-system/src/subjects/views/pipeline-edit/pipeline-nodes/end-node.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import { Icon } from '@harnessio/ui/components'
2+
13
export function EndNode() {
24
return (
3-
<div className="border-borders-2 bg-background-2 flex size-full items-center justify-center rounded-full border">
4-
{/* TODO: replace with icon */}
5-
<div className="bg-success size-3"></div>
5+
<div className="border-borders-2 bg-background-3 shadow-1 flex size-full items-center justify-center rounded-full border">
6+
<Icon name="stop" size={12} className="text-icons-1" />
67
</div>
78
)
89
}

0 commit comments

Comments
 (0)