@griddo/ax 1.67.10 → 1.68.2

package/src/__tests__/components/Fields/VisualUniqueSelection/ImageSelection/ImageSelection.test.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import ImageSelection from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import "@testing-library/jest-dom";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IImageSelectionProps>();
+defaultProps.theme = "default-theme";
+defaultProps.columns = 2;
+defaultProps.value = "value";
+defaultProps.title = "title";
+const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+defaultProps.name = "name";
+defaultProps.objKey = "element";
+
+describe("VisualUniqueSelection component rendering", () => {
+  test("should render the component", () => {
+    defaultProps.options = [
+      {
+        theme: "default-theme",
+        options: [
+          {
+            value: "default",
+            img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/primaryStyle",
+          },
+          {
+            value: "defaultAlt",
+            img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/secondaryStyle",
+          },
+        ],
+      },
+      {
+        theme: "griddo-alt-theme",
+        options: [
+          {
+            value: "default",
+            img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/primaryStyle",
+          },
+          {
+            value: "defaultAlt",
+            img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/secondaryStyle",
+          },
+        ],
+      },
+    ];
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageSelection {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("imageSelectionComponent")).toBeTruthy();
+  });
+});
+
+describe("VisualUniqueSelection component events", () => {
+  test("should handle change", () => {
+    defaultProps.options = [
+      {
+        value: "primary",
+        img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/primaryStyle",
+      },
+      {
+        value: "secondary",
+        img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/secondaryStyle",
+      },
+      {
+        value: "link",
+        img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/linkStyle",
+      },
+    ];
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ImageSelection {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const radioButtons = screen.getAllByTestId<HTMLInputElement>("radioButtons");
+    fireEvent.click(radioButtons[0]);
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});
+
+interface IImageSelectionProps {
+  value: string;
+  title: string;
+  onChange: (value: string) => void;
+  options: any;
+  name: string;
+  objKey: string;
+  columns: number;
+  disabled?: boolean;
+  theme: string;
+}

package/src/__tests__/components/Fields/VisualUniqueSelection/ScrollableSelection/ScrollableSelection.test.tsx

@@ -0,0 +1,176 @@
+import * as React from "react";
+import ScrollableSelection from "@ax/components/Fields/VisualUniqueSelection/ScrollableSelection";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import "@testing-library/jest-dom";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IScrollableSelectionProps>();
+defaultProps.theme = "default-theme";
+defaultProps.options = [
+  {
+    value: "primary",
+    img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/primaryStyle",
+  },
+  {
+    value: "secondary",
+    img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/secondaryStyle",
+  },
+  {
+    value: "link",
+    img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/linkStyle",
+  },
+];
+defaultProps.elementUniqueSelection = true;
+defaultProps.columns = 2;
+defaultProps.value = "value";
+defaultProps.title = "title";
+const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
+defaultProps.name = "name";
+defaultProps.objKey = "element";
+defaultProps.actions = {
+  replaceElementsInCollectionAction: jest.fn(),
+};
+defaultProps.selectedContent = {
+  component: "BasicContent",
+  title: {
+    content: "Title",
+    tag: "h1",
+  },
+  anchorID: "basic",
+  verticalSpacing: "medium",
+  layout: "L001",
+  theme: "default",
+  moduleOrder: null,
+  subtitle:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu.",
+  content:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu.",
+  primaryLink: {
+    component: "Link",
+    text: "Link 1",
+    style: "primary",
+    url: {
+      href: null,
+      linkTo: 3622,
+      linkToURL: "//cx.dev.griddo.io/pre-griddo/fer-site/#papapapa",
+      title: "New Page",
+      anchor: "papapapa",
+    },
+    editorID: 5,
+    parentEditorID: 4,
+  },
+  secondaryLink: {
+    component: "Link",
+    editorID: 6,
+    parentEditorID: 4,
+  },
+  additionalContent: {
+    image: {
+      component: "LinkableImage",
+      editorID: 7,
+      parentEditorID: 4,
+      title: "",
+      alt: "",
+      veil: 0,
+      file: {
+        id: 857,
+        name: ".png",
+        title: "",
+        description: "",
+        alt: "",
+        tags: [],
+        url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
+        thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
+        publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
+        damId: "screenshot-2022-04-13-at-164915",
+        published: "2022-04-18T08:52:48.334Z",
+        size: 1123589,
+        width: 1444,
+        height: 640,
+        orientation: "L",
+        site: "global",
+      },
+    },
+    video: {
+      component: "Video",
+      editorID: 8,
+      parentEditorID: 4,
+    },
+  },
+  editorID: 4,
+  parentEditorID: 3,
+};
+
+describe("ScrollableSelection component rendering", () => {
+  test("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ScrollableSelection {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("scrollableSelectionComponent")).toBeTruthy();
+  });
+});
+
+describe("ScrollableSelection component events", () => {
+  test("should handle next and previous Page", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ScrollableSelection {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const dots = screen.getAllByTestId("dotSelected");
+    expect((dots[0] as HTMLOptionElement).selected).toBeTruthy();
+    expect(screen.getByTestId("scrollableSelectionComponent")).toBeTruthy();
+    const nextButton = screen.getAllByTestId("iconActionComponent")[1];
+    const prevButton = screen.getAllByTestId("iconActionComponent")[0];
+    fireEvent.click(nextButton);
+    expect((dots[0] as HTMLOptionElement).selected).toBeFalsy();
+    expect((dots[1] as HTMLOptionElement).selected).toBeTruthy();
+    fireEvent.click(nextButton);
+    expect((dots[0] as HTMLOptionElement).selected).toBeTruthy();
+    expect((dots[1] as HTMLOptionElement).selected).toBeFalsy();
+    fireEvent.click(nextButton);
+    expect((dots[0] as HTMLOptionElement).selected).toBeFalsy();
+    expect((dots[1] as HTMLOptionElement).selected).toBeTruthy();
+    fireEvent.click(prevButton);
+    fireEvent.click(prevButton);
+    expect((dots[0] as HTMLOptionElement).selected).toBeTruthy();
+    expect((dots[1] as HTMLOptionElement).selected).toBeFalsy();
+  });
+
+  test("should handle selection", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ScrollableSelection {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const radioButtons = screen.getAllByTestId<HTMLInputElement>("radioButtons");
+    fireEvent.click(radioButtons[0]);
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});
+
+interface IScrollableSelectionProps {
+  value: string;
+  title: string;
+  onChange: (value: string) => void;
+  options: any[];
+  name: string;
+  objKey: string;
+  columns: number;
+  disabled?: boolean;
+  actions: any;
+  selectedContent: any;
+  reference?: string;
+  theme: string;
+  elementUniqueSelection: boolean;
+}

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+import VisualUniqueSelection from "@ax/components/Fields/VisualUniqueSelection";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { render, screen, cleanup } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IImageSelectionProps & IScrollableSelectionProps>();
+defaultProps.theme = "default-theme";
+defaultProps.options = [
+  {
+    value: "primary",
+    img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/primaryStyle",
+  },
+  {
+    value: "secondary",
+    img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/secondaryStyle",
+  },
+  {
+    value: "link",
+    img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/linkStyle",
+  },
+];
+
+describe("VisualUniqueSelection component rendering", () => {
+  test("should render the component with ImageSelection", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <VisualUniqueSelection {...defaultProps} />
+      </ThemeProvider>
+    );
+    expect(screen.getByTestId("imageSelectionComponent")).toBeTruthy();
+  });
+
+  test("should render the component with ScrollableSelection", () => {
+    defaultProps.elementUniqueSelection = true;
+    defaultProps.columns = 2;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <VisualUniqueSelection {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("scrollableSelectionComponent")).toBeTruthy();
+  });
+});
+
+interface IImageSelectionProps {
+  value: string;
+  title: string;
+  onChange: (value: string) => void;
+  options: any;
+  name: string;
+  objKey: string;
+  columns: number;
+  disabled?: boolean;
+  theme: string;
+  elementUniqueSelection: boolean;
+}
+
+interface IScrollableSelectionProps {
+  value: string;
+  title: string;
+  onChange: (value: string) => void;
+  options: any[];
+  name: string;
+  objKey: string;
+  columns: number;
+  disabled?: boolean;
+  actions: any;
+  selectedContent: any;
+  reference?: string;
+  theme: string;
+}

package/src/components/ActionMenu/index.tsx

@@ -19,6 +19,7 @@ const ActionMenu = (props: IProps): JSX.Element => {
       onClick={item.action}
       disabled={item.disabled}
       className={item.color ? "original" : ""}
+      data-testid="action-menu-item"
     >
       <S.IconWrapper>
         <Icon name={item.icon} size="24" />

package/src/components/Browser/index.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useState, useCallback } from "react";
 
-import * as components from "components";
-import { SiteProvider, builderSSR, ssrHelpers } from "components";
-import { Preview } from "@griddo/core";
 import { findByEditorID } from "@ax/forms";
 import { copyTextToClipboard } from "@ax/helpers";
 import { useToast } from "@ax/hooks";
 import Icon from "../Icon";
 import Tooltip from "../Tooltip";
 import Toast from "../Toast";
+import BrowserContent from "../BrowserContent";
 
 import * as S from "./style";
 
@@ -27,30 +25,38 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     siteID,
     isPreview,
     setSelectedContent,
+    showIframe,
     browserRef,
   } = props;
 
-  const API_URL = process.env.REACT_APP_API_ENDPOINT;
-  const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
   const { id, entity } = content;
   const domain = window.location.origin;
-  const urlPreview = `${domain}/editor/page-preview`;
+  const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}`;
 
   const [resolution, setResolution] = useState("desktop");
   const { isVisible, toggleToast, setIsVisible } = useToast();
 
+  const onMessageReceivedFromIframe = useCallback(
+    (ev: MessageEvent<{ type: string; message: string }>) => {
+      if (typeof ev.data !== "object") return;
+      if (!ev.data.type) return;
+      if (ev.data.type !== "module-click") return;
+      if (!ev.data.message) return;
+      setSelectedContent(ev.data.message);
+    },
+    [setSelectedContent]
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", onMessageReceivedFromIframe);
+    return () => window.removeEventListener("message", onMessageReceivedFromIframe);
+  }, [onMessageReceivedFromIframe]);
+
   useEffect(() => {
     localStorage.setItem("selectedID", "0");
     (window as any).browserRef = null;
   }, []);
 
-  const useInstanceExternalAssets = useCallback(() => {
-    if (builderSSR && builderSSR.onRenderBody) {
-      builderSSR.onRenderBody(ssrHelpers);
-    }
-  }, []);
-  useEffect(useInstanceExternalAssets, [useInstanceExternalAssets]);
-
   const selectEditorID = (
     selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
     parentComponent: string | undefined | null,
@@ -59,14 +65,12 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     const { element } = findByEditorID(content, selectedComponent.parentEditorID);
     element && e.stopPropagation();
 
-    const parent = selectedComponent.component === "Page" ? null : "Page";
-
     const { editorID } = selectedComponent;
 
     const isNavigationModule = ["header", "footer"].includes(selectedComponent.type);
 
     if (!isPreview && (!disabled || isNavigationModule)) {
-      setSelectedContent && setSelectedContent(editorID, parent);
+      setSelectedContent && setSelectedContent(editorID);
     }
   };
 
@@ -98,33 +102,6 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     message: "URL Copied",
   };
 
-  const Providers = (
-    <SiteProvider
-      cloudinaryCloudName={cloudinaryName}
-      theme={theme}
-      socials={socials}
-      siteLangs={siteLangs}
-      selectEditorID={selectEditorID}
-      renderer="editor"
-      apiUrl={API_URL}
-      publicApiUrl={PUBLIC_API_URL}
-      siteId={siteID}
-    >
-      <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
-        <Preview
-          isPage={isPage}
-          apiUrl={API_URL}
-          library={components}
-          content={content}
-          header={header}
-          footer={footer}
-          languageId={content.language}
-          pageLanguages={content.pageLanguages}
-        />
-      </S.Wrapper>
-    </SiteProvider>
-  );
-
   return (
     <S.BrowserWrapper ref={browserRef}>
       <S.NavBar>
@@ -154,12 +131,27 @@ const Browser = (props: IBrowserProps): JSX.Element => {
           </S.NavActions>
         )}
       </S.NavBar>
-      {isPreview ? (
+      {showIframe ? (
         <S.FrameWrapper>
-          <iframe title="Preview" width={getWidth(resolution)} height="100%" src={urlPreview} allow-scripts />
+          <iframe title="Preview" width={getWidth(resolution)} height="100%" src={urlPreview} loading="lazy" />
         </S.FrameWrapper>
       ) : (
-        <>{Providers}</>
+        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+          <BrowserContent
+            cloudinaryName={cloudinaryName}
+            theme={theme}
+            socials={socials}
+            siteLangs={siteLangs}
+            selectEditorID={selectEditorID}
+            siteID={siteID}
+            isPage={isPage}
+            content={content}
+            header={header}
+            footer={footer}
+            languageID={content.language}
+            pageLanguages={content.pageLanguages}
+          />
+        </S.Wrapper>
       )}
       {isVisible && <Toast {...toastProps} />}
     </S.BrowserWrapper>
@@ -170,7 +162,6 @@ interface IBrowserProps {
   content: any;
   header?: any;
   footer?: any;
-  selectedEditorID: number;
   url: string;
   setSelectedContent?: any;
   isPage: boolean;
@@ -181,6 +172,7 @@ interface IBrowserProps {
   disabled?: boolean;
   siteID?: number;
   isPreview?: boolean;
+  showIframe?: boolean;
   browserRef?: any;
 }
 

package/src/components/Browser/style.tsx

@@ -6,20 +6,6 @@ const BrowserWrapper = styled.div`
   width: 100%;
 `;
 
-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%;
-  position: relative;
-
-  .headroom {
-    position: relative !important;
-  }
-`;
-
 const NavBar = styled.div`
   display: flex;
   background-color: ${(p) => p.theme.color.uiBackground03};
@@ -66,4 +52,18 @@ const FrameWrapper = styled.div`
   height: 100%;
 `;
 
-export { BrowserWrapper, Wrapper, NavBar, NavUrl, NavActions, IconWrapper, FrameWrapper };
+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%;
+  position: relative;
+
+  .headroom {
+    position: relative !important;
+  }
+`;
+
+export { BrowserWrapper, NavBar, NavUrl, NavActions, IconWrapper, FrameWrapper, Wrapper };

package/src/components/BrowserContent/index.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback, useEffect } from "react";
+import * as components from "components";
+import { builderSSR, ssrHelpers, SiteProvider } from "components";
+import { Preview } from "@griddo/core";
+import { ILanguage, ISocialState } from "@ax/types";
+
+const BrowserContent = (props: IProps) => {
+  const {
+    content,
+    socials,
+    cloudinaryName,
+    siteLangs,
+    siteID,
+    theme,
+    isPage,
+    header,
+    footer,
+    languageID,
+    pageLanguages,
+    selectEditorID,
+  } = props;
+
+  const API_URL = process.env.REACT_APP_API_ENDPOINT;
+  const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+
+  const useInstanceExternalAssets = useCallback(() => {
+    if (builderSSR && builderSSR.onRenderBody) {
+      builderSSR.onRenderBody(ssrHelpers);
+    }
+  }, []);
+  useEffect(useInstanceExternalAssets, [useInstanceExternalAssets]);
+
+  return (
+    <SiteProvider
+      cloudinaryCloudName={cloudinaryName}
+      theme={theme}
+      socials={socials}
+      siteLangs={siteLangs}
+      selectEditorID={selectEditorID}
+      renderer="editor"
+      apiUrl={API_URL}
+      publicApiUrl={PUBLIC_API_URL}
+      siteId={siteID}
+    >
+      <Preview
+        isPage={isPage}
+        apiUrl={API_URL}
+        library={components}
+        content={content}
+        header={header}
+        footer={footer}
+        languageId={languageID}
+        pageLanguages={pageLanguages}
+      />
+    </SiteProvider>
+  );
+};
+
+interface IProps {
+  content: any;
+  socials: ISocialState;
+  cloudinaryName: string | null;
+  siteLangs: ILanguage[];
+  siteID?: number;
+  theme: string;
+  isPage: boolean;
+  header?: any;
+  footer?: any;
+  languageID: number;
+  pageLanguages: ILanguage[];
+  selectEditorID?(
+    selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
+    parentComponent: string | undefined | null,
+    e: React.SyntheticEvent
+  ): void;
+}
+
+export default BrowserContent;

package/src/components/ConfigPanel/Form/ConnectedField/NavConnectedField/index.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { connect } from "react-redux";
-import { useEqualValue } from "@ax/hooks";
 
 import { FieldContainer } from "@ax/components";
 import { navigationActions } from "@ax/containers/Navigation";
 import { getInnerFields } from "@ax/forms";
 import { IRootState } from "@ax/types";
+import { areEqual } from "@ax/helpers";
 
 const NavConnectedField = (props: any) => {
   const {
@@ -89,10 +89,8 @@ const mapStateToProps = (state: IRootState) => ({
   menus: state.menu.savedMenus,
 });
 
-// eslint-disable-next-line react-hooks/rules-of-hooks
-const memoizedNavConnectedField = useEqualValue(NavConnectedField);
-
 const mapDispatchToProps = {
   updateEditorContent: navigationActions.updateEditorContent,
 };
-export default connect(mapStateToProps, mapDispatchToProps)(memoizedNavConnectedField);
+
+export default connect(mapStateToProps, mapDispatchToProps)(React.memo(NavConnectedField, areEqual));

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 
-import { getTemplate, isModuleDisabled, slugify } from "@ax/helpers";
-import { useEqualValue } from "@ax/hooks";
+import { getTemplate, isModuleDisabled, slugify, areEqual } from "@ax/helpers";
 import { IRootState } from "@ax/types";
 
 import TemplateManager from "./TemplateManager";
@@ -216,7 +215,4 @@ const mapDispatchToProps = {
   deleteError: pageEditorActions.deleteError,
 };
 
-// eslint-disable-next-line react-hooks/rules-of-hooks
-const memoizedPageConnectedField = useEqualValue(PageConnectedField);
-
-export default connect(mapStateToProps, mapDispatchToProps)(memoizedPageConnectedField);
+export default connect(mapStateToProps, mapDispatchToProps)(React.memo(PageConnectedField, areEqual));