Skip to content

Commit 6cc945e

Browse files
AbhishekA1509AbhishekA1509
committed
feat: add new component for toggle cd select
1 parent 2029434 commit 6cc945e

File tree

4 files changed

+52
-46
lines changed

4 files changed

+52
-46
lines changed

‎src/components/workflowEditor/ToggleCDSelectButton.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import Tippy from '@tippyjs/react'
3+
import { ToggleCDSelectButtonProps } from './types'
4+
import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
5+
6+
export default function ToggleCDSelectButton({
7+
addNewPipelineBlocked,
8+
onClickAddNode,
9+
testId,
10+
}: ToggleCDSelectButtonProps) {
11+
return (
12+
<Tippy
13+
className="default-tt"
14+
arrow={false}
15+
placement="top"
16+
content={
17+
<span style={{ display: 'block', width: '145px' }}>
18+
{addNewPipelineBlocked
19+
? 'Cannot add new workflow or deployment pipelines when environment filter is applied.'
20+
: 'Add deployment pipeline'}
21+
</span>
22+
}
23+
>
24+
<button
25+
className="flex h-100 pl-6 pr-6 pt-0 pb-0 dc__outline-none-imp bcn-0 dc__no-border dc__hover-b500 pt-4 pb-4 pl-6 pr-6 dc__border-left-n1--important workflow-node__title--top-right-rad-8 workflow-node__title--bottom-right-rad-8 workflow-node__title--add-cd-icon"
26+
data-testid={testId}
27+
type="button"
28+
onClick={onClickAddNode}
29+
>
30+
<Add className={`icon-dim-12 fcn-6 ${addNewPipelineBlocked ? 'dc__disabled' : ''}`} />
31+
</button>
32+
</Tippy>
33+
)
34+
}

‎src/components/workflowEditor/nodes/CINode.tsx

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react'
22
import { WorkflowNodeType, SelectedNode } from '@devtron-labs/devtron-fe-common-lib'
3+
import ToggleCDSelectButton from '../ToggleCDSelectButton'
34
import { NodeAttr } from '../../app/details/triggerView/types'
4-
import { ReactComponent as Add } from '../../../assets/icons/ic-add.svg'
55
import { ReactComponent as Warning } from '../../../assets/icons/ic-warning.svg'
66
import { ReactComponent as ICLinkedCINode } from '../../../assets/icons/ic-node-build-linked.svg'
77
import link from '../../../assets/icons/ic-link.svg'
@@ -153,31 +153,11 @@ export class CINode extends Component<CINodeProps> {
153153
{this.renderNodeIcon(isJobCard)}
154154

155155
{!this.props.isJobView && selectedNodeKey !== currentNodeKey && (
156-
<Tippy
157-
className="default-tt"
158-
arrow={false}
159-
placement="top"
160-
content={
161-
<span style={{ display: 'block', width: '145px' }}>
162-
{this.props.addNewPipelineBlocked
163-
? 'Cannot add new workflow or deployment pipelines when environment filter is applied.'
164-
: 'Add deployment pipeline'}
165-
</span>
166-
}
167-
>
168-
<button
169-
className="flex h-100 pl-6 pr-6 pt-0 pb-0 dc__outline-none-imp bcn-0 dc__no-border dc__hover-b500 pt-4 pb-4 pl-6 pr-6 dc__border-left-n1--important workflow-node__title--top-right-rad-8 workflow-node__title--bottom-right-rad-8 workflow-node__title--add-cd-icon"
170-
data-testid={`ci-add-deployment-pipeline-button-${this.props.title}`}
171-
type="button"
172-
onClick={this.onClickAddNode}
173-
>
174-
<Add
175-
className={`icon-dim-12 fcn-6 ${
176-
this.props.addNewPipelineBlocked ? 'dc__disabled' : ''
177-
}`}
178-
/>
179-
</button>
180-
</Tippy>
156+
<ToggleCDSelectButton
157+
addNewPipelineBlocked={this.props.addNewPipelineBlocked}
158+
onClickAddNode={this.onClickAddNode}
159+
testId={`ci-add-deployment-pipeline-button-${this.props.title}`}
160+
/>
181161
)}
182162
</div>
183163
</div>

‎src/components/workflowEditor/nodes/WebhookNode.tsx

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react'
2-
import Tippy from '@tippyjs/react'
32
import { WorkflowNodeType } from '@devtron-labs/devtron-fe-common-lib'
43
import { Link } from 'react-router-dom'
4+
import ToggleCDSelectButton from '../ToggleCDSelectButton'
55
import { ReactComponent as Webhook } from '../../../assets/icons/ic-CIWebhook.svg'
6-
import { ReactComponent as Add } from '../../../assets/icons/ic-add.svg'
76
import { ConditionalWrap } from '../../common'
87
import { WebhookNodeProps } from '../types'
98

@@ -63,24 +62,11 @@ export function WebhookNode({
6362
<Webhook className="icon-dim-20 mr-12" />
6463

6564
{toggleCDMenu && selectedNodeKey !== currentNodeKey && (
66-
<Tippy
67-
className="default-tt"
68-
arrow={false}
69-
placement="top"
70-
content={
71-
<span style={{ display: 'block', width: '145px' }}>
72-
{addNewPipelineBlocked
73-
? 'Cannot add new workflow or deployment pipelines when environment filter is applied.'
74-
: 'Add deployment pipeline'}
75-
</span>
76-
}
77-
>
78-
<button className="flex h-100 pl-6 pr-6 pt-0 pb-0 dc__outline-none-imp bcn-0 dc__no-border dc__hover-b500 pt-4 pb-4 pl-6 pr-6 dc__border-left-n1--important workflow-node__title--top-right-rad-8 workflow-node__title--bottom-right-rad-8 workflow-node__title--add-cd-icon" type="button" onClick={addNewCD}>
79-
<Add
80-
className={`icon-dim-12 fcn-6 ${addNewPipelineBlocked ? 'dc__disabled' : ''}`}
81-
/>
82-
</button>
83-
</Tippy>
65+
<ToggleCDSelectButton
66+
addNewPipelineBlocked={addNewPipelineBlocked}
67+
onClickAddNode={addNewCD}
68+
testId={`webhook-add-deployment-pipeline-button-${id}`}
69+
/>
8470
)}
8571
</div>
8672
</div>

‎src/components/workflowEditor/types.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,3 +314,9 @@ export interface WorkflowOptionsModalProps {
314314
workflows?: WorkflowType[]
315315
getWorkflows?: () => void
316316
}
317+
318+
export interface ToggleCDSelectButtonProps {
319+
addNewPipelineBlocked: boolean
320+
onClickAddNode: (event: any) => void
321+
testId: string
322+
}

0 commit comments

Comments
 (0)