Merge pull request #472 from devtron-labs/fix/deployment-history-config-compare

fix: Deployment history doesn't let us compare the values from history not fetched still

Author: RohitRaj011

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

@@ -1,40 +1,42 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { generatePath, useRouteMatch } from 'react-router-dom'
 
 import { DeploymentConfigDiff, DeploymentConfigDiffProps } from '@Shared/Components/DeploymentConfigDiff'
-import { SortingOrder } from '@Common/Constants'
+import { DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '@Common/Constants'
 import { useUrlFilters } from '@Common/Hooks'
 import {
     getSelectPickerOptionByValue,
     SelectPickerOptionType,
     SelectPickerVariantType,
 } from '@Shared/Components/SelectPicker'
 import { ComponentSizeType } from '@Shared/constants'
+import { Button, ButtonVariantType } from '@Shared/Components/Button'
 
 import {
     DeploymentHistoryDiffDetailedProps,
     DeploymentHistoryConfigDiffQueryParams,
     DeploymentHistoryConfigDiffRouteParams,
 } from './types'
-import { getPipelineDeploymentsOptions, parseDeploymentHistoryDiffSearchParams } from './utils'
+import { getPipelineDeployments, getPipelineDeploymentsOptions, parseDeploymentHistoryDiffSearchParams } from './utils'
+import { getTriggerHistory } from '../service'
 
 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 +46,14 @@ export const DeploymentHistoryConfigDiffCompare = ({
         parseSearchParams: parseDeploymentHistoryDiffSearchParams(previousWfrId),
     })
 
+    // STATES
+    const [triggerHistory, setTriggerHistory] = useState({
+        isLoading: false,
+        data: initialTriggerHistory,
+        hasMore: initialTriggerHistory.size >= DEFAULT_BASE_PAGE_SIZE,
+    })
+    const [pipelineDeployments, setPipelineDeployments] = useState(initialPipelineDeployments)
+
     useEffect(() => {
         // Default Search Params Update
         updateSearchParams({ compareWfrId })
@@ -56,11 +66,53 @@ 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: DEFAULT_BASE_PAGE_SIZE },
+            })
+            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 === DEFAULT_BASE_PAGE_SIZE,
+            })
+            setPipelineDeployments(getPipelineDeployments(updatedTriggerHistory))
+        } catch {
+            setTriggerHistory({ ...triggerHistory, isLoading: false })
+        }
+    }
+
+    const handleLoadMore = () => fetchDeploymentHistory(triggerHistory.data.size)
+
+    // RENDERERS
+    const renderOptionsFooter = () =>
+        triggerHistory.hasMore ? (
+            <div className="px-4">
+                <Button
+                    isLoading={triggerHistory.isLoading}
+                    onClick={handleLoadMore}
+                    dataTestId="load-more-previous-deployments"
+                    variant={ButtonVariantType.borderLess}
+                    text="Load more"
+                    size={ComponentSizeType.small}
+                    fullWidth
+                />
+            </div>
+        ) : null
+
     // DEPLOYMENT_CONFIG_DIFF_PROPS
     const { currentDeployment, pipelineDeploymentsOptions } = getPipelineDeploymentsOptions({
         pipelineDeployments,
         wfrId,
-        triggerHistory,
+        triggerHistory: triggerHistory.data,
         renderRunSource,
         resourceId,
     })
@@ -88,6 +140,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
                           onChange: deploymentSelectorOnChange,
                           showSelectedOptionIcon: false,
                           menuSize: ComponentSizeType.large,
+                          renderOptionsFooter,
                       },
                   },
               ]

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
 }

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -214,7 +214,6 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     onCreateOption,
     closeMenuOnSelect = false,
     shouldShowNoOptionsMessage = true,
-    formatCreateLabel,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options, getOptionValue } = props
@@ -408,7 +407,6 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             onInputChange={onInputChange}
                             icon={icon}
                             showSelectedOptionIcon={shouldShowSelectedOptionIcon}
-                            formatCreateLabel={formatCreateLabel}
                             onKeyDown={handleKeyDown}
                         />
                     </div>

src/Shared/Components/SelectPicker/common.tsx

@@ -203,14 +203,29 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
 export const SelectPickerMenuList = <OptionValue,>(props: MenuListProps<SelectPickerOptionType<OptionValue>>) => {
     const {
         children,
-        selectProps: { inputValue, renderMenuListFooter, shouldRenderCustomOptions, renderCustomOptions },
+        selectProps: {
+            inputValue,
+            renderMenuListFooter,
+            shouldRenderCustomOptions,
+            renderCustomOptions,
+            renderOptionsFooter,
+        },
     } = props
 
     return (
         <>
             {/* added key here to explicitly re-render the list on input change so that the top option is rendered */}
             <components.MenuList {...props} key={inputValue}>
-                <div className="py-4 cursor">{shouldRenderCustomOptions ? renderCustomOptions() : children}</div>
+                <div className="py-4 cursor">
+                    {shouldRenderCustomOptions ? (
+                        renderCustomOptions()
+                    ) : (
+                        <>
+                            {children}
+                            {renderOptionsFooter?.()}
+                        </>
+                    )}
+                </div>
                 {/* Added to the bottom of menu list to prevent from hiding when the menu is opened close to the bottom of the screen */}
             </components.MenuList>
             {!shouldRenderCustomOptions && renderMenuListFooter && (

src/Shared/Components/SelectPicker/type.ts

@@ -84,6 +84,8 @@ declare module 'react-select/base' {
          * @default 'true'
          */
         showSelectedOptionIcon?: boolean
+        /** Render function for the footer at the end of the options list. */
+        renderOptionsFooter?: () => ReactNode
     }
 }
 
@@ -131,6 +133,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
             | 'renderCustomOptions'
             | 'icon'
             | 'showSelectedOptionIcon'
+            | 'renderOptionsFooter'
         >
     > &
     Required<Pick<SelectProps<OptionValue, IsMulti>, 'inputId'>> &