@devtron-labs/devtron-fe-common-lib 0.0.60-beta-2 → 0.0.60-beta-6

package/package.json

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

package/src/Common/Api.ts

@@ -1,7 +1,6 @@
 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',
@@ -229,23 +228,3 @@ 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.'

package/src/Common/Constants.ts

@@ -251,20 +251,4 @@ 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
+}

package/src/Common/Helper.tsx

@@ -499,18 +499,27 @@ export const getFilteredChartVersions = (charts, selectedChartType) => {
             chartRefId: item.chartRefId,
         }))
 }
-function removeEmptyObjectKeysAndNullValues(obj) {
-    // It recursively removes empty object keys and array values that are null
+
+function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
+    // It recursively removes empty object keys and empty array keys
     for (let key in obj) {
         if (Array.isArray(obj[key])) {
-            if (obj[key].length === 0) continue
-            obj[key] = obj[key].filter((item) => item !== null)
             // Check if the array is empty
-            if (obj[key].length === 0) {
-                delete obj[key] // Delete the key if the array is empty
+            if (obj[key].length !== 0) {
+                obj[key].forEach((element, index) => {
+                    if (element === null || (typeof element === 'object' && Object.keys(element).length === 0))
+                        obj[key].splice(index, 1)
+                    else removeEmptyObjectKeysAndNullValues(element, originaljsonCopy[key][index])
+                })
+            }
+            if (obj[key].length === 0 && originaljsonCopy[key].length !== 0) {
+                delete obj[key]
             }
         } else if (obj[key] && typeof obj[key] === 'object') {
-            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
+            if (
+                removeEmptyObjectKeysAndNullValues(obj[key], originaljsonCopy[key]) &&
+                Object.keys(originaljsonCopy[key]).length !== 0
+            ) {
                 delete obj[key]
             }
         } else if (obj[key] === undefined) {
@@ -520,20 +529,25 @@ function removeEmptyObjectKeysAndNullValues(obj) {
     return Object.keys(obj).length === 0
 }
 
-export function getUnlockedJSON(json, jsonPathArray) {
+export function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays = false) {
+    if (!jsonPathArray.length) return { newDocument: json, removedPatches: [] }
+    
     const jsonCopy = JSON.parse(JSON.stringify(json))
+    const originaljsonCopy = JSON.parse(JSON.stringify(json))
+    let removedPatches = []
     let patches = jsonPathArray.flatMap((jsonPath) => {
         const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        return pathsToRemove.map((result) =>
-            Array.isArray(result.parent)
-                ? { op: 'replace', path: result.pointer, value: null }
-                : { op: 'remove', path: result.pointer },
-        )
+        //reversing patches to handle correct array index deletion
+        pathsToRemove.reverse()
+        return pathsToRemove.map((result) => {
+            //storing removed patches to have functionality of undo
+            removedPatches.push({ op: 'add', path: result.pointer, value: result.value })
+            return { op: 'remove', path: result.pointer }
+        })
     })
     let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
-
-    removeEmptyObjectKeysAndNullValues(newDocument)
-    return newDocument
+    if (removeParentKeysAndEmptyArrays) removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy)
+    return { newDocument, removedPatches: removedPatches.reverse() }
 }
 
 export function getLockedJSON(json, jsonPathArray: string[]) {

package/src/Common/Hooks/index.ts

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

package/src/Common/SearchBar/SearchBar.component.tsx

@@ -47,6 +47,7 @@ const SearchBar = ({
     containerClassName,
     shouldDebounce = false,
     debounceTimeout = 300,
+    handleOnBlur,
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -111,6 +112,7 @@ const SearchBar = ({
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     ref={inputRef}
+                    onBlur={handleOnBlur}
                 />
                 {/* TODO: Sync with product since it should have ic-enter in case of not applied */}
                 {showClearButton && (

package/src/Common/SearchBar/types.ts

@@ -31,4 +31,8 @@ export interface SearchBarProps {
      * Timeout for the debounce handler to be triggered
      */
     debounceTimeout?: number
+    /**
+     * handleOnBlur for the search input
+     */
+    handleOnBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
 }

package/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, SortingOrder, TaskErrorObj } from '.'
+import { DockerConfigOverrideType, TaskErrorObj } from '.'
 
 /**
  * Generic response type object with support for overriding the result type
@@ -51,13 +51,11 @@ export interface Teams {
 export enum CHECKBOX_VALUE {
     CHECKED = 'CHECKED',
     INTERMEDIATE = 'INTERMEDIATE',
-    BULK_CHECKED = 'BULK_CHECKED',
 }
 export interface CheckboxProps {
     onChange: (event) => void
     isChecked: boolean
-    // FIXME: Need to replace this CHECKBOX_VALUE enum, and replace string instances in dashboard
-    value: 'CHECKED' | 'INTERMEDIATE' | 'BULK_CHECKED'
+    value: 'CHECKED' | 'INTERMEDIATE'
     disabled?: boolean
     tabIndex?: number
     rootClassName?: string
@@ -764,15 +762,3 @@ 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 }

package/src/Common/index.ts

@@ -27,7 +27,6 @@ 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'

package/src/index.ts

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

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/dist/Pages/GlobalConfigurations/index.d.ts

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

package/dist/Pages/index.d.ts

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

package/dist/Shared/Components/BulkSelection/BulkSelection.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { BulkSelectionProps } from './types';
-declare const BulkSelection: <T>({ showPagination }: BulkSelectionProps) => JSX.Element;
-export default BulkSelection;

package/dist/Shared/Components/BulkSelection/BulkSelectionDropdownItems.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { BulkSelectionDropdownItemsProps } from './types';
-declare const BulkSelectionDropdownItems: <T>({ locator, label, isSelected, handleBulkSelection, icon: Icon, }: BulkSelectionDropdownItemsProps<T>) => JSX.Element;
-export default BulkSelectionDropdownItems;

package/dist/Shared/Components/BulkSelection/BulkSelectionProvider.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { UseBulkSelectionProps, UseBulkSelectionReturnType } from './types';
-export declare const useBulkSelection: <T>() => UseBulkSelectionReturnType<T>;
-export declare const BulkSelectionProvider: <T>({ children, identifiers, getSelectAllDialogStatus, }: UseBulkSelectionProps<T>) => JSX.Element;

package/dist/Shared/Components/BulkSelection/constants.d.ts

@@ -1,9 +0,0 @@
-export declare const BULK_DROPDOWN_TEST_ID: "bulk-selection-pop-up-menu";
-export declare const BulkSelectionOptionsLabels: {
-    readonly SELECT_ALL_ON_PAGE: "All on this page";
-    readonly SELECT_ALL_ACROSS_PAGES: "All across pages";
-    readonly CLEAR_ALL_SELECTIONS: "Clear selection";
-};
-export declare const SELECT_ALL_ACROSS_PAGES_LOCATOR: "*";
-export declare const getInvalidActionMessage: (action: string) => string;
-export declare const BULK_SELECTION_CONTEXT_ERROR = "useBulkSelection must be used within BulkSelectionContext";

package/dist/Shared/Components/BulkSelection/index.d.ts

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

package/dist/Shared/Components/BulkSelection/types.d.ts

@@ -1,54 +0,0 @@
-/// <reference types="react" />
-import { CHECKBOX_VALUE } from '../../../Common';
-export declare 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 declare enum SelectAllDialogStatus {
-    OPEN = "OPEN",
-    CLOSED = "CLOSED"
-}
-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/dist/Shared/Components/index.d.ts

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

package/dist/Shared/index.d.ts

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

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-check-all.svg

@@ -1,5 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="2" width="11.2" height="11.2" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.4667 5.86621V11.4662C15.4667 13.6754 13.6758 15.4662 11.4667 15.4662H5.8667" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.35 5.84961L6.85004 9.34945L5.10004 7.59961" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Assets/Icon/ic-check-square.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="2" width="12" height="12" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.2083 5.95801L7.12498 10.0412L5.08331 7.99967" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Assets/Icon/ic-close.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
-    <defs>
-        <path id="a" class="stroke-color" d="M18.295 5.705a.997.997 0 0 0-1.41 0L12 10.59 7.115 5.705a.997.997 0 1 0-1.41 1.41L10.59 12l-4.885 4.885a.997.997 0 1 0 1.41 1.41L12 13.41l4.885 4.885a.997.997 0 0 0 1.41-1.41L13.41 12l4.885-4.885a.997.997 0 0 0 0-1.41z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <path d=""/>
-        <use fill="#999" xlink:href="#a"/>
-    </g>
-</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