@griddo/ax 11.9.15 → 11.9.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.9.15",
+  "version": "11.9.16",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ede692b8bda54a9bd02ea09c902dcac5e5a1cfb"
+  "gitHead": "857db7ad8810574af06dad13496c06b656a416f3"
 }

package/src/__tests__/components/Fields/ArrayFieldGroup/ArrayFieldGroup.test.tsx

@@ -1,9 +1,10 @@
 import React from "react";
+import configureStore from "redux-mock-store";
 import ArrayFieldGroup, { IProps } from "@ax/components/Fields/ArrayFieldGroup";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
+import { render, cleanup, screen, fireEvent, act } from "../../../../../config/jest/test-utils";
 import { mock } from "jest-mock-extended";
 import FieldsBehavior from "@ax/components/FieldsBehavior";
 
@@ -11,13 +12,22 @@ afterEach(cleanup);
 
 const defaultProps = mock<IProps>();
 
+defaultProps.selectedContent = { component: "" };
+
+const middlewares: any = [];
+const mockStore = configureStore(middlewares);
+
+const initialStore = {};
+const store = mockStore(initialStore);
+
 describe("ArrayFieldGroup component rendering", () => {
   it("should render the component with no items and button", async () => {
     await act(async () => {
       render(
         <ThemeProvider theme={parseTheme(globalTheme)}>
           <ArrayFieldGroup {...defaultProps} />
-        </ThemeProvider>
+        </ThemeProvider>,
+        { store }
       );
     });
 
@@ -67,7 +77,8 @@ describe("ArrayFieldGroup component rendering", () => {
       render(
         <ThemeProvider theme={parseTheme(globalTheme)}>
           <ArrayFieldGroup {...defaultProps} />
-        </ThemeProvider>
+        </ThemeProvider>,
+        { store }
       );
     });
 
@@ -96,7 +107,8 @@ describe("ArrayFieldGroup component rendering", () => {
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <ArrayFieldGroup {...defaultProps} />
-      </ThemeProvider>
+      </ThemeProvider>,
+      { store }
     );
   });
 
@@ -143,7 +155,8 @@ describe("ArrayFieldGroup component rendering", () => {
       render(
         <ThemeProvider theme={parseTheme(globalTheme)}>
           <ArrayFieldGroup {...defaultProps} />
-        </ThemeProvider>
+        </ThemeProvider>,
+        { store }
       );
     });
 
@@ -172,7 +185,8 @@ describe("ArrayFieldGroup component rendering", () => {
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <ArrayFieldGroup {...defaultProps} />
-      </ThemeProvider>
+      </ThemeProvider>,
+      { store }
     );
 
     expect(screen.getByText("A Title")).toBeTruthy();
@@ -205,7 +219,8 @@ describe("ArrayFieldGroup component events", () => {
       render(
         <ThemeProvider theme={parseTheme(globalTheme)}>
           <ArrayFieldGroup {...defaultProps} />
-        </ThemeProvider>
+        </ThemeProvider>,
+        { store }
       );
     });
 
@@ -257,7 +272,8 @@ describe("ArrayFieldGroup component events", () => {
       render(
         <ThemeProvider theme={parseTheme(globalTheme)}>
           <ArrayFieldGroup {...defaultProps} />
-        </ThemeProvider>
+        </ThemeProvider>,
+        { store }
       );
     });
 

package/src/components/FieldContainer/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { IPage, ISite, ILanguage } from "@ax/types";
-import { getNullValue, getDefaultSchema, getDefaultTemplate } from "@ax/helpers";
+import { getNullValue, getDefaultSchema, getDefaultTemplate, findObjectValue } from "@ax/helpers";
 
 import { FieldsBehavior, HiddenField } from "@ax/components";
 
@@ -10,28 +10,29 @@ const FieldContainer = (props: IFieldContainerProps) => {
 
   const { type, key, title, hideable, slugTo } = field;
   const isContainer = field.type === "ComponentContainer";
-
-  const hideField = () => updateValue(key, nullValue);
-
-  const containerValue = selectedContent[objKey] !== undefined ? selectedContent[objKey] : null;
-
-  const fieldProps = {
-    fieldType: type,
-    value: containerValue,
-    hideField,
-    onChange: (e: any) => updateValue(key, e, undefined, slugTo),
-    goTo,
-    editorID: selectedContent.editorID,
-    lang,
-    ...field,
-    ...props,
-  };
-
   const hasMultipleOptions = field.whiteList && field.whiteList.length > 1;
+  const containerValue = findObjectValue(selectedContent, objKey);
   const nullValue = isContainer && containerValue ? getNullValue(containerValue, hasMultipleOptions) : null;
   const hasNullValue = JSON.stringify(containerValue) === JSON.stringify(nullValue);
+  const isHiddenField = hasNullValue && hideable && !hasMultipleOptions && !isContainer;
+
+  const hideField = () => updateValue(key, nullValue);
 
-  const getField = () => <FieldsBehavior {...fieldProps} key={key} />;
+  const getField = () => {
+    const fieldProps = {
+      fieldType: type,
+      value: containerValue,
+      hideField,
+      onChange: (e: any) => updateValue(key, e, undefined, slugTo),
+      goTo,
+      editorID: selectedContent.editorID,
+      lang,
+      ...field,
+      ...props,
+    };
+
+    return <FieldsBehavior {...fieldProps} key={key} />;
+  };
 
   const getDefaultValue = () => {
     const isTemplate = selectedContent.type === "template";
@@ -49,8 +50,6 @@ const FieldContainer = (props: IFieldContainerProps) => {
 
   const getHiddenField = () => <HiddenField key={props.objKey} title={title} showField={showField} />;
 
-  const isHiddenField = hasNullValue && hideable && !hasMultipleOptions && !isContainer;
-
   return isHiddenField ? getHiddenField() : getField();
 };
 

package/src/components/Fields/ArrayFieldGroup/ArrayFieldInline/index.tsx

@@ -1,12 +1,27 @@
 import React from "react";
+import { connect } from "react-redux";
 
 import { IconAction } from "@ax/components";
 import { ISite } from "@ax/types";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { getNullValue } from "@ax/helpers";
 
 import * as S from "./style";
 
 const ArrayFieldInline = (props: IProps): JSX.Element => {
-  const { fields, item, index, onChange, handleDelete, site, disabled } = props;
+  const {
+    fields,
+    item,
+    index,
+    onChange,
+    handleDelete,
+    site,
+    disabled,
+    parentKey,
+    actions,
+    addComponentInArray,
+    replaceModuleInArray,
+  } = props;
 
   const deleteItem = () => handleDelete(index);
 
@@ -17,10 +32,35 @@ const ArrayFieldInline = (props: IProps): JSX.Element => {
       const handleChange = (newValue: any) => onChange({ [key]: newValue });
 
       const innerFields = field.props.innerFields ? getFields(field.props.innerFields) : undefined;
+      const hasMultipleOptions = field.props.whiteList && field.props.whiteList.length > 1;
+
+      const actionsField = {
+        ...actions,
+        addComponentAction: (component: any, key: string) =>
+          addComponentInArray(component, key, parentKey, index, hasMultipleOptions),
+        replaceModuleAction: (module: string, parent: any, key: string) =>
+          replaceModuleInArray(module, parent, key, parentKey, index),
+      };
+
+      const hideField = () => {
+        const isContainer = field.props.type === "ComponentContainer";
+
+        const nullValue = isContainer && item[key] ? getNullValue(item[key], hasMultipleOptions) : null;
+        onChange({ [key]: nullValue });
+      };
 
       return {
         ...field,
-        props: { ...field.props, value: item[key], objKey: key, onChange: handleChange, innerFields, site },
+        props: {
+          ...field.props,
+          value: item[key],
+          objKey: key,
+          onChange: handleChange,
+          innerFields,
+          site,
+          actions: actionsField,
+          hideField,
+        },
         key,
       };
     });
@@ -46,6 +86,15 @@ interface IProps {
   handleDelete: (index: number) => void;
   site: ISite | null;
   disabled?: boolean;
+  parentKey: string;
+  actions: any;
+  addComponentInArray(type: string, key: string, parentKey: string, index: number, isMultiple: boolean): void;
+  replaceModuleInArray(module: string, parent: any, key: string, parentKey: string, index: number): void;
 }
 
-export default ArrayFieldInline;
+const mapDispatchToProps = {
+  addComponentInArray: pageEditorActions.addComponentInArray,
+  replaceModuleInArray: pageEditorActions.replaceModuleInArray,
+};
+
+export default connect(null, mapDispatchToProps)(ArrayFieldInline);

package/src/components/Fields/ArrayFieldGroup/ArrayFieldItem/index.tsx

@@ -1,10 +1,28 @@
 import React from "react";
+import { connect } from "react-redux";
 import { ISite } from "@ax/types";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { getNullValue } from "@ax/helpers";
 
 import * as S from "./style";
 
 const ArrayFieldItem = (props: IProps): JSX.Element => {
-  const { fields, item, name, index, onChange, handleDelete, isOpen, setIsOpen, site, disabled } = props;
+  const {
+    fields,
+    item,
+    name,
+    index,
+    onChange,
+    handleDelete,
+    isOpen,
+    setIsOpen,
+    site,
+    disabled,
+    parentKey,
+    actions,
+    addComponentInArray,
+    replaceModuleInArray,
+  } = props;
 
   const handleClick = () => (isOpen === index ? setIsOpen(null) : setIsOpen(index));
 
@@ -15,7 +33,7 @@ const ArrayFieldItem = (props: IProps): JSX.Element => {
       label: "Delete",
       icon: "delete",
       action: deleteItem,
-      disabled
+      disabled,
     },
   ];
 
@@ -30,14 +48,40 @@ const ArrayFieldItem = (props: IProps): JSX.Element => {
 
   const getFields = (fields: any[]): any[] => {
     return fields.map((field: any) => {
-      const key = field.props.objKey;
+      const { key } = field;
+
       const handleChange = (newValue: any) => onChange({ [key]: newValue });
 
       const innerFields = field.props.innerFields ? getFields(field.props.innerFields) : undefined;
+      const hasMultipleOptions = field.props.whiteList && field.props.whiteList.length > 1;
+
+      const actionsField = {
+        ...actions,
+        addComponentAction: (component: any, key: string) =>
+          addComponentInArray(component, key, parentKey, index, hasMultipleOptions),
+        replaceModuleAction: (module: string, parent: any, key: string) =>
+          replaceModuleInArray(module, parent, key, parentKey, index),
+      };
+
+      const hideField = () => {
+        const isContainer = field.props.type === "ComponentContainer";
+
+        const nullValue = isContainer && item[key] ? getNullValue(item[key], hasMultipleOptions) : null;
+        onChange({ [key]: nullValue });
+      };
 
       return {
         ...field,
-        props: { ...field.props, value: item[key], objKey: key, onChange: handleChange, innerFields, site },
+        props: {
+          ...field.props,
+          value: item[key],
+          objKey: key,
+          onChange: handleChange,
+          innerFields,
+          site,
+          actions: actionsField,
+          hideField,
+        },
         key,
       };
     });
@@ -65,6 +109,15 @@ interface IProps {
   setIsOpen: (index: number | null) => void;
   site: ISite | null;
   disabled?: boolean;
+  parentKey: string;
+  actions: any;
+  addComponentInArray(type: string, key: string, parentKey: string, index: number, isMultiple: boolean): void;
+  replaceModuleInArray(module: string, parent: any, key: string, parentKey: string, index: number): void;
 }
 
-export default ArrayFieldItem;
+const mapDispatchToProps = {
+  addComponentInArray: pageEditorActions.addComponentInArray,
+  replaceModuleInArray: pageEditorActions.replaceModuleInArray,
+};
+
+export default connect(null, mapDispatchToProps)(ArrayFieldItem);

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

@@ -3,13 +3,27 @@ import { v4 as uuidv4 } from "uuid";
 
 import { Button, FieldsDivider } from "@ax/components";
 import { ISite } from "@ax/types";
+import { getDefaultSchema } from "@ax/helpers";
 import ArrayFieldItem from "./ArrayFieldItem";
 import ArrayFieldInline from "./ArrayFieldInline";
 
 import * as S from "./style";
 
 const ArrayFieldGroup = (props: IProps): JSX.Element => {
-  const { value, name, innerFields, onChange, divider, arrayType, site, disabled, editorID } = props;
+  const {
+    value,
+    name,
+    innerFields,
+    onChange,
+    divider,
+    arrayType,
+    site,
+    disabled,
+    editorID,
+    objKey,
+    selectedContent,
+    actions,
+  } = props;
 
   const [items, setItems] = useState<any[]>([]);
   const [isOpen, setIsOpen] = useState<number | null>(null);
@@ -23,7 +37,13 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
   }, [editorID]);
 
   const handleClick = () => {
-    const newItems = [...items, { id: uuidv4() }];
+    const defaultValues = getDefaultSchema(selectedContent.component);
+    const newComponent =
+      !!defaultValues[objKey] && defaultValues[objKey].length
+        ? { ...defaultValues[objKey][0], id: uuidv4() }
+        : { id: uuidv4() };
+
+    const newItems = [...items, newComponent];
     setItems(newItems);
     onChange(newItems);
     setIsOpen(newItems.length - 1);
@@ -65,6 +85,8 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
                 handleDelete={handleDelete}
                 site={site}
                 disabled={disabled}
+                parentKey={objKey}
+                actions={actions}
               />
             ) : (
               <ArrayFieldItem
@@ -79,6 +101,8 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
                 setIsOpen={setIsOpen}
                 site={site}
                 disabled={disabled}
+                parentKey={objKey}
+                actions={actions}
               />
             );
           })}
@@ -102,6 +126,9 @@ export interface IProps {
   site: ISite | null;
   disabled?: boolean;
   editorID: number;
+  objKey: string;
+  selectedContent: any;
+  actions: any;
 }
 
 export default ArrayFieldGroup;

package/src/containers/PageEditor/actions.tsx

@@ -46,6 +46,7 @@ import {
   getPageNavigation,
   getStateValues,
   addElementToCollection,
+  addElementToComponent,
 } from "./utils";
 import {
   SET_BREADCRUMB,
@@ -745,6 +746,29 @@ function addComponent(
   };
 }
 
+function addComponentInArray(
+  type: string,
+  key: string,
+  parentKey: string,
+  index: number,
+  isMultiple: boolean
+): (dispatch: Dispatch, getState: () => IRootState) => void {
+  return (dispatch, getState) => {
+    const { editorContent, selectedContent } = getStateValues(getState);
+    const editorID = isMultiple
+      ? selectedContent[parentKey][index][key][type].editorID
+      : selectedContent[parentKey][index][key].editorID;
+
+    const clonedContent = deepClone(editorContent);
+    const { element, parent } = findByEditorID(clonedContent, editorID);
+
+    addElementToComponent(parent, element);
+
+    generatePageContent(clonedContent)(dispatch, getState);
+    setSelectedContent(element.editorID)(dispatch, getState);
+  };
+}
+
 function addModule(
   type: string,
   key: string,
@@ -831,6 +855,41 @@ function replaceModule(
   };
 }
 
+function replaceModuleInArray(
+  module: string,
+  parent: any,
+  key: string,
+  parentKey: string,
+  index: number
+): (dispatch: Dispatch, getState: () => IRootState) => void {
+  return async (dispatch, getState) => {
+    const { editorContent } = getStateValues(getState);
+    const clonedEditor = deepClone(editorContent);
+
+    const value = parent[parentKey][index][key];
+    const updatedVal = {
+      ...getNullValue(value, true),
+    };
+
+    Object.keys(updatedVal).forEach((key: string) => {
+      if (updatedVal[key].component === module) {
+        const defaultSchema = getDefaultSchema(module);
+        updatedVal[key] = {
+          ...defaultSchema,
+          ...updatedVal[key],
+        };
+      }
+    });
+
+    const { element } = findByEditorID(clonedEditor, parent.editorID);
+    element[parentKey][index][key] = updatedVal;
+    const editorID = element[parentKey][index][key][module].editorID;
+
+    generatePageContent(clonedEditor)(dispatch, getState);
+    setSelectedContent(editorID)(dispatch, getState);
+  };
+}
+
 function replaceElementsInCollection(
   newValue: string,
   reference?: string
@@ -1599,4 +1658,6 @@ export {
   setIsTranslated,
   schedulePublication,
   setScrollEditorID,
+  addComponentInArray,
+  replaceModuleInArray,
 };

package/src/containers/PageEditor/utils.tsx

@@ -129,7 +129,7 @@ const addElementToComponent = (component: Record<string, any>, type: IComponent)
   const element = addElement(type);
   Object.keys(component).forEach((key: string) => {
     const containedValue = component[key];
-    if (containedValue.editorID === type.editorID) {
+    if (containedValue?.editorID === type.editorID) {
       component[key] = element;
     }
   });
@@ -171,4 +171,5 @@ export {
   getDefaultIntegrations,
   getDefaultPageNavigation,
   addElementToCollection,
+  addElementToComponent,
 };

package/src/helpers/objects.tsx

@@ -116,16 +116,20 @@ const encodeData = (data: Record<string, string | number | boolean>): string =>
     .join("&");
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const findObjectValue = (obj: Record<string, any>, key: string): any | undefined => {
-  if (!obj || typeof obj !== "object") return undefined;
-  if (key in obj) return obj[key];
-
-  for (const prop of Object.values(obj)) {
-    if (typeof prop === "object" && prop !== null) {
-      const foundValue = findObjectValue(prop, key);
-      if (foundValue) return foundValue;
+const findObjectValue = (obj: any, key: string): any | undefined => {
+  if (obj == null) return undefined;
+
+  if (typeof obj === "object") {
+    if (key in obj) {
+      return obj[key];
+    }
+
+    for (const value of Array.isArray(obj) ? obj : Object.values(obj)) {
+      const found = findObjectValue(value, key);
+      if (found !== undefined) return found;
     }
   }
+
   return undefined;
 };
 

package/src/modules/Content/PageItem/index.tsx

@@ -496,9 +496,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     }
 
     const type: any = structuredDataContent && structuredDataContent[col.key];
-    const checkGroups = ["MultiCheckSelect", "AsyncCheckGroup", "CheckGroup"];
 
-    if (!checkGroups.includes(col.type)) {
+    if (typeof type !== "object") {
       return (
         <S.ColumnCell key={col.key} onClick={goToPage}>
           {type}

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

@@ -374,9 +374,8 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     }
 
     const type: any = structuredDataContent && structuredDataContent[col.key];
-    const checkGroups = ["MultiCheckSelect", "AsyncCheckGroup", "CheckGroup"];
 
-    if (!checkGroups.includes(col.type)) {
+    if (typeof type !== "object") {
       return (
         <S.ColumnCell key={col.key} onClick={_handleClick}>
           {type}

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

@@ -219,9 +219,8 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
     }
 
     const type: any = structuredData && structuredData.content && structuredData.content[col.key];
-    const checkGroups = ["MultiCheckSelect", "AsyncCheckGroup", "CheckGroup"];
 
-    if (!checkGroups.includes(col.type)) {
+    if (typeof type !== "object") {
       return (
         <S.ColumnCell key={col.key} onClick={_handleClick}>
           {type}