diff --git a/package-lock.json b/package-lock.json index 95bd7f1a2..4995bef46 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4", + "version": "0.6.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4", + "version": "0.6.5", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index e6f238dfb..8b3b3cf5e 100644 --- a/package.json +++ b/package.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", diff --git a/src/Common/Hooks/useUrlFilters/types.ts b/src/Common/Hooks/useUrlFilters/types.ts index 335828637..5dc12d8c8 100644 --- a/src/Common/Hooks/useUrlFilters/types.ts +++ b/src/Common/Hooks/useUrlFilters/types.ts @@ -25,6 +25,7 @@ export interface UseUrlFiltersProps { * Callback function for parsing the search params */ parseSearchParams?: (searchParams: URLSearchParams) => K + localStorageKey?: `${string}__${string}` } export type UseUrlFiltersReturnType = K & { diff --git a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts index ea00146a3..6abb0a39e 100644 --- a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts +++ b/src/Common/Hooks/useUrlFilters/useUrlFilters.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 = ({ initialSortKey, parseSearchParams, + localStorageKey, }: UseUrlFiltersProps = {}): UseUrlFiltersReturnType => { const location = useLocation() const history = useHistory() const searchParams = new URLSearchParams(location.search) + const getParsedSearchParams: UseUrlFiltersProps['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 = ({ // 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 = ({ const clearFilters = () => { history.replace({ search: '' }) + setItemInLocalStorageIfKeyExists(localStorageKey, '') } const updateSearchParams = (paramsToSerialize: Partial) => { @@ -143,10 +154,24 @@ const useUrlFilters = ({ 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, diff --git a/src/Common/Hooks/useUrlFilters/utils.tsx b/src/Common/Hooks/useUrlFilters/utils.tsx new file mode 100644 index 000000000..e587cb113 --- /dev/null +++ b/src/Common/Hooks/useUrlFilters/utils.tsx @@ -0,0 +1,5 @@ +export const setItemInLocalStorageIfKeyExists = (localStorageKey: string, value: string) => { + if (localStorageKey) { + localStorage.setItem(localStorageKey, value) + } +} diff --git a/src/Shared/Components/CICDHistory/History.components.tsx b/src/Shared/Components/CICDHistory/History.components.tsx index 5fa8b4e81..282be6114 100644 --- a/src/Shared/Components/CICDHistory/History.components.tsx +++ b/src/Shared/Components/CICDHistory/History.components.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, diff --git a/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx b/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx index b3c0be39b..314c97492 100644 --- a/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx +++ b/src/Shared/Components/SelectPicker/FilterSelectPicker.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 (
- + size={ComponentSizeType.small} + fullWidth + />
) } diff --git a/src/Shared/Components/SelectPicker/type.ts b/src/Shared/Components/SelectPicker/type.ts index 38eef3603..8506813c3 100644 --- a/src/Shared/Components/SelectPicker/type.ts +++ b/src/Shared/Components/SelectPicker/type.ts @@ -266,6 +266,7 @@ export interface FilterSelectPickerProps | 'shouldMenuAlignRight' | 'optionListError' | 'reloadOptionList' + | 'isOptionDisabled' > { appliedFilterOptions: SelectPickerOptionType[] handleApplyFilter: (filtersToApply: SelectPickerOptionType[]) => void