feat: Refactor DeployImageModal and related components to streamline state management and improve code readability

AbhishekA1509 · AbhishekA1509 · commit 88b7197412c8 · 2025-07-30T18:05:56.000+05:30
diff --git a/src/components/app/details/triggerView/BranchRegexModal.tsx b/src/components/app/details/triggerView/BranchRegexModal.tsx
@@ -72,7 +72,7 @@ const BranchRegexModal = ({
     const isRegexValueInvalid = (_cm): void => {
         const regExp = new RegExp(_cm.source.regex)
         const regVal = structuredClone(regexValue[_cm.gitMaterialId])
-        if (!regExp.test(regVal.value)) {
+        if (!regExp.test(regVal.value) || !regVal.value) {
             const _regexVal = {
                 ...regexValue,
                 [_cm.gitMaterialId]: { value: regVal.value, isInvalid: true },
diff --git a/src/components/app/details/triggerView/BuildImageModal/BuildImageModal.tsx b/src/components/app/details/triggerView/BuildImageModal/BuildImageModal.tsx
@@ -1,11 +1,3 @@
-/**
- * Service layer requirements:
- * - We need to have filteredCIPipelines
- * - Will find the selected pipeline from filteredCIPipelines from which we will get envId [in case of job view]
- * - isLoading as prop for when workflows are loading
- * - If !isLoading and filteredCIPipelines does not contain the selected pipeline, we will show error
- */
-
 import { useEffect, useRef, useState } from 'react'
 import { Prompt, useHistory, useParams } from 'react-router-dom'
 
diff --git a/src/components/app/details/triggerView/BuildImageModal/TriggerBuildSidebar.tsx b/src/components/app/details/triggerView/BuildImageModal/TriggerBuildSidebar.tsx
@@ -71,7 +71,7 @@ const TriggerBuildSidebar = ({
         }
     }
 
-    const getErrorMessageFromAppDetails = (appDetails: (typeof appList)[number]): string | null => {
+    const getErrorMessageFromAppDetails = (appDetails: (typeof appList)[number]): JSX.Element | null => {
         const materialListError = appDetails.materialInitialError
             ? appDetails.materialInitialError.errors?.[0].userMessage || 'Error fetching material list'
             : null
@@ -84,7 +84,19 @@ const TriggerBuildSidebar = ({
             ? 'Invalid runtime parameters'
             : null
 
-        return appDetails.errorMessage || materialListError || runtimeParamsInitialError || runtimeParamsDataError
+        const errorMessage =
+            appDetails.errorMessage || materialListError || runtimeParamsInitialError || runtimeParamsDataError
+
+        if (!errorMessage) {
+            return null
+        }
+
+        return (
+            <span className="flexbox cr-5 fw-4 fs-12 dc__gap-4">
+                <Icon name="ic-error" size={20} color={null} />
+                <span className="dc__block dc__word-break lh-20 dc__truncate--clamp-6">{errorMessage}</span>
+            </span>
+        )
     }
 
     const renderAppName = (appDetails: (typeof appList)[number]): JSX.Element | null => (
@@ -101,14 +113,7 @@ const TriggerBuildSidebar = ({
                     {appDetails.warningMessage}
                 </span>
             )}
-            {appDetails.appId !== appId && !!getErrorMessageFromAppDetails(appDetails) && (
-                <span className="flexbox cr-5 fw-4 fs-12 dc__gap-4">
-                    <Icon name="ic-error" size={20} color={null} />
-                    <span className="dc__block dc__word-break lh-20 dc__truncate--clamp-6">
-                        {getErrorMessageFromAppDetails(appDetails)}
-                    </span>
-                </span>
-            )}
+            {!!getErrorMessageFromAppDetails(appDetails)}
             {appDetails.node?.pluginBlockState &&
                 appDetails.node.pluginBlockState.action !== ConsequenceAction.ALLOW_FOREVER &&
                 PolicyEnforcementMessage && (
diff --git a/src/components/app/details/triggerView/BuildImageModal/utils.ts b/src/components/app/details/triggerView/BuildImageModal/utils.ts
@@ -63,7 +63,7 @@ export const getTriggerBuildPayload = ({
 
         const history = material.history.filter((historyItem) => historyItem.isSelected)
         if (!history.length) {
-            history.push(material.history[0])
+            return
         }
 
         history.forEach((element) => {
diff --git a/src/components/app/details/triggerView/DeployImageModal/DeployImageContent.tsx b/src/components/app/details/triggerView/DeployImageModal/DeployImageContent.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react'
+import { useContext } from 'react'
 import { useHistory } from 'react-router-dom'
 
 import {
@@ -25,18 +25,19 @@ import {
     MaterialInfo,
     Progressing,
     SearchBar,
+    SegmentedControlProps,
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
 
 import { TriggerViewContext } from '../config'
 import { TRIGGER_VIEW_PARAMS } from '../Constants'
-import { TriggerViewContextType } from '../types'
+import { FilterConditionViews, HandleRuntimeParamChange, TriggerViewContextType } from '../types'
 import ImageSelectionCTA from './ImageSelectionCTA'
 import MaterialListEmptyState from './MaterialListEmptyState'
 import RuntimeParamsSidebar from './RuntimeParamsSidebar'
-import { DeployImageContentProps } from './types'
+import { DeployImageContentProps, ImageSelectionCTAProps, RuntimeParamsSidebarProps } from './types'
 import {
     getApprovedImageClass,
     getConsumedAndAvailableMaterialList,
@@ -71,51 +72,27 @@ const DeployImageContent = ({
     pipelineId,
     handleClose,
     isRedirectedFromAppDetails,
-    isSearchApplied,
-    searchText,
     onSearchApply,
-    onSearchTextChange,
-    filterView,
-    showConfiguredFilters,
     stageType,
-    currentSidebarTab,
-    handleRuntimeParamsChange,
-    runtimeParamsErrorState,
-    handleRuntimeParamsError,
     uploadRuntimeParamsFile,
-    handleSidebarTabChange,
     appName,
-    materialInEditModeMap,
     isSecurityModuleInstalled,
     envName,
-    handleShowAppliedFilters,
     reloadMaterials,
     parentEnvironmentName,
     isVirtualEnvironment,
-    handleImageSelection,
-    setAppReleaseTagNames,
-    toggleCardMode,
-    setTagsEditable,
-    updateCurrentAppMaterial,
-    handleEnableFiltersView,
-    handleFilterTabsChange,
     loadOlderImages,
-    isLoadingOlderImages,
     policyConsequences,
-    handleAllImagesView,
-    showAppliedFilters,
-    handleDisableFiltersView,
-    handleDisableAppliedFiltersView,
     triggerType,
-    appliedFilterList,
+    deployViewState,
+    setDeployViewState,
+    setMaterialResponse,
 }: DeployImageContentProps) => {
     const history = useHistory()
     const { isSuperAdmin } = useMainContext()
 
     const { onClickApprovalNode } = useContext<TriggerViewContextType>(TriggerViewContext)
 
-    const [showSearchBar, setShowSearchBar] = useState<boolean>(false)
-
     const isExceptionUser = materialResponse?.deploymentApprovalInfo?.approvalConfigData?.isExceptionUser ?? false
     const requestedUserId = materialResponse?.requestedUserId
     const isApprovalConfigured = getIsApprovalPolicyConfigured(
@@ -131,6 +108,22 @@ const DeployImageContent = ({
     const runtimeParamsList = materialResponse?.runtimeParams || []
     const isCDNode = stageType === DeploymentNodeType.CD
 
+    const {
+        searchText,
+        appliedSearchText,
+        filterView,
+        showConfiguredFilters,
+        currentSidebarTab,
+        runtimeParamsErrorState,
+        materialInEditModeMap,
+        showAppliedFilters,
+        appliedFilterList,
+        isLoadingOlderImages,
+        showSearchBar,
+    } = deployViewState
+
+    const isSearchApplied = !!appliedSearchText
+
     const { consumedImage, materialList, eligibleImagesCount } = getConsumedAndAvailableMaterialList({
         isApprovalConfigured,
         isExceptionUser,
@@ -144,6 +137,93 @@ const DeployImageContent = ({
     const showActionBar = FilterActionBar && !isSearchApplied && !!resourceFilters?.length && !showConfiguredFilters
     const areNoMoreImagesPresent = materials.length >= materialResponse?.totalCount
 
+    const handleSidebarTabChange: RuntimeParamsSidebarProps['handleSidebarTabChange'] = (e) => {
+        setDeployViewState((prevState) => ({
+            ...prevState,
+            currentSidebarTab: e.target.value as CDMaterialSidebarType,
+        }))
+    }
+
+    const onSearchTextChange = (newSearchText: string) => {
+        setDeployViewState((prevState) => ({
+            ...prevState,
+            searchText: newSearchText,
+        }))
+    }
+
+    const handleAllImagesView = () => {
+        setDeployViewState((prevState) => ({
+            ...prevState,
+            filterView: FilterConditionViews.ALL,
+        }))
+    }
+
+    const handleFilterTabsChange: SegmentedControlProps['onChange'] = (selectedSegment) => {
+        const { value } = selectedSegment
+        setDeployViewState((prevState) => ({
+            ...prevState,
+            filterView: value as FilterConditionViews,
+        }))
+    }
+
+    const handleShowConfiguredFilters = () => {
+        setDeployViewState((prevState) => ({
+            ...prevState,
+            showConfiguredFilters: true,
+        }))
+    }
+
+    const handleExitFiltersView = () => {
+        setDeployViewState((prevState) => ({
+            ...prevState,
+            showConfiguredFilters: false,
+        }))
+    }
+
+    const handleDisableAppliedFiltersView = () => {
+        setDeployViewState((prevState) => ({
+            ...prevState,
+            appliedFilterList: [],
+            showAppliedFilters: false,
+        }))
+    }
+
+    const getHandleShowAppliedFilters = (materialData: CDMaterialType) => () => {
+        setDeployViewState((prevState) => ({
+            ...prevState,
+            appliedFilterList: materialData?.appliedFilters ?? [],
+            showAppliedFilters: true,
+        }))
+    }
+
+    const handleShowSearchBar = () => {
+        setDeployViewState((prevState) => ({
+            ...prevState,
+            showSearchBar: true,
+        }))
+    }
+
+    const handleImageSelection: ImageSelectionCTAProps['handleImageSelection'] = (materialIndex) => {
+        const updatedMaterialList = materialList.map((material, index) => ({
+            ...material,
+            isSelected: index === materialIndex,
+        }))
+
+        setMaterialResponse((prevData) => {
+            const updatedMaterialResponse = structuredClone(prevData)
+            updatedMaterialResponse.materials = updatedMaterialList
+            return updatedMaterialResponse
+        })
+    }
+
+    const setAppReleaseTagNames: ImageTaggingContainerType['setAppReleaseTagNames'] = (appReleaseTagNames) => {
+        setMaterialResponse((prevData) => {
+            const updatedMaterialResponse = structuredClone(prevData)
+            updatedMaterialResponse.appReleaseTagNames = appReleaseTagNames
+            return updatedMaterialResponse
+        })
+    }
+
     const viewAllImages = () => {
         if (isRedirectedFromAppDetails) {
             history.push({
@@ -155,10 +235,6 @@ const DeployImageContent = ({
         }
     }
 
-    const handleShowSearchBar = () => {
-        setShowSearchBar(true)
-    }
-
     const renderSearch = () => (
         <SearchBar
             initialSearchText={searchText}
@@ -173,6 +249,63 @@ const DeployImageContent = ({
         />
     )
 
+    const updateCurrentAppMaterial: ImageTaggingContainerType['updateCurrentAppMaterial'] = (
+        matId,
+        imageReleaseTags,
+        imageComment,
+    ) => {
+        const updatedMaterialList = materialList.map((material) => {
+            if (+material.id === +matId) {
+                return {
+                    ...material,
+                    imageReleaseTags,
+                    imageComment,
+                }
+            }
+            return material
+        })
+
+        setMaterialResponse((prevData) => {
+            const updatedMaterialResponse = structuredClone(prevData)
+            updatedMaterialResponse.materials = updatedMaterialList
+            return updatedMaterialResponse
+        })
+    }
+
+    const setTagsEditable: ImageTaggingContainerType['setTagsEditable'] = (tagsEditable) => {
+        setMaterialResponse((prevData) => {
+            const updatedMaterialResponse = structuredClone(prevData)
+            updatedMaterialResponse.tagsEditable = tagsEditable
+            return updatedMaterialResponse
+        })
+    }
+
+    const handleRuntimeParamsChange: HandleRuntimeParamChange = (updatedRuntimeParamsList) => {
+        setMaterialResponse((prevData) => {
+            const updatedMaterialResponse = structuredClone(prevData)
+            updatedMaterialResponse.runtimeParams = updatedRuntimeParamsList
+            return updatedMaterialResponse
+        })
+    }
+
+    const handleRuntimeParamsError = (updatedRuntimeParamsErrorState: typeof runtimeParamsErrorState) => {
+        setDeployViewState((prevState) => ({
+            ...prevState,
+            runtimeParamsErrorState: updatedRuntimeParamsErrorState,
+        }))
+    }
+
+    const toggleCardMode: ImageTaggingContainerType['toggleCardMode'] = (index: number) => {
+        setDeployViewState((prevState) => {
+            const newMaterialInEditModeMap = new Map(prevState.materialInEditModeMap)
+            newMaterialInEditModeMap.set(index, !newMaterialInEditModeMap.get(index))
+            return {
+                ...prevState,
+                materialInEditModeMap: newMaterialInEditModeMap,
+            }
+        })
+    }
+
     const getImageTagContainerProps = (mat: CDMaterialType): ImageTaggingContainerType => ({
         ciPipelineId: null,
         artifactId: +mat.id,
@@ -229,7 +362,7 @@ const DeployImageContent = ({
                             appliedFiltersTimestamp={handleUTCTime(materialData.appliedFiltersTimestamp)}
                             envName={envName}
                             // Should not use Arrow function here but seems like no choice
-                            showConfiguredFilters={() => handleShowAppliedFilters(materialData)}
+                            showConfiguredFilters={getHandleShowAppliedFilters(materialData)}
                             filterState={materialData.appliedFiltersState}
                             dataSource={materialData.dataSource}
                             deploymentWindowArtifactMetadata={materialData.deploymentWindowArtifactMetadata}
@@ -361,7 +494,7 @@ const DeployImageContent = ({
                 isFromBulkCD={isBulkTrigger}
                 resourceFilters={showConfiguredFilters ? resourceFilters : appliedFilterList}
                 handleDisableFiltersView={
-                    showConfiguredFilters ? handleDisableFiltersView : handleDisableAppliedFiltersView
+                    showConfiguredFilters ? handleExitFiltersView : handleDisableAppliedFiltersView
                 }
                 envName={envName}
                 closeModal={handleClose}
@@ -411,7 +544,7 @@ const DeployImageContent = ({
                                             consumedImage.length,
                                         )}
                                         onChange={handleFilterTabsChange}
-                                        handleEnableFiltersView={handleEnableFiltersView}
+                                        handleEnableFiltersView={handleShowConfiguredFilters}
                                         initialTab={filterView}
                                     />
                                 ) : (
@@ -466,7 +599,7 @@ const DeployImageContent = ({
                                     loadOlderImages={loadOlderImages}
                                     onSearchApply={onSearchApply}
                                     eligibleImagesCount={eligibleImagesCount}
-                                    handleEnableFiltersView={handleEnableFiltersView}
+                                    handleEnableFiltersView={handleShowConfiguredFilters}
                                     handleAllImagesView={handleAllImagesView}
                                 />
                             ) : (
diff --git a/src/components/app/details/triggerView/DeployImageModal/DeployImageModal.tsx b/src/components/app/details/triggerView/DeployImageModal/DeployImageModal.tsx
diff --git a/src/components/app/details/triggerView/DeployImageModal/types.ts b/src/components/app/details/triggerView/DeployImageModal/types.ts

Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ export const getTriggerBuildPayload = ({`
`63`	`63`
`64`	`64`	`const history = material.history.filter((historyItem) => historyItem.isSelected)`
`65`	`65`	`if (!history.length) {`
`66`		`- history.push(material.history[0])`
	`66`	`+ return`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`history.forEach((element) => {`