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

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

@@ -0,0 +1,163 @@
+import { createContext, useContext, useMemo, useState } from 'react'
+import { BULK_SELECTION_CONTEXT_ERROR, SELECT_ALL_ACROSS_PAGES_LOCATOR, getInvalidActionMessage } from './constants'
+import {
+    BulkSelectionEvents,
+    GetBulkSelectionCheckboxValuesType,
+    HandleBulkSelectionType,
+    SelectAllDialogStatus,
+    UseBulkSelectionProps,
+    UseBulkSelectionReturnType,
+} from './types'
+import { CHECKBOX_VALUE, noop } from '../../../Common'
+
+// giving type any here since not exporting this context, rather using it through useBulkSelection hook which is typed
+const BulkSelectionContext = createContext<UseBulkSelectionReturnType<any>>({
+    selectedIdentifiers: {},
+    handleBulkSelection: noop,
+    isChecked: false,
+    checkboxValue: CHECKBOX_VALUE.CHECKED,
+})
+
+export const useBulkSelection = <T,>() => {
+    const context = useContext<UseBulkSelectionReturnType<T>>(BulkSelectionContext)
+    if (!context) {
+        throw new Error(BULK_SELECTION_CONTEXT_ERROR)
+    }
+    return context
+}
+
+export const BulkSelectionProvider = <T,>({
+    children,
+    identifiers,
+    getSelectAllDialogStatus,
+}: UseBulkSelectionProps<T>) => {
+    const [selectedIdentifiers, setSelectedIdentifiers] = useState<T>({} as T)
+
+    const setIdentifiersAfterClear = (newIdentifiers: T, selectedIds: (number | string)[]) => {
+        const _newIdentifiers = JSON.parse(JSON.stringify(newIdentifiers))
+        selectedIds.forEach((id) => {
+            delete _newIdentifiers[id]
+        })
+        setSelectedIdentifiers(_newIdentifiers)
+    }
+
+    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]) {
+            delete _selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
+        }
+
+        setSelectedIdentifiers({
+            ..._selectedIdentifiers,
+            ...baseObject,
+        })
+    }
+
+    const handleBulkSelection = ({ action, data }: HandleBulkSelectionType<T>) => {
+        const selectedIds = data?.identifierIds ?? []
+        const identifierObject = data?.identifierObject ?? {}
+
+        switch (action) {
+            case BulkSelectionEvents.CLEAR_ALL_SELECTIONS:
+                setSelectedIdentifiers({} as T)
+                break
+
+            case BulkSelectionEvents.CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION: {
+                setIdentifiersAfterClear(identifiers, selectedIds)
+                break
+            }
+
+            case BulkSelectionEvents.CLEAR_IDENTIFIERS: {
+                setIdentifiersAfterClear(selectedIdentifiers, selectedIds)
+                break
+            }
+
+            case BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES: {
+                if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+                    return
+                }
+                const selectedIdentifiersLength = Object.keys(selectedIdentifiers).length
+                // 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
+                }
+
+                setSelectedIdentifiers({
+                    [SELECT_ALL_ACROSS_PAGES_LOCATOR]: true,
+                } as unknown as T)
+                break
+            }
+
+            case BulkSelectionEvents.CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES:
+                setSelectedIdentifiers({
+                    [SELECT_ALL_ACROSS_PAGES_LOCATOR]: true,
+                } as unknown as T)
+                break
+
+            case BulkSelectionEvents.SELECT_ALL_ON_PAGE: {
+                setIdentifiersAfterPageSelection(identifiers)
+                break
+            }
+
+            case BulkSelectionEvents.SELECT_IDENTIFIER: {
+                setIdentifiersAfterPageSelection(identifierObject as T)
+                break
+            }
+
+            default:
+                throw new Error(getInvalidActionMessage(action))
+        }
+    }
+
+    const getBulkSelectionCheckboxValues = (): GetBulkSelectionCheckboxValuesType => {
+        const selectedIdentifiersArray = Object.keys(selectedIdentifiers)
+        if (selectedIdentifiersArray.length === 0) {
+            return {
+                isChecked: false,
+                checkboxValue: CHECKBOX_VALUE.CHECKED,
+            }
+        }
+
+        // if selectedIdentifiers contains select all across pages locator then it means all are selected
+        if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+            return {
+                isChecked: true,
+                checkboxValue: CHECKBOX_VALUE.BULK_CHECKED,
+            }
+        }
+
+        // if all the identifiers are selected then CHECKED else intermediate
+        const areAllPresentIdentifiersSelected = Object.keys(identifiers).every(
+            (identifierId) => selectedIdentifiers[identifierId],
+        )
+
+        if (areAllPresentIdentifiersSelected) {
+            return {
+                isChecked: true,
+                checkboxValue: CHECKBOX_VALUE.CHECKED,
+            }
+        }
+
+        return {
+            isChecked: true,
+            checkboxValue: CHECKBOX_VALUE.INTERMEDIATE,
+        }
+    }
+
+    const { isChecked, checkboxValue } = getBulkSelectionCheckboxValues()
+
+    const value = useMemo(
+        () => ({
+            selectedIdentifiers,
+            handleBulkSelection,
+            isChecked,
+            checkboxValue,
+        }),
+        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue],
+    )
+
+    return <BulkSelectionContext.Provider value={value}>{children}</BulkSelectionContext.Provider>
+}

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

@@ -0,0 +1,13 @@
+import { BulkSelectionEvents } from './types'
+
+export const BULK_DROPDOWN_TEST_ID = 'bulk-selection-pop-up-menu' as const
+export const BulkSelectionOptionsLabels = {
+    [BulkSelectionEvents.SELECT_ALL_ON_PAGE]: 'All on this page',
+    [BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES]: 'All across pages',
+    [BulkSelectionEvents.CLEAR_ALL_SELECTIONS]: 'Clear selection',
+} as const
+
+// Considering application can not be named as *
+export const SELECT_ALL_ACROSS_PAGES_LOCATOR = '*' as const
+export const getInvalidActionMessage = (action: string) => `Invalid action ${action} passed to useBulkSelection`
+export const BULK_SELECTION_CONTEXT_ERROR = 'useBulkSelection must be used within BulkSelectionContext'

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

@@ -0,0 +1,4 @@
+export { default as BulkSelection } from './BulkSelection'
+export * from './BulkSelectionProvider'
+export * from './types'
+export * from './constants'

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

@@ -0,0 +1,65 @@
+import { CHECKBOX_VALUE } from '../../../Common'
+
+export enum BulkSelectionEvents {
+    CLEAR_ALL_SELECTIONS = 'CLEAR_ALL_SELECTIONS',
+    CLEAR_IDENTIFIERS = 'CLEAR_IDENTIFIERS',
+    SELECT_ALL_ACROSS_PAGES = 'SELECT_ALL_ACROSS_PAGES',
+    SELECT_ALL_ON_PAGE = 'SELECT_ALL_ON_PAGE',
+    SELECT_IDENTIFIER = 'SELECT_IDENTIFIER',
+    CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION = 'CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION',
+    CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES = 'CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES',
+}
+
+export interface HandleBulkSelectionType<T> {
+    action: BulkSelectionEvents
+    data?: {
+        identifierIds?: (number | string)[]
+        identifierObject?: T
+    }
+}
+
+export interface GetBulkSelectionCheckboxValuesType {
+    isChecked: boolean
+    checkboxValue: CHECKBOX_VALUE
+}
+
+export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxValuesType {
+    selectedIdentifiers: T
+    handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void
+}
+
+export interface BulkSelectionProps {
+    showPagination: boolean
+}
+
+export interface BulkSelectionDropdownItemsType {
+    locator: BulkSelectionEvents
+    label: string
+    isSelected: boolean
+    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+}
+
+export interface BulkSelectionDropdownItemsProps<T>
+    extends BulkSelectionDropdownItemsType,
+        Pick<UseBulkSelectionReturnType<T>, 'handleBulkSelection'> {}
+
+export enum SelectAllDialogStatus {
+    OPEN = 'OPEN',
+    CLOSED = 'CLOSED',
+}
+
+// This type is intended to be used with UseBulkSelectionProps, e.g, UseBulkSelectionProps<BulkSelectionIdentifiersType<boolean>>
+export type BulkSelectionIdentifiersType<T> = Record<string | number, T>
+
+export interface UseBulkSelectionProps<T> {
+    /**
+     * Response from API, assuming structure to be array of objects with key and values
+     * This will the given ids on current page
+     */
+    identifiers: T
+    /**
+     * Act as buffer between select all across pages and select all on page state
+     */
+    getSelectAllDialogStatus: () => SelectAllDialogStatus
+    children?: React.ReactNode
+}

package/src/Shared/Components/index.ts

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

package/src/Shared/index.ts

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

package/src/index.ts

@@ -1 +1,3 @@
-export * from "./Common"
+export * from './Common'
+export * from './Pages'
+export * from './Shared'