@devtron-labs/devtron-fe-common-lib 0.0.59-beta-14 → 0.0.60-beta-1

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

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

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

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

@@ -1,13 +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'

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,65 +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
-}
-
-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/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,3 +0,0 @@
-export * from './APIResponseHandler'
-export * from './ReactSelect'
-export * from './BulkSelection'

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'

package/src/Shared/validations.tsx

@@ -1,130 +0,0 @@
-export interface ValidationResponseType {
-    isValid: boolean
-    message?: string
-}
-
-const MESSAGES = {
-    PROVIDE_A_NUMBER: 'Please provide a number',
-    LOWERCASE_ALPHANUMERIC: 'Only lowercase alphanumeric characters, -, _ or . allowed',
-    CAN_NOT_START_END_WITH_SEPARATORS: 'Cannot start/end with -, _ or .',
-    getMinMaxCharMessage: (min: number, max: number) => `Minimum ${min} and maximum ${max} characters allowed`,
-    getMaxCharMessage: (max: number) => `Maximum ${max} characters are allowed`,
-    VALID_POSITIVE_NUMBER: 'This field should be a valid positive number',
-    VALID_POSITIVE_INTEGER: 'This field should be a valid positive integer',
-    MAX_SAFE_INTEGER: `Maximum allowed value is ${Number.MAX_SAFE_INTEGER}`,
-}
-
-const MAX_DESCRIPTION_LENGTH = 300
-
-export const validateName = (name: string): ValidationResponseType => {
-    if (!/^.{3,50}$/.test(name)) {
-        return {
-            isValid: false,
-            message: MESSAGES.getMinMaxCharMessage(3, 50),
-        }
-    }
-
-    if (!/^[a-z0-9-._]+$/.test(name)) {
-        return {
-            isValid: false,
-            message: MESSAGES.LOWERCASE_ALPHANUMERIC,
-        }
-    }
-
-    if (!/^(?![-._]).*[^-._]$/.test(name)) {
-        return {
-            isValid: false,
-            message: MESSAGES.CAN_NOT_START_END_WITH_SEPARATORS,
-        }
-    }
-
-    return {
-        isValid: true,
-    }
-}
-
-export const validateDescription = (description: string): ValidationResponseType => {
-    if (description?.length > MAX_DESCRIPTION_LENGTH) {
-        return {
-            isValid: false,
-            message: MESSAGES.getMaxCharMessage(MAX_DESCRIPTION_LENGTH),
-        }
-    }
-
-    return {
-        isValid: true,
-    }
-}
-
-export const validateRequiredPositiveNumber = (value: string | number): ValidationResponseType => {
-    if (!value) {
-        return {
-            isValid: false,
-            message: MESSAGES.PROVIDE_A_NUMBER,
-        }
-    }
-
-    // TODO: Look if regex is available for this, since 0002 is not a valid number
-    if (!/^\d+(\.\d+)?$/.test(value.toString())) {
-        return {
-            isValid: false,
-            message: MESSAGES.VALID_POSITIVE_NUMBER,
-        }
-    }
-
-    const numericValue = Number(value)
-
-    if (numericValue > Number.MAX_SAFE_INTEGER) {
-        return {
-            isValid: false,
-            message: MESSAGES.MAX_SAFE_INTEGER,
-        }
-    }
-
-    if (numericValue <= 0) {
-        return {
-            isValid: false,
-            message: MESSAGES.VALID_POSITIVE_NUMBER,
-        }
-    }
-
-    return {
-        isValid: true,
-    }
-}
-
-export const validateRequiredPositiveInteger = (value: string | number): ValidationResponseType => {
-    if (!value) {
-        return {
-            isValid: false,
-            message: MESSAGES.PROVIDE_A_NUMBER,
-        }
-    }
-
-    if (!/^\d+$/.test(value.toString())) {
-        return {
-            isValid: false,
-            message: MESSAGES.VALID_POSITIVE_INTEGER,
-        }
-    }
-
-    const numericValue = Number(value)
-
-    if (numericValue > Number.MAX_SAFE_INTEGER) {
-        return {
-            isValid: false,
-            message: MESSAGES.MAX_SAFE_INTEGER,
-        }
-    }
-
-    if (numericValue <= 0) {
-        return {
-            isValid: false,
-            message: MESSAGES.VALID_POSITIVE_INTEGER,
-        }
-    }
-
-    return {
-        isValid: true,
-    }
-}

package/src/custom.d.ts

@@ -1,13 +0,0 @@
-declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}

package/src/index.ts

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

package/tsconfig.json

@@ -1,40 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "downlevelIteration": true,
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "checkJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "noImplicitAny": false,
-    "strictNullChecks": false,
-    "noFallthroughCasesInSwitch": true,
-    "declaration": true,
-  },
-  "exclude": [
-    "node_modules",
-    "**/*.spec.ts",
-    "**/*.spec.tsx",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "build"
-  ],
-  "include": [
-    "src",
-    "src/custom.d.ts"
-  ]
-}