Merge pull request #2658 from devtron-labs/fix/webhook-external-image

fix: webhook external image

Author: RohitRaj011

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

@@ -127,6 +127,7 @@ import CIMaterialModal from '../../../app/details/triggerView/CIMaterialModal'
 import { RenderCDMaterialContentProps } from './types'
 import { WebhookReceivedPayloadModal } from '@Components/app/details/triggerView/WebhookReceivedPayloadModal'
 import { getExternalCIConfig } from '@Components/ciPipeline/Webhook/webhook.service'
+import { shouldRenderWebhookAddImageModal } from '@Components/app/details/triggerView/TriggerView.utils'
 
 const ApprovalMaterialModal = importComponentFromFELibrary('ApprovalMaterialModal')
 const getCIBlockState: (...props) => Promise<BlockedStateData> = importComponentFromFELibrary(
@@ -2396,6 +2397,21 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         setSelectedWebhookNode(null)
     }
 
+    const renderWebhookAddImageModal = () => {
+        if (
+            WebhookAddImageModal &&
+            shouldRenderWebhookAddImageModal(location) &&
+            !location.pathname.includes('bulk-deploy/request') &&
+            selectedWebhookNode
+        ) {
+            return (
+                <WebhookAddImageModal getWebhookDetails={getWebhookDetails} onClose={handleWebhookAddImageModalClose} />
+            )
+        }
+
+        return null
+    }
+
     const renderWorkflow = (): JSX.Element => {
         return (
             <>
@@ -2423,12 +2439,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
                     )
                 })}
                 <LinkedCIDetail workflows={filteredWorkflows} handleClose={handleModalClose} />
-                {WebhookAddImageModal && selectedWebhookNode && (
-                    <WebhookAddImageModal
-                        getWebhookDetails={getWebhookDetails}
-                        onClose={handleWebhookAddImageModalClose}
-                    />
-                )}
+                {renderWebhookAddImageModal()}
             </>
         )
     }

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

@@ -96,6 +96,7 @@ import { LinkedCIDetail } from '../../../../Pages/Shared/LinkedCIDetailsModal'
 import { CIMaterialModal } from './CIMaterialModal'
 import { WebhookReceivedPayloadModal } from './WebhookReceivedPayloadModal'
 import { getExternalCIConfig } from '@Components/ciPipeline/Webhook/webhook.service'
+import { shouldRenderWebhookAddImageModal } from './TriggerView.utils'
 
 const ApprovalMaterialModal = importComponentFromFELibrary('ApprovalMaterialModal')
 const getCIBlockState: (...props) => Promise<BlockedStateData> = importComponentFromFELibrary(
@@ -1365,6 +1366,23 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
         return null
     }
 
+    renderWebhookAddImageModal() {
+        if (
+            WebhookAddImageModal &&
+            shouldRenderWebhookAddImageModal(this.props.location) &&
+            this.state.selectedWebhookNodeId
+        ) {
+            return (
+                <WebhookAddImageModal
+                    getWebhookDetails={this.getWebhookDetails}
+                    onClose={this.handleWebhookAddImageModalClose}
+                />
+            )
+        }
+
+        return null
+    }
+
     handleModalClose = () => {
         this.props.history.push(this.props.match.url)
     }
@@ -1397,12 +1415,7 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
                     )
                 })}
                 <LinkedCIDetail workflows={this.state.workflows} handleClose={this.handleModalClose} />
-                {WebhookAddImageModal && this.state.selectedWebhookNodeId && (
-                    <WebhookAddImageModal
-                        getWebhookDetails={this.getWebhookDetails}
-                        onClose={this.handleWebhookAddImageModalClose}
-                    />
-                )}
+                {this.renderWebhookAddImageModal()}
             </>
         )
     }

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

@@ -14,10 +14,15 @@
  * limitations under the License.
  */
 
+import { useLocation } from 'react-router-dom'
+
 import { DeploymentWithConfigType } from '@devtron-labs/devtron-fe-common-lib'
 
+import { URLS } from '@Config/routes'
+
 import { deepEqual } from '../../../common'
 import { DeploymentHistoryDetail } from '../cdDetails/cd.type'
+import { TRIGGER_VIEW_PARAMS } from './Constants'
 import { TriggerViewDeploymentConfigType } from './types'
 
 export const DEPLOYMENT_CONFIGURATION_NAV_MAP = {
@@ -163,3 +168,26 @@ export const checkForDiff = (configA: TriggerViewDeploymentConfigType, configB:
 
     return diffForOptions
 }
+
+/**
+ * Determines whether the "Webhook Add Image" modal should be rendered based on the current location.
+ *
+ * This function checks the `location` object to ensure that the modal is not displayed
+ * when certain other modals or views are active. Specifically, the modal will not be shown
+ * if any of the following conditions are met:
+ * - The URL query string contains 'cd-node' or 'rollback-node'.
+ * - The URL path includes the `BUILD` route.
+ * - The URL path includes the `LINKED_CI_DETAILS` route.
+ * - The URL query string contains the `APPROVAL_NODE` parameter.
+ *
+ * @param location - The current location object, typically obtained from the `useLocation` hook.
+ * @returns A boolean indicating whether the "Webhook Add Image" modal should be rendered.
+ */
+export const shouldRenderWebhookAddImageModal = (location: ReturnType<typeof useLocation>) =>
+    !(
+        location.search.includes('cd-node') ||
+        location.search.includes('rollback-node') ||
+        location.search.includes(TRIGGER_VIEW_PARAMS.APPROVAL_NODE) ||
+        location.pathname.includes(URLS.BUILD) ||
+        location.pathname.includes(URLS.LINKED_CI_DETAILS)
+    )

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

@@ -124,7 +124,7 @@ export class Workflow extends Component<WorkflowProps> {
                 key={`webhook-${node.id}`}
                 id={node.id}
                 isTemplateView={false}
-                addImageButtonConfig={{ show: true, onClick: this.props.handleWebhookAddImageClick }}
+                addImageButtonClick={this.props.handleWebhookAddImageClick}
             />
         )
     }

src/components/workflowEditor/nodes/WebhookNode.tsx

@@ -47,14 +47,14 @@ export const WebhookNode = ({
     isLastNode,
     isReadonlyView = false,
     isTemplateView,
-    addImageButtonConfig,
+    addImageButtonClick,
 }: WebhookNodeProps) => {
     const [isWebhookTippyOpen, setIsWebhookTippyOpen] = useState(false)
 
     const selectedNodeKey = `${selectedNode?.nodeType}-${selectedNode?.id}`
     const currentNodeKey = `${WorkflowNodeType.WEBHOOK}-${id ?? ''}`
 
-    const showWebhookAddImageButton = WebhookAddImageButton && (addImageButtonConfig?.show || false)
+    const showWebhookAddImageButton = WebhookAddImageButton && !!addImageButtonClick
 
     const addNewCD = (event): void => {
         event.preventDefault()
@@ -78,7 +78,7 @@ export const WebhookNode = ({
         setIsWebhookTippyOpen((prev) => !prev)
     }
 
-    const onWebhookAddImageClick = () => addImageButtonConfig?.onClick(id)
+    const onWebhookAddImageClick = () => addImageButtonClick(id)
 
     const renderWrapWithLinkOrTippy = (children: ReactElement) =>
         isTemplateView ? (

src/components/workflowEditor/types.ts

@@ -204,10 +204,7 @@ export interface WebhookNodeProps extends Required<Pick<AppConfigProps, 'isTempl
      * @default false
      */
     isReadonlyView?: boolean
-    addImageButtonConfig?: {
-        show: boolean
-        onClick?: (webhookId: number) => void
-    }
+    addImageButtonClick?: (webhookId: number) => void
 }
 
 export interface WebhookTippyType {