feat: add hook for url filters and few common constants

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.58",
+    "version": "0.0.58-beta-9",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

src/Common/Api.ts

@@ -1,6 +1,7 @@
 import { ServerErrors } from './ServerError'
 import { FALLBACK_REQUEST_TIMEOUT, Host, URLS } from './Constants'
 import { ResponseType, APIOptions } from './Types'
+import { MutableRefObject } from 'react'
 
 const responseMessages = {
     100: 'Continue',
@@ -228,3 +229,23 @@ export const get = (url: string, options?: APIOptions): Promise<ResponseType> =>
 export const trash = (url: string, data?: object, options?: APIOptions): Promise<ResponseType> => {
     return fetchInTime(url, 'DELETE', data, options)
 }
+
+/**
+ * Aborts the previous request before triggering next request
+ */
+export const abortPreviousRequests = <T,>(
+    callback: () => Promise<T>,
+    abortControllerRef: MutableRefObject<AbortController>,
+): Promise<T> => {
+    abortControllerRef.current.abort()
+    // eslint-disable-next-line no-param-reassign
+    abortControllerRef.current = new AbortController()
+    return callback()
+}
+
+/**
+ * Returns true if the error is due to a aborted request
+ */
+export const getIsRequestAborted = (error) =>
+    // The 0 code is common for aborted and blocked requests
+    error && error.code === 0 && error.message === 'The user aborted a request.'

src/Common/Constants.ts

@@ -251,4 +251,20 @@ export const MAX_Z_INDEX = 2147483647
 export const SELECTED_APPROVAL_TAB_STATE = {
     APPROVAL: 'approval',
     PENDING: 'pending',
-}
+}
+
+export enum SortingOrder {
+    /**
+     * Ascending order
+     */
+    ASC = 'ASC',
+    /**
+     * Descending order
+     */
+    DESC = 'DESC',
+}
+
+/**
+ * Base page size for pagination
+ */
+export const DEFAULT_BASE_PAGE_SIZE = 20

src/Common/Hooks/index.ts

@@ -1,3 +1,4 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin'
 export { useClickOutside } from './UseClickOutside/UseClickOutside'
 export { useWindowSize } from './UseWindowSize/UseWindowSize'
+export * from './useUrlFilters'

src/Common/Hooks/useUrlFilters/constants.ts

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

src/Common/Hooks/useUrlFilters/index.ts

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

src/Common/Hooks/useUrlFilters/types.ts

@@ -0,0 +1,6 @@
+export interface UseUrlFiltersProps<T> {
+    /**
+     * The key on which the sorting should be applied
+     */
+    initialSortKey?: T
+}

src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -0,0 +1,120 @@
+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 } 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> = {}) => {
+    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)
+    }
+
+    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

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -0,0 +1,44 @@
+import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg'
+import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg'
+import { SortingOrder } from '../Constants'
+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}
+ * />
+ * ```
+ */
+const SortableTableHeaderCell = ({
+    isSorted,
+    triggerSorting,
+    sortOrder,
+    title,
+    disabled,
+}: SortableTableHeaderCellProps) => (
+    <button
+        type="button"
+        className="dc__transparent p-0 bcn-0 cn-7 flex dc__content-start dc__gap-4 cursor"
+        onClick={triggerSorting}
+        disabled={disabled}
+    >
+        <span className="dc__uppercase dc__ellipsis-right">{title}</span>
+        {isSorted ? (
+            <SortArrowDown
+                className={`icon-dim-12 mw-12 scn-7 ${sortOrder === SortingOrder.DESC ? 'dc__flip-180' : ''}`}
+            />
+        ) : (
+            <SortIcon className="icon-dim-12 mw-12 scn-7" />
+        )}
+    </button>
+)
+
+export default SortableTableHeaderCell

src/Common/SortableTableHeaderCell/index.ts

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

src/Common/SortableTableHeaderCell/types.ts

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

src/Common/Types.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode, CSSProperties } from 'react'
 import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
-import { DockerConfigOverrideType, TaskErrorObj } from '.'
+import { DockerConfigOverrideType, SortingOrder, TaskErrorObj } from '.'
 
 /**
  * Generic response type object with support for overriding the result type
@@ -762,3 +762,15 @@ export interface EdgeNodeType {
 export interface EdgeEndNodeType extends EdgeNodeType {
     userApprovalConfig?: UserApprovalConfigType
 }
+
+/**
+ * Search params for sorting configuration
+ * 
+ * Note: Either both sortOrder and sortBy are required or none
+ */
+export type SortingParams<T = string> =
+    | {
+          sortOrder: SortingOrder
+          sortBy: T
+      }
+    | { sortOrder?: never; sortBy?: never }

src/Common/index.ts

@@ -27,6 +27,7 @@ export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
 export * from './SearchBar'
+export * from './SortableTableHeaderCell'
 export { default as Toggle } from './Toggle/Toggle'
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'