Skip to content

Commit 7e871e2

Browse files
vivek-devtronvivek-devtron
committed
Disabled action button on workflow editor in case of env filter
1 parent 3a45dd9 commit 7e871e2

File tree

7 files changed

+79
-31
lines changed

7 files changed

+79
-31
lines changed

‎src/components/workflowEditor/Workflow.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export interface WorkflowProps
6060
isJobView?: boolean
6161
envList?: any[]
6262
filteredCIPipelines?: any[]
63+
addNewBlocked?: boolean
6364
}
6465

6566
interface WorkflowState {
@@ -253,6 +254,7 @@ export class Workflow extends Component<WorkflowProps, WorkflowState> {
253254
this.props.handleCDSelect(this.props.id, node.id, PipelineType.WEBHOOK, node.id, true)
254255
}}
255256
hideWebhookTippy={this.props.hideWebhookTippy}
257+
addNewBlocked={this.props.addNewBlocked}
256258
/>
257259
)
258260
}
@@ -328,6 +330,7 @@ export class Workflow extends Component<WorkflowProps, WorkflowState> {
328330
showPluginWarning={node.showPluginWarning}
329331
envList={this.props.envList}
330332
filteredCIPipelines={this.props.filteredCIPipelines}
333+
addNewBlocked={this.props.addNewBlocked}
331334
/>
332335
)
333336
}
@@ -362,6 +365,7 @@ export class Workflow extends Component<WorkflowProps, WorkflowState> {
362365
deploymentAppDeleteRequest={node.deploymentAppDeleteRequest}
363366
match={this.props.match}
364367
isVirtualEnvironment={node.isVirtualEnvironment}
368+
addNewBlocked={this.props.addNewBlocked}
365369
/>
366370
)
367371
}

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

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,17 @@ export class CDNode extends Component<CDNodeProps, CDNodeState> {
5252
}
5353

5454
onClickAddNode = (event: any) => {
55-
if (this.props.deploymentAppDeleteRequest) {
56-
toast.error(ERR_MESSAGE_ARGOCD)
57-
} else {
58-
event.stopPropagation()
59-
let { top, left } = event.target.getBoundingClientRect()
60-
top = top + 25
61-
this.props.toggleCDMenu()
62-
}
55+
if (this.props.addNewBlocked) {
56+
return
57+
}
58+
if (this.props.deploymentAppDeleteRequest) {
59+
toast.error(ERR_MESSAGE_ARGOCD)
60+
} else {
61+
event.stopPropagation()
62+
let { top, left } = event.target.getBoundingClientRect()
63+
top = top + 25
64+
this.props.toggleCDMenu()
65+
}
6366
}
6467

6568
getAppDetailsURL(): string {
@@ -128,8 +131,8 @@ export class CDNode extends Component<CDNodeProps, CDNodeState> {
128131
<div
129132
className={`workflow-node__icon-common ${
130133
this.props.isVirtualEnvironment
131-
? "workflow-node__CD-rocket-icon"
132-
: "workflow-node__CD-icon dc__flip"
134+
? 'workflow-node__CD-rocket-icon'
135+
: 'workflow-node__CD-icon dc__flip'
133136
}`}
134137
></div>
135138
</div>
@@ -141,9 +144,18 @@ export class CDNode extends Component<CDNodeProps, CDNodeState> {
141144
className="default-tt workflow-node__add-cd-btn-tippy"
142145
arrow={false}
143146
placement="top"
144-
content={<span className="add-cd-btn-tippy"> Add deployment pipeline </span>}
147+
content={
148+
<span className="add-cd-btn-tippy">
149+
{this.props.addNewBlocked
150+
? 'Not allowed with env filter'
151+
: 'Add deployment pipeline'}
152+
</span>
153+
}
145154
>
146-
<Add className="icon-dim-18 fcb-5" onClick={this.onClickAddNode} />
155+
<Add
156+
className={`icon-dim-18 fcb-5 ${this.props.addNewBlocked ? 'dc__disabled' : ''}`}
157+
onClick={this.onClickAddNode}
158+
/>
147159
</Tippy>
148160
</button>
149161
{this.state.showDeletePipelinePopup && this.renderConfirmationModal()}

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

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,19 @@ export interface CINodeProps {
3131
showPluginWarning?: boolean
3232
envList?: any[]
3333
filteredCIPipelines?: any[]
34+
addNewBlocked?: boolean
3435
}
3536

3637
export class CINode extends Component<CINodeProps> {
38+
onClickAddNode = (event: any) => {
39+
if (this.props.addNewBlocked) {
40+
return
41+
}
42+
event.stopPropagation()
43+
let { top, left } = event.target.getBoundingClientRect()
44+
top = top + 25
45+
this.props.toggleCDMenu()
46+
}
3747
renderNodeIcon = () => {
3848
if (this.props.showPluginWarning) {
3949
return <Warning className="icon-dim-18 warning-icon-y7" />
@@ -68,7 +78,9 @@ export class CINode extends Component<CINodeProps> {
6878
const _linkedBuildText = this.props.isLinkedCI ? 'Build: Linked' : _buildText
6979
const pipeline = this.props.isJobView ? 'Job' : _linkedBuildText
7080
const currPipeline = this.props.filteredCIPipelines.find((pipeline) => +pipeline.id === +this.props.id)
71-
const env = currPipeline?.environmentId ? this.props.envList.find((env) => +env.id === +currPipeline.environmentId) : undefined
81+
const env = currPipeline?.environmentId
82+
? this.props.envList.find((env) => +env.id === +currPipeline.environmentId)
83+
: undefined
7284

7385
return (
7486
<>
@@ -103,9 +115,16 @@ export class CINode extends Component<CINodeProps> {
103115
>
104116
<div className="dc__ellipsis-left">{this.props.title}</div>
105117
</Tippy>
106-
{this.props.isJobView && <>
107-
<span className="fw-4 fs-11">Env: {env ? env.environment_name : DEFAULT_ENV}</span>
108-
<span className="fw-4 fs-11 ml-4 dc__italic-font-style">{!env && "(Default)"}</span></>}
118+
{this.props.isJobView && (
119+
<>
120+
<span className="fw-4 fs-11">
121+
Env: {env ? env.environment_name : DEFAULT_ENV}
122+
</span>
123+
<span className="fw-4 fs-11 ml-4 dc__italic-font-style">
124+
{!env && '(Default)'}
125+
</span>
126+
</>
127+
)}
109128
</div>
110129
{this.renderNodeIcon()}
111130
</div>
@@ -121,17 +140,16 @@ export class CINode extends Component<CINodeProps> {
121140
arrow={false}
122141
placement="top"
123142
content={
124-
<span style={{ display: 'block', width: '145px' }}> Add deployment pipeline </span>
143+
<span style={{ display: 'block', width: '145px' }}>
144+
{this.props.addNewBlocked
145+
? 'Not allowed with env filter'
146+
: 'Add deployment pipeline'}
147+
</span>
125148
}
126149
>
127150
<Add
128-
className="icon-dim-18 fcb-5"
129-
onClick={(event: any) => {
130-
event.stopPropagation()
131-
let { top, left } = event.target.getBoundingClientRect()
132-
top = top + 25
133-
this.props.toggleCDMenu()
134-
}}
151+
className={`icon-dim-18 fcb-5 ${this.props.addNewBlocked ? 'dc__disabled' : ''}`}
152+
onClick={this.onClickAddNode}
135153
/>
136154
</Tippy>
137155
</button>

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,15 @@ import { ReactComponent as Add } from '../../../assets/icons/ic-add.svg'
66
import { ConditionalWrap } from '../../common'
77
import { WebhookNodeProps } from '../types'
88

9-
export function WebhookNode({ x, y, width, height, id, to, configDiffView, toggleCDMenu, hideWebhookTippy }: WebhookNodeProps) {
9+
export function WebhookNode({ x, y, width, height, id, to, configDiffView, toggleCDMenu, hideWebhookTippy, addNewBlocked }: WebhookNodeProps) {
1010
const addNewCD = (event): void => {
11-
event.stopPropagation()
12-
let { top } = event.target.getBoundingClientRect()
13-
top = top + 25
14-
toggleCDMenu()
11+
if (addNewBlocked) {
12+
return
13+
}
14+
event.stopPropagation()
15+
let { top } = event.target.getBoundingClientRect()
16+
top = top + 25
17+
toggleCDMenu()
1518
}
1619

1720
const renderWebhookCard = (): JSX.Element => {
@@ -43,10 +46,12 @@ export function WebhookNode({ x, y, width, height, id, to, configDiffView, toggl
4346
arrow={false}
4447
placement="top"
4548
content={
46-
<span style={{ display: 'block', width: '145px' }}> Add deployment pipeline </span>
49+
<span style={{ display: 'block', width: '145px' }}>
50+
{addNewBlocked ? 'Not allowed with env filter' : 'Add deployment pipeline'}
51+
</span>
4752
}
4853
>
49-
<Add className="icon-dim-18 fcb-5" onClick={addNewCD} />
54+
<Add className={`icon-dim-18 fcb-5 ${addNewBlocked ? 'dc__disabled' : ''}`} onClick={addNewCD} />
5055
</Tippy>
5156
</button>
5257
)}

‎src/components/workflowEditor/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export interface CDNodeProps{
9292
match: RouteComponentProps['match']
9393
description: string
9494
isVirtualEnvironment?: boolean
95+
addNewBlocked?: boolean
9596
}
9697

9798
export interface WebhookNodeProps {
@@ -104,6 +105,7 @@ export interface WebhookNodeProps {
104105
configDiffView?: boolean
105106
toggleCDMenu?: () => void
106107
hideWebhookTippy?: () => void
108+
addNewBlocked?: boolean
107109
}
108110

109111
export interface WebhookTippyType {

‎src/components/workflowEditor/workflowEditor.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -441,6 +441,7 @@ class WorkflowEdit extends Component<WorkflowEditProps, WorkflowEditState> {
441441
className="cta dc__no-decor flex mb-20"
442442
data-testid="new-workflow-button"
443443
onClick={this.toggleCIMenu}
444+
disabled={!!this.props.filteredEnvIds}
444445
>
445446
<img src={add} alt="add-worflow" className="icon-dim-18 mr-5" />
446447
New workflow
@@ -559,6 +560,7 @@ class WorkflowEdit extends Component<WorkflowEditProps, WorkflowEditState> {
559560
isJobView={this.props.isJobView}
560561
envList={this.props.envList}
561562
filteredCIPipelines={this.state.filteredCIPipelines}
563+
addNewBlocked={!!this.props.filteredEnvIds}
562564
/>
563565
)
564566
})

‎src/css/base.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3656,3 +3656,8 @@ textarea::placeholder {
36563656
.dc__disable-click {
36573657
pointer-events: none;
36583658
}
3659+
3660+
.dc__disabled {
3661+
cursor: not-allowed;
3662+
opacity: 0.5;
3663+
}

0 commit comments

Comments
 (0)