@devtron-labs/devtron-fe-common-lib 0.0.62-beta-5 → 0.0.62-beta-7

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

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

@@ -1,182 +0,0 @@
-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

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

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

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

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

@@ -1,67 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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">
-            <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 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

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

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

@@ -1,39 +0,0 @@
-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

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

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

@@ -1,97 +0,0 @@
-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

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

package/src/Shared/Helpers.tsx

@@ -1,29 +0,0 @@
-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

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