@devtron-labs/devtron-fe-common-lib 0.0.61-beta-7 → 0.0.61-beta-9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.61-beta-7",
+    "version": "0.0.61-beta-9",
     "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-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/BreadCrumb/Types.ts

@@ -1,3 +1,4 @@
+
 export interface Breadcrumb {
   to: string
   name: string

package/src/Common/Checkbox.tsx

@@ -10,7 +10,6 @@ Valid States of Checkbox:
 5. disabled: false, checked: true,  value: INTERMIDIATE
 6. disabled: false, checked: true,  value: CHECKED
 */
-// TODO: Associate label with input element
 export class Checkbox extends Component<CheckboxProps> {
     render() {
         let rootClassName = `${this.props.rootClassName ? this.props.rootClassName : ''}`

package/src/Common/Constants.ts

@@ -25,8 +25,7 @@ export const ROUTES = {
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING:'app/image-tagging',
     CD_MATERIAL_GET: 'app/cd-pipeline',
-    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list',
-    INFRA_CONFIG_PROFILE: 'infra-config/profile',
+    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list'
 }
 
 export enum KEY_VALUE {
@@ -252,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/CustomInput/CustomInput.tsx

@@ -2,7 +2,6 @@ import { CustomInputProps } from './Types'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
 
-// TODO: label association with input
 export function CustomInput({
     name,
     value,
@@ -14,7 +13,7 @@ export function CustomInput({
     disabled = false,
     labelClassName = '',
     placeholder = '',
-    tabIndex = 0,
+    tabIndex = 1,
     dataTestid = '',
     isRequiredField = false,
     autoFocus = false,

package/src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -94,9 +94,8 @@ export default function DraggableWrapper({
     }
 
     return (
-        // Since we are using position fixed so we need to disable click on the div so that it does not interfere with the click of other elements
         <div
-            className="dc__position-fixed dc__disable-click"
+            className="dc__position-fixed"
             style={{
                 zIndex,
             }}
@@ -107,7 +106,6 @@ export default function DraggableWrapper({
                     {...childDivProps}
                     style={{
                         zIndex,
-                        pointerEvents: 'auto',
                     }}
                 >
                     {children}

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

@@ -447,9 +447,16 @@ export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
  */
 export const getUrlWithSearchParams = (url: string, params: Record<string | number, any>) => {
     const searchParams = new URLSearchParams()
+    // TODO: Common out
     Object.keys(params).forEach((key) => {
         if (params[key]) {
-            searchParams.append(key, params[key])
+            if (Array.isArray(params[key])) {
+                params[key].forEach((val) => {
+                    searchParams.append(key, val)
+                })
+            } else {
+                searchParams.set(key, params[key])
+            }
         }
     })
     const queryString = searchParams.toString()
@@ -499,27 +506,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 +527,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/RJSF/utils.ts

@@ -19,7 +19,6 @@ export const getCommonSelectStyle = (styleOverrides = {}) => {
             ...base,
             paddingTop: 0,
             paddingBottom: 0,
-            cursor: 'pointer',
         }),
         control: (base, state) => ({
             ...base,
@@ -34,7 +33,6 @@ export const getCommonSelectStyle = (styleOverrides = {}) => {
             color: 'var(--N900)',
             backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
             padding: '10px 12px',
-            cursor: 'pointer',
         }),
         dropdownIndicator: (base, state) => ({
             ...base,

package/src/Common/SearchBar/searchBar.scss

@@ -3,7 +3,7 @@
     &:focus,
     &:focus-within {
         outline: none;
-        border: solid 1px var(--B500) !important;
+        border: solid 1px var(--B500);
     }
 
     &__input {

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
@@ -764,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 = 'temporaryAccess',
+}

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

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

package/src/Pages/GlobalConfigurations/index.ts

@@ -1 +1 @@
-export * from './BuildInfra'
+export * from './Authorization'

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

@@ -9,8 +9,8 @@ import { ReactComponent as ICCheckAll } from '../../../Assets/Icon/ic-check-all.
 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 { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection<T>()
+    const areOptionsSelected = getSelectedIdentifiersCount() > 0
     const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
         {
             locator: BulkSelectionEvents.SELECT_ALL_ON_PAGE,

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

@@ -18,9 +18,7 @@ const BulkSelectionDropdownItems = <T,>({
             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-1 icon-stroke-b5 fs-13 fw-6 lh-20'
-                    : 'dc__no-background cn-9 fs-13 fw-4 lh-20 dc__hover-n50'
+                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"
         >

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

@@ -16,6 +16,8 @@ const BulkSelectionContext = createContext<UseBulkSelectionReturnType<any>>({
     handleBulkSelection: noop,
     isChecked: false,
     checkboxValue: CHECKBOX_VALUE.CHECKED,
+    isBulkSelectionApplied: false,
+    getSelectedIdentifiersCount: noop,
 })
 
 export const useBulkSelection = <T,>() => {
@@ -33,6 +35,10 @@ export const BulkSelectionProvider = <T,>({
 }: UseBulkSelectionProps<T>) => {
     const [selectedIdentifiers, setSelectedIdentifiers] = useState<T>({} as T)
 
+    const isBulkSelectionApplied = selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
+
+    const getSelectedIdentifiersCount = () => Object.keys(selectedIdentifiers).length
+
     const setIdentifiersAfterClear = (newIdentifiers: T, selectedIds: (number | string)[]) => {
         const _newIdentifiers = JSON.parse(JSON.stringify(newIdentifiers))
         selectedIds.forEach((id) => {
@@ -44,7 +50,7 @@ export const BulkSelectionProvider = <T,>({
     const setIdentifiersAfterPageSelection = (baseObject: T) => {
         const _selectedIdentifiers = JSON.parse(JSON.stringify(selectedIdentifiers))
         // removing bulk selection across pages if present
-        if (_selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+        if (isBulkSelectionApplied) {
             delete _selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
         }
 
@@ -74,10 +80,13 @@ export const BulkSelectionProvider = <T,>({
             }
 
             case BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES: {
-                if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+                if (isBulkSelectionApplied) {
                     return
                 }
-                const selectedIdentifiersLength = Object.keys(selectedIdentifiers).length
+                const selectedIdentifiersLength = getSelectedIdentifiersCount()
+                // This is for showing a modal dialog if applicable to confirm if bulk selection is to be applied
+                // Do note that the 'getSelectAllDialogStatus' should be called after the length check explicitly
+                // otherwise the modal will open each time
                 if (selectedIdentifiersLength > 0 && getSelectAllDialogStatus() === SelectAllDialogStatus.OPEN) {
                     return
                 }
@@ -119,7 +128,7 @@ export const BulkSelectionProvider = <T,>({
         }
 
         // if selectedIdentifiers contains select all across pages locator then it means all are selected
-        if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+        if (isBulkSelectionApplied) {
             return {
                 isChecked: true,
                 checkboxValue: CHECKBOX_VALUE.BULK_CHECKED,
@@ -152,8 +161,10 @@ export const BulkSelectionProvider = <T,>({
             handleBulkSelection,
             isChecked,
             checkboxValue,
+            isBulkSelectionApplied,
+            getSelectedIdentifiersCount,
         }),
-        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue],
+        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount],
     )
 
     return <BulkSelectionContext.Provider value={value}>{children}</BulkSelectionContext.Provider>

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

@@ -26,6 +26,8 @@ export interface GetBulkSelectionCheckboxValuesType {
 export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxValuesType {
     selectedIdentifiers: T
     handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void
+    isBulkSelectionApplied: boolean
+    getSelectedIdentifiersCount: () => number
 }
 
 export interface BulkSelectionProps {

package/src/Shared/Components/index.ts

@@ -1,3 +1 @@
-export * from './APIResponseHandler'
-export * from './ReactSelect'
 export * from './BulkSelection'

package/src/Shared/index.ts

@@ -1,3 +1 @@
 export * from './Components'
-export * from './validations'
-export * from './Helpers'

package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BuildInfraConfigFormProps } from './types';
-declare const BuildInfraConfigForm: FunctionComponent<BuildInfraConfigFormProps>;
-export default BuildInfraConfigForm;

package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BuildInfraInputFieldComponentProps } from './types';
-declare const BuildInfraProfileDescriptionField: FunctionComponent<BuildInfraInputFieldComponentProps>;
-export default BuildInfraProfileDescriptionField;