@griddo/ax 10.3.23 → 10.3.25

package/src/modules/Settings/Integrations/BulkHeader/TableHeader/index.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 
-import { CheckField, NameFilter, TableCounter, CheckGroupFilter, StateFilter } from "@ax/components";
+import { CheckField, TableCounter, CheckGroupFilter, StateFilter } from "@ax/components";
+import { IQueryValue } from "@ax/types";
+
 import * as S from "./style";
 
 const TableHeader = (props: IProps): JSX.Element => {
-  const { totalItems, selectAllItems, isScrolling, filterItems, filterValues, sortItems, sortedListStatus } = props;
+  const { totalItems, selectAllItems, isScrolling, filterItems, filterValues } = props;
 
   const filters = [
     {
@@ -29,8 +31,6 @@ const TableHeader = (props: IProps): JSX.Element => {
     },
   ];
 
-  const sortByName = (orderPointer: string, isAscendent: boolean) => sortItems("name", isAscendent);
-
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
@@ -44,9 +44,7 @@ const TableHeader = (props: IProps): JSX.Element => {
           error={false}
         />
       </S.CheckHeader>
-      <S.NameHeader>
-        Name
-      </S.NameHeader>
+      <S.NameHeader>Name</S.NameHeader>
       <S.DescriptionHeader></S.DescriptionHeader>
       <S.AppliedOnHeader>
         <CheckGroupFilter
@@ -72,10 +70,8 @@ interface IProps {
   totalItems: number;
   isScrolling: boolean;
   selectAllItems: () => void;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
-  filterValues: any;
-  sortItems: (orderPointer: string, isAscending: boolean) => void;
-  sortedListStatus: { isAscending: boolean; sortedByTitle: boolean };
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
+  filterValues: Record<string, IQueryValue[]>;
 }
 
 export default TableHeader;

package/src/modules/Settings/Integrations/BulkHeader/index.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
+import { IQueryValue } from "@ax/types";
+
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
@@ -12,8 +14,6 @@ const BulkHeader = (props: IProps): JSX.Element => {
     isScrolling,
     filterItems,
     filterValues,
-    sortItems,
-    sortedListStatus,
     bulkActions,
   } = props;
 
@@ -31,8 +31,6 @@ const BulkHeader = (props: IProps): JSX.Element => {
       isScrolling={isScrolling}
       filterItems={filterItems}
       filterValues={filterValues}
-      sortItems={sortItems}
-      sortedListStatus={sortedListStatus}
     />
   );
 };
@@ -44,10 +42,8 @@ interface IProps {
   selectAllItems: () => void;
   totalItems: number;
   isScrolling: boolean;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
-  filterValues: any;
-  sortItems: (orderPointer: string, isAscending: boolean) => void;
-  sortedListStatus: { isAscending: boolean; sortedByTitle: boolean };
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
+  filterValues: Record<string, IQueryValue[]>;
   bulkActions: { icon: string; text: string; action: () => void }[];
 }
 

package/src/modules/Settings/Integrations/hooks.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { IQueryValue } from "@ax/types";
 
 const useSortedListStatus = () => {
   const sortedInitialState: { isAscending: boolean; sortedByTitle: boolean } = {
@@ -15,56 +16,59 @@ const useSortedListStatus = () => {
 };
 
 const useFilterQuery = () => {
-  const initialQueryValues = {
-    order: "",
-    filterApplication: "all",
-    filterState: "all",
+  const initialQueryValues: Record<string, IQueryValue[]> = {
+    filterApplication: [{ value: "all", label: "All" }],
+    filterState: [{ value: "all", label: "All" }],
   };
 
   const [query, setQuery] = useState(initialQueryValues);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
 
-  const setFilterQuery = (filterValues: any) => {
-    const { order, filterApplication, filterState } = filterValues;
+  const setFilterQuery = (filterValues: Record<string, IQueryValue[]>) => {
+    const { filterApplication, filterState } = filterValues;
     let filterQuery = "";
 
-    const currentQuery = (pointer: string, values: string) => {
-      return filterQuery.concat(`&${pointer}=${values}`);
+    const currentQuery = (pointer: string, values: IQueryValue[]): string => {
+      const stringValues = Array.isArray(values)
+        ? values.map((value) => (value.value !== "all" ? value.value : "")).join(",")
+        : "";
+
+      return !stringValues.length ? filterQuery : filterQuery.concat(`&${pointer}=${stringValues}`);
     };
 
-    const isNotInitialValue = (pointer: "order" | "filterApplication" | "filterState") => {
+    const isNotInitialValue = (pointer: "filterApplication" | "filterState") => {
       return filterValues[pointer] && initialQueryValues[pointer] !== filterValues[pointer];
     };
 
-    if (isNotInitialValue("order")) filterQuery = currentQuery("order", order);
     if (isNotInitialValue("filterApplication")) filterQuery = currentQuery("filterApplication", filterApplication);
     if (isNotInitialValue("filterState")) filterQuery = currentQuery("filterState", filterState);
 
-    return filterQuery;
+    setCurrentFilterQuery(filterQuery);
   };
 
-  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
-    const { order, filterApplication, filterState } = query;
-    const orderMethod = isAscendent ? "asc" : "desc";
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[]) => {
+    const { filterApplication, filterState } = query;
     const filterValues = {
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
       filterApplication: pointer === "filterApplication" ? filter : filterApplication,
       filterState: pointer === "filterState" ? filter : filterState,
     };
 
     setQuery(filterValues);
-
-    return filterValues;
+    setFilterQuery(filterValues);
   };
 
-  const resetFilterQuery = () => setQuery(initialQueryValues);
+  const resetFilterQuery = () => {
+    setQuery(initialQueryValues);
+    setCurrentFilterQuery("");
+  }
 
   const isFiltered = Object.keys(query).some((key: any) => query[key as never] !== initialQueryValues[key as never]);
 
   return {
     setFiltersSelection,
-    setFilterQuery,
     resetFilterQuery,
     filterValues: query,
+    filterQuery: currentFilterQuery,
     isFiltered,
   };
 };

package/src/modules/Settings/Integrations/index.tsx

@@ -2,16 +2,15 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
 
-import { IEmptyStateProps, IIntegration, IRootState } from "@ax/types";
-import { MainWrapper, ErrorToast, TableList, EmptyState, Toast } from "@ax/components";
+import { IEmptyStateProps, IIntegration, IQueryValue, IRootState } from "@ax/types";
+import { MainWrapper, ErrorToast, TableList, EmptyState, Toast, FilterTagsBar } from "@ax/components";
 import { integrationsActions } from "@ax/containers/Integrations";
 import { appActions } from "@ax/containers/App";
 import { useBulkSelection, useEmptyState, useModal, usePermission, useToast } from "@ax/hooks";
 
 import BulkHeader from "./BulkHeader";
 import IntegrationItem from "./IntegrationItem";
-import { useFilterQuery, useSortedListStatus } from "./hooks";
-import { getSortedListStatus } from "./utils";
+import { useFilterQuery } from "./hooks";
 import { DeactivateModal, DeleteModal } from "./atoms";
 
 import * as S from "./style";
@@ -37,9 +36,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 
   const [isScrolling, setIsScrolling] = useState(false);
   const tableRef = useRef<HTMLDivElement>(null);
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
-  const { setFiltersSelection, setFilterQuery, filterValues, isFiltered } = useFilterQuery();
-  const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
+  const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery, isFiltered } = useFilterQuery();
   const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
   const { isOpen: isOpenDeactivate, toggleModal: toggleModalDeactivate } = useModal();
   const {
@@ -73,11 +70,11 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
   const getParams = useCallback(() => {
     const params = {
       pagination: false,
-      filter: currentFilterQuery,
+      filter: filterQuery,
     };
 
     return params;
-  }, [currentFilterQuery]);
+  }, [filterQuery]);
 
   useEffect(() => {
     const params = getParams();
@@ -88,7 +85,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
       resetIntegrations();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSite, currentFilterQuery]);
+  }, [currentSite, filterQuery]);
 
   const {
     resetBulkSelection,
@@ -126,20 +123,8 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 
   const handleSelectAll = () => selectAllItems();
 
-  const sortItems = async (orderPointer: string, isAscending: boolean) => {
-    const sortedState = getSortedListStatus(orderPointer, isAscending);
-    setSortedListStatus(sortedState);
-
-    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
-  };
-
-  const filterItems = async (filterPointer: string, filtersSelected: string) => {
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
-  };
+  const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) =>
+    setFiltersSelection(filterPointer, filtersSelected);
 
   const bulkActions: { icon: string; text: string; action: () => void | Promise<void> }[] =
     isAllowedToDeleteIntegrations
@@ -170,8 +155,6 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
       isScrolling={isScrolling}
       filterItems={filterItems}
       filterValues={filterValues}
-      sortItems={sortItems}
-      sortedListStatus={sortedListStatus}
       bulkActions={bulkActions}
     />
   );
@@ -253,6 +236,11 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
     });
   });
 
+  const filterLabels: Record<string, string> = {
+    filterApplication: "Applied on",
+    filterState: "State",
+  };
+
   return (
     <MainWrapper backLink={false} title="Add-ons" rightButton={rightButtonProps}>
       <S.Wrapper data-testid="integrations-main-wrapper">
@@ -264,6 +252,14 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
           </S.TitleWrapper>
           <S.TableWrapper>
             <TableList tableHeader={TableHeader} onScroll={onScroll} hasFixedHeader={true} tableRef={tableRef}>
+              <S.SearchTags>
+                <FilterTagsBar
+                  filters={filterValues}
+                  setFilters={setFiltersSelection}
+                  resetFilters={resetFilterQuery}
+                  labels={filterLabels}
+                />
+              </S.SearchTags>
               {isEmpty ? (
                 <S.EmptyWrapper>
                   <EmptyState {...emptyStateProps} />

package/src/modules/Settings/Integrations/style.tsx

@@ -54,6 +54,12 @@ const OrderNote = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
+const SearchTags = styled.div`
+  & > div:nth-child(1) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
 export {
   Wrapper,
   ContentWrapper,
@@ -64,4 +70,5 @@ export {
   EmptyWrapper,
   ModalContent,
   OrderNote,
+  SearchTags,
 };

package/src/modules/Sites/SitesList/GridView/GridHeaderFilter/index.tsx

@@ -1,18 +1,19 @@
 import React from "react";
 
 import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
 const GridHeaderFilter = ({ sortItems, sortedState }: IGridHeaderFilterProps): JSX.Element => {
   const { isAscending, sortedByTitle, sortedByLastAccess, sortedByDateCreated } = sortedState;
 
-  const sortAscendingName = () => sortItems("name", true);
-  const sortDescendingName = () => sortItems("name", false);
-  const sortAscendingLastAccess = () => sortItems("lastAccess", true);
-  const sortDescendingLastAccess = () => sortItems("lastAccess", false);
-  const sortAscendingDateCreated = () => sortItems("dateCreated", true);
-  const sortDescendingDateCreated = () => sortItems("dateCreated", false);
+  const sortAscendingName = () => sortItems([{ value: "name", label: "name" }], true);
+  const sortDescendingName = () => sortItems([{ value: "name", label: "name" }], false);
+  const sortAscendingLastAccess = () => sortItems([{ value: "lastAccess", label: "lastAccess" }], true);
+  const sortDescendingLastAccess = () => sortItems([{ value: "lastAccess", label: "lastAccess" }], false);
+  const sortAscendingDateCreated = () => sortItems([{ value: "dateCreated", label: "dateCreated" }], true);
+  const sortDescendingDateCreated = () => sortItems([{ value: "dateCreated", label: "dateCreated" }], false);
 
   const SortedStateArrow = () =>
     isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
@@ -66,7 +67,7 @@ const GridHeaderFilter = ({ sortItems, sortedState }: IGridHeaderFilterProps): J
 
 export interface IGridHeaderFilterProps {
   sortedState: any;
-  sortItems(orderPointer: string, isAscending: boolean): any;
+  sortItems(orderPointer: IQueryValue[], isAscending: boolean): any;
 }
 
 export default GridHeaderFilter;

package/src/modules/Sites/SitesList/ListView/BulkHeader/TableHeader/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { CheckField, TableCounter, LastAccessFilter, NameFilter, LiveFilter } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -16,12 +17,16 @@ const TableHeader = (props: IProps): JSX.Element => {
     filterValues,
   } = props;
 
-  const liveStatusValue: any = {
+  const liveStatusValue: Record<string, string> = {
     all: "all",
     online: "active",
     offline: "offline",
   };
 
+  const liveFilterValue = filterValues.liveStatus.length
+    ? [{ value: liveStatusValue[filterValues.liveStatus[0].value], label: filterValues.liveStatus[0].label }]
+    : [];
+
   return (
     <S.TableHeader isScrolling={isScrolling} data-testid="sites-table-header">
       <S.CheckHeader>
@@ -40,7 +45,7 @@ const TableHeader = (props: IProps): JSX.Element => {
       </S.NameWrapper>
       <S.DomainHeader>Domain</S.DomainHeader>
       <S.LiveHeader>
-        <LiveFilter filterItems={filterItems} value={liveStatusValue[filterValues.liveStatus]} hasBasicStatus={true} />
+        <LiveFilter filterItems={filterItems} value={liveFilterValue} hasBasicStatus={true} />
       </S.LiveHeader>
       <S.LastAccessCell>
         <LastAccessFilter sortItems={sortItems} sortedState={sortedListStatus} />
@@ -55,10 +60,10 @@ interface IProps {
   totalItems: number;
   selectAllItems: () => void;
   checkState: Record<string, 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 };
-  filterValues: any;
+  filterValues: Record<string, IQueryValue[]>;
 }
 
 export default TableHeader;

package/src/modules/Sites/SitesList/ListView/BulkHeader/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { BulkSelectionOptions } from "@ax/components";
 import { usePermission } from "@ax/hooks";
+import { IQueryValue } from "@ax/types";
 
 import TableHeader from "./TableHeader";
 
@@ -75,10 +76,10 @@ export interface IBulkHeaderProps {
   selectItems: () => void;
   selectAllItems: () => void;
   totalItems: number;
-  sortItems: (orderPointer: string, isAscending: any) => void;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  sortItems: (orderPointer: IQueryValue[], isAscending: any) => void;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   sortedListStatus: any;
-  filterValues: any;
+  filterValues: Record<string, IQueryValue[]>;
 }
 
 export default BulkHeader;

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { ISitesQueryValues } from "@ax/types";
+import { IQueryValue, ISitesQueryValues } from "@ax/types";
 
 const useSortedListStatus = () => {
   const sortedInitialState: {
@@ -22,20 +22,21 @@ const useSortedListStatus = () => {
   };
 };
 
-const useFilterQuery = (defaultValues?: { order: string; liveStatus: string }): ISitesFilterQuery => {
-  const initialQueryValues = {
-    order: defaultValues ? defaultValues.order : "lastAccess-desc",
-    liveStatus: defaultValues ? defaultValues.liveStatus : "all",
+const useFilterQuery = (defaultValues?: { order: IQueryValue[]; liveStatus: IQueryValue[] }): ISitesFilterQuery => {
+  const initialQueryValues: Record<string, IQueryValue[]> = {
+    order: [{ value: "lastAccess-desc", label: "lastAccess-desc"}],
+    liveStatus: [{ value: "all", label: "All"}],
   };
 
-  const [query, setQuery] = useState(initialQueryValues);
+  const [query, setQuery] = useState(defaultValues || initialQueryValues);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
 
   const setFilterQuery = (filterValues: ISitesQueryValues) => {
     const { order, liveStatus } = filterValues;
 
     let filterQuery = "";
-    const currentQuery = (pointer: string, values: string) => {
-      return `&${pointer}=${values}`;
+    const currentQuery = (pointer: string, values: IQueryValue[]) => {
+      return values.length && values[0].value !== "all" ? `&${pointer}=${values[0].value}` : "";
     };
 
     const isNotInitialValue = (pointer: keyof ISitesQueryValues) => {
@@ -52,34 +53,39 @@ const useFilterQuery = (defaultValues?: { order: string; liveStatus: string }):
       filterQuery = `${filterQuery}${query}`;
     }
 
-    return filterQuery;
+    setCurrentFilterQuery(filterQuery);
   };
 
-  const setFiltersSelection = (pointer: string, filter: string, orderMethod?: string) => {
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
     const { order, liveStatus } = query;
-    const liveStatusValue: any = {
+    const orderMethod = isAscendent ? "asc" : "desc";
+    const liveStatusValue: Record<string, string> = {
       all: "all",
       active: "online",
       offline: "offline",
     };
 
+    const liveValue = filter.length > 0 ? [{value: liveStatusValue[filter[0].value], label: filter[0].label}] : []
+
     const filterValues = {
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
-      liveStatus: pointer === "liveStatus" ? liveStatusValue[filter] : liveStatus,
+      order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
+      liveStatus: pointer === "liveStatus" ? liveValue : liveStatus,
     };
 
     setQuery(filterValues);
-
-    return filterValues;
+    setFilterQuery(filterValues);
   };
 
-  const resetFilterQuery = () => setQuery(initialQueryValues);
+  const resetFilterQuery = () => {
+    setQuery(initialQueryValues);
+    setCurrentFilterQuery("");
+  }
 
   return {
     setFiltersSelection,
-    setFilterQuery,
     resetFilterQuery,
     filterValues: query,
+    filterQuery: currentFilterQuery,
   };
 };
 
@@ -92,10 +98,10 @@ const useIsMount = () => {
 };
 
 interface ISitesFilterQuery {
-  setFiltersSelection(pointer: string, filter: string, orderMethod?: string): ISitesQueryValues;
-  setFilterQuery(filterValues: ISitesQueryValues): string;
+  setFiltersSelection(pointer: string, filter: IQueryValue[], isAscendent?: boolean): void;
   resetFilterQuery(): void;
-  filterValues: ISitesQueryValues;
+  filterValues: Record<string, IQueryValue[]>;
+  filterQuery: string;
 }
 
 export { useSortedListStatus, useFilterQuery, useIsMount };

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

@@ -3,10 +3,21 @@ import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { ICheck, IGetSitesParams, IRootState, ISettingsForm, ISite, ISiteListConfig } from "@ax/types";
+import { ICheck, IGetSitesParams, IQueryValue, IRootState, ISettingsForm, ISite, ISiteListConfig } from "@ax/types";
 import { IError } from "@ax/containers/App/reducer";
 import { useBulkSelection, useModal, usePermission } from "@ax/hooks";
-import { MainWrapper, Modal, ErrorToast, Icon, IconAction, TableList, EmptyState, Pagination } from "@ax/components";
+import {
+  MainWrapper,
+  Modal,
+  ErrorToast,
+  Icon,
+  IconAction,
+  TableList,
+  EmptyState,
+  Pagination,
+  SearchTagsBar,
+  FilterTagsBar,
+} from "@ax/components";
 
 import { useFilterQuery, useSortedListStatus, useIsMount } from "./hooks";
 import { filterByStatus, getSortedListStatus } from "./utils";
@@ -59,8 +70,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     currentConfig.displayRecentSites
   );
   const [displayMode, setDisplayMode] = useState<string | "list" | "grid">(currentConfig.mode);
-  const [searchQuery, setSearchQuery] = useState<string | null>("");
-  const [currentFilterQuery, setCurrentFilterQuery] = useState(currentConfig.filter);
+  const [searchQuery, setSearchQuery] = useState<string>("");
   const tableRef = useRef<HTMLDivElement>(null);
   const errorRef = useRef<HTMLDivElement>(null);
 
@@ -84,20 +94,22 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     : undefined;
 
   const { setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery(currentConfig.filterValues);
+  const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery } = useFilterQuery(
+    currentConfig.filterValues
+  );
 
   const getParams = useCallback((): IGetSitesParams => {
-    const query = searchQuery ? `&query=${searchQuery}` : "";
+    const query = searchQuery.length ? `&query=${searchQuery}` : "";
     return {
       pagination: true,
       language: undefined,
       recentSitesNumber: 7,
       page,
       itemsPerPage,
-      filterQuery: currentFilterQuery,
+      filterQuery: filterQuery,
       searchQuery: query,
     };
-  }, [currentFilterQuery, searchQuery, page]);
+  }, [filterQuery, searchQuery, page]);
 
   useEffect(() => {
     if (token) {
@@ -162,27 +174,22 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     setDisplayMode(mode);
   };
 
-  const sortItems = (orderPointer: string, isAscending: boolean) => {
+  const sortItems = (orderPointer: IQueryValue[], isAscending: boolean) => {
     setPage(firstPage);
-    const orderMethod = isAscending ? "asc" : "desc";
-    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    const orderString = orderPointer[0].value.toString();
+    const sortedState = getSortedListStatus(orderString, isAscending);
     setSortedListStatus(sortedState);
-    const pointer = orderPointer === "title" ? "name" : orderPointer;
-    const filtersSelection = setFiltersSelection("order", pointer, orderMethod);
-    const filterQuery = setFilterQuery(filtersSelection);
+    const pointer = orderString === "title" ? [{ value: "name", label: "value" }] : orderPointer;
+    setFiltersSelection("order", pointer, isAscending);
     const updatedConfig = { ...currentConfig, filter: filterQuery, sortedListStatus: sortedState };
     setListConfig(updatedConfig);
-    setCurrentFilterQuery(filterQuery);
   };
 
-  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+  const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) => {
     setPage(firstPage);
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
+    setFiltersSelection(filterPointer, filtersSelected);
     const updatedConfig = { ...currentConfig, filter: filterQuery };
     setListConfig(updatedConfig);
-
-    setCurrentFilterQuery(filterQuery);
   };
 
   const RecentSitesHeader = () => (
@@ -313,6 +320,9 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     const showPagination = totalItems > itemsPerPage;
     return (
       <>
+        <S.SearchTagsGrid>
+          <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+        </S.SearchTagsGrid>
         <S.GridList data-testid="sites-grid-list" isEmpty={sites.length === 0} fullWidth={sites.length >= 5}>
           {mappedSites}
         </S.GridList>
@@ -325,9 +335,24 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     );
   };
 
+  const filterLabels = {
+    liveStatus: "Live",
+  };
+
   const ListTable = () => (
     <TableList tableHeader={Header} pagination={pagination} hasFixedHeader={true} tableRef={tableRef}>
-      {mappedSites}
+      <>
+        <S.SearchTags>
+          <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+          <FilterTagsBar
+            filters={filterValues}
+            setFilters={setFiltersSelection}
+            resetFilters={resetFilterQuery}
+            labels={filterLabels}
+          />
+        </S.SearchTags>
+        {mappedSites}
+      </>
     </TableList>
   );
 
@@ -340,7 +365,13 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
   const handleAnimationEnd = () => setHasAnimation(false);
 
   return (
-    <MainWrapper title="Sites" rightButton={rightButtonProps} searchAction={setSearchQuery} hasAnimation={hasAnimation}>
+    <MainWrapper
+      title="Sites"
+      rightButton={rightButtonProps}
+      searchAction={setSearchQuery}
+      hasAnimation={hasAnimation}
+      searchValue={searchQuery}
+    >
       <ErrorToast ref={errorRef} />
       <S.SitesListWrapper className={hasAnimation ? "animate" : ""}>
         {recentSites?.length > 0 ? <RecentSitesList /> : null}