Merge pull request #385 from devtron-labs/chore/sync-persist-filters

chore: sync persist filters

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.6.4",
+    "version": "0.6.5",
     "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}__${string}`
 }
 
 export type UseUrlFiltersReturnType<T, K = unknown> = K & {

src/Common/Hooks/useUrlFilters/types.ts

@@ -14,11 +14,12 @@
  * 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'
 import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
+import { setItemInLocalStorageIfKeyExists } from './utils'
 
 const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
 
@@ -42,11 +43,20 @@ 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()
     const searchParams = new URLSearchParams(location.search)
 
+    const getParsedSearchParams: UseUrlFiltersProps<T, K>['parseSearchParams'] = (searchParamsToParse) => {
+        if (parseSearchParams) {
+            return parseSearchParams(searchParamsToParse)
+        }
+
+        return {} as K
+    }
+
     const { pageSize, pageNumber, searchKey, sortBy, sortOrder, parsedParams } = useMemo(() => {
         const _pageSize = searchParams.get(PAGE_SIZE)
         const _pageNumber = searchParams.get(PAGE_NUMBER)
@@ -58,7 +68,7 @@ const useUrlFilters = <T = string, K = unknown>({
         // Fallback to ascending order
         const sortByOrder = Object.values(SortingOrder).includes(_sortOrder) ? _sortOrder : SortingOrder.ASC
 
-        const _parsedParams = parseSearchParams ? parseSearchParams(searchParams) : ({} as K)
+        const _parsedParams = getParsedSearchParams(searchParams)
 
         return {
             pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
@@ -126,6 +136,7 @@ const useUrlFilters = <T = string, K = unknown>({
 
     const clearFilters = () => {
         history.replace({ search: '' })
+        setItemInLocalStorageIfKeyExists(localStorageKey, '')
     }
 
     const updateSearchParams = (paramsToSerialize: Partial<K>) => {
@@ -143,10 +154,24 @@ const useUrlFilters = <T = string, K = unknown>({
                 searchParams.delete(key)
             }
         })
+        // Skipping primary params => pageSize, pageNumber, searchKey, sortBy, sortOrder
+        setItemInLocalStorageIfKeyExists(localStorageKey, JSON.stringify(getParsedSearchParams(searchParams)))
         // Not replacing the params as it is being done by _resetPageNumber
         _resetPageNumber()
     }
 
+    useEffect(() => {
+        // if we have search string, set secondary params in local storage accordingly
+        if (location.search) {
+            localStorage.setItem(localStorageKey, JSON.stringify(parsedParams))
+            return
+        }
+        const localStorageValue = localStorage.getItem(localStorageKey)
+        if (localStorageValue) {
+            updateSearchParams(JSON.parse(localStorageValue))
+        }
+    }, [])
+
     return {
         pageSize,
         changePage,

src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -0,0 +1,5 @@
+export const setItemInLocalStorageIfKeyExists = (localStorageKey: string, value: string) => {
+    if (localStorageKey) {
+        localStorage.setItem(localStorageKey, value)
+    }
+}

src/Common/Hooks/useUrlFilters/utils.tsx

@@ -34,7 +34,7 @@ import { ReactComponent as ZoomOut } from '../../../Assets/Icon/ic-exit-fullscre
 import './cicdHistory.scss'
 
 export const LogResizeButton = ({
-    shortcutCombo = ['F'],
+    shortcutCombo = ['Shift', 'F'],
     showOnlyWhenPathIncludesLogs = true,
     fullScreenView,
     setFullScreenView,

src/Shared/Components/CICDHistory/History.components.tsx

@@ -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