refactor: improve rendering logic for WebhookAddImageModal based on location conditions

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(
@@ -2397,19 +2398,18 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
     }
 
     const renderWebhookAddImageModal = () => {
-        // Not showing modal whenever either CDMaterial, CIMaterial or LinkedCIDetails modals are open.
         if (
-            location.search.includes('cd-node') ||
-            location.search.includes('rollback-node') ||
-            location.pathname.includes(URLS.BUILD) ||
-            location.pathname.includes(URLS.LINKED_CI_DETAILS) ||
-            !WebhookAddImageModal ||
-            !selectedWebhookNode
+            WebhookAddImageModal &&
+            shouldRenderWebhookAddImageModal(location) &&
+            !location.pathname.includes('bulk-deploy/request') &&
+            selectedWebhookNode
         ) {
-            return null
+            return (
+                <WebhookAddImageModal getWebhookDetails={getWebhookDetails} onClose={handleWebhookAddImageModalClose} />
+            )
         }
 
-        return <WebhookAddImageModal getWebhookDetails={getWebhookDetails} onClose={handleWebhookAddImageModalClose} />
+        return null
     }
 
     const renderWorkflow = (): JSX.Element => {

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(
@@ -1366,24 +1367,20 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
     }
 
     renderWebhookAddImageModal() {
-        // Not showing modal whenever either CDMaterial, CIMaterial or LinkedCIDetails modals are open.
         if (
-            this.props.location.search.includes('cd-node') ||
-            this.props.location.search.includes('rollback-node') ||
-            this.props.location.pathname.includes(URLS.BUILD) ||
-            this.props.location.pathname.includes(URLS.LINKED_CI_DETAILS) ||
-            !WebhookAddImageModal ||
-            !this.state.selectedWebhookNodeId
+            WebhookAddImageModal &&
+            shouldRenderWebhookAddImageModal(this.props.location) &&
+            this.state.selectedWebhookNodeId
         ) {
-            return null
+            return (
+                <WebhookAddImageModal
+                    getWebhookDetails={this.getWebhookDetails}
+                    onClose={this.handleWebhookAddImageModalClose}
+                />
+            )
         }
 
-        return (
-            <WebhookAddImageModal
-                getWebhookDetails={this.getWebhookDetails}
-                onClose={this.handleWebhookAddImageModalClose}
-            />
-        )
+        return null
     }
 
     handleModalClose = () => {

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)
+    )