devtron-labs · arunjaindev · Mar 11, 2025 · Mar 10, 2025 · Mar 11, 2025 · Mar 11, 2025
diff --git a/src/components/ApplicationGroup/AppGroup.types.ts b/src/components/ApplicationGroup/AppGroup.types.ts
@@ -117,7 +117,7 @@ export interface BulkCITriggerType extends BulkRuntimeParamsType {
     closePopup: (e) => void
     updateBulkInputMaterial: (materialList: Record<string, any[]>) => void
     onClickTriggerBulkCI: (appIgnoreCache: Record<number, boolean>, appsToRetry?: Record<string, boolean>) => void
-    getWebhookPayload: (id, webhookTimeStampOrder: typeof TIME_STAMP_ORDER) => void
+    getWebhookPayload: (id, webhookTimeStampOrder?: typeof TIME_STAMP_ORDER) => void
     webhookPayloads: WebhookPayloadType
     setWebhookPayloads: React.Dispatch<React.SetStateAction<WebhookPayloadType>>
     isWebhookPayloadLoading: boolean

diff --git a/src/components/ApplicationGroup/Details/TriggerView/BulkCITrigger.tsx b/src/components/ApplicationGroup/Details/TriggerView/BulkCITrigger.tsx
@@ -18,7 +18,6 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
 import {
     ServerErrors,
     Drawer,
-    Progressing,
     showError,
     stopPropagation,
     ConsequenceType,
@@ -78,8 +77,6 @@ import { getIsAppUnorthodox } from './utils'
 import { ReactComponent as MechanicalOperation } from '../../../../assets/img/ic-mechanical-operation.svg'
 import { BULK_ERROR_MESSAGES } from './constants'
 import { GitInfoMaterial } from '@Components/common/helpers/GitInfoMaterialCard/GitInfoMaterial'
-import { useRouteMatch } from 'react-router-dom'
-import { WebhookReceivedPayloadModal } from '@Components/app/details/triggerView/WebhookReceivedPayloadModal'
 import { ReactComponent as LeftIcon } from '@Icons/ic-arrow-backward.svg'
 
 const PolicyEnforcementMessage = importComponentFromFELibrary('PolicyEnforcementMessage')
@@ -123,10 +120,17 @@ const BulkCITrigger = ({
     const [appIgnoreCache, setAppIgnoreCache] = useState<Record<number, boolean>>({})
     const [appPolicy, setAppPolicy] = useState<Record<number, ConsequenceType>>({})
     const [currentSidebarTab, setCurrentSidebarTab] = useState<string>(CIMaterialSidebarType.CODE_SOURCE)
-    const { url } = useRouteMatch()
-    const showWebhookModal = url.includes(URLS.WEBHOOK_RECEIVED_PAYLOAD_ID || URLS.WEBHOOK_MODAL)
     const [isWebhookBulkCI, setIsWebhookBulkCI] = useState(false)
 
+    const selectedMaterialList = appList.find((app) => app.appId === selectedApp.appId)?.material || []
+
+    useEffect(() => {
+        const selectedMaterialId = selectedMaterialList[0]?.id
+        if (isWebhookBulkCI && selectedMaterialId) {
+            getWebhookPayload(selectedMaterialId)
+        }
+    }, [JSON.stringify(selectedMaterialList), isWebhookBulkCI])
+
     const [blobStorageConfigurationLoading, blobStorageConfiguration] = useAsync(
         () => getModuleConfigured(ModuleNameMap.BLOB_STORAGE),
         [],
@@ -317,9 +321,6 @@ const BulkCITrigger = ({
     }
 
     const renderHeaderSection = (): JSX.Element | null => {
-        if (showWebhookModal) {
-            return null
-        }
         return (
             <div className="flex flex-align-center flex-justify dc__border-bottom bg__primary pt-16 pr-20 pb-16 pl-20">
                 <div className="flex left dc__gap-12">
@@ -463,7 +464,7 @@ const BulkCITrigger = ({
         setRegexValue(_regexValue)
     }
 
-    const renderMainContent = (selectedMaterialList: any[]): JSX.Element => {
+    const renderMainContent = (): JSX.Element => {
         if (showRegexModal) {
             const selectedCIPipeline = selectedApp.filteredCIPipelines?.find(
                 (_ciPipeline) => _ciPipeline?.id == selectedApp.ciPipelineId,
@@ -511,6 +512,7 @@ const BulkCITrigger = ({
                 />
             )
         }
+
         const selectedMaterial = selectedMaterialList?.find((mat) => mat.isSelected)
 
         return (
@@ -679,20 +681,6 @@ const BulkCITrigger = ({
         )
     }
 
-    const renderWebhookModal = (selectedMaterialList: CIMaterialType[]): JSX.Element => (
-        <WebhookReceivedPayloadModal
-            workflowId={+selectedApp.workFlowId}
-            webhookPayloads={webhookPayloads}
-            isWebhookPayloadLoading={isWebhookPayloadLoading}
-            material={selectedMaterialList}
-            pipelineId={selectedApp.ciPipelineId}
-            title={selectedApp.ciPipelineName}
-            getWebhookPayload={getWebhookPayload}
-            appId={selectedApp.appId.toString()}
-            isBulkCIWebhook={isWebhookBulkCI}
-        />
-    )
-
     const renderBodySection = (): JSX.Element => {
         if (isLoading) {
             const message = isBulkBuildTriggered.current
@@ -707,54 +695,47 @@ const BulkCITrigger = ({
                 />
             )
         }
-        const selectedMaterialList = appList.find((app) => app.appId === selectedApp.appId)?.material || []
+
         const sidebarTabs = Object.values(CIMaterialSidebarType).map((tabValue) => ({
             value: tabValue,
             label: tabValue,
         }))
 
-        return (
-            <div className={`bulk-ci-trigger  ${showWebhookModal ? 'webhook-modal' : ''}`}>
-                {isWebhookBulkCI ? (
-                    renderWebhookModal(selectedMaterialList)
-                ) : (
-                    <div className="sidebar bg__primary dc__overflow-auto">
+        return isWebhookBulkCI ? (
+            renderMainContent()
+        ) : (
+            <div className="bulk-ci-trigger">
+                <div className="sidebar bg__primary dc__overflow-auto">
+                    <div className="dc__position-sticky dc__top-0 bg__primary dc__border-bottom fw-6 fs-13 cn-9 p-12 ">
+                        {RuntimeParamTabs ? (
+                            <RuntimeParamTabs
+                                tabs={sidebarTabs}
+                                initialTab={currentSidebarTab}
+                                onChange={handleSidebarTabChange}
+                                hasError={{
+                                    [CIMaterialSidebarType.PARAMETERS]:
+                                        runtimeParamsErrorState[selectedApp.ciPipelineId] &&
+                                        !runtimeParamsErrorState[selectedApp.ciPipelineId].isValid,
+                                }}
+                            />
+                        ) : (
+                            'Applications'
+                        )}
+                    </div>
+
+                    {appList.map((app, index) => (
                         <div
-                            className="dc__position-sticky dc__top-0 bg__primary dc__border-bottom fw-6 fs-13 cn-9 p-12 "
-                            style={{ zIndex: 1 }}
+                            className={`material-list pr-12 pl-12 pb-12 ${
+                                app.appId === selectedApp.appId ? 'bg__tertiary' : 'dc__border-bottom-n1 cursor'
+                            }`}
+                            key={`app-${app.appId}`}
                         >
-                            {RuntimeParamTabs ? (
-                                <RuntimeParamTabs
-                                    tabs={sidebarTabs}
-                                    initialTab={currentSidebarTab}
-                                    onChange={handleSidebarTabChange}
-                                    hasError={{
-                                        [CIMaterialSidebarType.PARAMETERS]:
-                                            runtimeParamsErrorState[selectedApp.ciPipelineId] &&
-                                            !runtimeParamsErrorState[selectedApp.ciPipelineId].isValid,
-                                    }}
-                                />
-                            ) : (
-                                'Applications'
-                            )}
+                            {renderAppName(app, index)}
+                            {renderSelectedAppMaterial(app.appId, selectedMaterialList)}
                         </div>
-
-                        {appList.map((app, index) => (
-                            <div
-                                className={`material-list pr-12 pl-12 pb-12 ${
-                                    app.appId === selectedApp.appId ? 'bg__tertiary' : 'dc__border-bottom-n1 cursor'
-                                }`}
-                                key={`app-${app.appId}`}
-                            >
-                                {renderAppName(app, index)}
-                                {renderSelectedAppMaterial(app.appId, selectedMaterialList)}
-                            </div>
-                        ))}
-                    </div>
-                )}
-                <div className="main-content bg__tertiary dc__overflow-auto">
-                    {renderMainContent(selectedMaterialList)}
+                    ))}
                 </div>
+                <div className="main-content bg__tertiary dc__overflow-auto">{renderMainContent()}</div>
             </div>
         )
     }

diff --git a/src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.scss b/src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.scss
@@ -49,10 +49,6 @@
         overflow: hidden;
         flex-grow: 1;
 
-        &.webhook-modal {
-            grid-template-columns: 1fr;
-        }
-
         .sidebar {
             .material-list {
                 .material-list__item {
@@ -97,10 +93,3 @@
         }
     }
 }
-
-.env-modal-width {
-    &.full-height {
-        z-index: 1;
-        height: calc(100vh - 55px);
-    }
-}
diff --git a/src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx b/src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx
@@ -1941,7 +1941,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
     }
     if (!filteredWorkflows.length) {
         return (
-            <div>
+            <div className='flex-grow-1'>
                 <AppNotConfigured />
             </div>
         )

diff --git a/src/components/CIPipelineN/CIPipeline.tsx b/src/components/CIPipelineN/CIPipeline.tsx
@@ -853,7 +853,7 @@ export default function CIPipeline({
                 )}
                 <hr className="divider m-0" />
                 <pipelineContext.Provider value={contextValue}>
-                    <div className={`ci-pipeline-advance ${isAdvanced ? 'pipeline-container' : ''}`}>
+                    <div className={`${isAdvanced ? 'pipeline-container' : ''}`}>
                         {isAdvanced && (
                             <div className="sidebar-container">
                                 <Sidebar

diff --git a/src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx b/src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx
@@ -134,7 +134,7 @@ export const CiWebhookModal = ({
     )
 
     const renderSidebar = () => (
-        <div className="ci-pipeline-webhook dc__border-right-n2 dc__overflow-hidden dc__border-right-n1">
+        <div className="flexbox-col dc__border-right-n2 dc__overflow-hidden dc__border-right-n1">
             <span className="py-14 fw-6 lh-20 px-16">Received webhooks</span>
             <div className="p-8 flexbox-col flex-grow-1 dc__overflow-auto">
                 {webhookPayloads?.payloads?.map((webhookPayload: WebhookPayload) => {

diff --git a/src/components/app/details/triggerView/TriggerView.tsx b/src/components/app/details/triggerView/TriggerView.tsx
@@ -1313,7 +1313,7 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
                                         <CloseIcon />
                                     </button>
                                 </div>
-                                <div style={{ height: 'calc(100% - 55px)' }}>
+                                <div className='flex-grow-1'>
                                     <Progressing pageLoader size={32} />
                                 </div>
                             </>
@@ -1424,7 +1424,7 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
         }
         if (!this.state.workflows.length) {
             return (
-                <div>
+                <div className='flex-grow-1'>
                     {this.props.isJobView ? (
                         <AppNotConfigured
                             title={APP_DETAILS.JOB_FULLY_NOT_CONFIGURED.title}

diff --git a/src/components/app/details/triggerView/WebhookReceivedPayloadModal.tsx b/src/components/app/details/triggerView/WebhookReceivedPayloadModal.tsx
@@ -42,7 +42,6 @@ export const WebhookReceivedPayloadModal = ({
     isJobView = false,
     getWebhookPayload,
     appId,
-    isBulkCIWebhook = false,
 }: WebhookReceivedPayloadModalType) => {
     const { push } = useHistory()
     const { url } = useRouteMatch()
@@ -144,11 +143,6 @@ export const WebhookReceivedPayloadModal = ({
         )
     }
 
-    if (isBulkCIWebhook) {
-        // For bulk CI webhook, we don't need to show the modal as a child of the trigger view
-        return null
-    }
-
     return (
         <VisibleModal>
             <div

diff --git a/src/components/app/details/triggerView/triggerView.scss b/src/components/app/details/triggerView/triggerView.scss
@@ -22,11 +22,6 @@
     display: grid;
     grid-template-columns: 250px 1fr;
 
-    .ci-pipeline-webhook {
-        display: grid;
-        grid-template-rows: 48px 1fr;
-    }
-
     .ci__filter-table__row{
         display: grid;
         grid-template-columns: 200px 200px auto 100px;

diff --git a/src/components/app/details/triggerView/types.ts b/src/components/app/details/triggerView/types.ts
@@ -729,7 +729,6 @@ export interface WebhookReceivedPayloadModalType
     pipelineId: string
     isJobView?: boolean
     appId: string
-    isBulkCIWebhook?: boolean
 }
 
 export type OffendingWorkflowQueryParamType = `policy/${PolicyKindType}|identifier|${string}`

diff --git a/src/components/cdPipeline/CDPipeline.tsx b/src/components/cdPipeline/CDPipeline.tsx
@@ -1256,7 +1256,7 @@ export default function CDPipeline({
     const renderCDPipelineBody = () => {
         if (pageState === ViewType.ERROR) {
             return (
-                <div className="pipeline-empty-state">
+                <div className="flex-grow-1">
                     <hr className="divider m-0" />
                     <div className="h-100 flex">
                         <ErrorScreenManager code={errorCode} />
@@ -1283,7 +1283,7 @@ export default function CDPipeline({
                 <hr className="divider m-0" />
                 <pipelineContext.Provider value={contextValue}>
                     <div
-                        className={`ci-pipeline-advance ${isAdvanced ? 'pipeline-container' : ''} ${
+                        className={`${isAdvanced ? 'pipeline-container' : ''} ${
                             activeStageName === BuildStageVariable.Build ? 'no-side-bar' : ''
                         }`}
                     >

diff --git a/src/components/ciConfig/CIConfig.scss b/src/components/ciConfig/CIConfig.scss
@@ -149,10 +149,6 @@
         height: 100%;
         margin-top: 0;
 
-        .config-override-diff__view {
-            height: calc(100% - 56px);
-        }
-
         .workflow {
             &.workflow--create {
                 margin-bottom: 0;

diff --git a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
@@ -904,7 +904,7 @@ export const WebhookDetailsModal = ({ close }: WebhookDetailType) => {
 
     const renderBodySection = (): JSX.Element => {
         return (
-            <div className={`p-20 webhook-body ${isSuperAdmin ? 'super-admin-view' : ''}`}>
+            <div className="p-20 webhook-body flex-grow-1 dc__overflow-auto">
                 {renderTokenPermissionSection()}
                 {renderPlayGroundSection()}
                 {selectedPlaygroundTab === PLAYGROUND_TAB_LIST[0].key && renderSampleResponseSection()}
@@ -915,7 +915,7 @@ export const WebhookDetailsModal = ({ close }: WebhookDetailType) => {
     const renderFooterSection = (): JSX.Element => {
         return (
             <div
-                className="dc__border-top flex flex-align-center flex-justify bg__primary pt-16 pr-20 pb-16 pl-20 dc__position-fixed dc__bottom-0"
+                className="dc__border-top flex flex-align-center flex-justify bg__primary pt-16 pr-20 pb-16 pl-20"
                 style={{ width: '75%', minWidth: '1024px', maxWidth: '1200px' }}
             >
                 <div className="flexbox pt-8 pb-8">
@@ -947,16 +947,16 @@ export const WebhookDetailsModal = ({ close }: WebhookDetailType) => {
             return <Reload />
         }
         return (
-            <>
+            <div className='flexbox-col flex-grow-1 mh-0'>
                 {renderBodySection()}
                 {!isSuperAdmin && renderFooterSection()}
-            </>
+            </div>
         )
     }
 
     return (
         <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
-            <div className="bg__tertiary h-100 webhook-details-container" ref={appStatusDetailRef}>
+            <div className="bg__tertiary h-100 flexbox-col webhook-details-container" ref={appStatusDetailRef}>
                 {renderHeaderSection()}
                 {renderPageDetails()}
             </div>

diff --git a/src/components/ciPipeline/Webhook/webhookDetails.scss b/src/components/ciPipeline/Webhook/webhookDetails.scss
@@ -27,13 +27,9 @@
         'Helvetica Neue',
         sans-serif;
 }
+
 .webhook-details-container {
     .webhook-body {
-        overflow: auto;
-        height: calc(100vh - 125px);
-        &.super-admin-view {
-            height: calc(100vh - 60px);
-        }
         .permission-row {
             display: grid;
             grid-template-columns: repeat(4, 25%);