feat: Refactor DeployImageModal and ImageSelectionCTA to improve state initialization and streamline image selection handling

Author: AbhishekA1509

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

@@ -6,7 +6,6 @@ import {
     AnimatedDeployButton,
     API_STATUS_CODES,
     ArtifactInfo,
-    CDMaterialSidebarType,
     ConditionalWrap,
     DEFAULT_ROUTE_PROMPT_MESSAGE,
     DEPLOYMENT_CONFIG_DIFF_SORT_KEY,
@@ -51,7 +50,8 @@ import { CDButtonLabelMap } from '../config'
 import { TRIGGER_VIEW_GA_EVENTS } from '../Constants'
 import { PipelineConfigDiff, usePipelineDeploymentConfig } from '../PipelineConfigDiff'
 import { PipelineConfigDiffStatusTile } from '../PipelineConfigDiff/PipelineConfigDiffStatusTile'
-import { FilterConditionViews, MATERIAL_TYPE } from '../types'
+import { MATERIAL_TYPE } from '../types'
+import { INITIAL_DEPLOY_VIEW_STATE } from './constants'
 import DeployImageContent from './DeployImageContent'
 import DeployImageHeader from './DeployImageHeader'
 import MaterialListSkeleton from './MaterialListSkeleton'
@@ -148,21 +148,9 @@ const DeployImageModal = ({
     const [deploymentStrategy, setDeploymentStrategy] = useState<DeploymentStrategyType | null>(null)
     const [showPluginWarningOverlay, setShowPluginWarningOverlay] = useState<boolean>(false)
     const [showDeploymentWindowConfirmation, setShowDeploymentWindowConfirmation] = useState(false)
-    const [deployViewState, setDeployViewState] = useState<Omit<DeployViewStateType, 'appliedSearchText'>>({
-        searchText: searchImageTag,
-        filterView: FilterConditionViews.ALL,
-        showConfiguredFilters: false,
-        currentSidebarTab: CDMaterialSidebarType.IMAGE,
-        runtimeParamsErrorState: {
-            isValid: true,
-            cellError: {},
-        },
-        materialInEditModeMap: new Map(),
-        showAppliedFilters: false,
-        appliedFilterList: [],
-        isLoadingOlderImages: false,
-        showSearchBar: false,
-    })
+    const [deployViewState, setDeployViewState] = useState<Omit<DeployViewStateType, 'appliedSearchText'>>(
+        structuredClone(INITIAL_DEPLOY_VIEW_STATE),
+    )
 
     const isPreOrPostCD = stageType === DeploymentNodeType.PRECD || stageType === DeploymentNodeType.POSTCD
     const materialResponse = initialDataResponse?.[0] || null

src/components/app/details/triggerView/DeployImageModal/ImageSelectionCTA.tsx

@@ -25,7 +25,7 @@ const ImageSelectionCTA = ({
     pipelineId,
     canApproverDeploy,
     isExceptionUser,
-    handleImageSelection,
+    handleImageSelection: handleImageSelectionProp,
 }: ImageSelectionCTAProps) => {
     const isApprovalRequester =
         material.userApprovalMetadata?.requestedUserData &&
@@ -40,16 +40,14 @@ const ImageSelectionCTA = ({
         isMaterialApproved &&
         material.userApprovalMetadata?.canCurrentUserApprove
 
+    const handleImageSelection = () => {
+        handleImageSelectionProp(material.index)
+    }
+
     const renderMaterialCTA = () => {
         if (material.filterState !== FilterStates.ALLOWED) {
             return (
-                <Tooltip
-                    alwaysShowTippyOnHover
-                    className="default-tt w-200"
-                    arrow={false}
-                    placement="top"
-                    content={EXCLUDED_IMAGE_TOOLTIP}
-                >
+                <Tooltip alwaysShowTippyOnHover placement="top" content={EXCLUDED_IMAGE_TOOLTIP}>
                     <i className="cr-5 fs-13 fw-4 lh-24 m-0 cursor-not-allowed">Excluded</i>
                 </Tooltip>
             )
@@ -92,7 +90,7 @@ const ImageSelectionCTA = ({
         return (
             <Button
                 dataTestId={`cd-artifact-select-${material.index}`}
-                onClick={() => handleImageSelection(material.index)}
+                onClick={handleImageSelection}
                 text="SELECT"
                 size={ComponentSizeType.medium}
                 variant={ButtonVariantType.text}