@devtron-labs/devtron-fe-common-lib 0.0.61-beta-4 → 0.0.61-beta-5

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

@@ -16,8 +16,6 @@ const BulkSelectionContext = createContext<UseBulkSelectionReturnType<any>>({
     handleBulkSelection: noop,
     isChecked: false,
     checkboxValue: CHECKBOX_VALUE.CHECKED,
-    isBulkSelectionApplied: false,
-    getSelectedIdentifiersCount: noop,
 })
 
 export const useBulkSelection = <T,>() => {
@@ -35,10 +33,6 @@ 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) => {
@@ -50,7 +44,7 @@ export const BulkSelectionProvider = <T,>({
     const setIdentifiersAfterPageSelection = (baseObject: T) => {
         const _selectedIdentifiers = JSON.parse(JSON.stringify(selectedIdentifiers))
         // removing bulk selection across pages if present
-        if (isBulkSelectionApplied) {
+        if (_selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
             delete _selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
         }
 
@@ -80,13 +74,10 @@ export const BulkSelectionProvider = <T,>({
             }
 
             case BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES: {
-                if (isBulkSelectionApplied) {
+                if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
                     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
+                const selectedIdentifiersLength = Object.keys(selectedIdentifiers).length
                 if (selectedIdentifiersLength > 0 && getSelectAllDialogStatus() === SelectAllDialogStatus.OPEN) {
                     return
                 }
@@ -128,7 +119,7 @@ export const BulkSelectionProvider = <T,>({
         }
 
         // if selectedIdentifiers contains select all across pages locator then it means all are selected
-        if (isBulkSelectionApplied) {
+        if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
             return {
                 isChecked: true,
                 checkboxValue: CHECKBOX_VALUE.BULK_CHECKED,
@@ -161,10 +152,8 @@ export const BulkSelectionProvider = <T,>({
             handleBulkSelection,
             isChecked,
             checkboxValue,
-            isBulkSelectionApplied,
-            getSelectedIdentifiersCount,
         }),
-        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount],
+        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue],
     )
 
     return <BulkSelectionContext.Provider value={value}>{children}</BulkSelectionContext.Provider>

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

@@ -26,8 +26,6 @@ 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/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

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

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

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

package/src/Shared/validations.tsx

@@ -0,0 +1,130 @@
+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/dist/Common/Hooks/useUrlFilters/constants.d.ts

@@ -1,8 +0,0 @@
-export declare const DEFAULT_PAGE_NUMBER = 1;
-export declare const URL_FILTER_KEYS: {
-    readonly PAGE_SIZE: "pageSize";
-    readonly PAGE_NUMBER: "pageNumber";
-    readonly SEARCH_KEY: "searchKey";
-    readonly SORT_BY: "sortBy";
-    readonly SORT_ORDER: "sortOrder";
-};

package/dist/Common/Hooks/useUrlFilters/index.d.ts

@@ -1,2 +0,0 @@
-export { default as useUrlFilters } from './useUrlFilters';
-export type { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types';

package/dist/Common/Hooks/useUrlFilters/types.d.ts

@@ -1,19 +0,0 @@
-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/dist/Common/Hooks/useUrlFilters/useUrlFilters.d.ts

@@ -1,20 +0,0 @@
-import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types';
-/**
- * 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' })
- * ```
- *
- */
-declare const useUrlFilters: <T = string>({ initialSortKey }?: UseUrlFiltersProps<T>) => UseUrlFiltersReturnType<T>;
-export default useUrlFilters;

package/dist/Common/SortableTableHeaderCell/SortableTableHeaderCell.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-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}
- * />
- * ```
- */
-declare const SortableTableHeaderCell: ({ isSorted, triggerSorting, sortOrder, title, disabled, }: SortableTableHeaderCellProps) => JSX.Element;
-export default SortableTableHeaderCell;

package/dist/Common/SortableTableHeaderCell/index.d.ts

@@ -1,2 +0,0 @@
-export { default as SortableTableHeaderCell } from './SortableTableHeaderCell';
-export type { SortableTableHeaderCellProps } from './types';

package/dist/Common/SortableTableHeaderCell/types.d.ts

@@ -1,25 +0,0 @@
-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/dist/Pages/GlobalConfigurations/Authorization/constants.d.ts

@@ -1,15 +0,0 @@
-/**
- * User Status received from the API
- */
-export declare enum UserStatusDto {
-    active = "active",
-    inactive = "inactive"
-}
-/**
- * User status for the frontend
- */
-export declare enum UserStatus {
-    active = "active",
-    inactive = "inactive",
-    temporary = "temporary"
-}

package/dist/Pages/GlobalConfigurations/Authorization/index.d.ts

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

package/src/Assets/Icon/ic-arrow-up-down.svg

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

@@ -1,3 +0,0 @@
-<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/Hooks/useUrlFilters/constants.ts

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

@@ -1,2 +0,0 @@
-export { default as useUrlFilters } from './useUrlFilters'
-export type { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'

package/src/Common/Hooks/useUrlFilters/types.ts

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

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