@devtron-labs/devtron-fe-common-lib 0.0.62-beta-1 → 0.0.62-beta-3

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

@@ -1,11 +1,15 @@
 import { SortingOrder } from '../../Constants';
-export interface UseUrlFiltersProps<T> {
+export interface UseUrlFiltersProps<T, K> {
     /**
      * The key on which the sorting should be applied
      */
     initialSortKey?: T;
+    /**
+     * Callback function for parsing the search params
+     */
+    parseSearchParams?: (searchParams: URLSearchParams) => K;
 }
-export interface UseUrlFiltersReturnType<T> {
+export type UseUrlFiltersReturnType<T, K = unknown> = K & {
     pageSize: number;
     changePage: (pageNumber: number) => void;
     changePageSize: (pageSize: number) => void;
@@ -16,4 +20,5 @@ export interface UseUrlFiltersReturnType<T> {
     sortOrder: SortingOrder;
     handleSorting: (sortBy: T) => void;
     clearFilters: () => void;
-}
+    updateSearchParams: (paramsToSerialize: K) => void;
+};

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

@@ -16,5 +16,5 @@ import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types';
  * ```
  *
  */
-declare const useUrlFilters: <T = string>({ initialSortKey }?: UseUrlFiltersProps<T>) => UseUrlFiltersReturnType<T>;
+declare const useUrlFilters: <T = string, K = unknown>({ initialSortKey, parseSearchParams, }?: UseUrlFiltersProps<T, K>) => UseUrlFiltersReturnType<T, K>;
 export default useUrlFilters;

package/dist/index.js

@@ -11808,7 +11808,6 @@ var processDeployedTime = function (lastDeployed, isArgoInstalled) {
  */
 var getUrlWithSearchParams = function (url, params) {
     var searchParams = new URLSearchParams();
-    // TODO: Common out
     Object.keys(params).forEach(function (key) {
         if (params[key]) {
             if (Array.isArray(params[key])) {
@@ -25692,7 +25691,7 @@ var PAGE_SIZE = URL_FILTER_KEYS.PAGE_SIZE, PAGE_NUMBER = URL_FILTER_KEYS.PAGE_NU
  *
  */
 var useUrlFilters = function (_a) {
-    var _b = _a === void 0 ? {} : _a, initialSortKey = _b.initialSortKey;
+    var _b = _a === void 0 ? {} : _a, initialSortKey = _b.initialSortKey, parseSearchParams = _b.parseSearchParams;
     var location = reactRouterDom.useLocation();
     var history = reactRouterDom.useHistory();
     var searchParams = new URLSearchParams(location.search);
@@ -25705,6 +25704,7 @@ var useUrlFilters = function (_a) {
         var sortByKey = (_sortBy || initialSortKey || '');
         // Fallback to ascending order
         var sortByOrder = Object.values(exports.SortingOrder).includes(_sortOrder) ? _sortOrder : exports.SortingOrder.ASC;
+        var _parsedParams = parseSearchParams ? parseSearchParams(searchParams) : {};
         return {
             pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
             pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER,
@@ -25712,8 +25712,9 @@ var useUrlFilters = function (_a) {
             sortBy: sortByKey,
             // sort order should only be applied if the key is available
             sortOrder: (sortByKey ? sortByOrder : ''),
+            parsedParams: _parsedParams,
         };
-    }, [searchParams]), pageSize = _c.pageSize, pageNumber = _c.pageNumber, searchKey = _c.searchKey, sortBy = _c.sortBy, sortOrder = _c.sortOrder;
+    }, [searchParams]), pageSize = _c.pageSize, pageNumber = _c.pageNumber, searchKey = _c.searchKey, sortBy = _c.sortBy, sortOrder = _c.sortOrder, parsedParams = _c.parsedParams;
     /**
      * Used for getting the required result from the API
      */
@@ -25755,23 +25756,26 @@ var useUrlFilters = function (_a) {
         _resetPageNumber();
     };
     var clearFilters = function () {
-        Object.values(URL_FILTER_KEYS).forEach(function (key) {
-            searchParams.delete(key);
-        });
-        history.replace({ search: searchParams.toString() });
+        history.replace({ search: '' });
     };
-    return {
-        pageSize: pageSize,
-        changePage: changePage,
-        changePageSize: changePageSize,
-        searchKey: searchKey,
-        handleSearch: handleSearch,
-        offset: offset,
-        sortBy: sortBy,
-        sortOrder: sortOrder,
-        handleSorting: handleSorting,
-        clearFilters: clearFilters,
+    var updateSearchParams = function (paramsToSerialize) {
+        Object.keys(paramsToSerialize).forEach(function (key) {
+            if (paramsToSerialize[key]) {
+                if (Array.isArray(paramsToSerialize[key])) {
+                    searchParams.delete(key);
+                    paramsToSerialize[key].forEach(function (val) {
+                        searchParams.append(key, val);
+                    });
+                }
+                else {
+                    searchParams.set(key, paramsToSerialize[key]);
+                }
+            }
+        });
+        // Not replacing the params as it is being done by _resetPageNumber
+        _resetPageNumber();
     };
+    return __assign(__assign({ pageSize: pageSize, changePage: changePage, changePageSize: changePageSize, searchKey: searchKey, handleSearch: handleSearch, offset: offset, sortBy: sortBy, sortOrder: sortOrder, handleSorting: handleSorting, clearFilters: clearFilters }, parsedParams), { updateSearchParams: updateSearchParams });
 };
 
 var StatusConstants = {

package/package.json

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

package/src/Common/Helper.tsx

@@ -447,7 +447,6 @@ export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
  */
 export const getUrlWithSearchParams = (url: string, params: Record<string | number, any>) => {
     const searchParams = new URLSearchParams()
-    // TODO: Common out
     Object.keys(params).forEach((key) => {
         if (params[key]) {
             if (Array.isArray(params[key])) {

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

@@ -1,13 +1,17 @@
 import { SortingOrder } from '../../Constants'
 
-export interface UseUrlFiltersProps<T> {
+export interface UseUrlFiltersProps<T, K> {
     /**
      * The key on which the sorting should be applied
      */
     initialSortKey?: T
+    /**
+     * Callback function for parsing the search params
+     */
+    parseSearchParams?: (searchParams: URLSearchParams) => K
 }
 
-export interface UseUrlFiltersReturnType<T> {
+export type UseUrlFiltersReturnType<T, K = unknown> = K & {
     pageSize: number
     changePage: (pageNumber: number) => void
     changePageSize: (pageSize: number) => void
@@ -18,4 +22,5 @@ export interface UseUrlFiltersReturnType<T> {
     sortOrder: SortingOrder
     handleSorting: (sortBy: T) => void
     clearFilters: () => void
+    updateSearchParams: (paramsToSerialize: K) => void
 }

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

@@ -23,12 +23,15 @@ const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_K
  * ```
  *
  */
-const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {}): UseUrlFiltersReturnType<T> => {
+const useUrlFilters = <T = string, K = unknown>({
+    initialSortKey,
+    parseSearchParams,
+}: UseUrlFiltersProps<T, K> = {}): UseUrlFiltersReturnType<T, K> => {
     const location = useLocation()
     const history = useHistory()
     const searchParams = new URLSearchParams(location.search)
 
-    const { pageSize, pageNumber, searchKey, sortBy, sortOrder } = useMemo(() => {
+    const { pageSize, pageNumber, searchKey, sortBy, sortOrder, parsedParams } = useMemo(() => {
         const _pageSize = searchParams.get(PAGE_SIZE)
         const _pageNumber = searchParams.get(PAGE_NUMBER)
         const _searchKey = searchParams.get(SEARCH_KEY)
@@ -39,6 +42,8 @@ const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {
         // Fallback to ascending order
         const sortByOrder = Object.values(SortingOrder).includes(_sortOrder) ? _sortOrder : SortingOrder.ASC
 
+        const _parsedParams = parseSearchParams ? parseSearchParams(searchParams) : ({} as K)
+
         return {
             pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
             pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER,
@@ -46,6 +51,7 @@ const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {
             sortBy: sortByKey,
             // sort order should only be applied if the key is available
             sortOrder: (sortByKey ? sortByOrder : '') as SortingOrder,
+            parsedParams: _parsedParams,
         }
     }, [searchParams])
 
@@ -98,10 +104,24 @@ const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {
     }
 
     const clearFilters = () => {
-        Object.values(URL_FILTER_KEYS).forEach((key) => {
-            searchParams.delete(key)
+        history.replace({ search: '' })
+    }
+
+    const updateSearchParams = (paramsToSerialize: K) => {
+        Object.keys(paramsToSerialize).forEach((key) => {
+            if (paramsToSerialize[key]) {
+                if (Array.isArray(paramsToSerialize[key])) {
+                    searchParams.delete(key)
+                    paramsToSerialize[key].forEach((val) => {
+                        searchParams.append(key, val)
+                    })
+                } else {
+                    searchParams.set(key, paramsToSerialize[key])
+                }
+            }
         })
-        history.replace({ search: searchParams.toString() })
+        // Not replacing the params as it is being done by _resetPageNumber
+        _resetPageNumber()
     }
 
     return {
@@ -115,6 +135,8 @@ const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {
         sortOrder,
         handleSorting,
         clearFilters,
+        ...parsedParams,
+        updateSearchParams,
     }
 }