@devtron-labs/devtron-fe-common-lib 0.0.63-beta-1 → 0.0.63-beta-4

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

@@ -0,0 +1,33 @@
+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-1 icon-stroke-b5 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

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

@@ -0,0 +1,182 @@
+import { createContext, useContext, useMemo, useState } from 'react'
+import { toast } from 'react-toastify'
+import {
+    BULK_SELECTION_CONTEXT_ERROR,
+    CLEAR_SELECTIONS_WARNING,
+    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,
+    isBulkSelectionApplied: false,
+    getSelectedIdentifiersCount: noop,
+})
+
+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 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) => {
+            delete _newIdentifiers[id]
+        })
+        setSelectedIdentifiers(_newIdentifiers)
+    }
+
+    const setIdentifiersAfterPageSelection = (baseObject: T) => {
+        const _selectedIdentifiers = JSON.parse(JSON.stringify(selectedIdentifiers))
+        // removing bulk selection across pages if present
+        if (isBulkSelectionApplied) {
+            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: {
+                toast.info(CLEAR_SELECTIONS_WARNING)
+                setIdentifiersAfterClear(identifiers, selectedIds)
+                break
+            }
+
+            case BulkSelectionEvents.CLEAR_IDENTIFIERS: {
+                setIdentifiersAfterClear(selectedIdentifiers, selectedIds)
+                break
+            }
+
+            case BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES: {
+                if (isBulkSelectionApplied) {
+                    return
+                }
+                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
+                }
+
+                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: {
+                if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+                    toast.info(CLEAR_SELECTIONS_WARNING)
+                }
+
+                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 (isBulkSelectionApplied) {
+            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,
+            isBulkSelectionApplied,
+            getSelectedIdentifiersCount,
+        }),
+        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount],
+    )
+
+    return <BulkSelectionContext.Provider value={value}>{children}</BulkSelectionContext.Provider>
+}

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

@@ -0,0 +1,14 @@
+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(s)',
+} 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'
+export const CLEAR_SELECTIONS_WARNING = 'Selections on other pages are cleared'

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,67 @@
+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
+    isBulkSelectionApplied: boolean
+    getSelectedIdentifiersCount: () => number
+}
+
+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/FilterChips/FilterChips.component.tsx

@@ -0,0 +1,100 @@
+import { ReactComponent as CloseIcon } from '../../../Assets/Icon/ic-close.svg'
+import { noop } from '../../../Common'
+import { FilterChipProps, FilterChipsProps } from './types'
+
+const FilterChip = ({
+    label,
+    value,
+    handleRemoveFilter,
+    getFormattedLabel = noop,
+    getFormattedValue = noop,
+}: FilterChipProps) => {
+    const removeFilter = () => {
+        handleRemoveFilter(label, value)
+    }
+
+    const labelToDisplay = getFormattedLabel(label) ?? label
+
+    const valueToDisplay = getFormattedValue(label, value) ?? value
+
+    return (
+        <div className="flexbox flex-align-center br-4 dc__border dc__bg-n50 pl-6 pr-6 pt-2 pb-2 dc__user-select-none h-24 dc__gap-6 fs-12 lh-20 cn-9 fw-4 dc__ellipsis-right">
+            <span className="fw-6 dc__capitalize">{labelToDisplay}</span>
+            <span className="dc__divider h-24" />
+            <span className="dc__ellipsis-right">{valueToDisplay}</span>
+            <button
+                type="button"
+                className="flex p-0 dc__transparent"
+                onClick={removeFilter}
+                aria-label="Remove filter"
+            >
+                <CloseIcon className="icon-dim-12 icon-use-fill-n6" />
+            </button>
+        </div>
+    )
+}
+
+/**
+ * Component for rendering the applied filter chips
+ */
+const FilterChips = ({
+    filterConfig,
+    clearFilters,
+    onRemoveFilter,
+    getFormattedLabel,
+    getFormattedValue,
+}: FilterChipsProps) => {
+    const handleRemoveFilter = (filterKey, valueToRemove) => {
+        const updatedFilterConfig = JSON.parse(JSON.stringify(filterConfig))
+        if (Array.isArray(filterConfig[filterKey])) {
+            onRemoveFilter({
+                ...updatedFilterConfig,
+                [filterKey]: updatedFilterConfig[filterKey].filter((val) => val !== valueToRemove),
+            })
+            return
+        }
+        if (filterKey in updatedFilterConfig) {
+            delete updatedFilterConfig[filterKey]
+            onRemoveFilter(updatedFilterConfig)
+        }
+    }
+
+    const chips = Object.entries(filterConfig).filter(([, value]) => (Array.isArray(value) ? value.length : !!value))
+
+    return (
+        chips.length > 0 && (
+            <div className="flexbox pt-6 pb-6 flex-wrap dc__gap-8">
+                {chips.map(([filterKey, filterValue]) =>
+                    Array.isArray(filterValue) ? (
+                        filterValue.map((filter) => (
+                            <FilterChip
+                                key={`${filterKey}-${filter}`}
+                                label={filterKey}
+                                value={filter}
+                                handleRemoveFilter={handleRemoveFilter}
+                                getFormattedLabel={getFormattedLabel}
+                                getFormattedValue={getFormattedValue}
+                            />
+                        ))
+                    ) : (
+                        <FilterChip
+                            key={filterKey}
+                            label={filterKey}
+                            value={filterValue}
+                            handleRemoveFilter={handleRemoveFilter}
+                            getFormattedLabel={getFormattedLabel}
+                            getFormattedValue={getFormattedValue}
+                        />
+                    ),
+                )}
+                <div className="flex">
+                    <button type="button" className="cta text fs-13-imp lh-20-imp h-20 p-0-imp" onClick={clearFilters}>
+                        Clear All Filters
+                    </button>
+                </div>
+            </div>
+        )
+    )
+}
+
+export default FilterChips

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

@@ -0,0 +1,2 @@
+export { default as FilterChips } from './FilterChips.component'
+export type { FilterChipsProps } from './types'

package/src/Shared/Components/FilterChips/types.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react'
+
+export interface FilterChipProps {
+    /**
+     * Filter label
+     */
+    label: string
+    /**
+     * Corresponding value of the filter
+     */
+    value: unknown
+    /**
+     * Callback handler for removing the filter
+     */
+    handleRemoveFilter: (label: string, valueToRemove: unknown) => void
+    /**
+     * If passed, the label will be formatted accordingly
+     */
+    getFormattedLabel?: (filterKey: string) => ReactNode
+    /**
+     * If passed, the label will be formatted accordingly
+     */
+    getFormattedValue?: (filterKey: string, filterValue: unknown) => ReactNode
+}
+
+export interface FilterChipsProps extends Pick<FilterChipProps, 'getFormattedLabel' | 'getFormattedValue'> {
+    /**
+     * Current filter configuration
+     */
+    filterConfig: Record<string, unknown>
+    /**
+     * Callback handler for removing the filters
+     */
+    clearFilters: () => void
+    /**
+     * Handler for removing a applied filter
+     */
+    onRemoveFilter: (filterConfig: Record<string, unknown>) => void
+}

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

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

package/src/Shared/Components/ReactSelect/utils.tsx

@@ -0,0 +1,97 @@
+import Tippy from '@tippyjs/react'
+import { components } from 'react-select'
+import { stopPropagation } from '../../../Common'
+
+export const getCommonSelectStyle = (styleOverrides = {}) => ({
+    menuList: (base) => ({
+        ...base,
+        paddingTop: 0,
+        paddingBottom: 0,
+    }),
+    control: (base, state) => ({
+        ...base,
+        minHeight: '32px',
+        boxShadow: 'none',
+        backgroundColor: 'var(--N50)',
+        border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
+        cursor: 'pointer',
+    }),
+    option: (base, state) => ({
+        ...base,
+        color: 'var(--N900)',
+        backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+        padding: '10px 12px',
+    }),
+    dropdownIndicator: (base, state) => ({
+        ...base,
+        color: 'var(--N400)',
+        padding: '0 8px',
+        transition: 'all .2s ease',
+        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+    }),
+    valueContainer: (base) => ({
+        ...base,
+        padding: '0 8px',
+        fontWeight: '400',
+    }),
+    loadingMessage: (base) => ({
+        ...base,
+        color: 'var(--N600)',
+    }),
+    noOptionsMessage: (base) => ({
+        ...base,
+        color: 'var(--N600)',
+    }),
+    ...styleOverrides,
+})
+
+const getCustomOptionBackgroundColor = (isSelected: boolean, isFocused: boolean) => {
+    if (isSelected) {
+        return 'var(--B100)'
+    }
+
+    if (isFocused) {
+        return 'var(--N50)'
+    }
+
+    return 'var(--white)'
+}
+
+export const getCustomOptionSelectionStyle =
+    (styleOverrides = {}) =>
+    (base, state) => ({
+        ...base,
+        backgroundColor: getCustomOptionBackgroundColor(state.isSelected, state.isFocused),
+        color: state.isSelected ? 'var(--B500)' : 'var(--N900)',
+        textOverflow: 'ellipsis',
+        fontWeight: '500',
+        overflow: 'hidden',
+        textAlign: 'left',
+        whiteSpace: 'nowrap',
+        cursor: 'pointer',
+        fontSize: '13px',
+        ...styleOverrides,
+    })
+
+export const SelectOption = (props: any) => {
+    const { selectProps, data, showTippy, style, placement, tippyContent, tippyClass } = props
+    selectProps.styles.option = getCustomOptionSelectionStyle(style)
+    const getOption = () => (
+        <div onClick={stopPropagation}>
+            <components.Option {...props} />
+        </div>
+    )
+
+    return showTippy ? (
+        <Tippy
+            className={tippyClass || 'default-white'}
+            arrow={false}
+            placement={placement || 'right'}
+            content={tippyContent || data.label}
+        >
+            {getOption()}
+        </Tippy>
+    ) : (
+        getOption()
+    )
+}

package/src/Shared/Components/index.ts

@@ -0,0 +1,4 @@
+export * from './APIResponseHandler'
+export * from './ReactSelect'
+export * from './BulkSelection'
+export * from './FilterChips'

package/src/Shared/Helpers.tsx

@@ -0,0 +1,29 @@
+interface HighlightSearchTextProps {
+    /**
+     * The text to be highlighted
+     */
+    searchText: string
+    /**
+     * The whole text string
+     */
+    text: string
+    /**
+     * The classes to be applied to the highlighted text
+     */
+    highlightClasses?: string
+}
+
+// Disabling default export since this is a helper function and we would have to export a lot of functions in future.
+// eslint-disable-next-line import/prefer-default-export
+export const highlightSearchText = ({ searchText, text, highlightClasses }: HighlightSearchTextProps): string => {
+    if (!searchText) {
+        return text
+    }
+
+    try {
+        const regex = new RegExp(searchText, 'gi')
+        return text.replace(regex, (match) => `<span class="${highlightClasses}">${match}</span>`)
+    } catch (error) {
+        return text
+    }
+}

package/src/Shared/index.ts

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