@griddo/ax 10.3.23 → 10.3.25

package/src/modules/Sites/SitesList/style.tsx

@@ -150,6 +150,7 @@ const GridList = styled.div<{ isEmpty: boolean; fullWidth: boolean }>`
 
 const EmptyStateWrapper = styled.div`
   text-align: center;
+  margin-top: 100px;
 `;
 
 const ImageWrapper = styled.div<{ borderRadius?: boolean }>`
@@ -184,6 +185,19 @@ const AllSitesListWrapper = styled.div`
   }
 `;
 
+const SearchTags = styled.div`
+  & > div:nth-child(1) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+  & > div:nth-child(2) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+const SearchTagsGrid = styled.div`
+  margin: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
+`;
+
 export {
   SectionHeader,
   CollapseButton,
@@ -202,4 +216,6 @@ export {
   ItemName,
   PaginationWrapper,
   AllSitesListWrapper,
+  SearchTags,
+  SearchTagsGrid,
 };

package/src/modules/StructuredData/StructuredDataList/BulkHeader/TableHeader/index.tsx

@@ -12,7 +12,7 @@ import {
   LiveFilter,
   TranslationsFilter,
 } from "@ax/components";
-import { IColumn, IStructuredDataQueryValues } from "@ax/types";
+import { IColumn, IQueryValue, IStructuredDataQueryValues } from "@ax/types";
 import { getGlobalPageTypes } from "@ax/helpers";
 
 import * as S from "./style";
@@ -134,8 +134,8 @@ interface IProps {
   isScrolling: boolean;
   selectAllItems: () => void;
   isFromPage: boolean;
-  sortItems: (orderPointer: string, isAscending: boolean) => void;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   sortedListStatus: { isAscending: boolean; sortedByDate: boolean; sortedByTitle: boolean; sortedByURL: boolean };
   isAllPages: boolean;
   filterValues: IStructuredDataQueryValues;

package/src/modules/StructuredData/StructuredDataList/BulkHeader/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import { IColumn, IStructuredDataQueryValues, IStructuredDataSortedInitialState } from "@ax/types";
+import { IColumn, IQueryValue, IStructuredDataQueryValues, IStructuredDataSortedInitialState } from "@ax/types";
 import { usePermission } from "@ax/hooks";
 import TableHeader from "./TableHeader";
 
@@ -90,8 +90,8 @@ interface IProps {
   isScrolling: boolean;
   isEditable: boolean | null;
   isFromPage: boolean;
-  sortItems: (orderPointer: string, isAscending: boolean) => void;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   sortedListStatus: IStructuredDataSortedInitialState;
   isAllPages: boolean;
   filterValues: IStructuredDataQueryValues;

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -379,11 +379,11 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
         <S.NameCell role="cell" onClick={_handleClick} ref={nameCellRef}>
           <Tooltip
             content={[
-              <>
+              <React.Fragment key="page-title">
                 <strong>{globalPage.title}</strong>
                 <br />
-              </>,
-              <>{fullPath.page}</>,
+              </React.Fragment>,
+              <React.Fragment key="page-slug">{fullPath.page}</React.Fragment>,
             ]}
             left={0}
             top={1}

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/style.tsx

@@ -105,6 +105,8 @@ const FlagsWrapper = styled.div`
   svg {
     margin-right: 2px;
     margin-bottom: -3px;
+    display: inline;
+    vertical-align: baseline;
   }
 `;
 

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/style.tsx

@@ -78,6 +78,8 @@ const FlagsWrapper = styled.div`
   svg {
     margin-right: 2px;
     margin-bottom: -3px;
+    display: inline;
+    vertical-align: baseline;
   }
 `;
 

package/src/modules/StructuredData/StructuredDataList/hooks.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { IStructuredData, IStructuredDataQueryValues, IStructuredDataSortedInitialState } from "@ax/types";
+import { IQueryValue, IStructuredData, IStructuredDataQueryValues, IStructuredDataSortedInitialState } from "@ax/types";
 
 const useSortedListStatus = (): IUseSortedListStatus => {
   const sortedInitialState: IStructuredDataSortedInitialState = {
@@ -21,23 +21,32 @@ const useFilterQuery = (
   currentStructuredData: IStructuredData | null,
   values: Record<string, IStructuredDataQueryValues> | null
 ): IUseFilterQuery => {
+
   const structuredDataType = currentStructuredData ? currentStructuredData.id : "all";
-  const initialQueryValues = {
-    types: "all",
-    translated: "all",
-    liveStatus: "all",
-    order: "",
-    filterSites: "all",
-    categories: "all",
-    related: "all",
+  const initialQueryValues: IStructuredDataQueryValues = {
+    types: [{value: "all", label: "All"}],
+    translated: [{value: "all", label: "All"}],
+    liveStatus: [{value: "all", label: "All"}],
+    order: [],
+    filterSites: [{value: "all", label: "All"}],
+    categories: [{value: "all", label: "All"}],
+    related: [{value: "all", label: "All"}],
   };
 
-  const getFilterQuery = (filterValues: IStructuredDataQueryValues) => {
+  const getFilterQuery = (filterValues: IStructuredDataQueryValues): string => {
     const { types, translated, liveStatus, order, filterSites, categories, related } = filterValues;
     let filterQuery = "";
 
-    const currentQuery = (pointer: string, values: string) => {
-      return filterQuery ? filterQuery.concat(`&${pointer}=${values}`) : `&${pointer}=${values}`;
+    const currentQuery = (pointer: string, values: IQueryValue[]): string => {
+      const stringValues = Array.isArray(values) && values.length
+        ? values.map((value) => (value.value !== "all" ? value.value : "")).join(",")
+        : "";
+
+      return !stringValues.length
+        ? filterQuery
+        : filterQuery.length
+        ? filterQuery.concat(`&${pointer}=${stringValues}`)
+        : `&${pointer}=${stringValues}`;
     };
 
     const isNotInitialValue = (pointer: keyof IStructuredDataQueryValues) => {
@@ -68,15 +77,16 @@ const useFilterQuery = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [structuredDataType]);
 
-  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
     const { types, translated, liveStatus, order, filterSites, categories, related } =
       state[structuredDataType] || initialQueryValues;
+
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       types: pointer === "types" ? filter : types,
       translated: pointer === "translated" ? filter : translated,
       liveStatus: pointer === "liveStatus" ? filter : liveStatus,
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      order: pointer === "order" ? [{value: `${filter[0].value}-${orderMethod}`, label: filter[0].label}] : order,
       filterSites: pointer === "filterSites" ? filter : filterSites,
       categories: pointer === "categories" ? filter : categories,
       related: pointer === "related" ? filter : related,
@@ -106,7 +116,7 @@ interface IUseSortedListStatus {
 }
 
 interface IUseFilterQuery {
-  setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): void;
+  setFiltersSelection(pointer: string, filter: IQueryValue[], isAscendent?: boolean): void;
   resetFilterQuery(): void;
   filterValues: Record<string, IStructuredDataQueryValues>;
   query: string;

package/src/modules/StructuredData/StructuredDataList/index.tsx

@@ -17,6 +17,8 @@ import {
   ICheck,
   IColumn,
   IStructuredDataQueryValues,
+  ISite,
+  IQueryValue,
 } from "@ax/types";
 import {
   ISetCurrentPageIDAction,
@@ -30,7 +32,17 @@ import { structuredDataActions } from "@ax/containers/StructuredData";
 import { sitesActions } from "@ax/containers/Sites";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { analyticsActions } from "@ax/containers/Analytics";
-import { MainWrapper, TableList, ErrorToast, Toast, Notification, EmptyState, Modal } from "@ax/components";
+import {
+  MainWrapper,
+  TableList,
+  ErrorToast,
+  Toast,
+  Notification,
+  EmptyState,
+  Modal,
+  SearchTagsBar,
+  FilterTagsBar,
+} from "@ax/components";
 
 import StructuredDataItem from "./StructuredDataItem";
 import BulkHeader from "./BulkHeader";
@@ -90,6 +102,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     setContentFilters,
     contentFilters,
     checkUserSession,
+    sites,
   } = props;
 
   const itemsPerPage = 50;
@@ -150,7 +163,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     live: { title: "Live", show: true },
     status: { title: "Status", show: true },
     translation: { title: "Trans.", show: true },
-    ...((isStructuredDataFromPage || currentStructuredData === null)  && { seo: { title: "SEO", show: true } }),
+    ...((isStructuredDataFromPage || currentStructuredData === null) && { seo: { title: "SEO", show: true } }),
   };
 
   const extraColumns = categoryColumns.reduce((acc: Record<string, IColumn>, cur: any) => {
@@ -240,9 +253,9 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     const type = currentStructuredData && isGlobalData ? currentStructuredData.id : "all";
     setStructuredDataType(type);
 
-    filterItems("types", "all");
+    filterItems("types", [{ value: "all", label: "All" }]);
     if (filter === "all-pages" || !isStructuredDataFromPage) {
-      filterItems("filterSites", "all");
+      filterItems("filterSites", [{ value: "all", label: "All" }]);
       setColumnsState({ all: allColumns });
     }
     unselectAllItems();
@@ -289,8 +302,14 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       } else {
         emptyState.message = isAllPages
           ? "You don’t have pages with this content type yet."
-          : allowedToCreatePages && isDataEditable ? "To start using pages in your site, create as many pages as you need." : undefined;
-        emptyState.button = isAllPages ? "View all content" : allowedToCreatePages && isDataEditable ? "Create the first page" : undefined;
+          : allowedToCreatePages && isDataEditable
+          ? "To start using pages in your site, create as many pages as you need."
+          : undefined;
+        emptyState.button = isAllPages
+          ? "View all content"
+          : allowedToCreatePages && isDataEditable
+          ? "Create the first page"
+          : undefined;
         emptyState.action = isAllPages ? resetFilterValues : isDataEditable ? addNewAction : undefined;
       }
       const isEmpty = isStructuredDataFromPage ? !currentSitePages.length : !currentDataContent.length;
@@ -426,15 +445,15 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     }
   };
 
-  const sortItems = async (orderPointer: string, isAscending: boolean) => {
+  const sortItems = async (orderPointer: IQueryValue[], isAscending: boolean) => {
     setPage(firstPage);
-    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    const sortedState = getSortedListStatus(orderPointer[0].value.toString(), isAscending);
     setSortedListStatus(sortedState);
 
     setFiltersSelection("order", orderPointer, isAscending);
   };
 
-  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+  const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) => {
     setPage(firstPage);
     if (!isStructuredDataFromPage && filterPointer === "categories") filterPointer = "related";
     setFiltersSelection(filterPointer, filtersSelected);
@@ -486,11 +505,13 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 
   const addNewAction = isAllPages || isStructuredDataFromPage ? toggleNewModal : createNewData;
 
-  const rightButtonProps = allowedToCreatePages ? {
-    label: "New",
-    action: addNewAction,
-    disabled: !isDataEditable,
-  } : undefined;
+  const rightButtonProps = allowedToCreatePages
+    ? {
+        label: "New",
+        action: addNewAction,
+        disabled: !isDataEditable,
+      }
+    : undefined;
 
   const options: { filters: IStructuredDataFilter[]; values: IStructuredDataValue[] } = {
     filters: getOptionFilters(structuredData),
@@ -574,6 +595,16 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       ? "These pages contains some errors, so you can not publish them yet. Please, review the errors on the pages."
       : "This page contains some errors, so you can not publish it yet. Please, review the errors on the page.";
 
+  const labelCategory = isStructuredDataFromPage ? { categories: "Category" } : { related: "Category " };
+
+  let filterLabels = {
+    types: "Type",
+    liveStatus: "Live",
+    translated: "Translated",
+    filterSites: "Site",
+    ...labelCategory,
+  };
+
   return (
     <MainWrapper
       title="Global Data"
@@ -582,6 +613,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       language={languageProps.lang}
       languageActions={languageProps.languageActions}
       searchAction={setSearchQuery}
+      searchValue={searchQuery}
     >
       <S.StructuredDataWrapper ref={wrapperRef}>
         <ContentFilters
@@ -615,6 +647,15 @@ const StructuredDataList = (props: IProps): JSX.Element => {
             tableRef={tableRef}
           >
             <>
+              <S.SearchTags>
+                <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                <FilterTagsBar
+                  filters={filterValues[currentStructuredData?.id || "all"]}
+                  setFilters={setFiltersSelection}
+                  labels={filterLabels}
+                  resetFilters={resetFilterQuery}
+                />
+              </S.SearchTags>
               {!isEmpty ? (
                 content
               ) : (
@@ -671,6 +712,7 @@ const mapStateToProps = (state: IRootState) => ({
   currentSiteErrorPages: state.sites.currentSiteErrorPages,
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
   contentFilters: state.structuredData.contentFilters,
+  sites: state.sites.sites,
 });
 
 const mapDispatchToProps = {
@@ -741,6 +783,7 @@ interface ICategoriesProps {
   currentSiteErrorPages: number[];
   skipReviewOnPublish?: boolean;
   contentFilters: Record<string, IStructuredDataQueryValues> | null;
+  sites: ISite[];
 }
 
 type IProps = ICategoriesProps & IDispatchProps;

package/src/modules/StructuredData/StructuredDataList/style.tsx

@@ -29,4 +29,13 @@ const ModalContent = styled.div`
   }
 `;
 
-export { StructuredDataWrapper, NotificationWrapper, TableListWrapper, EmptyWrapper, ModalContent };
+const SearchTags = styled.div`
+  & > div:nth-child(1) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+  & > div:nth-child(2) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+export { StructuredDataWrapper, NotificationWrapper, TableListWrapper, EmptyWrapper, ModalContent, SearchTags };

package/src/modules/Users/Roles/BulkHeader/TableHeader/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { CheckField, TableCounter, NameFilter, PermissionsFilter, UsersFilter } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -42,8 +43,7 @@ interface IProps {
   totalItems: number;
   isScrolling: boolean;
   selectAllItems: () => void;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
-  sortItems: any;
+  sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
   sortedListStatus: any;
   filterValues: any;
   isSiteView: boolean;

package/src/modules/Users/Roles/BulkHeader/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
 import TableHeader from "./TableHeader";
-import { IRole } from "@ax/types";
+import { IQueryValue, IRole } from "@ax/types";
 
 const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
   const {
@@ -13,7 +13,6 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
     totalItems,
     isScrolling,
     sortItems,
-    filterItems,
     sortedListStatus,
     filterValues,
     isSiteView,
@@ -45,7 +44,6 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
       filterValues={filterValues}
       totalItems={totalItems}
       selectAllItems={selectAllItems}
-      filterItems={filterItems}
       isScrolling={isScrolling}
       sortItems={sortItems}
       sortedListStatus={sortedListStatus}
@@ -62,10 +60,9 @@ export interface IBulkHeaderProps {
   selectAllItems: () => void;
   totalItems: number;
   isScrolling: boolean;
-  sortItems: (orderPointer: string, isAscending: boolean) => void;
+  sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
   sortedListStatus: any;
   filterValues: any;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
   isSiteView: boolean;
   roles: IRole[];
   selectedRoles: number[];

package/src/modules/Users/Roles/hooks.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { IRolesQueryValues } from "@ax/types";
+import { IQueryValue, IRolesQueryValues } from "@ax/types";
 
 const useSortedListStatus = (): any => {
   const sortedInitialState: {
@@ -23,18 +23,25 @@ const useSortedListStatus = (): any => {
 };
 
 const useFilterQuery = (): IRolesFilterQuery => {
-  const initialQueryValues = {
-    order: "",
+  const initialQueryValues: Record<string, IQueryValue[]> = {
+    order: [],
   };
 
   const [query, setQuery] = useState(initialQueryValues);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
 
   const setFilterQuery = (filterValues: IRolesQueryValues) => {
     const { order } = filterValues;
     let filterQuery = "";
 
-    const currentQuery = (pointer: string, values: string) => {
-      return filterQuery ? filterQuery.concat(`&${pointer}=${values}`) : `?${pointer}=${values}`;
+    const currentQuery = (pointer: string, values: IQueryValue[]): string => {
+      const stringValues = Array.isArray(values) ? values.map((value) => value.value).join(",") : "";
+
+      return !stringValues.length
+        ? filterQuery
+        : filterQuery.length
+        ? filterQuery.concat(`&${pointer}=${stringValues}`)
+        : `?${pointer}=${stringValues}`;
     };
 
     const isNotInitialValue = (pointer: keyof IRolesQueryValues) => {
@@ -43,36 +50,38 @@ const useFilterQuery = (): IRolesFilterQuery => {
 
     if (isNotInitialValue("order")) filterQuery = currentQuery("order", order);
 
-    return filterQuery;
+    setCurrentFilterQuery(filterQuery);
   };
 
-  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
     const { order } = query;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
     };
 
     setQuery(filterValues);
-
-    return filterValues;
+    setFilterQuery(filterValues);
   };
 
-  const resetFilterQuery = () => setQuery(initialQueryValues);
+  const resetFilterQuery = () => {
+    setQuery(initialQueryValues);
+    setCurrentFilterQuery("");
+  }
 
   return {
     setFiltersSelection,
-    setFilterQuery,
     resetFilterQuery,
     filterValues: query,
+    filterQuery: currentFilterQuery,
   };
 };
 
 interface IRolesFilterQuery {
-  setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): IRolesQueryValues;
-  setFilterQuery(filterValues: IRolesQueryValues): string;
+  setFiltersSelection(pointer: string, filter: IQueryValue[], isAscendent?: boolean): void;
   resetFilterQuery(): void;
-  filterValues: IRolesQueryValues;
+  filterValues: Record<string, IQueryValue[]>;
+  filterQuery: string;
 }
 
 export { useSortedListStatus, useFilterQuery };

package/src/modules/Users/Roles/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { IRootState, IRole, IGetRoles, IActivateRole, ISite } from "@ax/types";
+import { IRootState, IRole, IGetRoles, IActivateRole, ISite, IQueryValue } from "@ax/types";
 import { useBulkSelection, useToast } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
@@ -23,14 +23,13 @@ const Roles = (props: IRolesProps): JSX.Element => {
 
   const [page, setPage] = useState(1);
   const [isScrolling, setIsScrolling] = useState(false);
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const [activatedItems, setActivatedItems] = useState<number[]>([]);
   const [undoToastActionValue, setUndoToastActionValue] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState(false);
   const [selectedRole, setSelectedRole] = useState<IRole | null>(null);
 
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+  const { setFiltersSelection, filterValues } = useFilterQuery();
 
   const tableRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -52,10 +51,10 @@ const Roles = (props: IRolesProps): JSX.Element => {
 
   useEffect(() => {
     const { order } = filterValues;
-    const handleGetRoles = async () => await getRoles({ siteId, order });
+    const handleGetRoles = async () => await getRoles({ siteId, order: order[0]?.value.toString() });
     handleGetRoles();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentFilterQuery]);
+  }, [filterValues]);
 
   useEffect(() => {
     if (wrapperRef.current) {
@@ -86,20 +85,11 @@ const Roles = (props: IRolesProps): JSX.Element => {
     currPage: page,
   };
 
-  const sortItems = async (orderPointer: string, isAscending: boolean) => {
+  const sortItems = async (orderPointer: IQueryValue[], isAscending: boolean) => {
     setPage(firstPage);
-    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    const sortedState = getSortedListStatus(orderPointer[0].value.toString(), isAscending);
     setSortedListStatus(sortedState);
-    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
-  };
-
-  const filterItems = async (filterPointer: string, filtersSelected: string) => {
-    setPage(firstPage);
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection("order", orderPointer, isAscending);
   };
 
   const activateCurrentRoles = (active: boolean) => {
@@ -153,7 +143,6 @@ const Roles = (props: IRolesProps): JSX.Element => {
       checkState={checkState}
       isScrolling={isScrolling}
       sortItems={sortItems}
-      filterItems={filterItems}
       sortedListStatus={sortedListStatus}
       isSiteView={isSiteView}
       roles={roles}

package/src/modules/Users/UserList/BulkHeader/TableHeader/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { CheckField, TableCounter, SiteFilter, NameFilter, RoleFilter } from "@ax/components";
-import { IRole } from "@ax/types";
+import { IQueryValue, IRole } from "@ax/types";
 
 import * as S from "./style";
 
@@ -69,19 +69,6 @@ const TableHeader = (props: IProps): JSX.Element => {
               pointer="filterSites"
               center={false}
               label="Sites"
-              selectAllOption="noFilter"
-              filters={[
-                {
-                  name: "noFilter",
-                  value: "noFilter",
-                  title: "All",
-                },
-                {
-                  name: "all",
-                  value: "all",
-                  title: "Access to all sites",
-                },
-              ]}
             />
           </S.SiteWrapper>
           <S.StatusHeader />
@@ -99,10 +86,10 @@ interface IProps {
   isScrolling: boolean;
   isSiteView: boolean;
   selectAllItems: () => void;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
-  sortItems: any;
-  sortedListStatus: any;
-  filterValues: any;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
+  sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
+  sortedListStatus: { isAscending: boolean; sortedByName: boolean; sortedByDateCreated: boolean };
+  filterValues: Record<string, IQueryValue[]>;
   roles: IRole[];
 }