@devtron-labs/devtron-fe-common-lib 0.0.59-beta-5 → 0.0.59-beta-6

package/src/Pages/GlobalConfigurations/BuildInfra/utils.tsx

@@ -0,0 +1,509 @@
+import { FormEvent, useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+import { showError, useAsync } from '../../../Common'
+import { getBuildInfraProfileByName, createBuildInfraProfile, updateBuildInfraProfile } from './services'
+import {
+    BuildInfraConfigTypes,
+    BuildInfraInheritActions,
+    BuildInfraMetaConfigTypes,
+    BuildInfraProfileData,
+    HandleProfileInputChangeType,
+    ProfileInputErrorType,
+    UseBuildInfraFormProps,
+    UseBuildInfraFormResponseType,
+    ValidateRequestLimitResponseType,
+    ValidateRequestLimitType,
+} from './types'
+import {
+    BUILD_INFRA_INPUT_CONSTRAINTS,
+    BUILD_INFRA_TEXT,
+    DEFAULT_PROFILE_NAME,
+    PROFILE_INPUT_ERROR_FIELDS,
+    CREATE_MODE_REQUIRED_INPUT_FIELDS,
+} from './constants'
+import {
+    validateDescription,
+    validateName,
+    validateRequiredPositiveNumber,
+    getCommonSelectStyle,
+    validatePositiveInteger,
+} from '../../../Shared'
+
+export const validateRequestLimit = ({
+    request,
+    limit,
+    unitsMap,
+}: ValidateRequestLimitType): ValidateRequestLimitResponseType => {
+    // Request <= Limit
+    // Request and Limit should be numbers can be decimals
+    // Request and Limit should be positive numbers
+    // Request and Limit should be less than Number.MAX_SAFE_INTEGER
+    // Request and Limit should can have at most BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES
+    // Both request and limit should be there
+    const requestNumber = Number(request.value)
+    const limitNumber = Number(limit.value)
+    const requestUnit = Number(unitsMap[request.unit]?.conversionFactor)
+    const limitUnit = Number(unitsMap[limit.unit]?.conversionFactor)
+
+    const requestLimitValidationResponse: ValidateRequestLimitResponseType = {
+        request: {
+            isValid: true,
+        },
+        limit: {
+            isValid: true,
+        },
+    }
+
+    const requestValidationMessage = validateRequiredPositiveNumber(request.value).message
+    const limitValidationMessage = validateRequiredPositiveNumber(limit.value).message
+
+    if (requestValidationMessage) {
+        requestLimitValidationResponse.request = {
+            message: requestValidationMessage,
+            isValid: false,
+        }
+    }
+
+    if (limitValidationMessage) {
+        requestLimitValidationResponse.limit = {
+            message: limitValidationMessage,
+            isValid: false,
+        }
+    }
+
+    if (limitValidationMessage || requestValidationMessage) {
+        return requestLimitValidationResponse
+    }
+
+    // only two decimal places are allowed
+    const requestDecimalPlaces = String(request.value).split('.')[1]?.length ?? 0
+    const limitDecimalPlaces = String(limit.value).split('.')[1]?.length ?? 0
+
+    if (requestDecimalPlaces > BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_DECIMAL_PLACES,
+            isValid: false,
+        }
+
+        return requestLimitValidationResponse
+    }
+    if (limitDecimalPlaces > BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES) {
+        requestLimitValidationResponse.limit = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.LIMIT_DECIMAL_PLACES,
+            isValid: false,
+        }
+
+        return requestLimitValidationResponse
+    }
+
+    // Assuming requestUnit and requestNumber are not 0
+    // TODO: Communicate this assumption to the backend
+    const limitRequestUnitFactor = limitUnit / requestUnit
+    const limitRequestFactor = limitNumber / requestNumber
+
+    const isDifferenceBigNumber = limitRequestUnitFactor * limitRequestFactor <= Number.MAX_SAFE_INTEGER
+
+    if (!isDifferenceBigNumber) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.CAN_NOT_COMPUTE,
+            isValid: false,
+        }
+
+        return requestLimitValidationResponse
+    }
+
+    if (limitRequestUnitFactor * limitRequestFactor < 1) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_LESS_THAN_LIMIT,
+            isValid: false,
+        }
+
+        return requestLimitValidationResponse
+    }
+
+    return requestLimitValidationResponse
+}
+
+const getInitialProfileInputErrors = (fromCreateView: boolean): ProfileInputErrorType => {
+    if (fromCreateView) {
+        const initialProfileInputErrors = { ...PROFILE_INPUT_ERROR_FIELDS }
+        CREATE_MODE_REQUIRED_INPUT_FIELDS.forEach((field) => {
+            initialProfileInputErrors[field] = ''
+        })
+        return initialProfileInputErrors
+    }
+
+    return {
+        ...PROFILE_INPUT_ERROR_FIELDS,
+    }
+}
+
+export const useBuildInfraForm = ({
+    name,
+    editProfile,
+    handleSuccessRedirection,
+}: UseBuildInfraFormProps): UseBuildInfraFormResponseType => {
+    const fromCreateView = !name
+
+    const [isLoading, profileResponse, responseError, reloadRequest] = useAsync(
+        () =>
+            getBuildInfraProfileByName({
+                name: name ?? DEFAULT_PROFILE_NAME,
+                fromCreateView,
+            }),
+        [name],
+    )
+    // If configuration is existing and is active then use it else use default from profileResponse
+    const [profileInput, setProfileInput] = useState<BuildInfraProfileData>(null)
+    const [profileInputErrors, setProfileInputErrors] = useState<ProfileInputErrorType>({
+        ...PROFILE_INPUT_ERROR_FIELDS,
+    })
+    const [loadingActionRequest, setLoadingActionRequest] = useState<boolean>(false)
+
+    useEffect(() => {
+        if (!isLoading && profileResponse?.configurationUnits && profileResponse?.profile) {
+            setProfileInput({
+                ...profileResponse.profile,
+            })
+
+            setProfileInputErrors(getInitialProfileInputErrors(fromCreateView))
+        }
+    }, [profileResponse, isLoading])
+
+    // NOTE: Currently sending and receiving values as string, but will parse it to number for payload
+    const handleProfileInputChange = ({ action, data }: HandleProfileInputChangeType) => {
+        const currentInput = { ...profileInput }
+        const currentInputErrors = { ...profileInputErrors }
+        const lastSavedConfiguration = profileResponse.profile.configurations
+        const currentConfiguration = currentInput.configurations
+        const { value, unit } = data ?? { value: null, unit: null }
+
+        switch (action) {
+            case BuildInfraMetaConfigTypes.DESCRIPTION:
+                currentInput.description = value
+                currentInputErrors.description = validateDescription(value).message
+                break
+
+            case BuildInfraMetaConfigTypes.NAME:
+                currentInput.name = value
+                currentInputErrors.name = validateName(value).message
+                break
+
+            case BuildInfraConfigTypes.CPU_LIMIT: {
+                currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT],
+                    value,
+                    unit,
+                }
+                const { request, limit } = validateRequestLimit({
+                    request: {
+                        value: currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST].value,
+                        unit: currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST].unit,
+                    },
+                    limit: {
+                        value,
+                        unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.CPU_LIMIT],
+                })
+
+                currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = limit.message
+                currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = request.message
+                break
+            }
+
+            case BuildInfraConfigTypes.CPU_REQUEST: {
+                currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST],
+                    value,
+                    unit,
+                }
+                const { request, limit } = validateRequestLimit({
+                    request: {
+                        value,
+                        unit,
+                    },
+                    limit: {
+                        value: currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT].value,
+                        unit: currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT].unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.CPU_LIMIT],
+                })
+
+                currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = limit.message
+                currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = request.message
+                break
+            }
+
+            case BuildInfraConfigTypes.MEMORY_LIMIT: {
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT],
+                    value,
+                    unit,
+                }
+                const { request, limit } = validateRequestLimit({
+                    request: {
+                        value: currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].value,
+                        unit: currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].unit,
+                    },
+                    limit: {
+                        value,
+                        unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.MEMORY_LIMIT],
+                })
+
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = limit.message
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = request.message
+                break
+            }
+
+            case BuildInfraConfigTypes.MEMORY_REQUEST: {
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST],
+                    value,
+                    unit,
+                }
+                const { request, limit } = validateRequestLimit({
+                    request: {
+                        value,
+                        unit,
+                    },
+                    limit: {
+                        value: currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].value,
+                        unit: currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.MEMORY_LIMIT],
+                })
+
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = limit.message
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = request.message
+                break
+            }
+
+            case BuildInfraConfigTypes.BUILD_TIMEOUT: {
+                currentConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT],
+                    value,
+                    unit,
+                }
+
+                currentInputErrors[BuildInfraConfigTypes.BUILD_TIMEOUT] = validatePositiveInteger(value).message
+                break
+            }
+
+            case BuildInfraInheritActions.ACTIVATE_CPU:
+                currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT] = {
+                    ...lastSavedConfiguration[BuildInfraConfigTypes.CPU_LIMIT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.CPU_LIMIT].value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.CPU_LIMIT].unit,
+                    active: true,
+                }
+                currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST] = {
+                    ...lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST].value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST].unit,
+                    active: true,
+                }
+
+                currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = null
+                currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = null
+                break
+
+            case BuildInfraInheritActions.ACTIVATE_MEMORY:
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT] = {
+                    ...lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].unit,
+                    active: true,
+                }
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST] = {
+                    ...lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].unit,
+                    active: true,
+                }
+
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = null
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = null
+                break
+
+            case BuildInfraInheritActions.ACTIVATE_BUILD_TIMEOUT:
+                currentConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT] = {
+                    ...lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT].value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT].unit,
+                    active: true,
+                }
+
+                currentInputErrors[BuildInfraConfigTypes.BUILD_TIMEOUT] = null
+                break
+
+            case BuildInfraInheritActions.DE_ACTIVATE_BUILD_TIMEOUT:
+                // Reverting the value and unit to defaultValues
+                currentConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT].defaultValue.value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT].defaultValue.unit,
+                    active: false,
+                }
+
+                currentInputErrors[BuildInfraConfigTypes.BUILD_TIMEOUT] = null
+                break
+
+            case BuildInfraInheritActions.DE_ACTIVATE_CPU:
+                currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.CPU_LIMIT].defaultValue.value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.CPU_LIMIT].defaultValue.unit,
+                    active: false,
+                }
+                currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST].defaultValue.value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST].defaultValue.unit,
+                    active: false,
+                }
+
+                currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = null
+                currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = null
+                break
+
+            case BuildInfraInheritActions.DE_ACTIVATE_MEMORY:
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].defaultValue.value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].defaultValue.unit,
+                    active: false,
+                }
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].defaultValue.value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].defaultValue.unit,
+                    active: false,
+                }
+
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = null
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = null
+                break
+
+            default:
+                throw new Error(BUILD_INFRA_TEXT.getInvalidActionMessage(action))
+        }
+
+        setProfileInput(currentInput)
+        setProfileInputErrors(currentInputErrors)
+    }
+
+    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        // Since considering '' as a valid error message
+        const hasErrors =
+            Object.keys(profileInputErrors).filter(
+                (item) => profileInputErrors[item] !== null && profileInputErrors[item] !== undefined,
+            ).length > 0
+
+        if (hasErrors) {
+            toast.error(BUILD_INFRA_TEXT.INVALID_FORM_MESSAGE)
+            return
+        }
+
+        setLoadingActionRequest(true)
+        try {
+            if (editProfile) {
+                await updateBuildInfraProfile({ name, profileInput })
+            } else {
+                await createBuildInfraProfile({ profileInput })
+            }
+            setLoadingActionRequest(false)
+            toast.success(BUILD_INFRA_TEXT.getSubmitSuccessMessage(profileInput.name, editProfile))
+
+            if (handleSuccessRedirection) {
+                handleSuccessRedirection()
+            } else {
+                reloadRequest()
+            }
+        } catch (err) {
+            showError(err)
+            setLoadingActionRequest(false)
+        }
+    }
+
+    return {
+        isLoading,
+        profileResponse,
+        responseError,
+        reloadRequest,
+        profileInput,
+        profileInputErrors,
+        handleProfileInputChange,
+        loadingActionRequest,
+        handleSubmit,
+    }
+}
+
+const getOptionBackgroundColor = (isFocused: boolean, isSelected: boolean): string => {
+    if (isSelected) {
+        return 'var(--B100)'
+    }
+
+    if (isFocused) {
+        return 'var(--N50)'
+    }
+    return 'var(--white)'
+}
+
+export const unitSelectorStyles = () =>
+    getCommonSelectStyle({
+        control: (base, state) => ({
+            ...base,
+            borderRadius: 0,
+            backgroundColor: 'var(--N0)',
+            border: state.isFocused ? '1px solid var(--B500) !important' : '1px solid var(--N200)',
+            alignItems: 'center',
+            cursor: 'pointer',
+            borderTopRightRadius: '4px',
+            borderBottomRightRadius: '4px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            outline: 'none',
+            boxShadow: 'none',
+            '&:hover': {
+                border: '1px solid var(--N400)',
+            },
+        }),
+        indicatorContainer: (base) => ({
+            ...base,
+            padding: '0px',
+        }),
+        dropdownIndicator: (base, state) => ({
+            ...base,
+            color: 'var(--N600)',
+            transition: 'all .2s ease',
+            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+        }),
+        option: (base, state) => ({
+            ...base,
+            padding: '4px 12px',
+            backgroundColor: getOptionBackgroundColor(state.isFocused, state.isSelected),
+            color: 'var(--N900)',
+            cursor: 'pointer',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            height: '36px',
+        }),
+        valueContainer: (base) => ({
+            ...base,
+            color: 'var(--N900)',
+            fontSize: '13px',
+            fontWeight: '400',
+            lineHeight: '20px',
+        }),
+        menuList: (base) => ({
+            ...base,
+            maxHeight: '164px',
+            height: '100%',
+        }),
+    })

package/src/Pages/GlobalConfigurations/index.ts

@@ -0,0 +1 @@
+export * from './BuildInfra'

package/src/Pages/index.ts

@@ -0,0 +1 @@
+export * from './GlobalConfigurations'

package/src/Shared/Components/APIResponseHandler/APIResponseHandler.tsx

@@ -0,0 +1,41 @@
+import { ErrorScreenNotAuthorized, GenericEmptyState, Progressing, Reload } from '../../../Common'
+import { NOT_FOUND_DEFAULT_TEXT } from './constants'
+import { APIResponseHandlerProps } from './types'
+
+const APIResponseHandler = ({
+    isLoading,
+    progressingProps,
+    error,
+    notAuthorized,
+    notFoundText,
+    reloadProps,
+    children,
+}: APIResponseHandlerProps) => {
+    // keeping it above loading since, not expected to send a call if not authorized
+    if (notAuthorized) {
+        return <ErrorScreenNotAuthorized />
+    }
+
+    if (isLoading) {
+        return <Progressing {...progressingProps} />
+    }
+
+    if (error) {
+        // TODO: Can extend ErrorScreenNotFound
+        if (error?.code === 404) {
+            return (
+                <GenericEmptyState
+                    title={notFoundText?.title ?? NOT_FOUND_DEFAULT_TEXT.title}
+                    subTitle={notFoundText?.subTitle ?? NOT_FOUND_DEFAULT_TEXT.subTitle}
+                />
+            )
+        }
+        return <Reload {...reloadProps} />
+    }
+
+    // Had to add this since while using it is throwing ts error
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{children}</>
+}
+
+export default APIResponseHandler

package/src/Shared/Components/APIResponseHandler/constants.tsx

@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/prefer-default-export
+export const NOT_FOUND_DEFAULT_TEXT = {
+    title: 'Resource not found',
+    subTitle: 'The resource you are looking for does not exist',
+} as const

package/src/Shared/Components/APIResponseHandler/index.ts

@@ -0,0 +1,2 @@
+export { default as APIResponseHandler } from './APIResponseHandler'
+export * from './types'

package/src/Shared/Components/APIResponseHandler/types.tsx

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react'
+import { GenericEmptyStateType, ProgressingProps, ReloadType, ServerErrors } from '../../../Common'
+
+export interface EmptyPageTextType {
+    title?: GenericEmptyStateType['title']
+    subTitle?: GenericEmptyStateType['subTitle']
+}
+
+export interface APIResponseHandlerProps {
+    /**
+     * If true, would show Progressing component
+     */
+    isLoading?: boolean
+    /**
+     * If loading is true, would load send these props to Progressing component
+     */
+    progressingProps?: ProgressingProps
+    /**
+     * If true and isLoading is false would show default Reload component
+     * In case error code is 404 show default 404 page using GenericEmptyState
+     */
+    error?: ServerErrors
+    /**
+     * Page text for 404 page
+     */
+    notFoundText?: EmptyPageTextType
+    /**
+     * If true would show Not Authorized page
+     */
+    notAuthorized?: boolean
+    /**
+     * If given, on Error, would load these props
+     */
+    reloadProps?: ReloadType
+    /**
+     * If no Error and no Loading, would load this component
+     */
+    children: ReactNode
+}

package/src/Shared/Components/BulkSelection/BulkSelection.tsx

@@ -0,0 +1,81 @@
+import BulkSelectionDropdownItems from './BulkSelectionDropdownItems'
+import { CHECKBOX_VALUE, Checkbox, PopupMenu, noop } from '../../../Common'
+import { BulkSelectionDropdownItemsType, BulkSelectionEvents, BulkSelectionProps } from './types'
+import { BULK_DROPDOWN_TEST_ID, BulkSelectionOptionsLabels } from './constants'
+import { ReactComponent as ICChevronDown } from '../../../Assets/Icon/ic-chevron-down.svg'
+import { ReactComponent as ICCheckSquare } from '../../../Assets/Icon/ic-check-square.svg'
+import { ReactComponent as ICCheckAll } from '../../../Assets/Icon/ic-check-all.svg'
+import { ReactComponent as ICCross } from '../../../Assets/Icon/ic-cross.svg'
+
+const BulkSelection = <T,>({
+    checkboxValue,
+    isChecked,
+    selectedIdentifiers,
+    handleBulkSelection,
+    showPagination,
+}: BulkSelectionProps<T>) => {
+    const areOptionsSelected = Object.keys(selectedIdentifiers).length > 0
+    const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
+        {
+            locator: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
+            label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ON_PAGE],
+            isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.CHECKED,
+            icon: ICCheckSquare,
+        },
+        ...(showPagination
+            ? [
+                  {
+                      locator: BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES,
+                      label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES],
+                      isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.BULK_CHECKED,
+                      icon: ICCheckAll,
+                  },
+              ]
+            : []),
+        ...(areOptionsSelected
+            ? [
+                  {
+                      locator: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
+                      label: BulkSelectionOptionsLabels[BulkSelectionEvents.CLEAR_ALL_SELECTIONS],
+                      isSelected: false,
+                      icon: ICCross,
+                  },
+              ]
+            : []),
+    ]
+
+    return (
+        <PopupMenu autoClose>
+            <PopupMenu.Button
+                isKebab
+                rootClassName="h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp"
+                dataTestId={BULK_DROPDOWN_TEST_ID}
+            >
+                <Checkbox
+                    isChecked={isChecked}
+                    onChange={noop}
+                    rootClassName="icon-dim-20"
+                    value={checkboxValue}
+                    // Ideally should be disabled but was giving issue with cursor
+                />
+
+                <ICChevronDown className="icon-dim-20 icon-n6" />
+            </PopupMenu.Button>
+
+            <PopupMenu.Body rootClassName="dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bcn-0 flex column dc__content-start dc__align-start dc__position-abs bcn-0 dc__border dc__border-radius-4-imp">
+                {BulkSelectionItems.map((item) => (
+                    <BulkSelectionDropdownItems<T>
+                        key={item.locator}
+                        locator={item.locator}
+                        label={item.label}
+                        isSelected={item.isSelected}
+                        icon={item.icon}
+                        handleBulkSelection={handleBulkSelection}
+                    />
+                ))}
+            </PopupMenu.Body>
+        </PopupMenu>
+    )
+}
+
+export default BulkSelection