feat: add support for local storage ilters in use url filters

Author: arunjaindev

package-lock.json

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

package.json

@@ -25,6 +25,7 @@ export interface UseUrlFiltersProps<T, K> {
      * Callback function for parsing the search params
      */
     parseSearchParams?: (searchParams: URLSearchParams) => K
+    localStorageKey?: string
 }
 
 export type UseUrlFiltersReturnType<T, K = unknown> = K & {

src/Common/Hooks/useUrlFilters/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { DEFAULT_BASE_PAGE_SIZE, EXCLUDED_FALSY_VALUES, SortingOrder } from '../../Constants'
 import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
@@ -42,6 +42,7 @@ const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_K
 const useUrlFilters = <T = string, K = unknown>({
     initialSortKey,
     parseSearchParams,
+    localStorageKey,
 }: UseUrlFiltersProps<T, K> = {}): UseUrlFiltersReturnType<T, K> => {
     const location = useLocation()
     const history = useHistory()
@@ -126,6 +127,7 @@ const useUrlFilters = <T = string, K = unknown>({
 
     const clearFilters = () => {
         history.replace({ search: '' })
+        localStorage.setItem(localStorageKey, '')
     }
 
     const updateSearchParams = (paramsToSerialize: Partial<K>) => {
@@ -143,10 +145,31 @@ const useUrlFilters = <T = string, K = unknown>({
                 searchParams.delete(key)
             }
         })
+        localStorage.setItem(localStorageKey, JSON.stringify(parseSearchParams(searchParams)))
         // Not replacing the params as it is being done by _resetPageNumber
         _resetPageNumber()
     }
 
+    useEffect(() => {
+        if (!localStorageKey) {
+            return
+        }
+        if (
+            Object.keys(parsedParams).some(
+                (key) =>
+                    (Array.isArray(parsedParams[key]) && parsedParams[key].length) ||
+                    (typeof parsedParams[key] === 'string' && !!parsedParams[key]),
+            )
+        ) {
+            localStorage.setItem(localStorageKey, JSON.stringify(parsedParams))
+        } else {
+            const localStorageValue = localStorage.getItem(localStorageKey)
+            if (localStorageValue) {
+                updateSearchParams(JSON.parse(localStorageValue))
+            }
+        }
+    }, [])
+
     return {
         pageSize,
         changePage,

src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -5,8 +5,10 @@
 import { useEffect, useMemo, useState } from 'react'
 import { ReactComponent as ICFilter } from '@Icons/ic-filter.svg'
 import { ReactComponent as ICFilterApplied } from '@Icons/ic-filter-applied.svg'
+import { ComponentSizeType } from '@Shared/constants'
 import SelectPicker from './SelectPicker.component'
 import { FilterSelectPickerProps, SelectPickerOptionType, SelectPickerProps } from './type'
+import { Button } from '../Button'
 
 const FilterSelectPicker = ({
     appliedFilterOptions,
@@ -58,14 +60,13 @@ const FilterSelectPicker = ({
 
         return (
             <div className="p-8 dc__border-top-n1">
-                <button
-                    type="button"
-                    className="dc__unset-button-styles w-100 br-4 h-28 flex bcb-5 cn-0 fw-6 lh-28 fs-12 h-28 br-4 pt-5 pr-12 pb-5 pl-12"
+                <Button
+                    text="Apply"
+                    dataTestId="filter-select-picker-apply"
                     onClick={handleApplyClick}
-                    aria-label="Apply filters"
-                >
-                    Apply
-                </button>
+                    size={ComponentSizeType.small}
+                    fullWidth
+                />
             </div>
         )
     }

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -266,6 +266,7 @@ export interface FilterSelectPickerProps
             | 'shouldMenuAlignRight'
             | 'optionListError'
             | 'reloadOptionList'
+            | 'isOptionDisabled'
         > {
     appliedFilterOptions: SelectPickerOptionType[]
     handleApplyFilter: (filtersToApply: SelectPickerOptionType<number | string>[]) => void