@devtron-labs/devtron-fe-common-lib 0.0.60-beta-6 → 0.0.61-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.60-beta-6",
+    "version": "0.0.61-beta-1",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Assets/Icon/ic-arrow-up-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+  <path d="M4.125 8.5L6 10.75L7.875 8.5M4.125 3.5L6 1.25L7.875 3.5" stroke="#3B444C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Icon/ic-check-all.svg

@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="11.2" height="11.2" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.4667 5.86621V11.4662C15.4667 13.6754 13.6758 15.4662 11.4667 15.4662H5.8667" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.35 5.84961L6.85004 9.34945L5.10004 7.59961" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Icon/ic-check-square.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="12" height="12" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.2083 5.95801L7.12498 10.0412L5.08331 7.99967" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Icon/ic-close.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="a" class="stroke-color" d="M18.295 5.705a.997.997 0 0 0-1.41 0L12 10.59 7.115 5.705a.997.997 0 1 0-1.41 1.41L10.59 12l-4.885 4.885a.997.997 0 1 0 1.41 1.41L12 13.41l4.885 4.885a.997.997 0 0 0 1.41-1.41L13.41 12l4.885-4.885a.997.997 0 0 0 0-1.41z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path d=""/>
+        <use fill="#999" xlink:href="#a"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-sort-arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 7.50009L6.00004 10.0001M6.00004 10.0001L8.5 7.50054M6.00004 10.0001V2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Common/Api.ts

@@ -1,6 +1,7 @@
 import { ServerErrors } from './ServerError'
 import { FALLBACK_REQUEST_TIMEOUT, Host, URLS } from './Constants'
 import { ResponseType, APIOptions } from './Types'
+import { MutableRefObject } from 'react'
 
 const responseMessages = {
     100: 'Continue',
@@ -228,3 +229,23 @@ export const get = (url: string, options?: APIOptions): Promise<ResponseType> =>
 export const trash = (url: string, data?: object, options?: APIOptions): Promise<ResponseType> => {
     return fetchInTime(url, 'DELETE', data, options)
 }
+
+/**
+ * Aborts the previous request before triggering next request
+ */
+export const abortPreviousRequests = <T,>(
+    callback: () => Promise<T>,
+    abortControllerRef: MutableRefObject<AbortController>,
+): Promise<T> => {
+    abortControllerRef.current.abort()
+    // eslint-disable-next-line no-param-reassign
+    abortControllerRef.current = new AbortController()
+    return callback()
+}
+
+/**
+ * Returns true if the error is due to a aborted request
+ */
+export const getIsRequestAborted = (error) =>
+    // The 0 code is common for aborted and blocked requests
+    error && error.code === 0 && error.message === 'The user aborted a request.'

package/src/Common/Constants.ts

@@ -251,4 +251,20 @@ export const MAX_Z_INDEX = 2147483647
 export const SELECTED_APPROVAL_TAB_STATE = {
     APPROVAL: 'approval',
     PENDING: 'pending',
-}
+}
+
+export enum SortingOrder {
+    /**
+     * Ascending order
+     */
+    ASC = 'ASC',
+    /**
+     * Descending order
+     */
+    DESC = 'DESC',
+}
+
+/**
+ * Base page size for pagination
+ */
+export const DEFAULT_BASE_PAGE_SIZE = 20

package/src/Common/DraggableWrapper/types.ts

@@ -8,7 +8,10 @@ export enum DraggablePositionVariant {
 
 export interface DraggableWrapperProps {
     children: ReactNode
-    zIndex?: number
+    /**
+     * Support for passing the direct value or calc functions as well
+     */
+    zIndex?: number | string
     positionVariant?: DraggablePositionVariant
     /**
      * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag

package/src/Common/Helper.tsx

@@ -499,27 +499,18 @@ export const getFilteredChartVersions = (charts, selectedChartType) => {
             chartRefId: item.chartRefId,
         }))
 }
-
-function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
-    // It recursively removes empty object keys and empty array keys
+function removeEmptyObjectKeysAndNullValues(obj) {
+    // It recursively removes empty object keys and array values that are null
     for (let key in obj) {
         if (Array.isArray(obj[key])) {
+            if (obj[key].length === 0) continue
+            obj[key] = obj[key].filter((item) => item !== null)
             // Check if the array is empty
-            if (obj[key].length !== 0) {
-                obj[key].forEach((element, index) => {
-                    if (element === null || (typeof element === 'object' && Object.keys(element).length === 0))
-                        obj[key].splice(index, 1)
-                    else removeEmptyObjectKeysAndNullValues(element, originaljsonCopy[key][index])
-                })
-            }
-            if (obj[key].length === 0 && originaljsonCopy[key].length !== 0) {
-                delete obj[key]
+            if (obj[key].length === 0) {
+                delete obj[key] // Delete the key if the array is empty
             }
         } else if (obj[key] && typeof obj[key] === 'object') {
-            if (
-                removeEmptyObjectKeysAndNullValues(obj[key], originaljsonCopy[key]) &&
-                Object.keys(originaljsonCopy[key]).length !== 0
-            ) {
+            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
                 delete obj[key]
             }
         } else if (obj[key] === undefined) {
@@ -529,25 +520,20 @@ function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
     return Object.keys(obj).length === 0
 }
 
-export function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays = false) {
-    if (!jsonPathArray.length) return { newDocument: json, removedPatches: [] }
-    
+export function getUnlockedJSON(json, jsonPathArray) {
     const jsonCopy = JSON.parse(JSON.stringify(json))
-    const originaljsonCopy = JSON.parse(JSON.stringify(json))
-    let removedPatches = []
     let patches = jsonPathArray.flatMap((jsonPath) => {
         const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        //reversing patches to handle correct array index deletion
-        pathsToRemove.reverse()
-        return pathsToRemove.map((result) => {
-            //storing removed patches to have functionality of undo
-            removedPatches.push({ op: 'add', path: result.pointer, value: result.value })
-            return { op: 'remove', path: result.pointer }
-        })
+        return pathsToRemove.map((result) =>
+            Array.isArray(result.parent)
+                ? { op: 'replace', path: result.pointer, value: null }
+                : { op: 'remove', path: result.pointer },
+        )
     })
     let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
-    if (removeParentKeysAndEmptyArrays) removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy)
-    return { newDocument, removedPatches: removedPatches.reverse() }
+
+    removeEmptyObjectKeysAndNullValues(newDocument)
+    return newDocument
 }
 
 export function getLockedJSON(json, jsonPathArray: string[]) {

package/src/Common/Hooks/index.ts

@@ -1,3 +1,4 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin'
 export { useClickOutside } from './UseClickOutside/UseClickOutside'
 export { useWindowSize } from './UseWindowSize/UseWindowSize'
+export * from './useUrlFilters'

package/src/Common/Hooks/useUrlFilters/constants.ts

@@ -0,0 +1,9 @@
+export const DEFAULT_PAGE_NUMBER = 1
+
+export const URL_FILTER_KEYS = {
+    PAGE_SIZE: 'pageSize',
+    PAGE_NUMBER: 'pageNumber',
+    SEARCH_KEY: 'searchKey',
+    SORT_BY: 'sortBy',
+    SORT_ORDER: 'sortOrder',
+} as const

package/src/Common/Hooks/useUrlFilters/index.ts

@@ -0,0 +1,2 @@
+export { default as useUrlFilters } from './useUrlFilters'
+export type { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'

package/src/Common/Hooks/useUrlFilters/types.ts

@@ -0,0 +1,21 @@
+import { SortingOrder } from '../../Constants'
+
+export interface UseUrlFiltersProps<T> {
+    /**
+     * The key on which the sorting should be applied
+     */
+    initialSortKey?: T
+}
+
+export interface UseUrlFiltersReturnType<T> {
+    pageSize: number
+    changePage: (pageNumber: number) => void
+    changePageSize: (pageSize: number) => void
+    searchKey: string
+    handleSearch: (searchKey: string) => void
+    offset: number
+    sortBy: T
+    sortOrder: SortingOrder
+    handleSorting: (sortBy: T) => void
+    clearFilters: () => void
+}

package/src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -0,0 +1,121 @@
+import { useMemo } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+import { DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '../../Constants'
+import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
+import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
+
+const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
+
+/**
+ * Generic hook for implementing URL based filters.
+ * eg: pagination, search, sort.
+ *
+ * The exposed handlers can be consumed directly without the need for explicit state management
+ *
+ * @example Default Usage:
+ * ```tsx
+ * const { pageSize, changePage, ...rest } = useUrlFilters()
+ * ```
+ *
+ * @example Usage with custom type for sort keys and initial sort key:
+ * ```tsx
+ * const  { sortBy, sortOrder } = useUrlFilters<'email' | 'name'>({ initialSortKey: 'email' })
+ * ```
+ *
+ */
+const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {}): UseUrlFiltersReturnType<T> => {
+    const location = useLocation()
+    const history = useHistory()
+    const searchParams = new URLSearchParams(location.search)
+
+    const { pageSize, pageNumber, searchKey, sortBy, sortOrder } = useMemo(() => {
+        const _pageSize = searchParams.get(PAGE_SIZE)
+        const _pageNumber = searchParams.get(PAGE_NUMBER)
+        const _searchKey = searchParams.get(SEARCH_KEY)
+        const _sortOrder = searchParams.get(SORT_ORDER) as SortingOrder
+        const _sortBy = searchParams.get(SORT_BY)
+
+        const sortByKey = (_sortBy || initialSortKey || '') as T
+        // Fallback to ascending order
+        const sortByOrder = Object.values(SortingOrder).includes(_sortOrder) ? _sortOrder : SortingOrder.ASC
+
+        return {
+            pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
+            pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER,
+            searchKey: _searchKey || '',
+            sortBy: sortByKey,
+            // sort order should only be applied if the key is available
+            sortOrder: (sortByKey ? sortByOrder : '') as SortingOrder,
+        }
+    }, [searchParams])
+
+    /**
+     * Used for getting the required result from the API
+     */
+    const offset = pageSize * (pageNumber - 1)
+
+    /**
+     * Update and replace the search params in the URL.
+     *
+     * Note: Currently only primitive data types are supported
+     */
+    const _updateSearchParam = (key: string, value) => {
+        searchParams.set(key, String(value))
+        history.replace({ search: searchParams.toString() })
+    }
+
+    const _resetPageNumber = () => {
+        _updateSearchParam(PAGE_NUMBER, DEFAULT_PAGE_NUMBER)
+    }
+
+    const changePage = (page: number) => {
+        _updateSearchParam(PAGE_NUMBER, page)
+    }
+
+    const changePageSize = (_pageSize: number) => {
+        _updateSearchParam(PAGE_SIZE, _pageSize)
+        _resetPageNumber()
+    }
+
+    const handleSearch = (searchTerm: string) => {
+        _updateSearchParam(SEARCH_KEY, searchTerm)
+        _resetPageNumber()
+    }
+
+    const handleSorting = (_sortBy: T) => {
+        let order: SortingOrder
+        if (_sortBy === sortBy && sortOrder === SortingOrder.ASC) {
+            order = SortingOrder.DESC
+        } else {
+            order = SortingOrder.ASC
+        }
+
+        _updateSearchParam(SORT_BY, _sortBy)
+        _updateSearchParam(SORT_ORDER, order)
+
+        // Reset page number on sorting change
+        _resetPageNumber()
+    }
+
+    const clearFilters = () => {
+        Object.values(URL_FILTER_KEYS).forEach((key) => {
+            searchParams.delete(key)
+        })
+        history.replace({ search: searchParams.toString() })
+    }
+
+    return {
+        pageSize,
+        changePage,
+        changePageSize,
+        searchKey,
+        handleSearch,
+        offset,
+        sortBy,
+        sortOrder,
+        handleSorting,
+        clearFilters,
+    }
+}
+
+export default useUrlFilters

package/src/Common/SearchBar/SearchBar.component.tsx

@@ -47,7 +47,6 @@ const SearchBar = ({
     containerClassName,
     shouldDebounce = false,
     debounceTimeout = 300,
-    handleOnBlur,
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -112,7 +111,6 @@ const SearchBar = ({
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     ref={inputRef}
-                    onBlur={handleOnBlur}
                 />
                 {/* TODO: Sync with product since it should have ic-enter in case of not applied */}
                 {showClearButton && (

package/src/Common/SearchBar/types.ts

@@ -31,8 +31,4 @@ export interface SearchBarProps {
      * Timeout for the debounce handler to be triggered
      */
     debounceTimeout?: number
-    /**
-     * handleOnBlur for the search input
-     */
-    handleOnBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
 }

package/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -0,0 +1,44 @@
+import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg'
+import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg'
+import { SortingOrder } from '../Constants'
+import { SortableTableHeaderCellProps } from './types'
+
+/**
+ * Reusable component for the table header cell with support for sorting icons
+ *
+ * @example Usage
+ * ```tsx
+ * <SortableTableHeaderCell
+ *   isSorted={currentSortedCell === 'cell'}
+ *   triggerSorting={() => {}}
+ *   sortOrder={SortingOrder.ASC}
+ *   title="Header Cell"
+ *   disabled={isDisabled}
+ * />
+ * ```
+ */
+const SortableTableHeaderCell = ({
+    isSorted,
+    triggerSorting,
+    sortOrder,
+    title,
+    disabled,
+}: SortableTableHeaderCellProps) => (
+    <button
+        type="button"
+        className="dc__transparent p-0 bcn-0 cn-7 flex dc__content-start dc__gap-4 cursor"
+        onClick={triggerSorting}
+        disabled={disabled}
+    >
+        <span className="dc__uppercase dc__ellipsis-right">{title}</span>
+        {isSorted ? (
+            <SortArrowDown
+                className={`icon-dim-12 mw-12 scn-7 ${sortOrder === SortingOrder.DESC ? 'dc__flip-180' : ''}`}
+            />
+        ) : (
+            <SortIcon className="icon-dim-12 mw-12 scn-7" />
+        )}
+    </button>
+)
+
+export default SortableTableHeaderCell

package/src/Common/SortableTableHeaderCell/index.ts

@@ -0,0 +1,2 @@
+export { default as SortableTableHeaderCell } from './SortableTableHeaderCell'
+export type { SortableTableHeaderCellProps } from './types'

package/src/Common/SortableTableHeaderCell/types.ts

@@ -0,0 +1,26 @@
+import { SortingOrder } from '../Constants'
+
+export interface SortableTableHeaderCellProps {
+    /**
+     * If true, the cell is sorted
+     */
+    isSorted: boolean
+    /**
+     * Callback for handling the sorting of the cell
+     */
+    triggerSorting: () => void
+    /**
+     * Current sort order
+     *
+     * Note: On click, the sort order should be updated as required
+     */
+    sortOrder: SortingOrder
+    /**
+     * Label for the cell
+     */
+    title: string
+    /**
+     * If true, the cell is disabled
+     */
+    disabled: boolean
+}

package/src/Common/Types.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode, CSSProperties } from 'react'
 import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
-import { DockerConfigOverrideType, TaskErrorObj } from '.'
+import { DockerConfigOverrideType, SortingOrder, TaskErrorObj } from '.'
 
 /**
  * Generic response type object with support for overriding the result type
@@ -51,11 +51,13 @@ export interface Teams {
 export enum CHECKBOX_VALUE {
     CHECKED = 'CHECKED',
     INTERMEDIATE = 'INTERMEDIATE',
+    BULK_CHECKED = 'BULK_CHECKED',
 }
 export interface CheckboxProps {
     onChange: (event) => void
     isChecked: boolean
-    value: 'CHECKED' | 'INTERMEDIATE'
+    // FIXME: Need to replace this CHECKBOX_VALUE enum, and replace string instances in dashboard
+    value: 'CHECKED' | 'INTERMEDIATE' | 'BULK_CHECKED'
     disabled?: boolean
     tabIndex?: number
     rootClassName?: string
@@ -762,3 +764,15 @@ export interface EdgeNodeType {
 export interface EdgeEndNodeType extends EdgeNodeType {
     userApprovalConfig?: UserApprovalConfigType
 }
+
+/**
+ * Search params for sorting configuration
+ * 
+ * Note: Either both sortOrder and sortBy are required or none
+ */
+export type SortingParams<T = string> =
+    | {
+          sortOrder: SortingOrder
+          sortBy: T
+      }
+    | { sortOrder?: never; sortBy?: never }

package/src/Common/index.ts

@@ -27,6 +27,7 @@ export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
 export * from './SearchBar'
+export * from './SortableTableHeaderCell'
 export { default as Toggle } from './Toggle/Toggle'
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'

package/src/Pages/GlobalConfigurations/Authorization/constants.ts

@@ -0,0 +1,16 @@
+/**
+ * User Status received from the API
+ */
+export enum UserStatusDto {
+    active = 'active',
+    inactive = 'inactive',
+}
+
+/**
+ * User status for the frontend
+ */
+export enum UserStatus {
+    active = 'active',
+    inactive = 'inactive',
+    temporary = 'temporary',
+}

package/src/Pages/GlobalConfigurations/Authorization/index.ts

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

package/src/Pages/GlobalConfigurations/index.ts

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

package/src/Pages/index.ts

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

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

@@ -0,0 +1,77 @@
+import BulkSelectionDropdownItems from './BulkSelectionDropdownItems'
+import { CHECKBOX_VALUE, Checkbox, PopupMenu, noop } from '../../../Common'
+import { useBulkSelection } from './BulkSelectionProvider'
+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 ICClose } from '../../../Assets/Icon/ic-close.svg'
+
+const BulkSelection = <T,>({ showPagination }: BulkSelectionProps) => {
+    const { handleBulkSelection, selectedIdentifiers, isChecked, checkboxValue } = useBulkSelection<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: ICClose,
+                  },
+              ]
+            : []),
+    ]
+
+    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 m-0"
+                    value={checkboxValue}
+                    // Ideally should be disabled but was giving issue with cursor
+                />
+
+                <ICChevronDown className="icon-dim-20 fcn-6 dc__no-shrink" />
+            </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

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

@@ -0,0 +1,31 @@
+import { BulkSelectionDropdownItemsProps } from './types'
+
+const BulkSelectionDropdownItems = <T,>({
+    locator,
+    label,
+    isSelected,
+    handleBulkSelection,
+    icon: Icon,
+}: BulkSelectionDropdownItemsProps<T>) => {
+    const handleSelect = () => {
+        handleBulkSelection({
+            action: locator,
+        })
+    }
+
+    return (
+        <button
+            data-testid={`bulk-action-${locator}`}
+            onClick={handleSelect}
+            className={`dc__no-border dc__outline-none-imp w-100 flexbox h-32 dc__align-items-center pt-6 pr-8 pb-6 pl-8 dc__gap-8 ${
+                isSelected ? 'cb-5 bcb-2 fs-13 fw-6 lh-20' : 'dc__no-background cn-9 fs-13 fw-4 lh-20 dc__hover-n50'
+            }`}
+            type="button"
+        >
+            <Icon className="icon-dim-16" />
+            {label}
+        </button>
+    )
+}
+
+export default BulkSelectionDropdownItems