@griddo/ax 10.4.16 → 10.4.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.4.16",
+  "version": "10.4.18",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -231,5 +231,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5eeddf8b9b7b05ffc7a61bc2b9f0f4da572a35cf"
+  "gitHead": "d7f921348096eb2997376ff2a12ca16001fc9a49"
 }

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

@@ -58,6 +58,7 @@ const CheckMark = styled.span<{
     color: white;
     border-width: ${(p) => (p.indeterminate ? "0 2px 0 0" : "0 2px 2px 0")};
     transform: ${(p) => (p.indeterminate ? "rotate(90deg)" : "rotate(45deg)")};
+    box-sizing: border-box;
   }
 
   &.light {

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -8,7 +8,7 @@ import { useBulkSelection, useModal, useToast } from "@ax/hooks";
 import { getComponentProps, containerToComponentArray, getTypefromKey, getModulesToPaste } from "../helpers";
 import AddItemButton from "./AddItemButton";
 import PasteModuleButton from "./PasteModuleButton";
-import BulkHeader from "./BulkHeader";
+import BulkHeader from "../BulkHeader";
 
 import * as S from "./style";
 

package/src/components/Fields/ComponentArray/SameComponentArray/index.tsx

@@ -1,11 +1,13 @@
-import React from "react";
-import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
+import React, { useEffect, useState } from "react";
+import { DragDropContext, Droppable, Draggable, DropResult, BeforeCapture } from "react-beautiful-dnd";
 
-import { IModule } from "@ax/types";
+import { IModule, INotification, ISchemaField } from "@ax/types";
 import { ComponentContainer } from "@ax/components";
+import { useBulkSelection } from "@ax/hooks";
 
 import AddItemButton from "./AddItemButton";
 import { getComponentProps, getTypefromKey } from "../helpers";
+import BulkHeader from "../BulkHeader";
 
 import * as S from "./style";
 
@@ -13,7 +15,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
   const {
     whiteList,
     title,
-    value,
+    value = [],
     goTo,
     selectedContent,
     editorID,
@@ -30,27 +32,35 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 
   const type = getTypefromKey(objKey);
   const { contentType = type } = field;
+  const componentIDs: number[] = value && value.length ? value.map((element) => element.editorID) : [];
 
-  let addModuleAction: any;
-  let addComponentAction: any;
+  const { addModuleAction, addComponentAction, setNotificationAction, duplicateModuleAction, deleteModuleAction } =
+    actions || {};
 
-  if (actions) {
-    addModuleAction = actions.addModuleAction;
-    addComponentAction = actions.addComponentAction;
-  }
+  const [isBulkOpen, setIsBulkOpen] = useState(false);
+  const [draggingId, setDraggingId] = useState<number | null>(null);
+  const { resetBulkSelection, selectedItems, isSelected, checkState, addToBulkSelection, selectAllItems } =
+    useBulkSelection(componentIDs);
+
+  useEffect(() => {
+    if (selectedItems.all.length) {
+      setIsBulkOpen(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedItems.all]);
 
   const getText = (name: string, index: number) => {
     return value && value.length > 1 ? `#${index + 1} ${name}` : name;
   };
 
-  const { kind } = selectedContent;
+  const componentType = field.reference ? selectedContent[field.reference] : selectedContent["kind"];
 
   const isModuleArr = contentType === "modules";
   const isComponentModule = contentType === "components";
 
   const handleAddModule = (moduleType: string) => addModuleAction(moduleType, objKey, editorID, isComponentModule);
 
-  const handleAddComponent = () => addComponentAction && addComponentAction(kind, objKey);
+  const handleAddComponent = () => addComponentAction && addComponentAction(componentType, objKey);
 
   const handleAdd = isModuleArr ? handleAddModule : handleAddComponent;
 
@@ -59,19 +69,24 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
   const onDragEnd = (result: DropResult) => {
-    const { moveModuleAction } = actions;
+    const { moveModuleAction } = actions || {};
 
-    if (!result.destination) {
+    if (!moveModuleAction || !result.destination || result.destination.index === result.source.index) {
+      setDraggingId(null);
       return;
     }
 
-    if (result.destination.index === result.source.index) {
-      return;
+    if (selectedItems.all.length > 0 && selectedItems.all.includes(parseInt(result.draggableId))) {
+      moveModuleAction(selectedItems.all, selectedContent, result.destination.index, objKey);
+    } else {
+      moveModuleAction([parseInt(result.draggableId)], selectedContent, result.destination.index, objKey);
     }
 
-    moveModuleAction([parseInt(result.draggableId)], selectedContent, result.destination.index, objKey);
+    setDraggingId(null);
   };
 
+  const onBeforeCapture = (start: BeforeCapture) => setDraggingId(parseInt(start.draggableId));
+
   const ComponentList = React.memo(function ComponentList({ components }: any) {
     return components.map((element: any, i: number) => {
       const { editorID } = element;
@@ -81,9 +96,14 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
         isModuleArr
       );
       const text = getText(componentTitle || displayName, i);
+      const isItemSelected = isSelected(editorID);
+      const isDraggingSelected = selectedItems.all.includes(draggingId);
+      const isGhosting = isItemSelected && !!draggingId && draggingId !== editorID && isDraggingSelected;
+      const isMultiDragging = selectedItems.all.length > 1 && draggingId === editorID;
+
       return (
         <Draggable draggableId={`${editorID}`} index={i} key={editorID}>
-          {(provided) => (
+          {(provided, snapshot) => (
             <ComponentContainer
               isArray={true}
               key={editorID}
@@ -103,6 +123,12 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
               innerRef={provided.innerRef}
               provided={provided}
               isModule={isModule}
+              isSelected={isItemSelected}
+              onChange={addToBulkSelection}
+              hasMenu={selectedItems.all.length > 0}
+              isMultiDragging={snapshot.isDragging && isMultiDragging}
+              draggingCount={selectedItems.all.length}
+              className={`${isGhosting ? "ghosting" : ""} ${snapshot.isDragging && isMultiDragging ? "dragging" : ""}`}
             />
           )}
         </Draggable>
@@ -110,19 +136,67 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
     });
   });
 
+  const handleDuplicate = () => {
+    if (maxItems && maxItems - value.length < selectedItems.all.length) {
+      const notification: INotification = {
+        type: "error",
+        text: "Unable to duplicate modules: The destination area has a limit on the number of modules allowed. Please adjust the selection accordingly.",
+      };
+      setNotificationAction && setNotificationAction(notification);
+    } else {
+      duplicateModuleAction && duplicateModuleAction(selectedItems.all, objKey);
+      resetBulkSelection();
+    }
+  };
+
+  const handleDelete = () => {
+    deleteModuleAction && deleteModuleAction(selectedItems.all, objKey);
+    resetBulkSelection();
+  };
+
+  const bulkActions = [
+    {
+      icon: "duplicate",
+      text: "duplicate",
+      action: handleDuplicate,
+    },
+    {
+      icon: "delete",
+      text: "delete",
+      action: handleDelete,
+    },
+  ];
+
+  const selectItems = () => (checkState.isAllSelected ? resetBulkSelection() : selectAllItems());
+
+  const toggleBulk = () => {
+    setIsBulkOpen(false);
+    resetBulkSelection();
+  };
+
   return (
     <S.Wrapper data-testid="sameComponentWrapper">
       <S.Title>
         {title} <Asterisk />
       </S.Title>
       <S.ItemRow>
-        <S.Subtitle>{value && value.length} items</S.Subtitle>
+        {isBulkOpen ? (
+          <BulkHeader
+            selectItems={selectItems}
+            checkState={checkState}
+            totalItems={selectedItems.all.length}
+            toggleBulk={toggleBulk}
+            actions={bulkActions}
+          />
+        ) : (
+          <S.Subtitle>{value?.length || 0} items</S.Subtitle>
+        )}
         {showAddItemButton && !disabled && (
           <AddItemButton handleClick={handleAdd} tooltipText={isModuleArr ? "Add module" : "Add component"} />
         )}
       </S.ItemRow>
       {value && Array.isArray(value) && (
-        <DragDropContext onDragEnd={onDragEnd}>
+        <DragDropContext onDragEnd={onDragEnd} onBeforeCapture={onBeforeCapture}>
           <Droppable droppableId="list">
             {(provided) => (
               <div ref={provided.innerRef} {...provided.droppableProps}>
@@ -146,12 +220,23 @@ export interface ISameComponentArrayProps {
   selectedContent: any;
   editorID: number;
   goTo: (editorID: string) => void;
-  actions: any;
+  actions: {
+    addComponentAction: (componentType: any, key?: string) => void;
+    addModuleAction: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;
+    deleteModuleAction: (editorID: number[], key?: string) => void;
+    duplicateModuleAction: (editorID: number[], key?: string) => number;
+    copyModuleAction: (editorID: number[]) => boolean | number;
+    replaceElementsInCollectionAction: (newValue: string, reference?: string) => void;
+    moveModuleAction: (moduleID: number[], selectedContent: any, newIndex: number, key: string) => void;
+    pasteModuleAction: (editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>;
+    setNotificationAction: (notification: INotification) => void;
+    replaceModuleAction: (module: any, parent: any, objKey: string) => void;
+  };
   categories?: any;
   disabled?: boolean;
   activatedModules: string[];
   objKey: string;
-  field: any;
+  field: ISchemaField;
   mandatory?: boolean;
   theme: string;
 }

package/src/components/Fields/ReferenceField/ManualPanel/index.tsx

@@ -19,7 +19,7 @@ import Item from "./Item";
 import * as S from "./style";
 
 const ManualPanel = (props: IProps) => {
-  const { onChange, currentSite, hasMaxItems, handleValidation, validators, lang, globalLangs } = props;
+  const { onChange, currentSite, hasMaxItems, handleValidation, validators, lang, globalLangs, maxItems } = props;
 
   const { state, setState } = useReference();
 
@@ -83,7 +83,7 @@ const ManualPanel = (props: IProps) => {
     if (itemSelectedID) {
       newSelIds = state.fixed.filter((a: number) => a !== itemSelectedID);
       selItems = state.selectedItems.filter((b: IStructuredDataContent) => b.id !== itemSelectedID);
-      if(selItems.length === 0) {
+      if (selItems.length === 0) {
         setItemSite(form.site);
       }
     } else {
@@ -213,7 +213,11 @@ const ManualPanel = (props: IProps) => {
                   (dataLang: IDataLanguage) => state.fixed.includes(dataLang.id) && dataLang.language !== form.lang
                 );
                 const source = state.sourceTitles.find((el: IDataSource) => el.id === item.structuredData);
-                const disabled = (hasMaxItems && !isChecked) || !!hasVersionInPageLanguage || hasContentFromOtherSite;
+                const disabled =
+                  (hasMaxItems && !isChecked) ||
+                  !!hasVersionInPageLanguage ||
+                  (maxItems && state.fixed.length >= maxItems && !isChecked) ||
+                  hasContentFromOtherSite;
                 return (
                   <React.Fragment key={`${item.content.title}-${item.id}`}>
                     {source && (
@@ -251,6 +255,7 @@ interface IProps {
   validators?: Record<string, unknown>;
   lang: { locale: string; id: number };
   globalLangs: ILanguage[];
+  maxItems?: number;
 }
 
 interface IFormState {

package/src/components/Fields/ReferenceField/index.tsx

@@ -203,6 +203,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
         hasMaxItems={hasMaxItems}
         handleValidation={handleValidation}
         validators={validators}
+        maxItems={maxItems}
       />
     );
 

package/src/components/SearchField/index.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@ax/components";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Select } from "../Fields";
 
 import * as S from "./style";
@@ -19,7 +19,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
     value,
   } = props;
 
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(value && value.trim() !== "" ? true : false);
   const [inputValue, setInputValue] = useState(value || "");
   const [selectValue, setSelectValue] = useState<string>("");
 

package/src/containers/Sites/actions.tsx

@@ -14,6 +14,7 @@ import {
   SET_CURRENT_SITE_ERROR_PAGES,
   SET_CONTENT_FILTERS,
   SET_CONFIG,
+  SET_CURRENT_SEARCH,
 } from "./constants";
 
 import {
@@ -30,6 +31,7 @@ import {
   ISetContentFilters,
   ISetSitesTotalItems,
   ISetConfig,
+  ISetCurrentSearch,
 } from "./interfaces";
 
 import {
@@ -113,6 +115,10 @@ function setConfig(config: ISiteListConfig): ISetConfig {
   return { type: SET_CONFIG, payload: { config } };
 }
 
+function setCurrentSearch(currentSearch: string): ISetCurrentSearch {
+  return { type: SET_CURRENT_SEARCH, payload: { currentSearch } };
+}
+
 // 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(params: IGetSitesParams = { recentSitesNumber: 7 }): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
@@ -479,6 +485,7 @@ function resetSiteValues(siteID: number): (dispatch: Dispatch) => void {
     dispatch(setCurrentSitePages([]));
     dispatch(setTotalItems(0));
     getAnalytics(siteID)(dispatch);
+    dispatch(setCurrentSearch(""));
   };
 }
 
@@ -695,6 +702,16 @@ function setListConfig(config: ISiteListConfig): (dispatch: Dispatch) => Promise
   };
 }
 
+function updateCurrentSearch(query: string): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      dispatch(setCurrentSearch(query));
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
 export {
   setCurrentSiteInfo,
   setCurrentSitePages,
@@ -725,4 +742,5 @@ export {
   deleteAndRemoveFromSiteBulk,
   setListConfig,
   getSite,
+  updateCurrentSearch,
 };

package/src/containers/Sites/constants.tsx

@@ -14,6 +14,7 @@ export const SET_SAVED_SITE_INFO = `${NAME}/SET_SAVED_SITE_INFO`;
 export const SET_CURRENT_SITE_ERROR_PAGES = `${NAME}/SET_CURRENT_SITE_ERROR_PAGES`;
 export const SET_CONTENT_FILTERS = `${NAME}/SET_CONTENT_FILTERS`;
 export const SET_CONFIG = `${NAME}/SET_CONFIG`;
+export const SET_CURRENT_SEARCH = `${NAME}/SET_CURRENT_SEARCH`;
 
 export const ITEMS_PER_PAGE = 50;
 

package/src/containers/Sites/interfaces.tsx

@@ -13,6 +13,7 @@ import {
   SET_CONTENT_FILTERS,
   SET_SITES_TOTAL_ITEMS,
   SET_CONFIG,
+  SET_CURRENT_SEARCH,
 } from "./constants";
 import { IQueryValue, ISite, ISiteListConfig } from "@ax/types";
 
@@ -86,4 +87,9 @@ export interface ISetConfig {
   payload: { config: ISiteListConfig };
 }
 
+export interface ISetCurrentSearch {
+  type: typeof SET_CURRENT_SEARCH;
+  payload: { currentSearch: string };
+}
+
 export type SitesActionsCreators = ISetSitesAction & ISetCurrentSiteInfoAction;

package/src/containers/Sites/reducer.tsx

@@ -13,6 +13,7 @@ import {
   SET_CURRENT_SITE_ERROR_PAGES,
   SET_CONTENT_FILTERS,
   SET_CONFIG,
+  SET_CURRENT_SEARCH,
 } from "./constants";
 
 import { ISite, IPage, ILanguage, ISiteListConfig, IQueryValue } from "@ax/types";
@@ -34,6 +35,7 @@ export interface ISitesState {
   currentSiteErrorPages: number[];
   contentFilters: Record<string, IQueryValue[]> | null;
   config: ISiteListConfig;
+  currentSearch: string;
 }
 
 const config = {
@@ -64,6 +66,7 @@ export const initialState = {
   currentSiteErrorPages: [],
   contentFilters: null,
   config,
+  currentSearch: "",
 };
 
 export function reducer(state = initialState, action: any): ISitesState {
@@ -82,6 +85,7 @@ export function reducer(state = initialState, action: any): ISitesState {
     case SET_CURRENT_SITE_ERROR_PAGES:
     case SET_CONTENT_FILTERS:
     case SET_CONFIG:
+    case SET_CURRENT_SEARCH:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/containers/StructuredData/actions.tsx

@@ -18,6 +18,7 @@ import {
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
   SET_IS_IA_TRANSLATED,
+  SET_CURRENT_SEARCH,
 } from "./constants";
 
 import {
@@ -34,6 +35,7 @@ import {
   ISetValidated,
   ISetContentFilters,
   ISetIsIATranslated,
+  ISetCurrentSearch,
 } from "./interfaces";
 import {
   prepareStructuredDataContent,
@@ -127,6 +129,10 @@ function setIsIATranslated(isIATranslated: boolean): ISetIsIATranslated {
   return { type: SET_IS_IA_TRANSLATED, payload: { isIATranslated } };
 }
 
+function setCurrentSearch(currentSearch: string): ISetCurrentSearch {
+  return { type: SET_CURRENT_SEARCH, payload: { currentSearch } };
+}
+
 function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const {
@@ -651,12 +657,23 @@ function resetCurrentData(): (dispatch: Dispatch) => Promise<void> {
       dispatch(setCurrentData(null));
       dispatch(setCurrentDataID(null));
       dispatch(setCurrentDataContent([]));
+      //dispatch(setCurrentSearch(""));
     } catch (e) {
       console.log("Error", e);
     }
   };
 }
 
+function updateCurrentSearch(query: string): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      dispatch(setCurrentSearch(query));
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
 export {
   setIsActive,
   setCategories,
@@ -694,4 +711,5 @@ export {
   setFormValues,
   setIsTranslated,
   resetCurrentData,
+  updateCurrentSearch,
 };

package/src/containers/StructuredData/constants.tsx

@@ -17,6 +17,7 @@ const SET_ERRORS = `${NAME}/SET_ERRORS`;
 const SET_VALIDATED = `${NAME}/SET_VALIDATED`;
 const SET_CONTENT_FILTERS = `${NAME}/SET_CONTENT_FILTERS`;
 const SET_IS_IA_TRANSLATED = `${NAME}/SET_IS_IA_TRANSLATED`;
+const SET_CURRENT_SEARCH = `${NAME}/SET_CURRENT_SEARCH`;
 
 const ITEMS_PER_PAGE = 50;
 
@@ -49,4 +50,5 @@ export {
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
   SET_IS_IA_TRANSLATED,
+  SET_CURRENT_SEARCH,
 };

package/src/containers/StructuredData/interfaces.tsx

@@ -14,6 +14,7 @@ import {
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
   SET_IS_IA_TRANSLATED,
+  SET_CURRENT_SEARCH,
 } from "./constants";
 
 import { IStructuredData, IStructuredDataContent, ICategory, IErrorItem, IStructuredDataQueryValues } from "@ax/types";
@@ -92,6 +93,11 @@ export interface ISetIsIATranslated {
   payload: { isIATranslated: boolean };
 }
 
+export interface ISetCurrentSearch {
+  type: typeof SET_CURRENT_SEARCH;
+  payload: { currentSearch: string };
+}
+
 export type CategoryActionsCreators = ISetCategories & ISetCurrentData;
 
 export type StructuredDataActionsCreators = CategoryActionsCreators &

package/src/containers/StructuredData/reducer.tsx

@@ -17,6 +17,7 @@ import {
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
   SET_IS_IA_TRANSLATED,
+  SET_CURRENT_SEARCH,
 } from "./constants";
 
 import { StructuredDataActionsCreators } from "./interfaces";
@@ -38,6 +39,7 @@ export interface IStructuredDataState {
   validated: boolean;
   contentFilters: Record<string, IStructuredDataQueryValues> | null;
   isIATranslated: boolean;
+  currentSearch: string;
 }
 
 export const initialState = {
@@ -57,6 +59,7 @@ export const initialState = {
   validated: false,
   contentFilters: null,
   isIATranslated: false,
+  currentSearch: "",
 };
 
 export function reducer(state = initialState, action: any): IStructuredDataState {
@@ -78,6 +81,7 @@ export function reducer(state = initialState, action: any): IStructuredDataState
     case SET_VALIDATED:
     case SET_CONTENT_FILTERS:
     case SET_IS_IA_TRANSLATED:
+    case SET_CURRENT_SEARCH:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/helpers/schemas.tsx

@@ -74,7 +74,7 @@ const getTemplateDisplayName = (template: string) => {
   return schema ? schema.displayName : undefined;
 };
 
-const getMenuItems = (type: string): ({ fields: any[] } | undefined) => schemas.menuItems[type];
+const getMenuItems = (type: string): { fields: any[] } | undefined => schemas.menuItems[type];
 
 const filterByCategory = (options: any, category: string) =>
   options.filter((option: any) => allSchemas[option].category === category);

package/src/modules/Content/PageImporter/style.tsx

@@ -10,6 +10,7 @@ const Column = styled.div`
   width: 100%;
   padding: 0 ${(p) => p.theme.spacing.m};
   height: calc(100% - ${(p) => p.theme.spacing.xs} * 4);
+  padding-bottom: ${(p) => p.theme.spacing.l};
 
   &:first-child {
     width: calc(${(p) => p.theme.spacing.m} * 18);
@@ -38,15 +39,18 @@ const Header = styled.div`
 `;
 
 const Check = styled.div`
-  padding-right: 0;
+  padding-right: ${(p) => p.theme.spacing.xs};
   padding-left: ${(p) => p.theme.spacing.xs};
+  padding-top: ${(p) => p.theme.spacing.xs};
 `;
 
 const CheckAll = styled.div`
-  margin: ${(p) => p.theme.spacing.xxs} calc(${(p) => p.theme.spacing.xxs} * 3.5);
+  display: flex;
+  align-items: center;
+  margin: ${(p) => p.theme.spacing.xs} calc(${(p) => p.theme.spacing.xxs} * 3.5);
 
   & > span {
-    margin-left: ${(p) => p.theme.spacing.m};
+    margin-left: ${(p) => p.theme.spacing.xs};
     ${(p) => p.theme.textStyle.fieldContent};
     color: ${(p) => p.theme.color.textHighEmphasis};
   }

package/src/modules/Content/index.tsx

@@ -49,6 +49,7 @@ import {
   pageStatus,
 } from "@ax/containers/PageEditor/interfaces";
 import { integrationsActions } from "@ax/containers/Integrations";
+import { IError } from "@ax/containers/App/reducer";
 
 import { getOptionValues, getOptionFilters, getCurrentFilter, filterByStatus, getSortedListStatus } from "./utils";
 import { useSortedListStatus, useFilterQuery } from "./hooks";
@@ -61,7 +62,6 @@ import PageImporter from "./PageImporter";
 import { DeleteModal } from "./atoms";
 
 import * as S from "./style";
-import { IError } from "@ax/containers/App/reducer";
 
 // TODO: Make this monster manageable
 const Content = (props: IProps): JSX.Element => {
@@ -122,6 +122,8 @@ const Content = (props: IProps): JSX.Element => {
     getDefaults,
     getAvailableSiteDataPacks,
     error,
+    currentSearch,
+    updateCurrentSearch,
   } = props;
 
   if (!currentSiteInfo) {
@@ -190,7 +192,6 @@ const Content = (props: IProps): JSX.Element => {
 
   const [isScrolling, setIsScrolling] = useState(false);
   const [deletedItem, setDeletedItem] = useState<number | number[] | null>(null);
-  const [searchQuery, setSearchQuery] = useState<string>("");
   const [pagesToImport, setPagesToImport] = useState([]);
   const [isEmpty, setIsEmpty] = useState(false);
   const [emptyStateProps, setEmptyStateProps] = useState<IEmptyStateProps>({});
@@ -245,7 +246,7 @@ const Content = (props: IProps): JSX.Element => {
           pagination: true,
           deleted: false,
           include_draft: true,
-          query: searchQuery,
+          query: currentSearch,
           format: "list",
         }
       : {
@@ -253,12 +254,12 @@ const Content = (props: IProps): JSX.Element => {
           deleted: false,
           page,
           itemsPerPage,
-          query: searchQuery,
+          query: currentSearch,
           format: "list",
         };
 
     return params;
-  }, [filter, currentSiteInfo, isStructuredData, page, searchQuery, lang]);
+  }, [filter, currentSiteInfo, isStructuredData, page, currentSearch, lang]);
 
   const getPages = async (params: any, filterQuery?: any) => {
     const isStructuredDataPage = filter !== "unique-pages";
@@ -284,7 +285,7 @@ const Content = (props: IProps): JSX.Element => {
       tableRef.current.scrollTo(0, 0);
     }
     // eslint-disable-next-line
-  }, [page, filter, currentFilterQuery, searchQuery]);
+  }, [page, filter, currentFilterQuery, currentSearch]);
 
   useLayoutEffect(() => {
     setPage(firstPage);
@@ -317,7 +318,7 @@ const Content = (props: IProps): JSX.Element => {
       const emptyState: IEmptyStateProps = {};
       const { liveStatus, translated, type } = filterValues;
       const isSearching =
-        searchQuery.length > 0 ||
+        currentSearch.length > 0 ||
         (liveStatus.length && liveStatus[0].value !== "all") ||
         (translated.length && translated[0].value !== "all") ||
         (type.length && type[0].value !== "all");
@@ -831,9 +832,9 @@ const Content = (props: IProps): JSX.Element => {
       languageActions={languageActions}
       availableLanguages={siteLanguages}
       rightButton={rightButtonProps}
-      searchAction={setSearchQuery}
+      searchAction={updateCurrentSearch}
       errors={errors}
-      searchValue={searchQuery}
+      searchValue={currentSearch}
     >
       <S.ContentListWrapper>
         <ContentFilters current={filter} dynamicValues={structuredData} resetFilter={resetFilter} />
@@ -867,7 +868,7 @@ const Content = (props: IProps): JSX.Element => {
             tableRef={tableRef}
           >
             <S.SearchTags>
-              <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+              <SearchTagsBar query={currentSearch} setQuery={updateCurrentSearch} />
               <FilterTagsBar
                 filters={filterValues}
                 setFilters={setFiltersSelection}
@@ -946,6 +947,7 @@ const mapStateToProps = (state: IRootState) => ({
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
   contentFilters: state.sites.contentFilters,
   error: state.app.error,
+  currentSearch: state.sites.currentSearch,
 });
 
 interface IDispatchProps {
@@ -985,6 +987,7 @@ interface IDispatchProps {
   checkUserSession(): Promise<void>;
   getDefaults(): Promise<void>;
   getAvailableSiteDataPacks(queryParams: string | null, loading?: boolean): Promise<void>;
+  updateCurrentSearch(query: string): Promise<void>;
 }
 
 const mapDispatchToProps = {
@@ -1023,6 +1026,7 @@ const mapDispatchToProps = {
   checkUserSession: appActions.checkUserSession,
   getDefaults: navigationActions.getDefaults,
   getAvailableSiteDataPacks: dataPacksActions.getAvailableSiteDataPacks,
+  updateCurrentSearch: sitesActions.updateCurrentSearch,
 };
 
 interface IPagesProps {
@@ -1052,6 +1056,7 @@ interface IPagesProps {
   skipReviewOnPublish?: boolean;
   contentFilters: Record<string, IQueryValue[]> | null;
   error: IError;
+  currentSearch: string;
 }
 
 type IProps = IPagesProps & IDispatchProps;

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

@@ -59,7 +59,6 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 
   const itemsPerPage = 30;
   const firstPage = 1;
-  const [sitesIds, setsitesIds] = useState<number[]>([]);
 
   const [page, setPage] = useState(firstPage);
   const [form, setForm] = useState(initialState);
@@ -74,6 +73,8 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
   const tableRef = useRef<HTMLDivElement>(null);
   const errorRef = useRef<HTMLDivElement>(null);
 
+  const sitesIds = sites?.map((site: ISite) => site.id);
+
   const allowedToCreateSite = usePermission("general.createSite");
 
   const pagination = {
@@ -123,13 +124,6 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token, getParams]);
 
-  useEffect(() => {
-    if (sites.length > 0) {
-      const currentSitesId = sites?.map((site: ISite) => site.id);
-      setsitesIds(currentSitesId);
-    }
-  }, [sites]);
-
   useEffect(() => {
     if (tableRef.current) {
       tableRef.current.scrollTo(0, 0);
@@ -316,30 +310,29 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
       </S.EmptyStateWrapper>
     );
 
-  const GridList = () => {
-    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>
-        {showPagination && (
-          <S.PaginationWrapper>
-            <Pagination totalItems={totalItems} setPage={setPage} itemsPerPage={itemsPerPage} currPage={page} />
-          </S.PaginationWrapper>
-        )}
-      </>
-    );
-  };
+  const showPagination = totalItems > itemsPerPage;
+
+  const gridList = (
+    <>
+      <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>
+      {showPagination && (
+        <S.PaginationWrapper>
+          <Pagination totalItems={totalItems} setPage={setPage} itemsPerPage={itemsPerPage} currPage={page} />
+        </S.PaginationWrapper>
+      )}
+    </>
+  );
 
   const filterLabels = {
     liveStatus: "Live",
   };
 
-  const ListTable = () => (
+  const listTable = (
     <TableList tableHeader={Header} pagination={pagination} hasFixedHeader={true} tableRef={tableRef}>
       <>
         <S.SearchTags>
@@ -356,12 +349,6 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     </TableList>
   );
 
-  const AllSitesList = () => (
-    <S.AllSitesListWrapper className={hasAnimation ? "animate" : ""} onAnimationEnd={handleAnimationEnd}>
-      {displayMode === "grid" ? <GridList /> : <ListTable />}
-    </S.AllSitesListWrapper>
-  );
-
   const handleAnimationEnd = () => setHasAnimation(false);
 
   return (
@@ -376,7 +363,9 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
       <S.SitesListWrapper className={hasAnimation ? "animate" : ""}>
         {recentSites?.length > 0 ? <RecentSitesList /> : null}
         <AllSitesHeader />
-        <AllSitesList />
+        <S.AllSitesListWrapper className={hasAnimation ? "animate" : ""} onAnimationEnd={handleAnimationEnd}>
+          {displayMode === "grid" ? <>{gridList}</> : <>{listTable}</>}
+        </S.AllSitesListWrapper>
       </S.SitesListWrapper>
       <Modal
         isOpen={isOpen}

package/src/modules/Sites/index.tsx

@@ -25,11 +25,13 @@ const Sites = (props: ISitesProps): JSX.Element => {
     globalLangs,
     getRoles,
     hasAnimation,
+    updateCurrentSearch,
   } = props;
 
   useLayoutEffect(() => {
     const fetchInitialData = async () => {
       setCurrentSiteInfo(null);
+      updateCurrentSearch("");
       await getRoles({ siteId: "global" }, token);
       await getUser("me", token);
       await getStructuredData(token);
@@ -75,6 +77,7 @@ interface IDispatchProps {
   getAllDataPacks: () => Promise<void>;
   getUser: (id: string, token?: string) => Promise<void>;
   getRoles: (params: IGetRoles, token?: string) => Promise<void>;
+  updateCurrentSearch(query: string): Promise<void>;
 }
 
 export type ISitesProps = IStateProps & IDispatchProps & RouteComponentProps;
@@ -86,6 +89,7 @@ const mapDispatchToProps = {
   getAllDataPacks: dataPacksActions.getAllDataPacks,
   getUser: usersActions.getUser,
   getRoles: usersActions.getRoles,
+  updateCurrentSearch: structuredDataActions.updateCurrentSearch,
 };
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Sites));

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

@@ -17,7 +17,6 @@ import {
   ICheck,
   IColumn,
   IStructuredDataQueryValues,
-  ISite,
   IQueryValue,
 } from "@ax/types";
 import {
@@ -102,7 +101,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     setContentFilters,
     contentFilters,
     checkUserSession,
-    sites,
+    currentSearch,
+    updateCurrentSearch,
   } = props;
 
   const itemsPerPage = 50;
@@ -119,7 +119,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   const { isVisible: isPageToast, toggleToast: togglePageToast, setIsVisible: setIsPageToast } = useToast();
   const tableRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const [searchQuery, setSearchQuery] = useState<string>("");
   const [isEmpty, setIsEmpty] = useState(false);
   const [emptyStateProps, setEmptyStateProps] = useState<IEmptyStateProps>({});
   const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
@@ -199,13 +198,13 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       pagination: true,
       deleted: false,
       include_draft: true,
-      query: searchQuery,
+      query: currentSearch,
       format: "list",
       relatedFields: true,
     };
 
     return params;
-  }, [page, searchQuery]);
+  }, [page, currentSearch]);
 
   const getStructuredData = useCallback(
     async (id: string, filterQuery?: string) => {
@@ -280,7 +279,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       tableRef.current.scrollTo(0, 0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lang.locale, page, searchQuery, filterValues]);
+  }, [lang.locale, page, currentSearch, filterValues]);
 
   useEffect(() => {
     if (wrapperRef.current) {
@@ -294,7 +293,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   useEffect(() => {
     if (!isFirstRender && !isLoading) {
       const emptyState: IEmptyStateProps = {};
-      const isSearching = searchQuery.length > 0;
+      const isSearching = currentSearch.length > 0;
       if (isSearching) {
         emptyState.icon = "search";
         emptyState.title = "Oh! No Results Found";
@@ -597,7 +596,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 
   const labelCategory = isStructuredDataFromPage ? { categories: "Category" } : { related: "Category " };
 
-  let filterLabels = {
+  const filterLabels = {
     types: "Type",
     liveStatus: "Live",
     translated: "Translated",
@@ -612,8 +611,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       availableLanguages={languageProps.globalLangs}
       language={languageProps.lang}
       languageActions={languageProps.languageActions}
-      searchAction={setSearchQuery}
-      searchValue={searchQuery}
+      searchAction={updateCurrentSearch}
+      searchValue={currentSearch}
     >
       <S.StructuredDataWrapper ref={wrapperRef}>
         <ContentFilters
@@ -648,7 +647,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
           >
             <>
               <S.SearchTags>
-                <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                <SearchTagsBar query={currentSearch} setQuery={updateCurrentSearch} />
                 <FilterTagsBar
                   filters={filterValues[currentStructuredData?.id || "all"]}
                   setFilters={setFiltersSelection}
@@ -712,7 +711,7 @@ const mapStateToProps = (state: IRootState) => ({
   currentSiteErrorPages: state.sites.currentSiteErrorPages,
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
   contentFilters: state.structuredData.contentFilters,
-  sites: state.sites.sites,
+  currentSearch: state.structuredData.currentSearch,
 });
 
 const mapDispatchToProps = {
@@ -739,6 +738,7 @@ const mapDispatchToProps = {
   resetCurrentSiteErrorPages: sitesActions.resetCurrentSiteErrorPages,
   setContentFilters: structuredDataActions.setContentFilters,
   checkUserSession: appActions.checkUserSession,
+  updateCurrentSearch: structuredDataActions.updateCurrentSearch,
 };
 
 interface IDispatchProps {
@@ -765,6 +765,7 @@ interface IDispatchProps {
   resetCurrentSiteErrorPages: () => Promise<void>;
   setContentFilters(contentFilters: Record<string, IStructuredDataQueryValues> | null): void;
   checkUserSession(): Promise<void>;
+  updateCurrentSearch(query: string): Promise<void>;
 }
 
 interface ICategoriesProps {
@@ -783,7 +784,7 @@ interface ICategoriesProps {
   currentSiteErrorPages: number[];
   skipReviewOnPublish?: boolean;
   contentFilters: Record<string, IStructuredDataQueryValues> | null;
-  sites: ISite[];
+  currentSearch: string;
 }
 
 type IProps = ICategoriesProps & IDispatchProps;

package/src/types/index.tsx

@@ -174,6 +174,7 @@ export interface ISchemaField {
   whiteList?: string[];
   readonly?: boolean;
   slugTo?: string;
+  reference?: string;
   [key: string]: any; // TODO: set type
 }