@devtron-labs/devtron-fe-common-lib 0.0.62-beta-4 → 0.0.62-beta-5

package/dist/Common/DraggableWrapper/types.d.ts

@@ -5,7 +5,10 @@ export declare enum DraggablePositionVariant {
 }
 export interface DraggableWrapperProps {
     children: ReactNode;
-    zIndex?: number;
+    /**
+     * Support for passing the direct value or calc functions as well
+     */
+    zIndex?: number | string;
     positionVariant?: DraggablePositionVariant;
     /**
      * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag

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

@@ -1,2 +1,2 @@
 export { default as useUrlFilters } from './useUrlFilters';
-export type { UseUrlFiltersProps } from './types';
+export type { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types';

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

@@ -1,6 +1,59 @@
-export interface UseUrlFiltersProps<T> {
+import { SortingOrder } from '../../Constants';
+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 type UseUrlFiltersReturnType<T, K = unknown> = K & {
+    /**
+     * Currently applied page size
+     */
+    pageSize: number;
+    /**
+     * Handler for updating the current page
+     */
+    changePage: (pageNumber: number) => void;
+    /**
+     * Handler for updating the current page size
+     */
+    changePageSize: (pageSize: number) => void;
+    /**
+     * Current search key
+     */
+    searchKey: string;
+    /**
+     * Handler for updating the search
+     */
+    handleSearch: (searchKey: string) => void;
+    /**
+     * Computed offset using the pageSize and pageNumber
+     *
+     * Note: Used in pagination component
+     */
+    offset: number;
+    /**
+     * Key on which the sorting is applied
+     */
+    sortBy: T;
+    /**
+     * Current sort order
+     */
+    sortOrder: SortingOrder;
+    /**
+     * Handle the sorting type change / key change
+     */
+    handleSorting: (sortBy: T) => void;
+    /**
+     * Clear all the applied filters
+     */
+    clearFilters: () => void;
+    /**
+     * Update the search params with the passed object
+     */
+    updateSearchParams: (paramsToSerialize: K) => void;
+};

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

@@ -1,5 +1,4 @@
-import { SortingOrder } from '../../Constants';
-import { UseUrlFiltersProps } from './types';
+import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types';
 /**
  * Generic hook for implementing URL based filters.
  * eg: pagination, search, sort.
@@ -17,16 +16,5 @@ import { UseUrlFiltersProps } from './types';
  * ```
  *
  */
-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;
-};
+declare const useUrlFilters: <T = string, K = unknown>({ initialSortKey, parseSearchParams, }?: UseUrlFiltersProps<T, K>) => UseUrlFiltersReturnType<T, K>;
 export default useUrlFilters;

package/dist/Pages/GlobalConfigurations/Authorization/constants.d.ts

@@ -1,3 +1,7 @@
+export declare enum UserListSortableKeys {
+    email = "email_id",
+    lastLogin = "last_login"
+}
 /**
  * User Status received from the API
  */
@@ -11,5 +15,5 @@ export declare enum UserStatusDto {
 export declare enum UserStatus {
     active = "active",
     inactive = "inactive",
-    temporary = "temporary"
+    temporary = "temporaryAccess"
 }

package/dist/Pages/GlobalConfigurations/Authorization/index.d.ts

@@ -1 +1,2 @@
 export * from './constants';
+export * from './types';

package/dist/Pages/GlobalConfigurations/Authorization/types.d.ts

@@ -0,0 +1,23 @@
+import { SortingParams } from '../../../Common';
+import { UserListSortableKeys, UserStatus } from './constants';
+export type BaseFilterQueryParams<T> = {
+    /**
+     * Offset for the list result
+     */
+    offset?: number;
+    /**
+     * Number of items required in the list
+     */
+    size?: number;
+    /**
+     * Search string (if any)
+     */
+    searchKey?: string;
+    /**
+     * If true, all items are returned with any search / filtering applied without pagination
+     */
+    showAll?: boolean;
+} & SortingParams<T>;
+export type UserListFilterParams = BaseFilterQueryParams<UserListSortableKeys> & {
+    status: UserStatus[];
+};

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

@@ -23,6 +23,8 @@ export interface GetBulkSelectionCheckboxValuesType {
 export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxValuesType {
     selectedIdentifiers: T;
     handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void;
+    isBulkSelectionApplied: boolean;
+    getSelectedIdentifiersCount: () => number;
 }
 export interface BulkSelectionProps {
     showPagination: boolean;

package/dist/Shared/Components/FilterChips/FilterChips.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FilterChipsProps } from './types';
+/**
+ * Component for rendering the applied filter chips
+ */
+declare const FilterChips: ({ filterConfig, clearFilters, onRemoveFilter, getFormattedLabel, getFormattedValue, }: FilterChipsProps) => JSX.Element;
+export default FilterChips;

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

@@ -0,0 +1,2 @@
+export { default as FilterChips } from './FilterChips.component';
+export type { FilterChipsProps } from './types';

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+export interface FilterChipProps {
+    /**
+     * Filter label
+     */
+    label: string;
+    /**
+     * Corresponding value of the filter
+     */
+    value: unknown;
+    /**
+     * Callback handler for removing the filter
+     */
+    handleRemoveFilter: (label: string, valueToRemove: unknown) => void;
+    /**
+     * If passed, the label will be formatted accordingly
+     */
+    getFormattedLabel?: (filterKey: string) => ReactNode;
+    /**
+     * If passed, the label will be formatted accordingly
+     */
+    getFormattedValue?: (filterKey: string, filterValue: unknown) => ReactNode;
+}
+export interface FilterChipsProps extends Pick<FilterChipProps, 'getFormattedLabel' | 'getFormattedValue'> {
+    /**
+     * Current filter configuration
+     */
+    filterConfig: Record<string, unknown>;
+    /**
+     * Callback handler for removing the filters
+     */
+    clearFilters: () => void;
+    /**
+     * Handler for removing a applied filter
+     */
+    onRemoveFilter: (filterConfig: Record<string, unknown>) => void;
+}

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

@@ -1,3 +1,4 @@
 export * from './APIResponseHandler';
 export * from './ReactSelect';
 export * from './BulkSelection';
+export * from './FilterChips';

package/dist/index.js

@@ -11811,7 +11811,14 @@ var getUrlWithSearchParams = function (url, params) {
     var searchParams = new URLSearchParams();
     Object.keys(params).forEach(function (key) {
         if (params[key]) {
-            searchParams.append(key, params[key]);
+            if (Array.isArray(params[key])) {
+                params[key].forEach(function (val) {
+                    searchParams.append(key, val);
+                });
+            }
+            else {
+                searchParams.set(key, params[key]);
+            }
         }
     });
     var queryString = searchParams.toString();
@@ -25686,7 +25693,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);
@@ -25699,6 +25706,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,
@@ -25706,8 +25714,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
      */
@@ -25749,23 +25758,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 = {
@@ -29462,6 +29474,8 @@ var BulkSelectionContext = React.createContext({
     handleBulkSelection: noop$1,
     isChecked: false,
     checkboxValue: exports.CHECKBOX_VALUE.CHECKED,
+    isBulkSelectionApplied: false,
+    getSelectedIdentifiersCount: noop$1,
 });
 var useBulkSelection = function () {
     var context = React.useContext(BulkSelectionContext);
@@ -29473,6 +29487,8 @@ var useBulkSelection = function () {
 var BulkSelectionProvider = function (_a) {
     var children = _a.children, identifiers = _a.identifiers, getSelectAllDialogStatus = _a.getSelectAllDialogStatus;
     var _b = __read(React.useState({}), 2), selectedIdentifiers = _b[0], setSelectedIdentifiers = _b[1];
+    var isBulkSelectionApplied = selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR];
+    var getSelectedIdentifiersCount = function () { return Object.keys(selectedIdentifiers).length; };
     var setIdentifiersAfterClear = function (newIdentifiers, selectedIds) {
         var _newIdentifiers = JSON.parse(JSON.stringify(newIdentifiers));
         selectedIds.forEach(function (id) {
@@ -29483,7 +29499,7 @@ var BulkSelectionProvider = function (_a) {
     var setIdentifiersAfterPageSelection = function (baseObject) {
         var _selectedIdentifiers = JSON.parse(JSON.stringify(selectedIdentifiers));
         // removing bulk selection across pages if present
-        if (_selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+        if (isBulkSelectionApplied) {
             delete _selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR];
         }
         setSelectedIdentifiers(__assign(__assign({}, _selectedIdentifiers), baseObject));
@@ -29508,10 +29524,13 @@ var BulkSelectionProvider = function (_a) {
                 break;
             }
             case exports.BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES: {
-                if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+                if (isBulkSelectionApplied) {
                     return;
                 }
-                var selectedIdentifiersLength = Object.keys(selectedIdentifiers).length;
+                var selectedIdentifiersLength = getSelectedIdentifiersCount();
+                // This is for showing a modal dialog if applicable to confirm if bulk selection is to be applied
+                // Do note that the 'getSelectAllDialogStatus' should be called after the length check explicitly
+                // otherwise the modal will open each time
                 if (selectedIdentifiersLength > 0 && getSelectAllDialogStatus() === exports.SelectAllDialogStatus.OPEN) {
                     return;
                 }
@@ -29549,7 +29568,7 @@ var BulkSelectionProvider = function (_a) {
             };
         }
         // if selectedIdentifiers contains select all across pages locator then it means all are selected
-        if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+        if (isBulkSelectionApplied) {
             return {
                 isChecked: true,
                 checkboxValue: exports.CHECKBOX_VALUE.BULK_CHECKED,
@@ -29574,7 +29593,9 @@ var BulkSelectionProvider = function (_a) {
         handleBulkSelection: handleBulkSelection,
         isChecked: isChecked,
         checkboxValue: checkboxValue,
-    }); }, [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue]);
+        isBulkSelectionApplied: isBulkSelectionApplied,
+        getSelectedIdentifiersCount: getSelectedIdentifiersCount,
+    }); }, [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount]);
     return jsxRuntime.jsx(BulkSelectionContext.Provider, __assign({ value: value }, { children: children }));
 };
 
@@ -29656,8 +29677,8 @@ var SvgIcClose = function SvgIcClose(props) {
 
 var BulkSelection = function (_a) {
     var showPagination = _a.showPagination;
-    var _b = useBulkSelection(), handleBulkSelection = _b.handleBulkSelection, selectedIdentifiers = _b.selectedIdentifiers, isChecked = _b.isChecked, checkboxValue = _b.checkboxValue;
-    var areOptionsSelected = Object.keys(selectedIdentifiers).length > 0;
+    var _b = useBulkSelection(), handleBulkSelection = _b.handleBulkSelection, isChecked = _b.isChecked, checkboxValue = _b.checkboxValue, getSelectedIdentifiersCount = _b.getSelectedIdentifiersCount;
+    var areOptionsSelected = getSelectedIdentifiersCount() > 0;
     var BulkSelectionItems = __spreadArray(__spreadArray([
         {
             locator: exports.BulkSelectionEvents.SELECT_ALL_ON_PAGE,
@@ -29687,6 +29708,43 @@ var BulkSelection = function (_a) {
     return (jsxRuntime.jsxs(PopupMenu, __assign({ autoClose: true }, { children: [jsxRuntime.jsxs(PopupMenu.Button, __assign({ isKebab: true, rootClassName: "h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp", dataTestId: BULK_DROPDOWN_TEST_ID }, { children: [jsxRuntime.jsx(Checkbox$1, { isChecked: isChecked, onChange: noop$1, rootClassName: "icon-dim-20 m-0", value: checkboxValue }), jsxRuntime.jsx(SvgIcChevronDown, { className: "icon-dim-20 fcn-6 dc__no-shrink" })] })), jsxRuntime.jsx(PopupMenu.Body, __assign({ rootClassName: "dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bcn-0 flex column dc__content-start dc__align-start dc__position-abs bcn-0 dc__border dc__border-radius-4-imp" }, { children: BulkSelectionItems.map(function (item) { return (jsxRuntime.jsx(BulkSelectionDropdownItems, { locator: item.locator, label: item.label, isSelected: item.isSelected, icon: item.icon, handleBulkSelection: handleBulkSelection }, item.locator)); }) }))] })));
 };
 
+var FilterChip = function (_a) {
+    var _b, _c;
+    var label = _a.label, value = _a.value, handleRemoveFilter = _a.handleRemoveFilter, _d = _a.getFormattedLabel, getFormattedLabel = _d === void 0 ? noop$1 : _d, _e = _a.getFormattedValue, getFormattedValue = _e === void 0 ? noop$1 : _e;
+    var removeFilter = function () {
+        handleRemoveFilter(label, value);
+    };
+    var labelToDisplay = (_b = getFormattedLabel(label)) !== null && _b !== void 0 ? _b : label;
+    var valueToDisplay = (_c = getFormattedValue(label, value)) !== null && _c !== void 0 ? _c : value;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox flex-align-center br-4 dc__border dc__bg-n50 pl-6 pr-6 pt-2 pb-2 dc__user-select-none h-24 dc__gap-6 fs-12 lh-20 cn-9 fw-4" }, { children: [jsxRuntime.jsx("span", __assign({ className: "fw-6 dc__capitalize" }, { children: labelToDisplay })), jsxRuntime.jsx("span", { className: "dc__divider h-24" }), jsxRuntime.jsx("span", __assign({ className: "dc__ellipsis-right" }, { children: valueToDisplay })), jsxRuntime.jsx("button", __assign({ type: "button", className: "flex p-0 dc__transparent", onClick: removeFilter, "aria-label": "Remove filter" }, { children: jsxRuntime.jsx(SvgIcClose, { className: "icon-dim-12 icon-use-fill-n6" }) }))] })));
+};
+/**
+ * Component for rendering the applied filter chips
+ */
+var FilterChips = function (_a) {
+    var filterConfig = _a.filterConfig, clearFilters = _a.clearFilters, onRemoveFilter = _a.onRemoveFilter, getFormattedLabel = _a.getFormattedLabel, getFormattedValue = _a.getFormattedValue;
+    var handleRemoveFilter = function (filterKey, valueToRemove) {
+        var _a;
+        var updatedFilterConfig = JSON.parse(JSON.stringify(filterConfig));
+        if (Array.isArray(filterConfig[filterKey])) {
+            onRemoveFilter(__assign(__assign({}, updatedFilterConfig), (_a = {}, _a[filterKey] = updatedFilterConfig[filterKey].filter(function (val) { return val !== valueToRemove; }), _a)));
+            return;
+        }
+        if (filterKey in updatedFilterConfig) {
+            delete updatedFilterConfig[filterKey];
+            onRemoveFilter(updatedFilterConfig);
+        }
+    };
+    var chips = Object.entries(filterConfig).filter(function (_a) {
+        var _b = __read(_a, 2), value = _b[1];
+        return (Array.isArray(value) ? value.length : !!value);
+    });
+    return (chips.length > 0 && (jsxRuntime.jsxs("div", __assign({ className: "flexbox pt-6 pb-6 flex-wrap dc__gap-8" }, { children: [chips.map(function (_a) {
+                var _b = __read(_a, 2), filterKey = _b[0], filterValue = _b[1];
+                return Array.isArray(filterValue) ? (filterValue.map(function (filter) { return (jsxRuntime.jsx(FilterChip, { label: filterKey, value: filter, handleRemoveFilter: handleRemoveFilter, getFormattedLabel: getFormattedLabel, getFormattedValue: getFormattedValue }, "".concat(filterKey, "-").concat(filter))); })) : (jsxRuntime.jsx(FilterChip, { label: filterKey, value: filterValue, handleRemoveFilter: handleRemoveFilter, getFormattedLabel: getFormattedLabel, getFormattedValue: getFormattedValue }, filterKey));
+            }), jsxRuntime.jsx("div", __assign({ className: "flex" }, { children: jsxRuntime.jsx("button", __assign({ type: "button", className: "cta text fs-13 lh-20-imp h-20 p-0-imp", onClick: clearFilters }, { children: "Clear All Filters" })) }))] }))));
+};
+
 var MESSAGES = {
     PROVIDE_A_NUMBER: 'Please provide a number',
     LOWERCASE_ALPHANUMERIC: 'Only lowercase alphanumeric characters, -, _ or . allowed',
@@ -30218,6 +30276,11 @@ var BuildInfraConfigForm = function (_a) {
                                     isRequired: true, profileUnitsMap: unitsMap[action.actionType], handleProfileInputChange: handleProfileInputChange, currentUnitName: currentConfigurations[action.actionType].unit, currentValue: currentConfigurations[action.actionType].value }, action.actionType)); }) })) }), field.locator)); }) }))] }))] })));
 };
 
+exports.UserListSortableKeys = void 0;
+(function (UserListSortableKeys) {
+    UserListSortableKeys["email"] = "email_id";
+    UserListSortableKeys["lastLogin"] = "last_login";
+})(exports.UserListSortableKeys || (exports.UserListSortableKeys = {}));
 /**
  * User Status received from the API
  */
@@ -30233,7 +30296,7 @@ exports.UserStatus = void 0;
 (function (UserStatus) {
     UserStatus["active"] = "active";
     UserStatus["inactive"] = "inactive";
-    UserStatus["temporary"] = "temporary";
+    UserStatus["temporary"] = "temporaryAccess";
 })(exports.UserStatus || (exports.UserStatus = {}));
 
 exports.APIResponseHandler = APIResponseHandler;
@@ -30289,6 +30352,7 @@ exports.EmptyState = EmptyState;
 exports.ErrorScreenManager = ErrorScreenManager;
 exports.ErrorScreenNotAuthorized = ErrorScreenNotAuthorized;
 exports.FALLBACK_REQUEST_TIMEOUT = FALLBACK_REQUEST_TIMEOUT;
+exports.FilterChips = FilterChips;
 exports.ForceDeleteDialog = ForceDeleteDialog;
 exports.GenericEmptyState = GenericEmptyState;
 exports.Grid = Grid;

package/package.json

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

package/src/Common/DraggableWrapper/types.ts

@@ -8,7 +8,10 @@ export enum DraggablePositionVariant {
 
 export interface DraggableWrapperProps {
     children: ReactNode
-    zIndex?: number
+    /**
+     * Support for passing the direct value or calc functions as well
+     */
+    zIndex?: number | string
     positionVariant?: DraggablePositionVariant
     /**
      * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag

package/src/Common/Helper.tsx

@@ -449,7 +449,13 @@ export const getUrlWithSearchParams = (url: string, params: Record<string | numb
     const searchParams = new URLSearchParams()
     Object.keys(params).forEach((key) => {
         if (params[key]) {
-            searchParams.append(key, params[key])
+            if (Array.isArray(params[key])) {
+                params[key].forEach((val) => {
+                    searchParams.append(key, val)
+                })
+            } else {
+                searchParams.set(key, params[key])
+            }
         }
     })
     const queryString = searchParams.toString()

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

@@ -1,2 +1,2 @@
 export { default as useUrlFilters } from './useUrlFilters'
-export type { UseUrlFiltersProps } from './types'
+export type { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'

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

@@ -1,6 +1,61 @@
-export interface UseUrlFiltersProps<T> {
+import { SortingOrder } from '../../Constants'
+
+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 type UseUrlFiltersReturnType<T, K = unknown> = K & {
+    /**
+     * Currently applied page size
+     */
+    pageSize: number
+    /**
+     * Handler for updating the current page
+     */
+    changePage: (pageNumber: number) => void
+    /**
+     * Handler for updating the current page size
+     */
+    changePageSize: (pageSize: number) => void
+    /**
+     * Current search key
+     */
+    searchKey: string
+    /**
+     * Handler for updating the search
+     */
+    handleSearch: (searchKey: string) => void
+    /**
+     * Computed offset using the pageSize and pageNumber
+     *
+     * Note: Used in pagination component
+     */
+    offset: number
+    /**
+     * Key on which the sorting is applied
+     */
+    sortBy: T
+    /**
+     * Current sort order
+     */
+    sortOrder: SortingOrder
+    /**
+     * Handle the sorting type change / key change
+     */
+    handleSorting: (sortBy: T) => void
+    /**
+     * Clear all the applied filters
+     */
+    clearFilters: () => void
+    /**
+     * Update the search params with the passed object
+     */
+    updateSearchParams: (paramsToSerialize: K) => void
 }

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

@@ -2,7 +2,7 @@ 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'
+import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
 
 const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
 
@@ -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> = {}) => {
+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,
     }
 }
 

package/src/Pages/GlobalConfigurations/Authorization/constants.ts

@@ -1,3 +1,8 @@
+export enum UserListSortableKeys {
+    email = 'email_id',
+    lastLogin = 'last_login',
+}
+
 /**
  * User Status received from the API
  */
@@ -12,5 +17,5 @@ export enum UserStatusDto {
 export enum UserStatus {
     active = 'active',
     inactive = 'inactive',
-    temporary = 'temporary',
+    temporary = 'temporaryAccess',
 }

package/src/Pages/GlobalConfigurations/Authorization/index.ts

@@ -1 +1,2 @@
 export * from './constants'
+export * from './types'

package/src/Pages/GlobalConfigurations/Authorization/types.ts

@@ -0,0 +1,25 @@
+import { SortingParams } from '../../../Common'
+import { UserListSortableKeys, UserStatus } from './constants'
+
+export type BaseFilterQueryParams<T> = {
+    /**
+     * Offset for the list result
+     */
+    offset?: number
+    /**
+     * Number of items required in the list
+     */
+    size?: number
+    /**
+     * Search string (if any)
+     */
+    searchKey?: string
+    /**
+     * If true, all items are returned with any search / filtering applied without pagination
+     */
+    showAll?: boolean
+} & SortingParams<T>
+
+export type UserListFilterParams = BaseFilterQueryParams<UserListSortableKeys> & {
+    status: UserStatus[]
+}

package/src/Shared/Components/BulkSelection/BulkSelection.tsx

@@ -9,8 +9,8 @@ import { ReactComponent as ICCheckAll } from '../../../Assets/Icon/ic-check-all.
 import { ReactComponent as ICClose } from '../../../Assets/Icon/ic-close.svg'
 
 const BulkSelection = <T,>({ showPagination }: BulkSelectionProps) => {
-    const { handleBulkSelection, selectedIdentifiers, isChecked, checkboxValue } = useBulkSelection<T>()
-    const areOptionsSelected = Object.keys(selectedIdentifiers).length > 0
+    const { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection<T>()
+    const areOptionsSelected = getSelectedIdentifiersCount() > 0
     const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
         {
             locator: BulkSelectionEvents.SELECT_ALL_ON_PAGE,

package/src/Shared/Components/BulkSelection/BulkSelectionProvider.tsx

@@ -22,6 +22,8 @@ const BulkSelectionContext = createContext<UseBulkSelectionReturnType<any>>({
     handleBulkSelection: noop,
     isChecked: false,
     checkboxValue: CHECKBOX_VALUE.CHECKED,
+    isBulkSelectionApplied: false,
+    getSelectedIdentifiersCount: noop,
 })
 
 export const useBulkSelection = <T,>() => {
@@ -39,6 +41,10 @@ export const BulkSelectionProvider = <T,>({
 }: UseBulkSelectionProps<T>) => {
     const [selectedIdentifiers, setSelectedIdentifiers] = useState<T>({} as T)
 
+    const isBulkSelectionApplied = selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
+
+    const getSelectedIdentifiersCount = () => Object.keys(selectedIdentifiers).length
+
     const setIdentifiersAfterClear = (newIdentifiers: T, selectedIds: (number | string)[]) => {
         const _newIdentifiers = JSON.parse(JSON.stringify(newIdentifiers))
         selectedIds.forEach((id) => {
@@ -50,7 +56,7 @@ export const BulkSelectionProvider = <T,>({
     const setIdentifiersAfterPageSelection = (baseObject: T) => {
         const _selectedIdentifiers = JSON.parse(JSON.stringify(selectedIdentifiers))
         // removing bulk selection across pages if present
-        if (_selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+        if (isBulkSelectionApplied) {
             delete _selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
         }
 
@@ -81,10 +87,13 @@ export const BulkSelectionProvider = <T,>({
             }
 
             case BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES: {
-                if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+                if (isBulkSelectionApplied) {
                     return
                 }
-                const selectedIdentifiersLength = Object.keys(selectedIdentifiers).length
+                const selectedIdentifiersLength = getSelectedIdentifiersCount()
+                // This is for showing a modal dialog if applicable to confirm if bulk selection is to be applied
+                // Do note that the 'getSelectAllDialogStatus' should be called after the length check explicitly
+                // otherwise the modal will open each time
                 if (selectedIdentifiersLength > 0 && getSelectAllDialogStatus() === SelectAllDialogStatus.OPEN) {
                     return
                 }
@@ -130,7 +139,7 @@ export const BulkSelectionProvider = <T,>({
         }
 
         // if selectedIdentifiers contains select all across pages locator then it means all are selected
-        if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+        if (isBulkSelectionApplied) {
             return {
                 isChecked: true,
                 checkboxValue: CHECKBOX_VALUE.BULK_CHECKED,
@@ -163,8 +172,10 @@ export const BulkSelectionProvider = <T,>({
             handleBulkSelection,
             isChecked,
             checkboxValue,
+            isBulkSelectionApplied,
+            getSelectedIdentifiersCount,
         }),
-        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue],
+        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount],
     )
 
     return <BulkSelectionContext.Provider value={value}>{children}</BulkSelectionContext.Provider>

package/src/Shared/Components/BulkSelection/types.tsx

@@ -26,6 +26,8 @@ export interface GetBulkSelectionCheckboxValuesType {
 export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxValuesType {
     selectedIdentifiers: T
     handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void
+    isBulkSelectionApplied: boolean
+    getSelectedIdentifiersCount: () => number
 }
 
 export interface BulkSelectionProps {

package/src/Shared/Components/FilterChips/FilterChips.component.tsx

@@ -0,0 +1,100 @@
+import { ReactComponent as CloseIcon } from '../../../Assets/Icon/ic-close.svg'
+import { noop } from '../../../Common'
+import { FilterChipProps, FilterChipsProps } from './types'
+
+const FilterChip = ({
+    label,
+    value,
+    handleRemoveFilter,
+    getFormattedLabel = noop,
+    getFormattedValue = noop,
+}: FilterChipProps) => {
+    const removeFilter = () => {
+        handleRemoveFilter(label, value)
+    }
+
+    const labelToDisplay = getFormattedLabel(label) ?? label
+
+    const valueToDisplay = getFormattedValue(label, value) ?? value
+
+    return (
+        <div className="flexbox flex-align-center br-4 dc__border dc__bg-n50 pl-6 pr-6 pt-2 pb-2 dc__user-select-none h-24 dc__gap-6 fs-12 lh-20 cn-9 fw-4">
+            <span className="fw-6 dc__capitalize">{labelToDisplay}</span>
+            <span className="dc__divider h-24" />
+            <span className="dc__ellipsis-right">{valueToDisplay}</span>
+            <button
+                type="button"
+                className="flex p-0 dc__transparent"
+                onClick={removeFilter}
+                aria-label="Remove filter"
+            >
+                <CloseIcon className="icon-dim-12 icon-use-fill-n6" />
+            </button>
+        </div>
+    )
+}
+
+/**
+ * Component for rendering the applied filter chips
+ */
+const FilterChips = ({
+    filterConfig,
+    clearFilters,
+    onRemoveFilter,
+    getFormattedLabel,
+    getFormattedValue,
+}: FilterChipsProps) => {
+    const handleRemoveFilter = (filterKey, valueToRemove) => {
+        const updatedFilterConfig = JSON.parse(JSON.stringify(filterConfig))
+        if (Array.isArray(filterConfig[filterKey])) {
+            onRemoveFilter({
+                ...updatedFilterConfig,
+                [filterKey]: updatedFilterConfig[filterKey].filter((val) => val !== valueToRemove),
+            })
+            return
+        }
+        if (filterKey in updatedFilterConfig) {
+            delete updatedFilterConfig[filterKey]
+            onRemoveFilter(updatedFilterConfig)
+        }
+    }
+
+    const chips = Object.entries(filterConfig).filter(([, value]) => (Array.isArray(value) ? value.length : !!value))
+
+    return (
+        chips.length > 0 && (
+            <div className="flexbox pt-6 pb-6 flex-wrap dc__gap-8">
+                {chips.map(([filterKey, filterValue]) =>
+                    Array.isArray(filterValue) ? (
+                        filterValue.map((filter) => (
+                            <FilterChip
+                                key={`${filterKey}-${filter}`}
+                                label={filterKey}
+                                value={filter}
+                                handleRemoveFilter={handleRemoveFilter}
+                                getFormattedLabel={getFormattedLabel}
+                                getFormattedValue={getFormattedValue}
+                            />
+                        ))
+                    ) : (
+                        <FilterChip
+                            key={filterKey}
+                            label={filterKey}
+                            value={filterValue}
+                            handleRemoveFilter={handleRemoveFilter}
+                            getFormattedLabel={getFormattedLabel}
+                            getFormattedValue={getFormattedValue}
+                        />
+                    ),
+                )}
+                <div className="flex">
+                    <button type="button" className="cta text fs-13 lh-20-imp h-20 p-0-imp" onClick={clearFilters}>
+                        Clear All Filters
+                    </button>
+                </div>
+            </div>
+        )
+    )
+}
+
+export default FilterChips

package/src/Shared/Components/FilterChips/index.ts

@@ -0,0 +1,2 @@
+export { default as FilterChips } from './FilterChips.component'
+export type { FilterChipsProps } from './types'

package/src/Shared/Components/FilterChips/types.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react'
+
+export interface FilterChipProps {
+    /**
+     * Filter label
+     */
+    label: string
+    /**
+     * Corresponding value of the filter
+     */
+    value: unknown
+    /**
+     * Callback handler for removing the filter
+     */
+    handleRemoveFilter: (label: string, valueToRemove: unknown) => void
+    /**
+     * If passed, the label will be formatted accordingly
+     */
+    getFormattedLabel?: (filterKey: string) => ReactNode
+    /**
+     * If passed, the label will be formatted accordingly
+     */
+    getFormattedValue?: (filterKey: string, filterValue: unknown) => ReactNode
+}
+
+export interface FilterChipsProps extends Pick<FilterChipProps, 'getFormattedLabel' | 'getFormattedValue'> {
+    /**
+     * Current filter configuration
+     */
+    filterConfig: Record<string, unknown>
+    /**
+     * Callback handler for removing the filters
+     */
+    clearFilters: () => void
+    /**
+     * Handler for removing a applied filter
+     */
+    onRemoveFilter: (filterConfig: Record<string, unknown>) => void
+}

package/src/Shared/Components/index.ts

@@ -1,3 +1,4 @@
 export * from './APIResponseHandler'
 export * from './ReactSelect'
 export * from './BulkSelection'
+export * from './FilterChips'