@griddo/ax 1.69.7 → 1.71.0

package/src/components/Fields/TimeField/style.tsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+const FieldWrapper = styled.div<{ error?: boolean; disabled?: boolean }>`
+  display: flex;
+  height: ${(p) => p.theme.spacing.l};
+  max-width: ${(p) => `calc(8 * ${p.theme.spacing.l})`};
+  min-width: ${(p) => `calc(5 * ${p.theme.spacing.l})`};
+  width: 100%;
+  border: 1px solid
+    ${(p) => (p.error ? p.theme.color.error : p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.uiLine)};
+  border-radius: ${(p) => p.theme.radii.s};
+  background: ${(p) => p.theme.color.uiBackground02};
+  padding: ${(p) => `0 ${p.theme.spacing.s}`};
+  align-items: center;
+
+  &:focus-within {
+    border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.interactive01)};
+  }
+`;
+
+const IconWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.m};
+  height: ${(p) => p.theme.spacing.m};
+  margin-left: auto;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+const SelectWrapper = styled.div`
+  padding-top: 4px;
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+export { FieldWrapper, IconWrapper, SelectWrapper };

package/src/components/Fields/index.tsx

@@ -29,6 +29,7 @@ import SliderField from "./SliderField";
 import TagField from "./TagField";
 import TextArea from "./TextArea";
 import TextField from "./TextField";
+import TimeField from "./TimeField";
 import ToggleField from "./ToggleField";
 import UniqueCheck from "./UniqueCheck";
 import UrlField from "./UrlField";
@@ -68,6 +69,7 @@ export {
   TagField,
   TextArea,
   TextField,
+  TimeField,
   ToggleField,
   UniqueCheck,
   UrlField,

package/src/components/FloatingMenu/index.tsx

@@ -64,7 +64,7 @@ const FloatingMenu = (props: IProps) => {
       onMouseLeave={handleMouseLeave}
       data-testid="floating-menu"
     >
-      <S.ButtonWrapper ref={button}>
+      <S.ButtonWrapper ref={button} data-testid="floating-menu-button">
         <Button />
       </S.ButtonWrapper>
       {isOpen && (

package/src/components/Gallery/GalleryFilters/Type/index.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+
+import { FloatingMenu, Icon, ListTitle, ListItem } from "@ax/components";
+
+import { areEquals } from "@ax/helpers";
+
+import * as S from "./style";
+
+const Type = ({ filterItems }: ITypeProps): JSX.Element => {
+  const initialState = ["all"];
+  const [selectedValue, setSelectedValue] = useState(initialState);
+
+  const setQuery = (selection: any) => {
+    if (!selection.length) {
+      selection = initialState;
+    }
+    setSelectedValue([selection]);
+    const pointer = "format";
+    filterItems(pointer, selection);
+  };
+
+  const isActive = !areEquals(selectedValue, initialState);
+
+  const Header = () => (
+    <S.Type isActive={isActive}>
+      Media type
+      <S.IconsWrapper>
+        {isActive && <Icon name="Filter" size="16" />}
+        <S.InteractiveArrow>
+          <Icon name="DownArrow" size="16" />
+        </S.InteractiveArrow>
+      </S.IconsWrapper>
+    </S.Type>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="center" closeOnSelect={true}>
+      <ListTitle>Filter by type</ListTitle>
+      <ListItem isSelected={selectedValue.includes("all")} onClick={() => setQuery("all")}>All</ListItem>
+      <ListItem isSelected={selectedValue.includes("bitmap")} onClick={() => setQuery("bitmap")}>Image</ListItem>
+      <ListItem isSelected={selectedValue.includes("vectorial")} onClick={() => setQuery("vectorial")}>Icons</ListItem>
+    </FloatingMenu>
+  );
+};
+
+interface ITypeProps {
+  filterItems(pointer: string, filter: string): void;
+}
+
+export default Type;

package/src/components/Gallery/GalleryFilters/Type/style.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const Type = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
+  width: 90px;
+  white-space: nowrap;
+  justify-content: center;
+  flex-wrap: nowrap;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+const ChecksWrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
+`;
+
+export { Type, IconsWrapper, InteractiveArrow, ChecksWrapper };

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -71,7 +71,8 @@ const GalleryDetailPanel = (props: IProps) => {
 
   const handleSetAsGlobal = async () => {
     const saveAsGlobal = !isGlobalTab && addToGlobal.isChecked && imageSelected?.file;
-    const image = saveAsGlobal && imageSelected && (await uploadImage(imageSelected.file, "global"));
+    const image =
+      saveAsGlobal && imageSelected && imageSelected.file && (await uploadImage(imageSelected.file, "global"));
     if (image && image.id) await updateImage(image.id, imageForm);
     setAddToGlobal({ value: "addToGlobal", isChecked: false });
   };

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/style.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import styled from "styled-components";
 import { Button } from "@ax/components";
 
@@ -163,9 +164,8 @@ export const FilesInput = styled.input<{ ref: any }>`
   display: none;
 `;
 
-export const FilesButton = styled(Button).attrs((props: any) => ({
-  ref: props.ref,
-}))<{ ref: any }>`
+const _Button: any = React.forwardRef((props: any, ref?: React.Ref<HTMLDivElement>) => <Button {...props} />);
+export const FilesButton = styled(_Button)`
   margin-top: ${(p) => p.theme.spacing.xs};
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;

package/src/components/Gallery/hooks.tsx

@@ -21,13 +21,14 @@ const useSortedListStatus = () => {
 const useFilterQuery = () => {
   const initialQueryValues = {
     orientation: "",
-    order: ""
+    order: "",
+    format: ""
   };
 
   const [query, setQuery] = useState(initialQueryValues);
 
   const setFilterQuery = (filterValues: any) => {
-    const { orientation, order } = filterValues;
+    const { orientation, order, format } = filterValues;
     let filterQuery = "";
 
     const currentQuery = (pointer: string, values: string) => {
@@ -44,15 +45,20 @@ const useFilterQuery = () => {
       filterQuery = currentQuery("order", order);
     }
 
+    if (format) {
+      filterQuery = currentQuery("format", format);
+    }
+
     return filterQuery;
   };
 
   const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
-    const { orientation, order } = query;
+    const { orientation, order, format } = query;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       orientation: pointer === "orientation" ? filter : orientation,
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order
+      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      format: pointer === "format" ? filter : format,
     };
 
     setQuery(filterValues);

package/src/components/Gallery/index.tsx

@@ -8,6 +8,7 @@ import { Icon, Loader, Tabs, SearchField, EmptyState, ErrorToast, Notification }
 
 import Orientation from "./GalleryFilters/Orientation";
 import SortBy from "./GalleryFilters/SortBy";
+import Type from "./GalleryFilters/Type";
 import GalleryPanel from "./GalleryPanel";
 import * as S from "./style";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
@@ -136,6 +137,7 @@ const Gallery = (props: IProps): JSX.Element => {
           )}
           <S.Filters>
             <Orientation filterItems={filterItems} />
+            <Type filterItems={filterItems} />
             <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
           </S.Filters>
         </S.Header>

package/src/components/Icon/index.tsx

@@ -22,7 +22,7 @@ const Icon = (props: IProps) => {
   const Svg = getImage(name);
 
   if (Svg) {
-    return <Svg data-testid="iconComponent" height={size} width={size} viewBox="0 0 24 24" fill={fill} />;
+    return <Svg data-testid="icon-component" height={size} width={size} viewBox="0 0 24 24" fill={fill} />;
   }
 
   return null;

package/src/components/Loading/index.tsx

@@ -5,7 +5,7 @@ import * as S from "./style";
 
 const Loading = (): JSX.Element => {
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="loading-wrapper">
       <S.LoadingWrapper>
         <Loader name="circle" />
       </S.LoadingWrapper>

package/src/components/Pagination/index.tsx

@@ -36,7 +36,7 @@ const Pagination = (props: IProps) => {
   const CurrentPage = size === "S" ? currPage : <S.Input type="text" value={currPage} onChange={_handleChange} />;
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="pagination-wrapper">
       <S.Literal size={size}>
         Page {CurrentPage} of {lastPage}
       </S.Literal>

package/src/components/SideModal/SideModalOption/index.tsx

@@ -14,7 +14,9 @@ const SideModalOption = (props: IProps) => {
 
   const isNavigationDefault = ["header", "footer"].includes(option.type);
 
-  const thumbnailProps = getThumbnailData(option, theme);
+  const navigationThumbnail = isNavigationDefault &&
+    option.thumbnail && { alt: option.title, src: option.thumbnail.url };
+  const thumbnailProps = navigationThumbnail || getThumbnailData(option, theme);
 
   const optionParam = option.component || option;
   const label = isNavigationDefault ? option.title : getDisplayName(optionParam);
@@ -25,7 +27,7 @@ const SideModalOption = (props: IProps) => {
   };
 
   return (
-    <S.Item onClick={setOption}>
+    <S.Item onClick={setOption} data-testid="side-modal-option">
       <S.Thumbnail {...thumbnailProps} />
       {label}
     </S.Item>

package/src/components/SideModal/index.tsx

@@ -137,7 +137,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
   return isOpen
     ? createPortal(
-        <S.Wrapper ref={node} optionsType={optionsType}>
+        <S.Wrapper ref={node} optionsType={optionsType} data-testid="side-modal">
           <S.Header>
             <S.Title>{optionsType}</S.Title>
             {showSearch && optionsType !== "components" && (

package/src/components/TableList/index.tsx

@@ -5,7 +5,7 @@ import { Loading, Pagination } from "@ax/components";
 
 import * as S from "./style";
 
-const TableList = (props: IPagesProps): JSX.Element => {
+const TableList = (props: ITableListProps): JSX.Element => {
   const { tableHeader, children, pagination, isLoading, onScroll, hasFixedHeader, tableRef } = props;
 
   const { totalItems, setPage, itemsPerPage, currPage } = pagination;
@@ -13,11 +13,11 @@ const TableList = (props: IPagesProps): JSX.Element => {
   const showPagination = totalItems > itemsPerPage;
 
   return (
-    <S.TableList onScroll={onScroll} ref={tableRef}>
-      <S.Table hasFixedHeader={hasFixedHeader}>
+    <S.TableList onScroll={onScroll} ref={tableRef} data-testid="table-list">
+      <S.Table>
         <>
-          <S.TableHeader hasFixedHeader={hasFixedHeader}>{tableHeader}</S.TableHeader>
-          {isLoading ? <Loading /> : <S.TableBody>{children}</S.TableBody>}
+          <S.TableHeader hasFixedHeader={hasFixedHeader} data-testid="table-list-header">{tableHeader}</S.TableHeader>
+          {isLoading ? <Loading /> : <S.TableBody data-testid="table-body">{children}</S.TableBody>}
         </>
       </S.Table>
       <S.PaginationWrapper>
@@ -33,7 +33,7 @@ const mapStateToProps = (state: IRootState) => ({
   isLoading: state.app.isLoading,
 });
 
-interface IPagesProps {
+export interface ITableListProps {
   tableHeader: JSX.Element | JSX.Element[];
   children: JSX.Element | JSX.Element[];
   pagination: {

package/src/components/TableList/style.tsx

@@ -6,7 +6,7 @@ const TableList = styled.div`
   overflow: auto;
 `;
 
-const Table = styled.div<{hasFixedHeader?: boolean}>`
+const Table = styled.div`
   width: 100%;
   min-height: calc(100% - ${(p) => p.theme.spacing.l} - ${(p) => p.theme.spacing.m});
   padding-bottom: ${(p) => p.theme.spacing.m};

package/src/components/Tabs/index.tsx

@@ -12,11 +12,17 @@ const Tabs = (props: ITabsProps): JSX.Element => {
 
   if (tabs) {
     return (
-      <S.TabsRow isInAppBar={isInAppBar} noMargins={noMargins}>
+      <S.TabsRow isInAppBar={isInAppBar} noMargins={noMargins} data-testid="tabs-row">
         {tabs.map((tab: any) => {
           const handleClick = () => setSelectedTab(tab);
           return (
-            <S.TabItem isInAppBar={isInAppBar} key={tab} active={tab === active} onClick={handleClick}>
+            <S.TabItem
+              isInAppBar={isInAppBar}
+              key={tab}
+              active={tab === active}
+              onClick={handleClick}
+              data-testid="tab"
+            >
               {tab}
             </S.TabItem>
           );
@@ -27,11 +33,17 @@ const Tabs = (props: ITabsProps): JSX.Element => {
 
   if (icons) {
     return (
-      <S.TabsRow icons={true} isInAppBar={isInAppBar}>
+      <S.TabsRow icons={true} isInAppBar={isInAppBar} data-testid="icons-tabs-row">
         {icons.map((tab: ITabIcon) => {
           const handleClick = () => setSelectedTab(tab.name);
           return (
-            <S.TabItem key={tab.name} active={tab.name === active} onClick={handleClick} inversed={inversed}>
+            <S.TabItem
+              key={tab.name}
+              active={tab.name === active}
+              onClick={handleClick}
+              inversed={inversed}
+              data-testid="icon-tab"
+            >
               <S.TabIcon>
                 <Tooltip content={tab.text} bottom>
                   <Icon name={tab.name} />
@@ -44,10 +56,10 @@ const Tabs = (props: ITabsProps): JSX.Element => {
     );
   }
 
-  return <S.TabsRow />;
+  return <S.TabsRow data-testid="empty-tabs-row"/>;
 };
 
-interface ITabsProps {
+export interface ITabsProps {
   tabs?: any[];
   icons?: ITabIcon[];
   isInAppBar?: boolean;
@@ -57,7 +69,7 @@ interface ITabsProps {
   inversed?: boolean;
 }
 
-interface ITabIcon {
+export interface ITabIcon {
   name: string;
   text: string;
 }

package/src/components/Tag/index.tsx

@@ -13,7 +13,7 @@ const Tag = (props: ITagProps): JSX.Element => {
   };
 
   const deleteIcon = onDeleteAction ? (
-    <S.IconWrapper onClick={handleClick} data-testid="tagComponent">
+    <S.IconWrapper onClick={handleClick} data-testid="delete-icon-wrapper">
       <Icon name="close" size="16" />
     </S.IconWrapper>
   ) : null;
@@ -21,18 +21,18 @@ const Tag = (props: ITagProps): JSX.Element => {
   switch (type) {
     case "status":
       return (
-        <S.TagStatus>
+        <S.TagStatus data-testid="tag-status">
           <S.Bullet color={color} />
           {text}
         </S.TagStatus>
       );
     case "square":
-      return <S.TagSquare color={color}>{text}</S.TagSquare>;
+      return <S.TagSquare color={color} data-testid="tag-square">{text}</S.TagSquare>;
     default:
       return (
-        <S.TagFixed color={color}>
+        <S.TagFixed color={color} data-testid="tag-fixed">
           <S.TagText>
-            <S.Title>{text}</S.Title>
+            <S.Title data-testid="tag-fixed-title">{text}</S.Title>
             {deleteIcon}
           </S.TagText>
         </S.TagFixed>
@@ -40,7 +40,7 @@ const Tag = (props: ITagProps): JSX.Element => {
   }
 };
 
-interface ITagProps {
+export interface ITagProps {
   type?: "status" | "fixed" | "interactive" | "square" | undefined;
   text: string;
   color?: string;

package/src/components/Toast/index.tsx

@@ -5,7 +5,7 @@ import { Button, IconAction } from "@ax/components";
 
 import * as S from "./style";
 
-const Toast = (props: IProps) => {
+const Toast = (props: IToastProps) => {
   const { action, message, setIsVisible } = props;
   const toast = useRef<any>(null);
 
@@ -24,8 +24,8 @@ const Toast = (props: IProps) => {
   }, []);
 
   return createPortal(
-    <S.Wrapper ref={toast}>
-      <S.Text data-testid="toastMessage">{message}</S.Text>
+    <S.Wrapper ref={toast} data-testid="toast-wrapper">
+      <S.Text data-testid="toast-message">{message}</S.Text>
       <S.Buttons>
         {action &&
           <Button type="button" buttonStyle="lineInverse" onClick={action}>
@@ -39,7 +39,7 @@ const Toast = (props: IProps) => {
   );
 };
 
-interface IProps {
+export interface IToastProps {
   action?: () => void;
   message: string;
   setIsVisible: (visibility: boolean) => void;

package/src/components/Tooltip/index.tsx

@@ -3,7 +3,7 @@ import { useHandleClickOutside } from "@ax/hooks";
 
 import * as S from "./style";
 
-const Tooltip = (props: IProps): JSX.Element => {
+const Tooltip = (props: ITooltipProps): JSX.Element => {
   const { content, children, hideOnClick = true, bottom, left } = props;
 
   const initialState: IState = {
@@ -64,6 +64,7 @@ const Tooltip = (props: IProps): JSX.Element => {
   useEffect(() => {
     if (active && tipRef.current) {
       const clientRect = tipRef.current.getBoundingClientRect();
+
       const { left, right } = clientRect;
       const windowSize = window.innerWidth;
       if (left < 0) {
@@ -78,9 +79,10 @@ const Tooltip = (props: IProps): JSX.Element => {
   if (!content) return children;
 
   return (
-    <S.Tooltip data-testid="tooltipComponent" onMouseEnter={showTip} onMouseLeave={hideTip} onMouseDown={handleClick}>
+    <S.Tooltip data-testid="tooltip-component" onMouseEnter={showTip} onMouseLeave={hideTip} onMouseDown={handleClick}>
       <div ref={childrenRef}>{children}</div>
       <S.Tip
+        data-testid="tipComponent"
         active={active}
         childrenWidth={childrenWidth}
         bottom={bottom}
@@ -101,7 +103,7 @@ interface IState {
   fixOutOfBounds: number;
 }
 
-interface IProps {
+export interface ITooltipProps {
   content: string | boolean | undefined;
   children: any;
   hideOnClick?: boolean;

package/src/components/index.tsx

@@ -23,6 +23,7 @@ import {
   Select,
   TextArea,
   TextField,
+  TimeField,
   ToggleField,
   UniqueCheck,
   UrlField,
@@ -117,6 +118,7 @@ export {
   Select,
   TextArea,
   TextField,
+  TimeField,
   ToggleField,
   UniqueCheck,
   UrlField,

package/src/containers/Navigation/Defaults/actions.tsx

@@ -24,7 +24,7 @@ import {
 
 import { appActions } from "@ax/containers/App";
 
-import { getStateValues } from "./utils";
+import { getFormData, getStateValues } from "./utils";
 
 import {
   SET_EDITOR_CONTENT,
@@ -221,7 +221,7 @@ function getNavigationByType(type: string): (dispatch: Dispatch, getState: any)
   };
 }
 
-function createNavigation(): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function createNavigation(image: File | null): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const {
@@ -237,6 +237,8 @@ function createNavigation(): (dispatch: Dispatch, getState: any) => Promise<bool
       const navigationValues = { ...editorContent, site: currentSiteInfo.id, language: lang.id };
       const cleanValues = removeEditorIds(navigationValues);
 
+      const form = getFormData(cleanValues, image);
+
       const successAction = async (response: any) => {
         const updatedContent = { ...editorContent, ...response };
         generateContent(updatedContent, dispatch, getState);
@@ -248,7 +250,7 @@ function createNavigation(): (dispatch: Dispatch, getState: any) => Promise<bool
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
-      const callback = async () => navigation.createNavigation(cleanValues);
+      const callback = async () => navigation.createNavigation(form);
 
       return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {
@@ -261,7 +263,8 @@ function createNavigation(): (dispatch: Dispatch, getState: any) => Promise<bool
 function updateNavigation(
   navID: number,
   data: any,
-  fromEditor?: boolean
+  fromEditor?: boolean,
+  image?: File | null
 ): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
@@ -272,6 +275,8 @@ function updateNavigation(
 
       const cleanValues = removeEditorIds(data);
 
+      const form = getFormData(cleanValues, image);
+
       const successAction = async (response: any) => {
         if (fromEditor) {
           generateContent(response, dispatch, getState);
@@ -284,7 +289,7 @@ function updateNavigation(
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
-      const callback = async () => navigation.updateNavigation(navID, cleanValues);
+      const callback = async () => navigation.updateNavigation(navID, form);
 
       return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {

package/src/containers/Navigation/Defaults/utils.tsx

@@ -1,4 +1,4 @@
-export const getStateValues = (getState: any) => {
+const getStateValues = (getState: any) => {
   const {
     sites: { currentSiteInfo },
     navigation: {
@@ -10,9 +10,9 @@ export const getStateValues = (getState: any) => {
       footer,
       isNewTranslation,
       currentDefaultsContent,
-      selectedContent
+      selectedContent,
     },
-    app: { isSaving, isLoading }
+    app: { isSaving, isLoading },
   } = getState();
   const section = editorContent && editorContent[0];
   const { modules } = !!section && section;
@@ -31,6 +31,15 @@ export const getStateValues = (getState: any) => {
     isLoading,
     section,
     modules,
-    selectedContent
+    selectedContent,
   };
 };
+
+const getFormData = (values: any, image?: File | null): FormData => {
+  const form = new FormData();
+  form.append("navigation", JSON.stringify(values));
+  image && form.append("file", image);
+  return form;
+};
+
+export { getStateValues, getFormData };

package/src/containers/Sites/actions.tsx

@@ -10,6 +10,7 @@ import {
   SET_SAVED_SITE_INFO,
   DEFAULT_PARAMS,
   SET_CURRENT_SITE_ERROR_PAGES,
+  SET_CONTENT_FILTERS,
 } from "./constants";
 import {
   ISetSitesAction,
@@ -21,6 +22,7 @@ import {
   ISetCurrentSiteLanguagesAction,
   ISetSavedSiteInfoAction,
   ISetCurrentSiteErrorPages,
+  ISetContentFilters,
 } from "./interfaces";
 
 import { ISite, IGetSitePagesParams, ISettingsForm, IGetGlobalPagesParams, IPage } from "@ax/types";
@@ -77,6 +79,10 @@ function setCurrentSiteErrorPages(currentSiteErrorPages: number[]): ISetCurrentS
   return { type: SET_CURRENT_SITE_ERROR_PAGES, payload: { currentSiteErrorPages } };
 }
 
+function setContentFilters(contentFilters: Record<string, string> | null): ISetContentFilters {
+  return { type: SET_CONTENT_FILTERS, payload: { contentFilters } };
+}
+
 // TODO: hay que controlar que cuando da error la API borrar los sites ya guardados y sacar el error (ver los siguientes FIXME)
 function getSites(): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
@@ -507,4 +513,5 @@ export {
   removeUsersBulk,
   setCurrentSiteErrorPages,
   resetCurrentSiteErrorPages,
+  setContentFilters,
 };