feat: SelectPicker - add renderOptionsFooter prop, DeploymentHistoryConfigDiffCompare - code refactor

Author: RohitRaj011

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

@@ -2,14 +2,15 @@ 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,
@@ -19,8 +20,6 @@ import {
 import { getPipelineDeployments, getPipelineDeploymentsOptions, parseDeploymentHistoryDiffSearchParams } from './utils'
 import { getTriggerHistory } from '../service'
 
-const paginationSize = 20
-
 export const DeploymentHistoryConfigDiffCompare = ({
     envName,
     setFullScreenView,
@@ -51,7 +50,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
     const [triggerHistory, setTriggerHistory] = useState({
         isLoading: false,
         data: initialTriggerHistory,
-        hasMore: initialTriggerHistory.size >= paginationSize,
+        hasMore: initialTriggerHistory.size >= DEFAULT_BASE_PAGE_SIZE,
     })
     const [pipelineDeployments, setPipelineDeployments] = useState(initialPipelineDeployments)
 
@@ -75,15 +74,15 @@ export const DeploymentHistoryConfigDiffCompare = ({
             const { result } = await getTriggerHistory({
                 appId: +appId,
                 envId: +envId,
-                pagination: { offset: paginationOffset, size: paginationSize },
+                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 === paginationSize,
+                hasMore: result.cdWorkflows?.length === DEFAULT_BASE_PAGE_SIZE,
             })
             setPipelineDeployments(getPipelineDeployments(updatedTriggerHistory))
         } catch {
@@ -93,6 +92,22 @@ export const DeploymentHistoryConfigDiffCompare = ({
 
     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,
@@ -125,11 +140,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
                           onChange: deploymentSelectorOnChange,
                           showSelectedOptionIcon: false,
                           menuSize: ComponentSizeType.large,
-                          loadMoreButtonConfig: {
-                              show: triggerHistory.hasMore,
-                              isLoading: triggerHistory.isLoading,
-                              onClick: handleLoadMore,
-                          },
+                          renderOptionsFooter,
                       },
                   },
               ]

src/Shared/Components/SelectPicker/common.tsx

@@ -38,8 +38,6 @@ import { ReactSelectInputAction } from '@Common/Constants'
 import { isNullOrUndefined } from '@Shared/Helpers'
 import { Tooltip } from '@Common/Tooltip'
 import { TooltipProps } from '@Common/Tooltip/types'
-import { ComponentSizeType } from '@Shared/constants'
-import { Button, ButtonVariantType } from '../Button'
 import { SelectPickerGroupHeadingProps, SelectPickerOptionType, SelectPickerProps } from './type'
 import { getGroupCheckboxValue } from './utils'
 
@@ -210,7 +208,7 @@ export const SelectPickerMenuList = <OptionValue,>(props: MenuListProps<SelectPi
             renderMenuListFooter,
             shouldRenderCustomOptions,
             renderCustomOptions,
-            loadMoreButtonConfig,
+            renderOptionsFooter,
         },
     } = props
 
@@ -224,18 +222,7 @@ export const SelectPickerMenuList = <OptionValue,>(props: MenuListProps<SelectPi
                     ) : (
                         <>
                             {children}
-                            {loadMoreButtonConfig?.show && (
-                                <div className="px-4">
-                                    <Button
-                                        {...loadMoreButtonConfig}
-                                        dataTestId="load-more-previous-deployments"
-                                        variant={ButtonVariantType.borderLess}
-                                        text="Load more"
-                                        size={ComponentSizeType.small}
-                                        fullWidth
-                                    />
-                                </div>
-                            )}
+                            {renderOptionsFooter?.()}
                         </>
                     )}
                 </div>

src/Shared/Components/SelectPicker/type.ts

@@ -23,7 +23,6 @@ import { CreatableProps } from 'react-select/creatable'
 // This import allows to extend the base interface in react-select module via module augmentation
 import type {} from 'react-select/base'
 import { TooltipProps } from '@Common/Tooltip/types'
-import { ButtonProps } from '../Button'
 
 export interface SelectPickerOptionType<OptionValue = string | number> extends OptionType<OptionValue, ReactNode> {
     /**
@@ -85,11 +84,8 @@ declare module 'react-select/base' {
          * @default 'true'
          */
         showSelectedOptionIcon?: boolean
-        /** Renders "Load more" button at the end of the menu list. */
-        loadMoreButtonConfig?: Pick<ButtonProps, 'isLoading' | 'disabled'> & {
-            show?: boolean
-            onClick?: () => void
-        }
+        /** Render function for the footer at the end of the options list. */
+        renderOptionsFooter?: () => ReactNode
     }
 }
 
@@ -137,7 +133,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
             | 'renderCustomOptions'
             | 'icon'
             | 'showSelectedOptionIcon'
-            | 'loadMoreButtonConfig'
+            | 'renderOptionsFooter'
         >
     > &
     Required<Pick<SelectProps<OptionValue, IsMulti>, 'inputId'>> &