Skip to content

Commit cb9869f

Browse files
AbhishekA1509AbhishekA1509
authored
Merge pull request #2655 from devtron-labs/feat/webhook-external-image
feat: TriggerView, EnvTriggerView - integrate webhook add image modal
2 parents 3aa9a01 + dee3f44 commit cb9869f

File tree

6 files changed

+58
-8
lines changed

6 files changed

+58
-8
lines changed

‎src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ import { LinkedCIDetail } from '../../../../Pages/Shared/LinkedCIDetailsModal'
125125
import CIMaterialModal from '../../../app/details/triggerView/CIMaterialModal'
126126
import { RenderCDMaterialContentProps } from './types'
127127
import { WebhookReceivedPayloadModal } from '@Components/app/details/triggerView/WebhookReceivedPayloadModal'
128+
import { getExternalCIConfig } from '@Components/ciPipeline/Webhook/webhook.service'
128129

129130
const ApprovalMaterialModal = importComponentFromFELibrary('ApprovalMaterialModal')
130131
const getCIBlockState: (...props) => Promise<BlockedStateData> = importComponentFromFELibrary(
@@ -145,6 +146,7 @@ const validateRuntimeParameters = importComponentFromFELibrary(
145146
'function',
146147
)
147148
const ChangeImageSource = importComponentFromFELibrary('ChangeImageSource', null, 'function')
149+
const WebhookAddImageModal = importComponentFromFELibrary('WebhookAddImageModal', null, 'function')
148150

149151
// FIXME: IN CIMaterials we are sending isCDLoading while in CD materials we are sending isCILoading
150152
let inprogressStatusTimer
@@ -192,6 +194,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
192194
const [runtimeParams, setRuntimeParams] = useState<Record<string, RuntimePluginVariables[]>>({})
193195
const [runtimeParamsErrorState, setRuntimeParamsErrorState] = useState<Record<string, RuntimeParamsErrorState>>({})
194196
const [isBulkTriggerLoading, setIsBulkTriggerLoading] = useState<boolean>(false)
197+
const [selectedWebhookNode, setSelectedWebhookNode] = useState<{ appId: number; id: number }>(null)
195198

196199
const selectedWorkflows = filteredWorkflows.filter((wf) => wf.isSelected)
197200

@@ -1941,7 +1944,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
19411944
}
19421945
if (!filteredWorkflows.length) {
19431946
return (
1944-
<div className='flex-grow-1'>
1947+
<div className="flex-grow-1">
19451948
<AppNotConfigured />
19461949
</div>
19471950
)
@@ -2381,6 +2384,16 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
23812384
history.push(match.url)
23822385
}
23832386

2387+
const getWebhookDetails = () => getExternalCIConfig(selectedWebhookNode.appId, selectedWebhookNode.id, false)
2388+
2389+
const handleWebhookAddImageClick = (appId: number) => (id: number) => {
2390+
setSelectedWebhookNode({ appId, id })
2391+
}
2392+
2393+
const handleWebhookAddImageModalClose = () => {
2394+
setSelectedWebhookNode(null)
2395+
}
2396+
23842397
const renderWorkflow = (): JSX.Element => {
23852398
return (
23862399
<>
@@ -2403,10 +2416,17 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
24032416
location={location}
24042417
match={match}
24052418
index={index}
2419+
handleWebhookAddImageClick={handleWebhookAddImageClick(workflow.appId)}
24062420
/>
24072421
)
24082422
})}
24092423
<LinkedCIDetail workflows={filteredWorkflows} handleClose={handleModalClose} />
2424+
{WebhookAddImageModal && selectedWebhookNode && (
2425+
<WebhookAddImageModal
2426+
getWebhookDetails={getWebhookDetails}
2427+
onClose={handleWebhookAddImageModalClose}
2428+
/>
2429+
)}
24102430
</>
24112431
)
24122432
}

‎src/components/app/details/triggerView/TriggerView.tsx

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ import { CIPipelineBuildType } from '../../../ciPipeline/types'
9595
import { LinkedCIDetail } from '../../../../Pages/Shared/LinkedCIDetailsModal'
9696
import { CIMaterialModal } from './CIMaterialModal'
9797
import { WebhookReceivedPayloadModal } from './WebhookReceivedPayloadModal'
98+
import { getExternalCIConfig } from '@Components/ciPipeline/Webhook/webhook.service'
9899

99100
const ApprovalMaterialModal = importComponentFromFELibrary('ApprovalMaterialModal')
100101
const getCIBlockState: (...props) => Promise<BlockedStateData> = importComponentFromFELibrary(
@@ -103,6 +104,7 @@ const getCIBlockState: (...props) => Promise<BlockedStateData> = importComponent
103104
'function',
104105
)
105106
const WorkflowActionRouter = importComponentFromFELibrary('WorkflowActionRouter', null, 'function')
107+
const WebhookAddImageModal = importComponentFromFELibrary('WebhookAddImageModal', null, 'function')
106108
const getRuntimeParams = importComponentFromFELibrary('getRuntimeParams', null, 'function')
107109
const getRuntimeParamsPayload = importComponentFromFELibrary('getRuntimeParamsPayload', null, 'function')
108110

@@ -146,6 +148,7 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
146148
searchImageTag: '',
147149
resourceFilters: [],
148150
runtimeParams: [],
151+
selectedWebhookNodeId: null,
149152
}
150153
this.refreshMaterial = this.refreshMaterial.bind(this)
151154
this.onClickCIMaterial = this.onClickCIMaterial.bind(this)
@@ -1141,6 +1144,17 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
11411144
this.setState({ selectedEnv: _selectedEnv })
11421145
}
11431146

1147+
getWebhookDetails = () =>
1148+
getExternalCIConfig(this.props.match.params.appId, this.state.selectedWebhookNodeId, false)
1149+
1150+
handleWebhookAddImageClick = (webhookId: number) => {
1151+
this.setState({ selectedWebhookNodeId: webhookId })
1152+
}
1153+
1154+
handleWebhookAddImageModalClose = () => {
1155+
this.setState({ selectedWebhookNodeId: null })
1156+
}
1157+
11441158
getCINode = (): CommonNodeAttr => {
11451159
let nd: CommonNodeAttr
11461160
if (this.state.ciNodeId) {
@@ -1314,7 +1328,7 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
13141328
<CloseIcon />
13151329
</button>
13161330
</div>
1317-
<div className='flex-grow-1'>
1331+
<div className="flex-grow-1">
13181332
<Progressing pageLoader size={32} />
13191333
</div>
13201334
</>
@@ -1378,10 +1392,17 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
13781392
filteredCIPipelines={this.state.filteredCIPipelines}
13791393
environmentLists={this.state.environmentLists}
13801394
appId={+this.props.match.params.appId}
1395+
handleWebhookAddImageClick={this.handleWebhookAddImageClick}
13811396
/>
13821397
)
13831398
})}
13841399
<LinkedCIDetail workflows={this.state.workflows} handleClose={this.handleModalClose} />
1400+
{WebhookAddImageModal && this.state.selectedWebhookNodeId && (
1401+
<WebhookAddImageModal
1402+
getWebhookDetails={this.getWebhookDetails}
1403+
onClose={this.handleWebhookAddImageModalClose}
1404+
/>
1405+
)}
13851406
</>
13861407
)
13871408
}
@@ -1425,7 +1446,7 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
14251446
}
14261447
if (!this.state.workflows.length) {
14271448
return (
1428-
<div className='flex-grow-1'>
1449+
<div className="flex-grow-1">
14291450
{this.props.isJobView ? (
14301451
<AppNotConfigured
14311452
title={APP_DETAILS.JOB_FULLY_NOT_CONFIGURED.title}

‎src/components/app/details/triggerView/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,7 @@ export interface WorkflowProps
338338
index?: number
339339
environmentLists?: any[]
340340
filteredCIPipelines?: any[]
341+
handleWebhookAddImageClick?: (webhookId: number) => void
341342
}
342343

343344
export interface TriggerViewContextType {
@@ -403,6 +404,7 @@ export interface TriggerViewState {
403404
searchImageTag?: string
404405
resourceFilters?: FilterConditionsListType[]
405406
runtimeParams?: RuntimePluginVariables[]
407+
selectedWebhookNodeId: number
406408
}
407409

408410
export interface CIMaterialProps

‎src/components/app/details/triggerView/workflow/Workflow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export class Workflow extends Component<WorkflowProps> {
124124
key={`webhook-${node.id}`}
125125
id={node.id}
126126
isTemplateView={false}
127-
showAddImageButton
127+
addImageButtonConfig={{ show: true, onClick: this.props.handleWebhookAddImageClick }}
128128
/>
129129
)
130130
}

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,14 @@ export const WebhookNode = ({
4747
isLastNode,
4848
isReadonlyView = false,
4949
isTemplateView,
50-
showAddImageButton = false,
50+
addImageButtonConfig,
5151
}: WebhookNodeProps) => {
5252
const [isWebhookTippyOpen, setIsWebhookTippyOpen] = useState(false)
5353

5454
const selectedNodeKey = `${selectedNode?.nodeType}-${selectedNode?.id}`
5555
const currentNodeKey = `${WorkflowNodeType.WEBHOOK}-${id ?? ''}`
5656

57-
const showWebhookAddImageButton = WebhookAddImageButton && showAddImageButton
57+
const showWebhookAddImageButton = WebhookAddImageButton && (addImageButtonConfig?.show || false)
5858

5959
const addNewCD = (event): void => {
6060
event.preventDefault()
@@ -78,6 +78,8 @@ export const WebhookNode = ({
7878
setIsWebhookTippyOpen((prev) => !prev)
7979
}
8080

81+
const onWebhookAddImageClick = () => addImageButtonConfig?.onClick(id)
82+
8183
const renderWrapWithLinkOrTippy = (children: ReactElement) =>
8284
isTemplateView ? (
8385
<TippyCustomized
@@ -138,7 +140,9 @@ export const WebhookNode = ({
138140
/>
139141
)}
140142
</div>
141-
{showWebhookAddImageButton && <WebhookAddImageButton dataTestId={id} onClick={() => {}} />}
143+
{showWebhookAddImageButton && (
144+
<WebhookAddImageButton dataTestId={id} onClick={onWebhookAddImageClick} />
145+
)}
142146
</div>
143147
</ConditionalWrap>
144148
)

‎src/components/workflowEditor/types.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,10 @@ export interface WebhookNodeProps extends Required<Pick<AppConfigProps, 'isTempl
202202
* @default false
203203
*/
204204
isReadonlyView?: boolean
205-
showAddImageButton?: boolean
205+
addImageButtonConfig?: {
206+
show: boolean
207+
onClick?: (webhookId: number) => void
208+
}
206209
}
207210

208211
export interface WebhookTippyType {

0 commit comments

Comments
 (0)