@griddo/ax 1.67.8 → 1.68.0

package/src/containers/PageEditor/actions.tsx

@@ -29,6 +29,7 @@ import {
   checkH1content,
   parseValidationErrors,
   findPackagesActivationErrors,
+  checkMaxModules,
 } from "@ax/forms";
 import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
@@ -100,6 +101,15 @@ const { getSiteDefaults, getDefaults } = navigationActions;
 // FIXME: CHECK EDITOR CONTENT STRUCTURE (editorContent.editorContent)
 
 function setEditorContent(editorContent: IPage | Record<string, unknown>): ISetEditorContent {
+  const iframe = document.querySelector("iframe");
+  iframe?.contentWindow?.postMessage(
+    {
+      type: "content-update",
+      message: editorContent,
+    },
+    "*"
+  );
+
   return { type: SET_EDITOR_CONTENT, payload: { editorContent } };
 }
 
@@ -654,6 +664,13 @@ function addModule(
 ): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const { editorContent, sections, editorID } = getStateValues(getState);
+
+    const { isMaxModules, errorMessage } = checkMaxModules(editorContent, type);
+    if (isMaxModules) {
+      handleError({ text: errorMessage })(dispatch);
+      return;
+    }
+
     const componentModule = {
       editorID,
       type,
@@ -763,6 +780,13 @@ function duplicateModule(editorID: number, key?: string): (dispatch: Dispatch, g
 
     const updatedSections: any = [...sections];
     const { element: originalItem, parent, grandParent } = findByEditorID(updatedSections, editorID);
+
+    const { isMaxModules, errorMessage } = checkMaxModules(editorContent, originalItem.component);
+    if (isMaxModules) {
+      handleError({ text: errorMessage })(dispatch);
+      return;
+    }
+
     const parentModule = Array.isArray(parent) ? grandParent : parent;
 
     const parentKey = key ? key : getParentKey(parentModule, editorID);
@@ -814,6 +838,15 @@ function pasteModule(editorID: number): (dispatch: Dispatch, getState: any) => P
 
     const { sections, editorContent } = getStateValues(getState);
 
+    const { isMaxModules, errorMessage } = checkMaxModules(editorContent, moduleCopy.element.component);
+    if (isMaxModules && errorMessage) {
+      const error: INotification = {
+        type: "error",
+        text: errorMessage,
+      };
+      return { error };
+    }
+
     const updatedSections: any = [...sections];
     const { element: originalElement } = findByEditorID(updatedSections, editorID);
 
@@ -1069,7 +1102,7 @@ function getTemplateConfig(template: string): (dispatch: Dispatch, getState: any
   };
 }
 
-function validatePage(publish?: boolean, browserRef?: any): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function validatePage(publish?: boolean): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const { editorContent } = getStateValues(getState);
@@ -1104,10 +1137,8 @@ function validatePage(publish?: boolean, browserRef?: any): (dispatch: Dispatch,
       errors = packagesActivationErrors ? [...errors, packagesActivationErrors] : errors;
 
       let warnings: IErrorItem[] = [];
-      if (browserRef && browserRef.current) {
-        const h1Warning = checkH1content(browserRef.current);
-        warnings = h1Warning ? [...warnings, h1Warning] : warnings;
-      }
+      const h1Warning = checkH1content();
+      warnings = h1Warning ? [...warnings, h1Warning] : warnings;
 
       const allErrors = [...errors, ...warnings];
 

package/src/forms/editor.tsx

@@ -1,4 +1,4 @@
-import { deepClone, getDisplayName } from "@ax/helpers";
+import { deepClone, getSchema, getDisplayName } from "@ax/helpers";
 import { IPage, IBreadcrumbItem } from "@ax/types";
 
 const configKeys = ["headerConfig", "footerConfig"];
@@ -168,6 +168,39 @@ const getParentKey = (parentModule: any, editorID: number) => {
   return keyFound;
 };
 
+const checkMaxModules = (content: any, type: string): { isMaxModules: boolean; errorMessage?: string } => {
+  const { maxModulesPerPage } = getSchema(type);
+  const queue: any[] = [content];
+  let counter = 0;
+
+  while (queue.length > 0 && counter < maxModulesPerPage) {
+    const obj = queue.shift();
+    const currentObj = obj;
+
+    if (currentObj.component === type) {
+      counter++;
+    }
+
+    const keys = currentObj instanceof Object ? Object.keys(currentObj) : [];
+
+    for (const key of keys) {
+      const objVal = currentObj[key];
+      if (objVal instanceof Object) {
+        queue.push(objVal);
+      }
+    }
+  }
+
+  const isMaxModules = counter >= maxModulesPerPage;
+  const maxModulesText = maxModulesPerPage === 1 ? "one" : maxModulesPerPage;
+  const errorMessage = `There can be only ${maxModulesText} ${type} on page. You already have it.`;
+
+  return {
+    isMaxModules,
+    ...(isMaxModules && { errorMessage }),
+  };
+};
+
 export {
   parseData,
   cleanContent,
@@ -181,4 +214,5 @@ export {
   getLastModuleEditorID,
   getLastComponentEditorID,
   getParentKey,
+  checkMaxModules,
 };

package/src/forms/fields.tsx

@@ -56,7 +56,8 @@ const getStructuredDataInnerFields = (
   innerFields: any[],
   content: any,
   updateValue: (value: Record<string, unknown>) => void,
-  theme: string
+  theme: string,
+  errors: IErrorItem[]
 ) => {
   let fieldArr: any[] = [];
 
@@ -72,9 +73,11 @@ const getStructuredDataInnerFields = (
       const value = content && content[key];
 
       if (type === "ConditionalField" || type === "ArrayFieldGroup") {
-        fieldArr = getStructuredDataInnerFields(fields, content, updateValue, theme);
+        fieldArr = getStructuredDataInnerFields(fields, content, updateValue, theme, errors);
       }
 
+      const error = errors.find((err: any) => err.key === key);
+
       const fieldProps = {
         value,
         objKey: key,
@@ -84,6 +87,7 @@ const getStructuredDataInnerFields = (
         onChange: handleChange,
         ...singleFieldProps,
         theme,
+        error,
       };
 
       return <FieldsBehavior key={key} {...fieldProps} />;

package/src/forms/index.tsx

@@ -10,6 +10,7 @@ import {
   getLastModuleEditorID,
   getLastComponentEditorID,
   getParentKey,
+  checkMaxModules,
 } from "./editor";
 import {
   getUpdatedComponents,
@@ -63,4 +64,5 @@ export {
   findMandatoryStructuredDataErrors,
   checkH1content,
   parseValidationErrors,
+  checkMaxModules,
 };

package/src/forms/validators.tsx

@@ -213,14 +213,19 @@ const getValidationErrors = (
   fields.forEach((field: any) => {
     if (field.mandatory) {
       const hasMultipleOptions = field.whiteList && field.whiteList.length > 1;
-      const isEmpty = isEmptyField(current[field.key], field.type, hasMultipleOptions);
+
+      const isEmpty =
+        !current ||
+        current[field.key] === undefined ||
+        isEmptyField(current[field.key], field.type, hasMultipleOptions);
+
       if (isEmpty) {
         errors.push({
           type: "error",
           message: getErrorMessage("ERR015", null),
           validator: { mandatory: true },
-          editorID: current.editorID ? current.editorID : null,
-          component: current.component ? current.component : null,
+          editorID: current && current.editorID ? current.editorID : null,
+          component: current && current.component ? current.component : null,
           name: name ? name : field.title,
           key: field.key,
           tab,
@@ -229,7 +234,7 @@ const getValidationErrors = (
       }
     }
 
-    if (current.component && field.isMockup) {
+    if (current && current.component && field.isMockup) {
       const { isMockup, defaultValue } = checkMockupContent(
         current.component,
         field.key,
@@ -275,7 +280,11 @@ const getValidationErrors = (
       }
     }
 
-    if (Object.prototype.hasOwnProperty.call(field, "fields") && field.fields.length) {
+    if (
+      Object.prototype.hasOwnProperty.call(field, "fields") &&
+      field.fields.length &&
+      field.type !== "ArrayFieldGroup"
+    ) {
       let innerFields = field.fields;
 
       if (field.type === "ConditionalField") {
@@ -287,6 +296,15 @@ const getValidationErrors = (
       const innerErrors = getValidationErrors(innerFields, current, name, tab, template);
       errors = [...errors, ...innerErrors];
     }
+
+    if (field.type === "ArrayFieldGroup") {
+      current &&
+        current[field.key] &&
+        current[field.key].forEach((item: any) => {
+          const innerErrors = getValidationErrors(field.fields, item, name, tab, template);
+          errors = [...errors, ...innerErrors];
+        });
+    }
   });
 
   return errors;
@@ -338,6 +356,7 @@ const findPackagesActivationErrors = (
       key: "",
       tab: "",
       template: false,
+      hasDeactivatedPackage: true,
     };
   }
 
@@ -397,10 +416,12 @@ const findMandatoryStructuredDataErrors = (content: any, schema: any): IErrorIte
   return errors;
 };
 
-const checkH1content = (content: any): IErrorItem | null => {
-  const h1s = content.getElementsByTagName("h1");
+const checkH1content = (): IErrorItem | null => {
+  const iframe = document.querySelector("iframe");
+  const iframeContent = iframe?.contentWindow?.document;
+  const h1s = iframeContent ? iframeContent.getElementsByTagName("h1") : null;
 
-  if (!h1s.length) {
+  if (h1s && !h1s.length) {
     return {
       type: "warning",
       message: getErrorMessage("ERR018", null),

package/src/guards/error/index.tsx

@@ -50,7 +50,7 @@ const ErrorGuard = (props: IProps) => {
     return domNode && createPortal(Notifications, domNode);
   };
 
-  return code ? isBlocking ? <ErrorView code={code} text={text} /> : createErrorNotification() : null;
+  return code || text ? isBlocking ? <ErrorView code={code} text={text} /> : createErrorNotification() : null;
 };
 
 const mapStateToProps = (state: IRootState) => {

package/src/helpers/containerEvaluations.tsx

@@ -1,14 +1,14 @@
 import { IComponent } from "@ax/types";
 import { getDisplayName } from "./schemas";
 
-export const isComponentEmpty = (component: IComponent): boolean => {
+const isComponentEmpty = (component: IComponent): boolean => {
   const keys = Object.keys(component);
   const privateKeys = ["componentID", "component", "parentEditorID"];
 
   return keys.length <= privateKeys.length;
 };
 
-export const setAsContainedComponent = (component: IComponent): IContainedComponent => {
+const setAsContainedComponent = (component: IComponent): IContainedComponent => {
   const displayName = getDisplayName(component.component);
   return {
     containerText: displayName,
@@ -17,7 +17,7 @@ export const setAsContainedComponent = (component: IComponent): IContainedCompon
   };
 };
 
-export const areAllComponentsEmpty = (container: any): IContainerEvaluation => {
+const areAllComponentsEmpty = (container: any): IContainerEvaluation => {
   const components = Object.keys(container);
   const filledComponents: IComponent[] = [];
   let containedComponent: any;
@@ -35,7 +35,7 @@ export const areAllComponentsEmpty = (container: any): IContainerEvaluation => {
   };
 };
 
-export const isEmptyContainer = (container: any, isMultiple?: boolean): IContainerEvaluation => {
+const isEmptyContainer = (container: any, isMultiple?: boolean): IContainerEvaluation => {
   return isMultiple
     ? areAllComponentsEmpty(container)
     : {
@@ -44,6 +44,32 @@ export const isEmptyContainer = (container: any, isMultiple?: boolean): IContain
       };
 };
 
+const areEqual = (prevProps: any, newProps: any): boolean => {
+  if (
+    prevProps.field.type === "FieldGroup" ||
+    (prevProps.field.fields && prevProps.field.fields.length > 0) ||
+    prevProps.selectedEditorID !== newProps.selectedEditorID
+  ) {
+    return false;
+  }
+
+  const {
+    selectedContent: { type },
+  } = prevProps;
+  const isTemplate = type === "template";
+  const prevValue = isTemplate
+    ? prevProps.selectedContent.template[prevProps.objKey]
+    : prevProps.selectedContent[prevProps.objKey];
+  const newValue = isTemplate
+    ? newProps.selectedContent.template[newProps.objKey]
+    : newProps.selectedContent[newProps.objKey];
+
+  const isObject = typeof prevValue === "object";
+  if (isObject) return false;
+
+  return prevValue === newValue;
+};
+
 interface IContainerEvaluation {
   isEmpty: boolean;
   containedComponent: IContainedComponent;
@@ -54,3 +80,5 @@ interface IContainedComponent {
   component: string;
   componentID: number;
 }
+
+export { isComponentEmpty, setAsContainedComponent, areAllComponentsEmpty, isEmptyContainer, areEqual };

package/src/helpers/index.tsx

@@ -3,6 +3,7 @@ import {
   setAsContainedComponent,
   areAllComponentsEmpty,
   isEmptyContainer,
+  areEqual,
 } from "./containerEvaluations";
 
 import {
@@ -178,4 +179,5 @@ export {
   getNavigationModules,
   getDefaultNavigationModules,
   isMultipleNavigationModules,
+  areEqual,
 };

package/src/helpers/structuredData.tsx

@@ -26,9 +26,9 @@ const getFilteredStructuredData = (activatedDataPacks: IDataPack[], structuredDa
 
 const getStructuredDataTitle = (name: string): string => schemas.structuredData[name]?.title;
 
-const isStructuredDataFromPage = (name: string): boolean => schemas.structuredData[name].fromPage;
+const isStructuredDataFromPage = (name: string): boolean => schemas.structuredData[name]?.fromPage;
 
-const isGlobalStructuredData = (name: string): boolean => !schemas.structuredData[name].local;
+const isGlobalStructuredData = (name: string): boolean => !schemas.structuredData[name]?.local;
 
 const getGlobalPageTypes = (): Record<string, string>[] => {
   const { structuredData } = schemas;

package/src/hooks/forms.tsx

@@ -4,33 +4,6 @@ import isEqual from "lodash.isequal";
 import { deepClone } from "@ax/helpers";
 import { cleanPageValues, getIsSavedData } from "@ax/forms";
 
-const useEqualValue = (component: any) =>
-  memo(component, (prevProps: any, newProps: any) => {
-    if (
-      prevProps.field.type === "FieldGroup" ||
-      (prevProps.field.fields && prevProps.field.fields.length > 0) ||
-      prevProps.selectedEditorID !== newProps.selectedEditorID
-    ) {
-      return false;
-    }
-
-    const {
-      selectedContent: { type },
-    } = prevProps;
-    const isTemplate = type === "template";
-    const prevValue = isTemplate
-      ? prevProps.selectedContent.template[prevProps.objKey]
-      : prevProps.selectedContent[prevProps.objKey];
-    const newValue = isTemplate
-      ? newProps.selectedContent.template[newProps.objKey]
-      : newProps.selectedContent[newProps.objKey];
-
-    const isObject = typeof prevValue === "object";
-    if (isObject) return false;
-
-    return prevValue === newValue;
-  });
-
 const useDebounce = (value: any) => {
   // State and setters for debounced value
   const [debouncedValue, setDebouncedValue] = useState(value);
@@ -133,4 +106,4 @@ const useIsDirty = (
   return { isDirty, setIsDirty, resetDirty };
 };
 
-export { useEqualValue, useDebounce, useEqualStructured, usePrevious, useIsDirty };
+export { useDebounce, useEqualStructured, usePrevious, useIsDirty };

package/src/hooks/index.tsx

@@ -1,5 +1,5 @@
 import { useBulkSelection } from "./bulk";
-import { useDebounce, useEqualStructured, useEqualValue, useIsDirty, usePrevious } from "./forms";
+import { useDebounce, useEqualStructured, useIsDirty, usePrevious } from "./forms";
 import { useHandleClickOutside, useModal, useToast } from "./modals";
 import { useURLSearchParam } from "./location";
 import { useCategoryColors } from "./content";
@@ -7,7 +7,6 @@ import { useCategoryColors } from "./content";
 export {
   useModal,
   useHandleClickOutside,
-  useEqualValue,
   useDebounce,
   useEqualStructured,
   usePrevious,

package/src/modules/Content/atoms.tsx

@@ -92,6 +92,7 @@ const CopyModal = (props: ICopyModal): JSX.Element => {
       title="Copy page in another site"
       mainAction={mainModalAction}
       secondaryAction={secondaryModalAction}
+      overflow="visible"
     >
       <S.ModalContent>
         <p>

package/src/modules/FramePreview/index.tsx

@@ -1,29 +1,68 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import * as components from "components";
-import { SiteProvider } from "components";
-import { Preview } from "@griddo/core";
 import { getDefaultTheme } from "@ax/helpers";
-import { Loading } from "@ax/components";
+import { Loading, BrowserContent } from "@ax/components";
 import { ILanguage, IRootState, ISocialState } from "@ax/types";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { findByEditorID } from "@ax/forms";
+import { useURLSearchParam } from "@ax/hooks";
 
 import * as S from "./style";
 
 const FramePreview = (props: IProps) => {
-  const { content, socials, selectedEditorID, cloudinaryName, isLoading, currentSiteInfo, siteLangs, globalLangs } =
+  const { content, socials, cloudinaryName, isLoading, currentSiteInfo, siteLangs, globalLangs, setSelectedContent } =
     props;
 
+  const [state, setState] = useState(content);
+  const isPreview = useURLSearchParam("preview");
+  const isDisabled = useURLSearchParam("disabled");
+
+  const onMessageReceivedFromOutside = useCallback((ev: MessageEvent<{ type: string; message: string }>) => {
+    if (typeof ev.data !== "object") return;
+    if (!ev.data.type) return;
+    if (ev.data.type !== "content-update") return;
+    if (!ev.data.message) return;
+    setState(ev.data.message);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("message", onMessageReceivedFromOutside);
+    return () => window.removeEventListener("message", onMessageReceivedFromOutside);
+  }, [onMessageReceivedFromOutside]);
+
   const {
     editorContent: { canonicalSite, language, pageLanguages },
     header,
     footer,
-  } = content;
+  } = state;
 
   document.body.classList.add("preview");
 
-  const API_URL = process.env.REACT_APP_API_ENDPOINT;
-  const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+  const selectEditorID = (
+    selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
+    parentComponent: string | undefined | null,
+    e: React.SyntheticEvent
+  ) => {
+    const { element } = findByEditorID(content, selectedComponent.parentEditorID);
+    element && e.stopPropagation();
+
+    const { editorID } = selectedComponent;
+
+    const isNavigationModule = ["header", "footer"].includes(selectedComponent.type);
+
+    if (isPreview === "false" && (isDisabled === "false" || isNavigationModule)) {
+      window.parent.postMessage(
+        {
+          type: "module-click",
+          message: editorID,
+        },
+        "*"
+      );
+
+      setSelectedContent && setSelectedContent(editorID);
+    }
+  };
 
   const globalTheme = getDefaultTheme();
   const theme = currentSiteInfo ? currentSiteInfo.theme : globalTheme;
@@ -33,47 +72,38 @@ const FramePreview = (props: IProps) => {
   if (isLoading) return <Loading />;
 
   return (
-    <SiteProvider
-      cloudinaryCloudName={cloudinaryName}
-      theme={theme}
-      socials={socials}
-      siteLangs={langs}
-      selectEditorID={selectedEditorID}
-      renderer="editor"
-      apiUrl={API_URL}
-      publicApiUrl={PUBLIC_API_URL}
-      siteId={siteID}
-    >
-      <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
-        <Preview
-          isPage={true}
-          apiUrl={API_URL}
-          library={components}
-          content={content.editorContent}
-          header={currentSiteInfo && header}
-          footer={currentSiteInfo && footer}
-          languageId={language}
-          pageLanguages={pageLanguages}
-        />
-      </S.Wrapper>
-    </SiteProvider>
+    <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+      <BrowserContent
+        cloudinaryName={cloudinaryName}
+        theme={theme}
+        socials={socials}
+        siteLangs={langs}
+        selectEditorID={selectEditorID}
+        siteID={siteID}
+        isPage={true}
+        content={state.editorContent}
+        header={currentSiteInfo && header}
+        footer={currentSiteInfo && footer}
+        languageID={language}
+        pageLanguages={pageLanguages}
+      />
+    </S.Wrapper>
   );
 };
 
 interface IProps {
   content: any;
-  selectedEditorID: number;
   socials: ISocialState;
   cloudinaryName: string | null;
   currentSiteInfo: any;
   siteLangs: ILanguage[];
   globalLangs: ILanguage[];
   isLoading: boolean;
+  setSelectedContent(editorID: number): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   content: { ...state.pageEditor.editorContent },
-  selectedEditorID: state.pageEditor.selectedEditorID as number,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
   currentSiteInfo: state.sites.currentSiteInfo,
@@ -82,4 +112,8 @@ const mapStateToProps = (state: IRootState) => ({
   isLoading: state.app.isLoading,
 });
 
-export default connect(mapStateToProps)(FramePreview);
+const mapDispatchToProps = {
+  setSelectedContent: pageEditorActions.setSelectedContent,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(FramePreview);

package/src/modules/FramePreview/style.tsx

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 
 const Wrapper = styled.div`
+  border-left: 1px solid ${(p) => p.theme.color.uiLine};
+  border-right: 1px solid ${(p) => p.theme.color.uiLine};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   overflow: auto;
   scroll-behavior: smooth;
   height: 100%;

package/src/modules/GlobalEditor/PageBrowser/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 
 import { Browser } from "@ax/components";
-import { IBreadcrumbItem, ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";
+import { ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";
 
 const PageBrowser = (props: IProps) => {
   const {
@@ -12,7 +12,6 @@ const PageBrowser = (props: IProps) => {
     content: {
       editorContent: { path, slug, canonicalSite },
     },
-    selectedEditorID,
     setSelectedContent,
     globalLangs,
     theme,
@@ -30,7 +29,6 @@ const PageBrowser = (props: IProps) => {
       isPage={true}
       content={props.content.editorContent}
       socials={socials}
-      selectedEditorID={selectedEditorID}
       setSelectedContent={setSelectedContent}
       url={url}
       theme={theme}
@@ -39,6 +37,7 @@ const PageBrowser = (props: IProps) => {
       disabled={isReadOnly}
       siteID={canonicalSite}
       isPreview={isPreview}
+      showIframe={true}
       browserRef={browserRef}
     />
   );
@@ -47,12 +46,10 @@ const PageBrowser = (props: IProps) => {
 interface IEditorStateProps {
   // TODO: Define content Type
   content: any;
-  selectedEditorID: number;
   socials: ISocialState;
   cloudinaryName: string | null;
   globalLangs: ILanguage[];
   schema: ISchema | Record<string, unknown>;
-  breadcrumb: IBreadcrumbItem[];
   selectedParent: any;
   activatedModules: string[];
 }
@@ -69,12 +66,10 @@ type IProps = IEditorStateProps & IPageBrowserDispatchProps;
 
 const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   content: { ...state.pageEditor.editorContent },
-  selectedEditorID: state.pageEditor.selectedEditorID as number,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
   globalLangs: state.app.globalLangs,
   schema: state.pageEditor.schema,
-  breadcrumb: state.pageEditor.breadcrumb,
   selectedParent: state.pageEditor.selectedParent,
   activatedModules: state.dataPacks.modules,
 });