fix: DeploymentHistoryConfigDiffCompare - not able to see previous pipeline deployments after the initial load fix

Author: RohitRaj011

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { generatePath, useRouteMatch } from 'react-router-dom'
 
 import { DeploymentConfigDiff, DeploymentConfigDiffProps } from '@Shared/Components/DeploymentConfigDiff'
@@ -16,25 +16,28 @@ import {
     DeploymentHistoryConfigDiffQueryParams,
     DeploymentHistoryConfigDiffRouteParams,
 } from './types'
-import { getPipelineDeploymentsOptions, parseDeploymentHistoryDiffSearchParams } from './utils'
+import { getPipelineDeployments, getPipelineDeploymentsOptions, parseDeploymentHistoryDiffSearchParams } from './utils'
+import { getTriggerHistory } from '../service'
+
+const paginationSize = 20
 
 export const DeploymentHistoryConfigDiffCompare = ({
     envName,
     setFullScreenView,
-    pipelineDeployments,
+    pipelineDeployments: initialPipelineDeployments,
     wfrId,
     previousWfrId,
     convertVariables,
     setConvertVariables,
-    triggerHistory,
+    triggerHistory: initialTriggerHistory,
     renderRunSource,
     resourceId,
     isCompareDeploymentConfigNotAvailable,
     ...props
 }: DeploymentHistoryDiffDetailedProps) => {
     // HOOKS
     const { path, params } = useRouteMatch<DeploymentHistoryConfigDiffRouteParams>()
-    const { resourceType, resourceName } = params
+    const { resourceType, resourceName, appId, envId } = params
 
     // URL FILTERS
     const { compareWfrId, updateSearchParams, sortBy, sortOrder, handleSorting } = useUrlFilters<
@@ -44,6 +47,14 @@ export const DeploymentHistoryConfigDiffCompare = ({
         parseSearchParams: parseDeploymentHistoryDiffSearchParams(previousWfrId),
     })
 
+    // STATES
+    const [triggerHistory, setTriggerHistory] = useState({
+        isLoading: false,
+        data: initialTriggerHistory,
+        hasMore: initialTriggerHistory.size === paginationSize,
+    })
+    const [pipelineDeployments, setPipelineDeployments] = useState(initialPipelineDeployments)
+
     useEffect(() => {
         // Default Search Params Update
         updateSearchParams({ compareWfrId })
@@ -56,11 +67,37 @@ export const DeploymentHistoryConfigDiffCompare = ({
         }
     }, [])
 
+    // METHODS
+    const fetchDeploymentHistory = async (paginationOffset: number) => {
+        setTriggerHistory({ ...triggerHistory, isLoading: true })
+
+        try {
+            const { result } = await getTriggerHistory({
+                appId: +appId,
+                envId: +envId,
+                pagination: { offset: paginationOffset, size: paginationSize },
+            })
+            const nextTriggerHistory = new Map((result.cdWorkflows || []).map((item) => [item.id, item]))
+            const updatedTriggerHistory = new Map([...triggerHistory.data, ...nextTriggerHistory])
+
+            setTriggerHistory({
+                isLoading: false,
+                data: updatedTriggerHistory,
+                hasMore: result.cdWorkflows?.length === paginationSize,
+            })
+            setPipelineDeployments(getPipelineDeployments(updatedTriggerHistory))
+        } catch {
+            setTriggerHistory({ ...triggerHistory, isLoading: false })
+        }
+    }
+
+    const handleLoadMore = () => fetchDeploymentHistory(triggerHistory.data.size)
+
     // DEPLOYMENT_CONFIG_DIFF_PROPS
     const { currentDeployment, pipelineDeploymentsOptions } = getPipelineDeploymentsOptions({
         pipelineDeployments,
         wfrId,
-        triggerHistory,
+        triggerHistory: triggerHistory.data,
         renderRunSource,
         resourceId,
     })
@@ -88,6 +125,11 @@ export const DeploymentHistoryConfigDiffCompare = ({
                           onChange: deploymentSelectorOnChange,
                           showSelectedOptionIcon: false,
                           menuSize: ComponentSizeType.large,
+                          loadMoreButtonConfig: {
+                              show: triggerHistory.hasMore,
+                              isLoading: triggerHistory.isLoading,
+                              onClick: handleLoadMore,
+                          },
                       },
                   },
               ]

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts

@@ -37,6 +37,8 @@ export interface DeploymentHistoryConfigDiffQueryParams {
 }
 
 export interface DeploymentHistoryConfigDiffRouteParams {
+    appId: string
+    envId: string
     resourceType: EnvResourceType
     resourceName: string
 }