66 * - If !isLoading and filteredCIPipelines does not contain the selected pipeline, we will show error
77 */
88
9- import { SyntheticEvent , useEffect , useRef , useState } from 'react'
9+ import { useEffect , useRef , useState } from 'react'
1010import { Prompt , useHistory , useParams } from 'react-router-dom'
1111
1212import {
1313 APIResponseHandler ,
1414 Button ,
1515 Checkbox ,
1616 CIPipelineNodeType ,
17- CommonNodeAttr ,
1817 ComponentSizeType ,
1918 ConsequenceAction ,
2019 DEFAULT_ROUTE_PROMPT_MESSAGE ,
@@ -64,6 +63,7 @@ const BuildImageModal = ({
6463 reloadWorkflows,
6564 appId : appIdProp ,
6665 environmentLists,
66+ reloadWorkflowStatus,
6767} : BuildImageModalProps ) => {
6868 const { push } = useHistory ( )
6969 const { ciNodeId } = useParams < Pick < CIMaterialRouterProps , 'ciNodeId' > > ( )
@@ -89,7 +89,7 @@ const BuildImageModal = ({
8989 const appId = appIdProp || selectedWorkflow ?. appId
9090 const filteredCIPipelines = filteredCIPipelinesProp || filteredCIPipelineMap ?. get ( String ( appId ) ) || [ ]
9191
92- const selectedCIPipeline = ( filteredCIPipelines || [ ] ) . find ( ( _ci ) => _ci . id === + ciNodeId )
92+ const selectedCIPipeline = filteredCIPipelines . find ( ( _ci ) => _ci . id === + ciNodeId )
9393
9494 usePrompt ( {
9595 shouldPrompt : isBuildTriggerLoading ,
@@ -98,10 +98,11 @@ const BuildImageModal = ({
9898 const [ areRuntimeParamsLoading , runtimeParams , runtimeParamsError , reloadRuntimeParams , setRuntimeParams ] =
9999 useAsync < GitInfoMaterialProps [ 'runtimeParams' ] > (
100100 ( ) => getRuntimeParams ( ciNodeId , true ) ,
101- [ ciNodeId ] ,
102- ! ! ciNodeId && ! ! getRuntimeParams ,
101+ [ ciNodeId , ciNode ?. isTriggerBlocked ] ,
102+ ! ! ciNodeId && ! ciNode ?. isTriggerBlocked && ! ! getRuntimeParams ,
103103 )
104104
105+ // Just added abortController for first time mount and unmount, no need to use it later since, if materials are loading then loading state will be true
105106 const [ isMaterialListLoading , _materialList , materialListError , reloadMaterialList , setMaterialList ] = useAsync (
106107 ( ) =>
107108 getCIMaterials ( {
@@ -110,16 +111,20 @@ const BuildImageModal = ({
110111 isCINodePresent : ! ! ciNode ,
111112 selectedWorkflow,
112113 } ) ,
113- [ ciNodeId ] ,
114- ! ! ciNodeId ,
114+ [ ciNodeId , ciNode ?. isTriggerBlocked ] ,
115+ ! ! ciNodeId && ! ciNode ?. isTriggerBlocked ,
115116 )
116117
117118 const materialList = _materialList || [ ]
118119
119- const [ isLoadingBlobStorageModule , blobStorageModuleRes , , reloadBlobStorageModule ] = useAsync ( ( ) =>
120- getModuleConfigured ( ModuleNameMap . BLOB_STORAGE ) ,
120+ const [ isLoadingBlobStorageModule , blobStorageModuleRes , , reloadBlobStorageModule ] = useAsync (
121+ ( ) => getModuleConfigured ( ModuleNameMap . BLOB_STORAGE ) ,
122+ [ ciNode ?. isTriggerBlocked ] ,
123+ ! ciNode ?. isTriggerBlocked ,
121124 )
122125
126+ const isBlobStorageConfigured = ! ! blobStorageModuleRes ?. result ?. enabled
127+
123128 useEffect ( ( ) => {
124129 if ( isJobView && environmentLists ?. length > 0 ) {
125130 const envId = selectedCIPipeline ?. environmentId || 0
@@ -130,8 +135,6 @@ const BuildImageModal = ({
130135 return ( ) => materialListAbortControllerRef . current . abort ( )
131136 } , [ ] )
132137
133- const isBlobStorageConfigured = ! ! blobStorageModuleRes ?. result ?. enabled
134-
135138 const handleReload = ( ) => {
136139 reloadMaterialList ( )
137140 reloadRuntimeParams ( )
@@ -148,6 +151,7 @@ const BuildImageModal = ({
148151 }
149152
150153 const showContentLoader = areRuntimeParamsLoading || isMaterialListLoading || isLoadingBlobStorageModule
154+ const screenErrorData = materialListError || runtimeParamsError
151155
152156 const getErrorScreenManagerProps = ( ) : ErrorScreenManagerProps => {
153157 if ( materialListError ) {
@@ -194,11 +198,11 @@ const BuildImageModal = ({
194198
195199 const payload = getTriggerBuildPayload ( {
196200 materialList,
197- ciConfiguredGitMaterialId : selectedWorkflow ? .ciConfiguredGitMaterialId ,
201+ ciConfiguredGitMaterialId : selectedWorkflow . ciConfiguredGitMaterialId ,
198202 runtimeParams,
199203 selectedEnv,
200204 invalidateCache,
201- isJobCI : ciNode ? .isJobCI ,
205+ isJobCI : ciNode . isJobCI ,
202206 ciNodeId : + ciNodeId ,
203207 } )
204208
@@ -213,6 +217,7 @@ const BuildImageModal = ({
213217
214218 try {
215219 await triggerBuild ( { payload, redirectToCIPipeline } )
220+ reloadWorkflowStatus ( )
216221 handleClose ( )
217222 } catch {
218223 // Do nothing
@@ -225,7 +230,7 @@ const BuildImageModal = ({
225230 setRuntimeParams ( updatedRuntimeParams )
226231 }
227232
228- const handleStartBuildAction = async ( e : SyntheticEvent ) => {
233+ const handleStartBuildAction = async ( ) => {
229234 const runtimeParamsUpdatedErrorState = validateRuntimeParameters ( runtimeParams )
230235 handleRuntimeParamError ( runtimeParamsUpdatedErrorState )
231236
@@ -237,7 +242,6 @@ const BuildImageModal = ({
237242 return
238243 }
239244
240- e . stopPropagation ( )
241245 await onClickTriggerCINode ( )
242246 }
243247
@@ -264,8 +268,6 @@ const BuildImageModal = ({
264268 }
265269
266270 const renderCTAButton = ( ) => {
267- const nodeType : CommonNodeAttr [ 'type' ] = 'CI'
268-
269271 if (
270272 AllowedWithWarningTippy &&
271273 ciNode ?. pluginBlockState ?. action === ConsequenceAction . ALLOW_UNTIL_TIME &&
@@ -274,18 +276,10 @@ const BuildImageModal = ({
274276 return (
275277 < AllowedWithWarningTippy
276278 consequence = { ciNode . pluginBlockState }
277- configurePluginURL = { getCIPipelineURL (
278- String ( appId ) ,
279- String ( workflowId ) ,
280- true ,
281- ciNodeId ,
282- false ,
283- ciNode . isJobCI ,
284- false ,
285- ) }
279+ configurePluginURL = { getCIPipelineURLWrapper ( ) }
286280 showTriggerButton
287281 onTrigger = { handleStartBuildAction }
288- nodeType = { nodeType }
282+ nodeType = { WorkflowNodeType . CI }
289283 isJobView = { ciNode . isJobCI }
290284 >
291285 { renderCTAButtonWithIcon ( false ) }
@@ -309,21 +303,25 @@ const BuildImageModal = ({
309303 const renderCacheInfo = ( ) => {
310304 if ( ciNode ?. status ?. toLowerCase ( ) === BUILD_STATUS . NOT_TRIGGERED ) {
311305 return (
312- < div className = "flexbox dc__align-items-center dc__gap-8" >
313- < Icon name = "ic-info-filled" color = "B500" size = { 20 } />
314- < div >
315- < div className = "fw-6 fs-13" > { IGNORE_CACHE_INFO . FirstTrigger . title } </ div >
316- < div className = "fw-4 fs-12" > { IGNORE_CACHE_INFO . FirstTrigger . infoText } </ div >
306+ < div className = "flexbox dc__gap-8" >
307+ < div className = "m-4" >
308+ < Icon name = "ic-info-filled" color = "B500" size = { 20 } />
309+ </ div >
310+ < div className = "flexbox-col" >
311+ < span className = "fw-6 fs-13" > { IGNORE_CACHE_INFO . FirstTrigger . title } </ span >
312+ < span className = "fw-4 fs-12" > { IGNORE_CACHE_INFO . FirstTrigger . infoText } </ span >
317313 </ div >
318314 </ div >
319315 )
320316 }
321317 if ( ! isBlobStorageConfigured ) {
322318 return (
323- < div className = "flexbox dc__align-items-center dc__gap-8" >
324- < Icon name = "ic-storage" color = { null } size = { 24 } />
325- < div >
326- < div className = "fw-6 fs-13" > { IGNORE_CACHE_INFO . BlobStorageNotConfigured . title } </ div >
319+ < div className = "flexbox dc__gap-8" >
320+ < div className = "m-4" >
321+ < Icon name = "ic-storage" color = { null } size = { 24 } />
322+ </ div >
323+ < div className = "flexbox-col" >
324+ < span className = "fw-6 fs-13" > { IGNORE_CACHE_INFO . BlobStorageNotConfigured . title } </ span >
327325 < div className = "fw-4 fs-12 flexbox" >
328326 < span > { IGNORE_CACHE_INFO . BlobStorageNotConfigured . infoText } </ span >
329327 < DocLink
@@ -342,26 +340,27 @@ const BuildImageModal = ({
342340 }
343341 if ( ! ciNode ?. storageConfigured ) {
344342 return (
345- < div className = "flexbox dc__align-items-center dc__gap-8" >
346- < Icon name = "ic-info-filled" color = "B500" size = { 20 } />
347- < div >
348- < div className = "fw-6 fs-13" > { IGNORE_CACHE_INFO . CacheNotAvailable . title } </ div >
349- < div className = "fw-4 fs-12" > { IGNORE_CACHE_INFO . CacheNotAvailable . infoText } </ div >
343+ < div className = "flexbox dc__gap-8" >
344+ < div className = "m-4" >
345+ < Icon name = "ic-info-filled" color = "B500" size = { 20 } />
346+ </ div >
347+ < div className = "flexbox-col" >
348+ < span className = "fw-6 fs-13" > { IGNORE_CACHE_INFO . CacheNotAvailable . title } </ span >
349+ < span className = "fw-4 fs-12" > { IGNORE_CACHE_INFO . CacheNotAvailable . infoText } </ span >
350350 </ div >
351351 </ div >
352352 )
353353 }
354354 return (
355355 < Checkbox
356356 isChecked = { invalidateCache }
357- onClick = { stopPropagation }
358357 rootClassName = "mb-0 flex top"
359358 value = "CHECKED"
360359 onChange = { toggleInvalidateCache }
361360 data-testid = "set-clone-directory"
362361 >
363- < div >
364- < div className = "fs-13 fw-6 lh-20" > { IGNORE_CACHE_INFO . IgnoreCache . title } </ div >
362+ < div className = "flexbox-col" >
363+ < span className = "fs-13 fw-6 lh-20" > { IGNORE_CACHE_INFO . IgnoreCache . title } </ span >
365364
366365 < div className = "flex dc__gap-4" >
367366 < span className = "fs-12 fw-4 lh-16" > { IGNORE_CACHE_INFO . IgnoreCache . infoText } </ span >
@@ -377,17 +376,16 @@ const BuildImageModal = ({
377376 )
378377 }
379378
380- // TODO: Make sure empty states in case of filter
381379 const renderContent = ( ) => (
382380 < APIResponseHandler
383381 isLoading = { showContentLoader }
384- error = { materialListError }
382+ error = { screenErrorData }
385383 errorScreenManagerProps = { getErrorScreenManagerProps ( ) }
386384 progressingProps = { {
387385 pageLoader : true ,
388386 } }
389387 >
390- { ! showContentLoader && (
388+ { ! showContentLoader && ! screenErrorData && (
391389 < GitInfoMaterial
392390 appId = { appId }
393391 workflowId = { selectedWorkflow ?. id }
@@ -429,7 +427,7 @@ const BuildImageModal = ({
429427 < div className = "flex-grow-1 dc__overflow-auto w-100" > { renderContent ( ) } </ div >
430428 </ div >
431429
432- { ciNode ?. isTriggerBlocked || showWebhookModal || materialListError ? null : (
430+ { ciNode ?. isTriggerBlocked || showWebhookModal || ! ! screenErrorData ? null : (
433431 < div className = "flexbox dc__content-space dc__gap-12 py-16 px-20 border__primary--top dc__no-shrink" >
434432 { isJobView ? renderEnvironments ( ) : renderCacheInfo ( ) }
435433 { renderCTAButton ( ) }
0 commit comments