chore: remove cdMaterial

Author: AbhishekA1509

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

@@ -43,13 +43,11 @@ import {
     ServerErrors,
     showError,
     sortCallback,
-    stopPropagation,
     ToastManager,
     ToastVariantType,
     TriggerBlockType,
     triggerCDNode,
     usePrompt,
-    VisibleModal,
     WorkflowNodeType,
     WorkflowType,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -59,14 +57,12 @@ import { shouldRenderWebhookAddImageModal } from '@Components/app/details/trigge
 import { getExternalCIConfig } from '@Components/ciPipeline/Webhook/webhook.service'
 
 import { ReactComponent as Dropdown } from '../../../../assets/icons/ic-chevron-down.svg'
-import { ReactComponent as CloseIcon } from '../../../../assets/icons/ic-close.svg'
 import { ReactComponent as Close } from '../../../../assets/icons/ic-cross.svg'
 import { ReactComponent as DeployIcon } from '../../../../assets/icons/ic-nav-rocket.svg'
 import { ReactComponent as Pencil } from '../../../../assets/icons/ic-pencil.svg'
 import { URLS, ViewType } from '../../../../config'
 import { LinkedCIDetail } from '../../../../Pages/Shared/LinkedCIDetailsModal'
 import { AppNotConfigured } from '../../../app/details/appDetails/AppDetails'
-import CDMaterial from '../../../app/details/triggerView/cdMaterial'
 import { TriggerViewContext } from '../../../app/details/triggerView/config'
 import { TRIGGER_VIEW_PARAMS } from '../../../app/details/triggerView/Constants'
 import { CIMaterialRouterProps, MATERIAL_TYPE, RuntimeParamsErrorState } from '../../../app/details/triggerView/types'
@@ -101,6 +97,7 @@ import { RenderCDMaterialContentProps } from './types'
 import { getSelectedCDNode, getSelectedNodeAndAppId, getSelectedNodeAndMeta } from './utils'
 
 import './EnvTriggerView.scss'
+import { DeployImageModal } from '@Components/app/details/triggerView/DeployImageModal'
 
 const ApprovalMaterialModal = importComponentFromFELibrary('ApprovalMaterialModal')
 const processDeploymentWindowStateAppGroup = importComponentFromFELibrary(
@@ -143,6 +140,7 @@ const EnvTriggerView = ({ filteredAppIds, isVirtualEnv }: AppGroupDetailDefaultT
     const [filteredWorkflows, setFilteredWorkflows] = useState<WorkflowType[]>([])
     const [filteredCIPipelines, setFilteredCIPipelines] = useState(null)
     const [bulkTriggerType, setBulkTriggerType] = useState<DeploymentNodeType>(null)
+    // TODO: Not needed
     const [materialType, setMaterialType] = useState(MATERIAL_TYPE.inputMaterialList)
     const [responseList, setResponseList] = useState<ResponseRowType[]>([])
     const [isSelectAll, setSelectAll] = useState(false)
@@ -479,14 +477,12 @@ const EnvTriggerView = ({ filteredAppIds, isVirtualEnv }: AppGroupDetailDefaultT
             })
     }
 
-    const closeCDModal = (e: React.MouseEvent): void => {
-        e?.stopPropagation()
+    const closeCDModal = (): void => {
         abortControllerRef.current.abort()
         setCDLoading(false)
         history.push({
             search: '',
         })
-        getWorkflowStatusData(workflows)
     }
 
     const closeApprovalModal = (e: React.MouseEvent): void => {
@@ -1034,27 +1030,30 @@ const EnvTriggerView = ({ filteredAppIds, isVirtualEnv }: AppGroupDetailDefaultT
             true,
         )
 
+        const cdMaterialType = location.search.includes(TRIGGER_VIEW_PARAMS.CD_NODE)
+            ? MATERIAL_TYPE.inputMaterialList
+            : MATERIAL_TYPE.rollbackMaterialList
+
         return (
-            <CDMaterial
-                materialType={materialType}
+            <DeployImageModal
                 appId={appId}
                 envId={node?.environmentId}
-                pipelineId={+node.id}
+                appName={selectedAppName}
                 stageType={node.type as DeploymentNodeType}
                 envName={node?.environmentName}
-                closeCDModal={closeCDModal}
-                triggerType={node?.triggerType}
-                isVirtualEnvironment={isVirtualEnv}
-                parentEnvironmentName={node?.parentEnvironmentName}
-                // Wont need it and it might be isCDLoading
-                isLoading={isCILoading}
-                ciPipelineId={node?.connectingCiPipelineId}
+                pipelineId={+node.id}
+                materialType={cdMaterialType}
+                handleClose={closeCDModal}
+                handleSuccess={getWorkflowStatusData}
                 deploymentAppType={node?.deploymentAppType}
-                selectedAppName={selectedAppName}
+                isVirtualEnvironment={isVirtualEnv}
                 showPluginWarningBeforeTrigger={node?.showPluginWarning}
                 consequence={node?.pluginBlockState}
                 configurePluginURL={configurePluginURL}
                 isTriggerBlockedDueToPlugin={node?.showPluginWarning && node?.isTriggerBlocked}
+                triggerType={node?.triggerType}
+                isRedirectedFromAppDetails={false}
+                parentEnvironmentName={node?.parentEnvironmentName}
             />
         )
     }
@@ -1064,51 +1063,23 @@ const EnvTriggerView = ({ filteredAppIds, isVirtualEnv }: AppGroupDetailDefaultT
             location.search.includes(TRIGGER_VIEW_PARAMS.CD_NODE) ||
             location.search.includes(TRIGGER_VIEW_PARAMS.ROLLBACK_NODE)
         ) {
-
-            const { node, appId, workflowId, appName, selectedCINode } = getSelectedNodeAndMeta(filteredWorkflows, location.search)
+            const { node, appId, workflowId, appName, selectedCINode } = getSelectedNodeAndMeta(
+                filteredWorkflows,
+                location.search,
+            )
 
             if (!node?.id) {
                 return null
             }
 
-            const cdMaterialType = location.search.includes(TRIGGER_VIEW_PARAMS.CD_NODE)
-                ? MATERIAL_TYPE.inputMaterialList
-                : MATERIAL_TYPE.rollbackMaterialList
-
-            const material = node[cdMaterialType] || []
-
-            return (
-                <VisibleModal parentClassName="dc__overflow-hidden" close={closeCDModal}>
-                    <div
-                        className={`modal-body--cd-material h-100 contains-diff-view flexbox-col ${
-                            material.length > 0 ? '' : 'no-material'
-                        }`}
-                        onClick={stopPropagation}
-                    >
-                        {isCDLoading ? (
-                            <>
-                                <div className="trigger-modal__header flex right">
-                                    <button type="button" className="dc__transparent" onClick={closeCDModal}>
-                                        <CloseIcon />
-                                    </button>
-                                </div>
-                                <div className="flex-grow-1">
-                                    <Progressing pageLoader size={32} />
-                                </div>
-                            </>
-                        ) : (
-                            renderCDMaterialContent({
-                                node,
-                                appId,
-                                selectedAppName: appName,
-                                workflowId,
-                                doesWorkflowContainsWebhook: selectedCINode?.type === WorkflowNodeType.WEBHOOK,
-                                ciNodeId: selectedCINode?.id,
-                            })
-                        )}
-                    </div>
-                </VisibleModal>
-            )
+            return renderCDMaterialContent({
+                node,
+                appId,
+                selectedAppName: appName,
+                workflowId,
+                doesWorkflowContainsWebhook: selectedCINode?.type === WorkflowNodeType.WEBHOOK,
+                ciNodeId: selectedCINode?.id,
+            })
         }
 
         return null

src/components/app/details/appDetails/AppDetails.tsx

@@ -78,7 +78,7 @@ import RotatePodsModal from '../../../v2/appDetails/sourceInfo/rotatePods/Rotate
 import SyncErrorComponent from '../../../v2/appDetails/SyncError.component'
 import { TriggerUrlModal } from '../../list/TriggerUrl'
 import { fetchAppDetailsInTime, fetchResourceTreeInTime } from '../../service'
-import { AggregatedNodes } from '../../types'
+import { AggregatedNodes, AppDetailsCDModalType } from '../../types'
 import { renderCIListHeader } from '../cdDetails/utils'
 import { MATERIAL_TYPE } from '../triggerView/types'
 import AppEnvSelector from './AppDetails.components'
@@ -235,7 +235,7 @@ const Details: React.FC<DetailsType> = ({
     const [rotateModal, setRotateModal] = useState<boolean>(false)
     const [hibernating, setHibernating] = useState<boolean>(false)
     const [showIssuesModal, toggleIssuesModal] = useState<boolean>(false)
-    const [CDModalMaterialType, setCDModalMaterialType] = useState<string | null>(null)
+    const [CDModalMaterialType, setCDModalMaterialType] = useState<AppDetailsCDModalType['materialType']>(null)
     const [appDetailsError, setAppDetailsError] = useState(undefined)
 
     const [hibernationPatchChartName, setHibernationPatchChartName] = useState<string>('')

src/components/app/details/appDetails/AppDetailsCDModal.tsx

@@ -16,14 +16,14 @@
 
 import { useHistory, useLocation } from 'react-router-dom'
 
-import { DeploymentNodeType, stopPropagation, VisibleModal } from '@devtron-labs/devtron-fe-common-lib'
+import { DeploymentNodeType } from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '../../../common'
 import { URL_PARAM_MODE_TYPE } from '../../../common/helpers/types'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
 import { AppDetailsCDModalType } from '../../types'
-import CDMaterial from '../triggerView/cdMaterial'
 import { TRIGGER_VIEW_PARAMS } from '../triggerView/Constants'
+import { DeployImageModal } from '../triggerView/DeployImageModal'
 
 const ApprovalMaterialModal = importComponentFromFELibrary('ApprovalMaterialModal')
 
@@ -70,28 +70,27 @@ const AppDetailsCDModal = ({
 
     const renderCDModal = () =>
         (mode === URL_PARAM_MODE_TYPE.LIST || mode === URL_PARAM_MODE_TYPE.REVIEW_CONFIG) && (
-            <VisibleModal parentClassName="dc__overflow-hidden" close={closeCDModal}>
-                <div className="modal-body--cd-material h-100 contains-diff-view flexbox-col" onClick={stopPropagation}>
-                    <CDMaterial
-                        materialType={materialType}
-                        appId={appId}
-                        envId={environmentId}
-                        pipelineId={cdModal.cdPipelineId}
-                        stageType={DeploymentNodeType.CD}
-                        envName={environmentName}
-                        closeCDModal={closeCDModal}
-                        triggerType={cdModal.triggerType}
-                        isVirtualEnvironment={isVirtualEnvironment}
-                        ciPipelineId={cdModal.ciPipelineId}
-                        deploymentAppType={deploymentAppType}
-                        parentEnvironmentName={cdModal.parentEnvironmentName}
-                        isLoading={loadingDetails}
-                        isRedirectedFromAppDetails
-                        handleSuccess={handleSuccess}
-                        selectedAppName={appName}
-                    />
-                </div>
-            </VisibleModal>
+            <DeployImageModal
+                materialType={materialType}
+                appId={appId}
+                envId={environmentId}
+                pipelineId={cdModal.cdPipelineId}
+                stageType={DeploymentNodeType.CD}
+                envName={environmentName}
+                handleClose={closeCDModal}
+                triggerType={cdModal.triggerType}
+                isVirtualEnvironment={isVirtualEnvironment}
+                deploymentAppType={deploymentAppType}
+                parentEnvironmentName={cdModal.parentEnvironmentName}
+                isRedirectedFromAppDetails
+                handleSuccess={handleSuccess}
+                appName={appName}
+                // TODO: Not needed since not pre-post cd here
+                showPluginWarningBeforeTrigger={null}
+                consequence={null}
+                configurePluginURL={null}
+                isTriggerBlockedDueToPlugin={null}
+            />
         )
 
     return (

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

@@ -24,7 +24,9 @@ import {
     RuntimeParamsErrorState,
 } from '../types'
 
-export interface DeployImageModalProps {
+export interface DeployViewStateType {}
+
+export type DeployImageModalProps = {
     appId: number
     envId: number
     appName: string

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

@@ -44,11 +44,9 @@ import {
 import { getTriggerWorkflows } from './workflow.service'
 import { Workflow } from './workflow/Workflow'
 import { MATERIAL_TYPE, TriggerViewProps, TriggerViewState } from './types'
-import CDMaterial from './cdMaterial'
 import { URLS, ViewType } from '../../../../config'
 import { AppNotConfigured } from '../appDetails/AppDetails'
 import { getHostURLConfiguration } from '../../../../services/service'
-import { ReactComponent as CloseIcon } from '../../../../assets/icons/ic-close.svg'
 import { TriggerViewContext } from './config'
 import { TRIGGER_VIEW_PARAMS, TRIGGER_VIEW_GA_EVENTS } from './Constants'
 import { APP_DETAILS } from '../../../../config/constantMessaging'
@@ -58,6 +56,7 @@ import { LinkedCIDetail } from '../../../../Pages/Shared/LinkedCIDetailsModal'
 import { getExternalCIConfig } from '@Components/ciPipeline/Webhook/webhook.service'
 import { getSelectedNodeFromWorkflows, shouldRenderWebhookAddImageModal } from './TriggerView.utils'
 import { BuildImageModal } from './BuildImageModal'
+import { DeployImageModal } from './DeployImageModal'
 
 const ApprovalMaterialModal = importComponentFromFELibrary('ApprovalMaterialModal')
 const WorkflowActionRouter = importComponentFromFELibrary('WorkflowActionRouter', null, 'function')
@@ -283,43 +282,6 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
         this.setState({ selectedWebhookNodeId: null })
     }
 
-    renderCDMaterialContent = (cdNode: CommonNodeAttr, materialType: string) => {
-        const selectedWorkflow = this.state.workflows.find((wf) => wf.nodes.some((node) => node.id === cdNode.id))
-        const selectedCINode = selectedWorkflow?.nodes.find((node) => node.type === 'CI' || node.type === 'WEBHOOK')
-        const doesWorkflowContainsWebhook = selectedCINode?.type === 'WEBHOOK'
-        const configurePluginURL = getCDPipelineURL(
-            this.props.match.params.appId,
-            selectedWorkflow.id,
-            doesWorkflowContainsWebhook ? '0' : selectedCINode?.id,
-            doesWorkflowContainsWebhook,
-            cdNode.id,
-            true,
-        )
-
-        return (
-            <CDMaterial
-                materialType={materialType}
-                appId={Number(this.props.match.params.appId)}
-                pipelineId={Number(cdNode.id)}
-                stageType={cdNode.type as DeploymentNodeType}
-                envName={cdNode?.environmentName}
-                envId={cdNode?.environmentId}
-                closeCDModal={this.closeCDModal}
-                triggerType={cdNode.triggerType}
-                isVirtualEnvironment={cdNode.isVirtualEnvironment}
-                parentEnvironmentName={cdNode.parentEnvironmentName}
-                isLoading={this.state.isLoading}
-                ciPipelineId={cdNode.connectingCiPipelineId}
-                isSaveLoading={this.state.isSaveLoading}
-                deploymentAppType={cdNode?.deploymentAppType}
-                showPluginWarningBeforeTrigger={cdNode?.showPluginWarning}
-                consequence={cdNode?.pluginBlockState}
-                configurePluginURL={configurePluginURL}
-                isTriggerBlockedDueToPlugin={cdNode?.showPluginWarning && cdNode?.isTriggerBlocked}
-            />
-        )
-    }
-
     renderCDMaterial() {
         if (
             this.props.location.search.includes(TRIGGER_VIEW_PARAMS.CD_NODE) ||
@@ -336,32 +298,39 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
                 ? MATERIAL_TYPE.inputMaterialList
                 : MATERIAL_TYPE.rollbackMaterialList
 
-            const material = cdNode[materialType] || []
+            const selectedWorkflow = this.state.workflows.find((wf) => wf.nodes.some((node) => node.id === cdNode.id))
+            const selectedCINode = selectedWorkflow?.nodes.find((node) => node.type === 'CI' || node.type === 'WEBHOOK')
+            const doesWorkflowContainsWebhook = selectedCINode?.type === 'WEBHOOK'
+            const configurePluginURL = getCDPipelineURL(
+                this.props.match.params.appId,
+                selectedWorkflow.id,
+                doesWorkflowContainsWebhook ? '0' : selectedCINode?.id,
+                doesWorkflowContainsWebhook,
+                cdNode.id,
+                true,
+            )
 
             return (
-                <VisibleModal parentClassName="dc__overflow-hidden" close={this.closeCDModal}>
-                    <div
-                        className={`modal-body--cd-material h-100 flexbox-col contains-diff-view ${
-                            material.length > 0 ? '' : 'no-material'
-                        }`}
-                        onClick={stopPropagation}
-                    >
-                        {this.state.isLoading ? (
-                            <>
-                                <div className="trigger-modal__header flexbox dc__content-space">
-                                    <button type="button" className="dc__transparent" onClick={this.closeCDModal}>
-                                        <CloseIcon />
-                                    </button>
-                                </div>
-                                <div className="flex-grow-1">
-                                    <Progressing pageLoader size={32} />
-                                </div>
-                            </>
-                        ) : (
-                            this.renderCDMaterialContent(cdNode, materialType)
-                        )}
-                    </div>
-                </VisibleModal>
+                <DeployImageModal
+                    materialType={materialType}
+                    appId={Number(this.props.match.params.appId)}
+                    envId={cdNode?.environmentId}
+                    appName={this.props.appContext.currentAppName}
+                    stageType={cdNode.type as DeploymentNodeType}
+                    envName={cdNode?.environmentName}
+                    pipelineId={Number(cdNode.id)}
+                    handleClose={this.closeCDModal}
+                    handleSuccess={this.getWorkflowStatus}
+                    deploymentAppType={cdNode?.deploymentAppType}
+                    isVirtualEnvironment={cdNode.isVirtualEnvironment}
+                    showPluginWarningBeforeTrigger={cdNode?.showPluginWarning}
+                    consequence={cdNode?.pluginBlockState}
+                    configurePluginURL={configurePluginURL}
+                    isTriggerBlockedDueToPlugin={cdNode?.showPluginWarning && cdNode?.isTriggerBlocked}
+                    triggerType={cdNode.triggerType}
+                    isRedirectedFromAppDetails={false}
+                    parentEnvironmentName={cdNode.parentEnvironmentName}
+                />
             )
         }