@devtron-labs/devtron-fe-common-lib 0.0.59-beta-11 → 0.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.59-beta-11",
+    "version": "0.0.59",
     "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/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

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent, useEffect } from 'react'
+import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } from 'react'
 import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
 import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
 import { SearchBarProps } from './types'
@@ -55,28 +55,9 @@ const SearchBar = ({
         debounceTimeout,
     ])
 
-    // assuming initialSearchText will change if we are changing history otherwise will be constant and will not change
-    // since on changing history we expect to make api call using useAsync so not applying handleEnter
-    useEffect(() => {
-        inputRef.current.value = initialSearchText
-        setShowClearButton(!!initialSearchText)
-    }, [initialSearchText])
-
-    const _applySearch = (value: string) => {
-        handleSearchChange(value)
-        handleEnter(value)
-    }
-
-    const clearSearch = () => {
-        inputRef.current.value = ''
-        _applySearch('')
-        setShowClearButton(false)
-    }
-
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
         const { value } = e.target
         setShowClearButton(!!value)
-
         if (shouldDebounce) {
             debouncedSearchChange(value)
         } else {
@@ -84,17 +65,25 @@ const SearchBar = ({
         }
     }
 
+    const _applySearch = (value: string) => {
+        handleSearchChange(value)
+        handleEnter(value)
+    }
+
     const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
         const { key } = e
 
         if (key === 'Enter') {
-            e.preventDefault()
             const inputTarget = e.target as HTMLInputElement
             const value = inputTarget.value.trim()
             _applySearch(value)
         }
     }
 
+    const clearSearch = () => {
+        inputRef.current.value = ''
+        _applySearch('')
+    }
     return (
         <div className={containerClassName}>
             <div className="search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
@@ -105,14 +94,13 @@ const SearchBar = ({
                     type="text"
                     {...inputProps}
                     defaultValue={initialSearchText}
-                    className={`search-bar__input bc-n50 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
+                    className={`search-bar__input dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
                         showClearButton ? 'pr-30' : 'pr-10'
                     }`}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     ref={inputRef}
                 />
-                {/* TODO: Sync with product since it should have ic-enter in case of not applied */}
                 {showClearButton && (
                     <button
                         className="flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5"

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 } from './types';

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

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

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

@@ -1,32 +0,0 @@
-import { SortingOrder } from '../../Constants';
-import { UseUrlFiltersProps } 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>) => {
-    pageSize: number;
-    changePage: (page: number) => void;
-    changePageSize: (_pageSize: number) => void;
-    searchKey: string;
-    handleSearch: (searchTerm: string) => void;
-    offset: number;
-    sortBy: T;
-    sortOrder: SortingOrder;
-    handleSorting: (_sortBy: T) => void;
-    clearFilters: () => void;
-};
-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>({ checkboxValue, isChecked, selectedIdentifiers, handleBulkSelection, showPagination, }: BulkSelectionProps<T>) => 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/UseBulkSelection.d.ts

@@ -1,3 +0,0 @@
-import { UseBulkSelectionProps, UseBulkSelectionReturnType } from './types';
-declare const useBulkSelection: <T>({ identifiers, getSelectAllDialogStatus, }: UseBulkSelectionProps<T>) => UseBulkSelectionReturnType<T>;
-export default useBulkSelection;

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

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

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

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

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

@@ -1,51 +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 UseBulkSelectionReturnType<T> {
-    selectedIdentifiers: T;
-    handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void;
-}
-export interface BulkSelectionProps<T> extends UseBulkSelectionReturnType<T> {
-    checkboxValue: CHECKBOX_VALUE;
-    isChecked: boolean;
-    showPagination: boolean;
-}
-export interface BulkSelectionDropdownItemsType {
-    locator: BulkSelectionEvents;
-    label: string;
-    isSelected: boolean;
-    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-}
-export interface BulkSelectionDropdownItemsProps<T> extends BulkSelectionDropdownItemsType, Pick<BulkSelectionProps<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;
-}

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,3 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.33335 1.66699L1.66669 8.33366M8.33335 8.33366L1.66669 1.66699" stroke="#596168" 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 } from './types'

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

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

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 } 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)
-        _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

package/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

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

package/src/Common/SortableTableHeaderCell/index.ts

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