@griddo/ax 1.63.5 → 1.64.0

package/src/api/users.tsx

@@ -47,11 +47,12 @@ const SERVICES: { [key: string]: IServiceConfig } = {
 const getUsers = async (params: any) => {
   const { host, endpoint } = SERVICES.GET_USERS;
 
-  const { query, order } = params;
+  const { query, filterQuery } = params;
+
+  SERVICES.GET_USERS.dynamicUrl = `${host}${endpoint}${filterQuery}`;
 
-  SERVICES.GET_USERS.dynamicUrl = `${host}${endpoint}?order=${order}`;
   if (query && query.trim() !== "") {
-    SERVICES.GET_USERS.dynamicUrl = SERVICES.GET_USERS.dynamicUrl + `&query=${query}`;
+    SERVICES.GET_USERS.dynamicUrl = `${SERVICES.GET_USERS.dynamicUrl}${query}`;
   }
 
   return sendRequest(SERVICES.GET_USERS);
@@ -119,4 +120,4 @@ export default {
   deleteUser,
   deleteUserBulk,
   resendInvitation,
-};
+};

package/src/components/ActionMenu/style.tsx

@@ -44,6 +44,8 @@ export const ActionItem = styled.li<{ disabled?: boolean; color?: boolean }>`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
   pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
   text-align: left;
+  white-space: nowrap;
+
   &:focus {
     background: ${(p) => (p.disabled ? "transparent" : p.theme.color.overlayFocusPrimary)};
   }

package/src/components/Browser/index.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { FrameContextConsumer } from "react-frame-component";
 import { StyleSheetManager } from "styled-components";
 
 import * as components from "components";
-import { providers, translations, cloudinaryDefaults, griddoDamDefaults } from "components";
+import { providers, translations, cloudinaryDefaults, griddoDamDefaults, builderSSR, ssrHelpers } from "components";
 import { Preview } from "@griddo/core";
 import { findByEditorID } from "@ax/forms";
 import { copyTextToClipboard } from "@ax/helpers";
@@ -28,7 +28,6 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     disabled,
     siteID,
     isPreview,
-    damDomain,
     setSelectedContent,
   } = props;
 
@@ -44,6 +43,13 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     (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,
@@ -96,7 +102,6 @@ const Browser = (props: IBrowserProps): JSX.Element => {
   const Providers = (
     <SiteProvider
       cloudinaryCloudName={cloudinaryName}
-      damDomain={damDomain}
       theme={theme}
       socials={socials}
       siteLangs={siteLangs}
@@ -192,7 +197,6 @@ interface IBrowserProps {
   theme: string;
   socials: any;
   cloudinaryName: string | null;
-  damDomain: string | null;
   siteLangs: any[];
   disabled?: boolean;
   siteID?: number;

package/src/{modules/Content/PageItem/atoms.tsx → components/CategoryCell/index.tsx}

@@ -1,10 +1,8 @@
 import React, { useEffect } from "react";
-
 import { ElementsTooltip } from "@ax/components";
+import * as S from "./style"
 
-import * as S from "./style";
-
-const CategoryCell = (props: ICategoryCellProps): JSX.Element => {
+const CategoryCell = (props: IProps): JSX.Element => {
   const { categories, categoryColors, addCategoryColors } = props;
 
   useEffect(() => {
@@ -19,10 +17,10 @@ const CategoryCell = (props: ICategoryCellProps): JSX.Element => {
   );
 };
 
-interface ICategoryCellProps {
+interface IProps {
   categories: any;
   categoryColors: any;
   addCategoryColors(cats: string[]): void;
 }
 
-export { CategoryCell };
+export default CategoryCell;

package/src/components/CategoryCell/style.tsx

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+import { Cell } from "@ax/components/TableList/TableItem/style";
+
+const CategoryCell = styled(Cell)`
+  flex: 0 0 150px;
+  align-items: center;
+  position: relative;
+`;
+
+export { CategoryCell }

package/src/components/Fields/AnalyticsField/PageAnalytics/index.tsx

@@ -7,18 +7,14 @@ import { DimensionsGroup, DimensionsSelection } from "./atoms";
 import * as S from "../style";
 
 const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
-  const {
-    value,
-    onChange,
-    analytics,
-  } = props;
+  const { value, onChange, analytics } = props;
 
   const initialState = {
     contentSelect: "",
     groupSelect: "",
     dimensionsSelect: [],
-    values: {}
-  }
+    values: {},
+  };
 
   const [state, setState] = useState<IState>(value || initialState);
 
@@ -29,11 +25,11 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 
   const handleContentSelect = (contentSelect: string) => {
     setState({ ...initialState, contentSelect });
-  }
+  };
 
   const handleGroupSelect = (groupSelect: string) => {
     setState((state: IState) => ({ ...state, groupSelect, values: {} }));
-  }
+  };
 
   const handleDimensionsSelect = (selection: string[]) => {
     const values: Record<string, string> = {};
@@ -43,33 +39,37 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
       dimensionsSelect = analytics.dimensions.map((dimension) => dimension.name);
     }
 
-    dimensionsSelect.forEach((dimension) => values[dimension] = state.values[dimension]);
+    dimensionsSelect.forEach((dimension) => (values[dimension] = state.values[dimension]));
     setState((state: IState) => ({ ...state, dimensionsSelect, values }));
-  }
+  };
 
   const setDimension = (value: Record<string, string>) => {
     setState((state: IState) => ({ ...state, values: { ...state.values, ...value } }));
-  }
+  };
 
   const contentOptions = [
     {
       label: "Dimensions Group",
-      value: "group"
+      value: "group",
     },
     {
       label: "Individual Dimensions",
-      value: "individual"
+      value: "individual",
     },
-  ]
+  ];
 
-  const groupOptions: { label: string, value: string }[] = [];
+  const groupOptions: { label: string; value: string }[] = [];
   analytics.groups?.forEach((group) => {
-    groupOptions.push({ label: group.name, value: group.name })
+    groupOptions.push({ label: group.name, value: group.name });
   });
 
   const noteText = (
     <>
-      Select <strong>Dimension Group</strong> if you want to select one of the groups you created in the global settings (based on the page content).<br /><br />Select <strong>Individual Dimensions</strong> if you want to select the dimensions to track manually.
+      Select <strong>Dimension Group</strong> if you want to select one of the groups you created in the global settings
+      (based on the page content).
+      <br />
+      <br />
+      Select <strong>Individual Dimensions</strong> if you want to select the dimensions to track manually.
     </>
   );
 
@@ -88,7 +88,7 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
       name: dimension.name,
       value: dimension.name,
       title: dimension.name,
-    }
+    };
     dimensionOptions.push(option);
   });
 

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/atoms.tsx

@@ -12,38 +12,48 @@ const TemplateDimensions = (props: ITemplateDimensions): JSX.Element => {
   const groupDimensions = dimensionNames.map((dimensionName) => {
     const dimension = analytics.dimensions.find((dimension) => dimension.name === dimensionName);
     return dimension;
-  })
+  });
 
   return (
     <>
-      {groupDimensions && groupDimensions.map((dimension, idx) => (
-        dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
-      ))}
+      {groupDimensions &&
+        groupDimensions.map(
+          (dimension, idx) => dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
+        )}
     </>
-  )
-}
+  );
+};
 
-const DimensionsSelection = (props: { analytics: IAnalytics, state: IState, setDimension: (value: Record<string, string>) => void }): JSX.Element => {
+const DimensionsSelection = (props: {
+  analytics: IAnalytics;
+  state: IState;
+  setDimension: (value: Record<string, string>) => void;
+}): JSX.Element => {
   const { analytics, state, setDimension } = props;
   const { dimensionsSelect, values } = state;
   const selectedDimensions = analytics.dimensions.filter((d) => dimensionsSelect.includes(d.name));
 
   return (
     <>
-      {selectedDimensions && selectedDimensions.map((dimension, idx) => (
-        <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
-      ))}
+      {selectedDimensions &&
+        selectedDimensions.map((dimension, idx) => (
+          <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
+        ))}
     </>
-  )
-}
+  );
+};
 
-const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Record<string, string>) => void, values: Record<string, string> }) => {
+const DimensionValue = (props: {
+  dimension: IDimension;
+  setDimension: (value: Record<string, string>) => void;
+  values: Record<string, string>;
+}) => {
   const { dimension, setDimension, values } = props;
   const dimensionValues = splitAndTrim(dimension?.values, ";");
   const options = dimensionValues.map((option) => ({ label: option, value: option }));
   const handleOnChange = (value: string) => {
     dimension && setDimension({ [dimension.name]: value });
-  }
+  };
 
   const isNullValue = dimensionValues.includes("null");
   const fieldValue = values && dimension ? values[dimension.name] : "";
@@ -65,8 +75,8 @@ const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Re
       onChange={handleOnChange}
       placeholder="Select variable"
     />
-  )
-}
+  );
+};
 
 interface ITemplateDimensions {
   analytics: IAnalytics;

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/index.tsx

@@ -8,17 +8,12 @@ import { TemplateDimensions, DimensionsSelection } from "./atoms";
 import * as S from "../style";
 
 const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
-  const {
-    value,
-    onChange,
-    analytics,
-    template,
-  } = props;
+  const { value, onChange, analytics, template } = props;
 
   const initialState = {
     dimensionsSelect: [],
-    values: {}
-  }
+    values: {},
+  };
 
   const [state, setState] = useState<IState>({ ...initialState, ...value });
 
@@ -31,20 +26,20 @@ const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 
   const handleDimensionsSelect = (selection: string[]) => {
     const values: Record<string, string> = {};
-    templateDimensions.forEach((dimension) => values[dimension] = state.values[dimension]);
+    templateDimensions.forEach((dimension) => (values[dimension] = state.values[dimension]));
     let dimensionsSelect = selection;
 
     if (selection.includes("all")) {
       dimensionsSelect = dimensionOptions.map((dimension) => dimension.name);
     }
 
-    dimensionsSelect.forEach((dimension) => values[dimension] = state.values[dimension]);
+    dimensionsSelect.forEach((dimension) => (values[dimension] = state.values[dimension]));
     setState((state: IState) => ({ ...state, dimensionsSelect, values }));
-  }
+  };
 
   const setDimension = (value: Record<string, string>) => {
     setState((state: IState) => ({ ...state, values: { ...state.values, ...value } }));
-  }
+  };
 
   const dimensionOptions = [
     {
@@ -59,7 +54,7 @@ const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
         name: dimension.name,
         value: dimension.name,
         title: dimension.name,
-      }
+      };
       dimensionOptions.push(option);
     }
   });

package/src/components/Fields/AnalyticsField/index.test.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import AnalyticsField from "./index";
+import { IAnalytics } from "@ax/types";
+import { createStore, combineReducers } from "redux";
+import analyticsReducer from "../../../__mocks__/reducers/analyticsState";
+import pageEditorReducer from "../../../__mocks__/reducers/pageEditor";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import { render, cleanup } from "../../../../config/jest/test-utils";
+
+const valuesMock = {
+  contentSelect: "",
+  groupSelect: "",
+  dimensionsSelect: ["dimensions"],
+  values: { key: "", value: "" },
+};
+
+const analyticsMock = {
+  scriptCode: "",
+  siteScriptCodeExists: false,
+  dimensions: [],
+  groups: [],
+};
+
+afterEach(cleanup);
+
+describe("AnalyticsField component rendering", () => {
+  test("should render the component PageAnalytics", () => {
+    const initialState = {
+      value: valuesMock,
+      template: "BasicTemplate",
+      onChange: jest.fn(),
+      analytics: analyticsMock,
+    };
+    const initialStore = {
+      analytics: analyticsMock,
+    };
+    const store = createStore(
+      combineReducers({ pageEditor: pageEditorReducer, analytics: analyticsReducer }),
+      initialStore
+    );
+    const { getByText } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AnalyticsField {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+    expect(getByText(/Select Dimensions Options/i)).toBeInTheDocument();
+  });
+  test("should render the component StructuredDataAnalytics", () => {
+    const valuesMock = {
+      contentSelect: "content",
+      groupSelect: "group",
+      dimensionsSelect: ["dimensions"],
+      values: { key: "a", value: "b" },
+    };
+    const analyticsMock = {
+      scriptCode: "",
+      siteScriptCodeExists: false,
+      dimensions: [{ name: "dimension", values: "dimensions" }],
+      groups: [{ templates: "BasicTemplate", name: "Basic Template", dimensions: "dimension 1" }],
+    };
+    const initialState = {
+      value: valuesMock,
+      template: "BasicTemplate",
+      onChange: jest.fn(),
+      analytics: analyticsMock,
+    };
+    const initialStore = {
+      analytics: analyticsMock,
+    };
+    const store = createStore(
+      combineReducers({ pageEditor: pageEditorReducer, analytics: analyticsReducer }),
+      initialStore
+    );
+    const { getByText } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AnalyticsField {...initialState} />
+      </ThemeProvider>,
+      { store }
+    );
+    expect(getByText(/Add More Dimensions/i)).toBeInTheDocument();
+  });
+});
+
+export interface IAnalyticsFieldProps {
+  value: IState;
+  template: string;
+  onChange: (value: IState) => void;
+  analytics: IAnalytics;
+}
+
+export interface IState {
+  contentSelect: string;
+  groupSelect: string;
+  dimensionsSelect: string[];
+  values: Record<string, string>;
+}

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

@@ -10,10 +10,17 @@ import { getTemplateDimensions } from "./utils";
 
 const AnalyticsField = (props: IAnalyticsFieldProps): JSX.Element => {
   const { analytics, template } = props;
-
   const templateDimensions = getTemplateDimensions(analytics.groups, template);
 
-  return isEmptyArray(templateDimensions) ? <PageAnalytics {...props} /> : <StructuredDataAnalytics {...props} />;
+  return isEmptyArray(templateDimensions) ? (
+    <>
+      <PageAnalytics {...props} />
+    </>
+  ) : (
+    <>
+      <StructuredDataAnalytics {...props} />
+    </>
+  );
 };
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/Fields/AnalyticsField/utils.tsx

@@ -8,6 +8,6 @@ const getTemplateDimensions = (groups: IDimensionsGroup[], template: string): st
   }, []);
   const uniqueTemplateDimensions = [...new Set(templateDimensions)];
   return uniqueTemplateDimensions;
-}
+};
 
-export { getTemplateDimensions }
+export { getTemplateDimensions };

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

@@ -1,3 +1,4 @@
+import React from "react";
 import styled from "styled-components";
 import ActionMenu from "@ax/components/ActionMenu";
 
@@ -8,7 +9,7 @@ const Wrapper = styled.div<{ isOpen: boolean }>`
   border-radius: ${(p) => p.theme.radii.s};
 `;
 
-const StyledActionMenu = styled(ActionMenu)`
+const StyledActionMenu = styled((props) => <ActionMenu {...props} />)`
   width: ${(p) => p.theme.spacing.m};
   height: ${(p) => p.theme.spacing.m};
   display: flex;

package/src/components/Fields/CheckField/index.test.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import CheckField from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const defaultProps = {
+  name: "",
+  title: "",
+  value: "",
+  checked: false,
+  error: false,
+  disabled: false,
+  indeterminate: false,
+  onChange: jest.fn(),
+  icon: "",
+};
+
+describe("CheckField component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const checkFieldLabel = screen.getByTestId("checkFieldLabel");
+    const checkFieldInput = screen.getByTestId("checkFieldInput");
+    const checkFieldCheckMark = screen.getByTestId("checkFieldCheckMark");
+
+    expect(checkFieldLabel).toBeTruthy();
+    expect(checkFieldInput).toBeTruthy();
+    expect(checkFieldCheckMark).toBeTruthy();
+  });
+
+  it("should render the component with icon", () => {
+    const props = {
+      name: "",
+      title: "",
+      value: "",
+      checked: false,
+      error: false,
+      disabled: false,
+      indeterminate: false,
+      onChange: jest.fn(),
+      icon: "icon",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckField {...props} />
+      </ThemeProvider>
+    );
+
+    const checkFieldInput = screen.getByTestId("checkFieldInput");
+
+    expect(checkFieldInput).toBeTruthy();
+  });
+});
+
+describe("CheckField events", () => {
+  it("should call the onchange", () => {
+    const onChangeMock = jest.fn();
+
+    const props = {
+      name: "name",
+      title: "title",
+      value: "empty",
+      checked: false,
+      error: false,
+      disabled: false,
+      indeterminate: false,
+      onChange: onChangeMock,
+      icon: "icon",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckField {...props} />
+      </ThemeProvider>
+    );
+
+    const checkFieldLabel = screen.getByTestId("checkFieldLabel");
+    const checkFieldInput = screen.getByTestId<HTMLInputElement>("checkFieldInput");
+
+    expect(checkFieldLabel).toBeTruthy();
+    expect(checkFieldInput).toBeTruthy();
+    fireEvent.change(checkFieldInput, { target: { checked: true, value: "lalala" } });
+    expect(checkFieldInput.value).toBe("lalala");
+    expect(checkFieldInput.checked).toBe(true);
+  });
+});

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

@@ -24,9 +24,9 @@ const CheckField = ({
 
   return (
     <S.Wrapper>
-      <S.Label disabled={disabled}>
+      <S.Label data-testid={"checkFieldLabel"} disabled={disabled}>
         {icon ? (
-          <S.IconLabelWrapper>
+          <S.IconLabelWrapper data-testid={"checkFieldIconLabel"}>
             <S.IconWrapper>
               <Icon name={icon} />
             </S.IconWrapper>
@@ -36,6 +36,7 @@ const CheckField = ({
           title
         )}
         <S.Input
+          data-testid={"checkFieldInput"}
           type="checkbox"
           name={`${name}`}
           value={value || ""}
@@ -43,7 +44,12 @@ const CheckField = ({
           disabled={disabled}
           onChange={handleChange}
         />
-        <S.CheckMark checked={checked} error={error} indeterminate={indeterminate} />
+        <S.CheckMark
+          data-testid={"checkFieldCheckMark"}
+          checked={checked}
+          error={error}
+          indeterminate={indeterminate}
+        />
       </S.Label>
     </S.Wrapper>
   );