feat: Enhance DeployImageModal and related components with improved error handling, prop defaults, and layout adjustments

Author: AbhishekA1509

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

@@ -104,7 +104,7 @@ const DeployImageContent = ({
     deployViewState,
     setDeployViewState,
     setMaterialResponse,
-    appInfoMap,
+    appInfoMap = {},
     selectedTagName,
     handleTagChange,
     changeApp,
@@ -784,28 +784,30 @@ const DeployImageContent = ({
                     </div>
 
                     {materialList.length === 0 ? (
-                        <MaterialListEmptyState
-                            isRollbackTrigger={isRollbackTrigger}
-                            stageType={stageType}
-                            appId={appId}
-                            isSearchApplied={isSearchApplied}
-                            policyConsequences={policyConsequences}
-                            isTriggerBlockedDueToPlugin={isTriggerBlockedDueToPlugin}
-                            configurePluginURL={configurePluginURL}
-                            isConsumedImagePresent={consumedImage.length > 0}
-                            envName={envName}
-                            materialResponse={materialResponse}
-                            // TODO: Move to util and remove prop
-                            isExceptionUser={isExceptionUser}
-                            isLoadingMore={isLoadingOlderImages}
-                            viewAllImages={viewAllImages}
-                            triggerType={triggerType}
-                            loadOlderImages={loadOlderImages}
-                            onSearchApply={onSearchApply}
-                            eligibleImagesCount={eligibleImagesCount}
-                            handleEnableFiltersView={handleShowConfiguredFilters}
-                            handleAllImagesView={handleAllImagesView}
-                        />
+                        <div className="flexbox-col flex-grow-1 dc__overflow-auto h-100">
+                            <MaterialListEmptyState
+                                isRollbackTrigger={isRollbackTrigger}
+                                stageType={stageType}
+                                appId={appId}
+                                isSearchApplied={isSearchApplied}
+                                policyConsequences={policyConsequences}
+                                isTriggerBlockedDueToPlugin={isTriggerBlockedDueToPlugin}
+                                configurePluginURL={configurePluginURL}
+                                isConsumedImagePresent={consumedImage.length > 0}
+                                envName={envName}
+                                materialResponse={materialResponse}
+                                // TODO: Move to util and remove prop
+                                isExceptionUser={isExceptionUser}
+                                isLoadingMore={isLoadingOlderImages}
+                                viewAllImages={viewAllImages}
+                                triggerType={triggerType}
+                                loadOlderImages={loadOlderImages}
+                                onSearchApply={onSearchApply}
+                                eligibleImagesCount={eligibleImagesCount}
+                                handleEnableFiltersView={handleShowConfiguredFilters}
+                                handleAllImagesView={handleAllImagesView}
+                            />
+                        </div>
                     ) : (
                         renderMaterialList(materialList, false)
                     )}
@@ -876,10 +878,10 @@ const DeployImageContent = ({
                 )}
 
             <div
-                className={`flex-grow-1 dc__overflow-auto h-100 ${isPreOrPostCD || isBulkTrigger ? 'display-grid cd-material__container-with-sidebar' : 'flexbox-col flex-grow-1 py-16 px-20'}`}
+                className={`flex-grow-1 dc__overflow-auto h-100 ${isPreOrPostCD || isBulkTrigger ? 'display-grid cd-material__container-with-sidebar' : 'flexbox-col flex-grow-1'}`}
             >
                 {renderSidebar()}
-                <div className="flexbox-col py-16 px-20 dc__overflow-auto">{renderContent()}</div>
+                <div className="flexbox-col py-16 px-20 dc__overflow-auto flex-grow-1">{renderContent()}</div>
             </div>
         </>
     )

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

@@ -98,7 +98,7 @@ const DeployImageModal = ({
     stageType,
     pipelineId,
     materialType,
-    handleClose,
+    handleClose: handleCloseProp,
     handleSuccess,
     deploymentAppType,
     isVirtualEnvironment,
@@ -263,6 +263,11 @@ const DeployImageModal = ({
         })
     }
 
+    const handleClose = () => {
+        onClickSetInitialParams(URL_PARAM_MODE_TYPE.LIST)
+        handleCloseProp?.()
+    }
+
     const loadOlderImages = async () => {
         // TODO: Move to util
         handleAnalyticsEvent(CD_MATERIAL_GA_EVENT.FetchMoreImagesClicked)

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

@@ -1,5 +1,5 @@
 const MaterialListSkeleton = () => (
-    <div className="flexbox-col dc__overflow-auto dc__gap-12 dc__align-items-center h-100 w-100 pl-20 pr-20">
+    <div className="flexbox-col dc__overflow-auto dc__gap-12 dc__align-items-center h-100 w-100 px-20">
         <div className="flexbox dc__align-items-center dc__content-space pt-20 pb-16 w-100">
             <div className="shimmer-loading" style={{ width: '100px', height: '20px' }} />
         </div>

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

@@ -53,7 +53,7 @@ export const getMaterialResponseList = async ({
         getPolicyConsequences ? getPolicyConsequences({ appId, envId }) : null,
     ])
 
-    if (getPolicyConsequences && getIsCDTriggerBlockedThroughConsequences(response[2].cd, stageType)) {
+    if (getPolicyConsequences && getIsCDTriggerBlockedThroughConsequences(response[2]?.cd, stageType)) {
         return [null, null, response[2]]
     }
     return response

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

@@ -35,6 +35,9 @@ export type DeployImageModalProps = {
     handleSuccess?: () => void
     deploymentAppType: DeploymentAppTypes
     isVirtualEnvironment: boolean
+    /**
+     * If opening pre/post cd make sure BE sends plugin details as well, otherwise those props will be undefined
+     */
     isRedirectedFromAppDetails: boolean
     parentEnvironmentName: string
     triggerType: CommonNodeAttr['triggerType']
@@ -77,7 +80,7 @@ export interface GetMaterialResponseListProps
     initialSearch: string
 }
 
-export interface HandleTriggerErrorMessageForHelmManifestPushProps {
+export interface HelmManifestErrorHandlerProps {
     serverError: ServerErrors
     searchParams: ReturnType<typeof useSearchString>['searchParams']
     redirectToDeploymentStepsPage: () => void

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

@@ -37,7 +37,7 @@ import {
     GetConsumedAndAvailableMaterialListProps,
     GetSequentialCDCardTitlePropsType,
     GetTriggerArtifactInfoPropsType,
-    HandleTriggerErrorMessageForHelmManifestPushProps,
+    HelmManifestErrorHandlerProps,
 } from './types'
 
 const ApprovalInfoTippy = importComponentFromFELibrary('ApprovalInfoTippy')
@@ -104,7 +104,7 @@ export const handleTriggerErrorMessageForHelmManifestPush = ({
     serverError,
     searchParams,
     redirectToDeploymentStepsPage,
-}: HandleTriggerErrorMessageForHelmManifestPushProps) => {
+}: HelmManifestErrorHandlerProps) => {
     if (
         serverError instanceof ServerErrors &&
         Array.isArray(serverError.errors) &&