@griddo/ax 1.69.8 → 1.72.0

package/src/__tests__/components/Toast/Toast.test.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+
+import Toast, { IToastProps } from "@ax/components/Toast";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IToastProps>();
+
+describe("Toast component rendering", () => {
+  jest.useFakeTimers();
+  jest.spyOn(global, "setTimeout");
+
+  it("should render the component", () => {
+    defaultProps.message = "1 module copied to clipboard";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toastWrapper = screen.getByTestId("toast-wrapper");
+    expect(toastWrapper).toBeTruthy();
+  });
+
+  it("should render the component's message", () => {
+    defaultProps.message = "1 module copied to clipboard";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toastMessage = screen.getByTestId("toast-message");
+    expect(toastMessage.textContent).toEqual("1 module copied to clipboard");
+  });
+
+  it("should not render the undo button when no action", () => {
+    defaultProps.message = "1 module copied to clipboard";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const button = screen.queryByTestId("button-line-inverse");
+    expect(button).toBeFalsy();
+  });
+});
+
+describe("Toast component events", () => {
+  it("should render the undo button when action", () => {
+    defaultProps.message = "1 module copied to clipboard";
+    defaultProps.action = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const button = screen.getByTestId("button-line-inverse");
+    expect(button).toBeTruthy();
+  });
+
+  it("should change visibility after 5000 ms", async () => {
+    defaultProps.message = "1 module copied to clipboard";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(setTimeout).toHaveBeenCalled();
+    expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 5000);
+  });
+
+  it("should contain closing animation class on click close button", async () => {
+    defaultProps.message = "1 module copied to clipboard";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Toast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toastWrapper = screen.getByTestId("toast-wrapper");
+    const closeButton = screen.getByTestId("icon-action-component");
+    expect(closeButton).toBeTruthy();
+    fireEvent.click(closeButton);
+    expect(toastWrapper.classList.contains("close-animation")).toBeTruthy();
+  });
+});

package/src/api/navigation.tsx

@@ -105,7 +105,7 @@ const updateNavigation = (navID: number, data: any) => {
 
   SERVICES.UPDATE_NAVIGATION.dynamicUrl = `${host}${endpoint}${navID}`;
 
-  return sendRequest(SERVICES.UPDATE_NAVIGATION, { ...data });
+  return sendRequest(SERVICES.UPDATE_NAVIGATION, data);
 };
 
 const deleteNavigation = (navID: number) => {

package/src/components/Browser/index.tsx

@@ -136,7 +136,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
           <iframe title="Preview" width={getWidth(resolution)} height="100%" src={urlPreview} loading="lazy" />
         </S.FrameWrapper>
       ) : (
-        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)} className="browser-content">
           <BrowserContent
             cloudinaryName={cloudinaryName}
             theme={theme}

package/src/components/Button/index.tsx

@@ -36,7 +36,7 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
     case buttonStyles.TEXT:
       return (
         <S.TextButton
-          data-testid="buttonText"
+          data-testid="button-text"
           className={className}
           type={type}
           disabled={disabled}
@@ -49,7 +49,7 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
     case buttonStyles.INVERSE:
       return (
         <S.LineButton
-          data-testid="buttonLineInverse"
+          data-testid="button-line-inverse"
           className={className}
           type={type}
           disabled={disabled}
@@ -62,7 +62,7 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
     default:
       return (
         <S.Button
-          data-testid="buttonDefault"
+          data-testid="button-default"
           className={className}
           type={type}
           disabled={disabled}

package/src/components/ConfigPanel/NavigationForm/Field/index.tsx

@@ -12,9 +12,20 @@ const pageEditorID = 0;
 const Field = (props: IProps) => {
   const { type, defaults, updateEditorContent, selectedContent, theme } = props;
   const { isOpen, toggleModal } = useModal();
+  const isDefault = selectedContent.setAsDefault;
+
+  const options = defaults.filter((component: any) => {
+    const isCurrentType = component.type === type;
+    const isNotSelected = component.id !== selectedContent.id;
+    return isCurrentType && isNotSelected;
+  });
+
+  const hasMultipleOptions: boolean | undefined = options && options.length > 0;
+  let filteredByDefaultOptions = options;
+  if (!isDefault && hasMultipleOptions) {
+    filteredByDefaultOptions = options.filter((component: any) => !component.setAsDefault);
+  }
 
-  const options = defaults.filter((component: any) => component.type === type);
-  const hasMultipleOptions: boolean | undefined = options && options.length > 1;
   const optionsType = `${type}s`;
 
   const actionMenuOptions = [
@@ -52,7 +63,7 @@ const Field = (props: IProps) => {
       {hasMultipleOptions && (
         <SideModal
           optionsType={optionsType}
-          whiteList={options}
+          whiteList={filteredByDefaultOptions}
           handleClick={handleReplace}
           toggleModal={toggleModal}
           isOpen={isOpen}

package/src/components/ElementsTooltip/index.tsx

@@ -3,12 +3,12 @@ import { trimText } from "@ax/helpers";
 
 import * as S from "./style";
 
-const ElementsTooltip = (props: IProps): JSX.Element => {
+const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
   const { elements, maxChar, defaultElements = 1, colors, rounded = false, elementsPerRow = 1 } = props;
 
   if (!elements) return <></>;
 
-  const visibleElements = elements?.slice(0, defaultElements);
+  const visibleElements = elements.slice(0, defaultElements);
   const remainingElements = elements.length - defaultElements;
 
   const elementsRows: string[][] = [];
@@ -16,30 +16,31 @@ const ElementsTooltip = (props: IProps): JSX.Element => {
     const row = Math.floor(idx / elementsPerRow);
     const isNewRow = idx % elementsPerRow === 0;
     elementsRows[row] = isNewRow ? [element] : [...elementsRows[row], element];
-  })
+  });
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="elements-wrapper">
       {visibleElements.map((fullElement, idx) => {
         const element = defaultElements === 1 && maxChar ? trimText(fullElement, maxChar) : fullElement;
         const color = colors && colors[element] ? colors[element] : undefined;
+
         return (
-          <S.Element key={idx} color={color} rounded={rounded}>
+          <S.Element data-testid="element" key={idx} color={color} rounded={rounded}>
             {element}
           </S.Element>
         );
       })}
       {remainingElements > 0 && (
-        <S.Element rounded={rounded}>
+        <S.Element data-testid="remaining-element" rounded={rounded}>
           +{remainingElements}
           <S.Tooltip>
             {elementsRows.map((row, idx) => {
               return (
-                <S.Row key={idx}>
+                <S.Row data-testid="row-element" key={idx}>
                   {row.map((element, idx) => {
                     const color = colors && colors[element] ? colors[element] : undefined;
                     return (
-                      <S.Element key={idx} color={color} rounded={rounded}>
+                      <S.Element data-testid="div-element" key={idx} color={color} rounded={rounded}>
                         {element}
                       </S.Element>
                     );
@@ -54,7 +55,7 @@ const ElementsTooltip = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface IElementsTooltipProps {
   elements?: string[];
   defaultElements?: number;
   maxChar?: number;

package/src/components/EmptyState/index.tsx

@@ -8,8 +8,8 @@ const EmptyState = (props: IEmptyStateProps) => {
   const { icon, title, message, button, action } = props;
 
   return (
-    <S.Wrapper>
-      <S.IconWrapper>
+    <S.Wrapper data-testid="wrapper">
+      <S.IconWrapper data-testid="icon-wrapper">
         <Icon name={icon || "empty"} size="26" />
       </S.IconWrapper>
       <S.Title>{title || "Oh! This Looks so empty"}</S.Title>

package/src/components/FieldContainer/index.tsx

@@ -5,7 +5,7 @@ import { getNullValue, getDefaultSchema, getDefaultTemplate } from "@ax/helpers"
 
 import { FieldsBehavior, HiddenField } from "@ax/components";
 
-const FieldContainer = (props: IProps) => {
+const FieldContainer = (props: IFieldContainerProps) => {
   const { selectedContent, updateValue, field, goTo, objKey, lang } = props;
 
   const { type, key, title, hideable, slugTo } = field;
@@ -28,9 +28,9 @@ const FieldContainer = (props: IProps) => {
   };
 
   const hasMultipleOptions = field.whiteList && field.whiteList.length > 1;
-
   const nullValue = isContainer ? getNullValue(containerValue, hasMultipleOptions) : null;
   const hasNullValue = JSON.stringify(containerValue) === JSON.stringify(nullValue);
+
   const getField = () => <FieldsBehavior {...fieldProps} key={key} />;
 
   const getDefaultValue = () => {
@@ -56,7 +56,7 @@ const FieldContainer = (props: IProps) => {
 
 export default FieldContainer;
 
-interface IProps {
+export interface IFieldContainerProps {
   key: string;
   field: any;
   selectedContent: any;

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

@@ -84,7 +84,7 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface IProps {
   value: Record<string, unknown>[];
   name: string;
   onChange: (value: Record<string, unknown>[]) => void;

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

@@ -78,7 +78,7 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
   return <S.FieldGroup full={fullHeight}>{checks}</S.FieldGroup>;
 };
 
-interface IAsyncCheckGroup {
+export interface IAsyncCheckGroup {
   value: any[] | null;
   site?: ISite | null;
   source: string;

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

@@ -152,7 +152,7 @@ interface ICheck {
   name: string;
   title: string;
 }
-interface IAsyncSelectProps {
+export interface IAsyncSelectProps {
   name: string;
   value: any;
   entity?: string;

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

@@ -24,9 +24,9 @@ const CheckField = ({
 
   return (
     <S.Wrapper>
-      <S.Label data-testid={"checkFieldLabel"} disabled={disabled}>
+      <S.Label data-testid="check-field-label" disabled={disabled}>
         {icon ? (
-          <S.IconLabelWrapper data-testid={"checkFieldIconLabel"}>
+          <S.IconLabelWrapper data-testid="check-field-icon-label">
             <S.IconWrapper>
               <Icon name={icon} />
             </S.IconWrapper>
@@ -36,7 +36,7 @@ const CheckField = ({
           title
         )}
         <S.Input
-          data-testid={"checkFieldInput"}
+          data-testid="check-field-input"
           type="checkbox"
           name={`${name}`}
           value={value || ""}

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

@@ -38,7 +38,7 @@ const CheckGroup = (props: ICheckGroupProps): JSX.Element => {
   const checks = options
     ? options.map((item: ICheckFieldProps) => (
         <CheckField
-          data-testid="CheckGroupCheckfield"
+          data-testid="check-group-checkfield"
           key={item.name}
           onChange={handleChange}
           checked={valueArray.includes(item.name)}
@@ -52,7 +52,7 @@ const CheckGroup = (props: ICheckGroupProps): JSX.Element => {
       ))
     : "";
 
-  return <S.FieldGroup data-testid="CheckGroupFieldgroup">{checks}</S.FieldGroup>;
+  return <S.FieldGroup data-testid="check-group-field-group">{checks}</S.FieldGroup>;
 };
 
 interface ICheckGroupProps {

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

@@ -57,9 +57,9 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
   let componentID: number = editorID ? editorID : containerOptions.editorID;
 
   const containerInfo: any = !isArray && value && isEmptyContainer(value, hasMultipleOptions);
-  const isEmpty: boolean = containerInfo.isEmpty;
+  const isEmpty: boolean = containerInfo?.isEmpty;
 
-  const currentComponent: any = containerInfo.containedComponent;
+  const currentComponent: any = containerInfo?.containedComponent;
 
   if (currentComponent) {
     containerText = currentComponent.containerText;
@@ -152,17 +152,18 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
         className={`editorId-${editorID}`}
         onClick={handleClick}
         ref={innerRef}
+        data-testid="component-container"
         {...provided?.draggableProps}
       >
-        {isArray && provided && arrayLength > 1 && (
-          <S.HandleWrapper {...provided?.dragHandleProps}>
+        {isArray && provided && (
+          <S.HandleWrapper {...provided?.dragHandleProps} hidden={arrayLength < 2} data-testid="handle-wrapper">
             <S.IconHandleWrapper>
               <Icon name="drag" size="16" />
             </S.IconHandleWrapper>
           </S.HandleWrapper>
         )}
         {containerInfo && !disabled && (
-          <S.IconWrapper>
+          <S.IconWrapper data-testid="icon-wrapper">
             <Icon name={containerText} />
           </S.IconWrapper>
         )}
@@ -195,7 +196,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
   );
 };
 
-interface IComponentContainerProps {
+export interface IComponentContainerProps {
   text: string;
   editorID: number;
   whiteList: any[] | undefined;

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

@@ -76,8 +76,8 @@ const ButtonsWrapper = styled.span`
   margin-left: auto;
 `;
 
-const HandleWrapper = styled.div`
-  display: flex;
+const HandleWrapper = styled.div<{ hidden?: boolean }>`
+  display: ${(p) => (p.hidden ? "none" : "flex")};
   align-items: center;
 `;
 

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

@@ -16,7 +16,7 @@ const HeadingField = (props: IHeadingFieldProps): JSX.Element => {
     <>
       <TextField {...props} value={contentValue} onChange={handleChange} />
       {showAdvanced && (
-        <S.AdvancedWrapper data-testid="textFieldAdvancedWrapper">
+        <S.AdvancedWrapper data-testid="text-field-advanced-wrapper">
           <FieldsBehavior fieldType="Select" options={options} value={value.tag} onChange={handleSelectChange} />
         </S.AdvancedWrapper>
       )}

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

@@ -19,7 +19,7 @@ const HiddenField = ({ title, showField, hasMultipleOptions }: IHiddenFieldProps
   );
 };
 
-interface IHiddenFieldProps {
+export interface IHiddenFieldProps {
   title: string;
   showField: any;
   hasMultipleOptions?: boolean;

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

@@ -65,17 +65,22 @@ const ImageField = (props: IImageFieldProps) => {
   };
 
   const previewHeight = cropPreview ? { height: 190 } : {};
-
   return (
     <>
-      <S.FieldWrapper error={error} preview={!!previewSrc} disabled={disabled} onClick={handleClick}>
+      <S.FieldWrapper
+        data-testid="fieldWrapper"
+        error={error}
+        preview={!!previewSrc}
+        disabled={disabled}
+        onClick={handleClick}
+      >
         <S.IconWrapper>
           <Icon name="image" size="18" />
         </S.IconWrapper>
         <S.Text>Add image</S.Text>
       </S.FieldWrapper>
       {value && Object.keys(value).length > 1 && typeof value !== "string" && (
-        <S.ImageDataWrapper>
+        <S.ImageDataWrapper data-testid="imageDataWrapper">
           <S.FileName>{value.name}</S.FileName>
           <S.ImageData>
             Uploaded: {!!value.published && getFormattedDateWithTimezone(value.published, "d MMM Y")}
@@ -84,7 +89,7 @@ const ImageField = (props: IImageFieldProps) => {
           </S.ImageData>
         </S.ImageDataWrapper>
       )}
-      <S.Preview preview={!!previewSrc}>
+      <S.Preview preview={!!previewSrc} data-testid="previewDiv">
         {previewSrc && <Image url={previewSrc} width={320} {...previewHeight} />}
         <S.PreviewActions>
           <IconAction icon="change" onClick={handleChange} />
@@ -98,7 +103,7 @@ const ImageField = (props: IImageFieldProps) => {
   );
 };
 
-interface IImageFieldProps {
+export interface IImageFieldProps {
   value: IImage | null | string;
   error?: boolean;
   onChange: (value: any) => void;

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

@@ -6,7 +6,7 @@ import CheckGroup from "@ax/components/Fields/CheckGroup";
 
 import * as S from "./style";
 
-const MultiCheckSelect = (props: IProps) => {
+const MultiCheckSelect = (props: IMultiCheckSelectProps) => {
   const { placeholder, source, value, onChange, site, className, mandatory, options, selectAllOption, floating } =
     props;
 
@@ -35,7 +35,7 @@ const MultiCheckSelect = (props: IProps) => {
   );
 };
 
-interface IProps {
+export interface IMultiCheckSelectProps {
   value: (string | number)[];
   onChange: (value: string | (string | number)[]) => void;
   site?: ISite | null;
@@ -43,7 +43,7 @@ interface IProps {
   source?: string;
   className?: string;
   mandatory?: boolean;
-  options?: { name: string, value: string, title: string }[];
+  options?: { name: string; value: string; title: string }[];
   selectAllOption?: string;
   floating?: boolean;
 }

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

@@ -37,6 +37,7 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
 
     setInputValue(updatedValue.toString());
     onChange(updatedValue);
+    handleValidation && handleValidation(updatedValue.toString(), validators);
   };
 
   let validators: Record<string, unknown> = maxValue ? { maxValue } : {};
@@ -81,7 +82,7 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
   );
 };
 
-interface INumberFieldProps {
+export interface INumberFieldProps {
   value?: number;
   onChange: (value: number) => void;
   name?: string;

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

@@ -46,13 +46,11 @@ const Item = (props: IProps) => {
 
   return (
     <S.Item ref={innerRef} data-testid="reference-field-item" {...provided?.draggableProps}>
-      {listLength > 1 && (
-        <S.HandleWrapper {...provided?.dragHandleProps}>
-          <S.IconHandleWrapper>
-            <Icon name="drag" size="16" />
-          </S.IconHandleWrapper>
-        </S.HandleWrapper>
-      )}
+      <S.HandleWrapper {...provided?.dragHandleProps} hidden={listLength < 2} data-testid="handle-wrapper">
+        <S.IconHandleWrapper>
+          <Icon name="drag" size="16" />
+        </S.IconHandleWrapper>
+      </S.HandleWrapper>
       <S.TextWrapper>
         <S.Header>
           <S.Type>{source?.title.toUpperCase()}</S.Type>

package/src/components/Fields/ReferenceField/ItemList/Item/style.tsx

@@ -108,8 +108,8 @@ const ButtonsWrapper = styled.span`
   right: ${(p) => p.theme.spacing.xs};
 `;
 
-const HandleWrapper = styled.div`
-  display: flex;
+const HandleWrapper = styled.div<{ hidden?: boolean }>`
+  display: ${(p) => (p.hidden ? "none" : "flex")};
   align-items: center;
   padding-right: ${(p) => p.theme.spacing.xxs};
 `;

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

@@ -98,7 +98,7 @@ const ItemList = (props: IProps) => {
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="referenceList">
             {(provided) => (
-              <div ref={provided.innerRef} {...provided.droppableProps}>
+              <div ref={provided.innerRef} {...provided.droppableProps} data-testid="droppable">
                 <ComponentList components={selectedItems} />
                 {provided.placeholder}
               </div>

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

@@ -10,7 +10,7 @@ import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 import * as S from "./style";
 
 const RichText = (props: IRichTextProps): JSX.Element => {
-  const { value, error, placeholder, onChange, disabled, editorID, handleValidation, html = false } = props;
+  const { value, error, placeholder, onChange, disabled, editorID, handleValidation, html = false, delayed } = props;
 
   const rawData = html ? htmlToDraft(value || "") : markdownToDraft(value);
   const { contentBlocks, entityMap } = rawData;
@@ -28,15 +28,18 @@ const RichText = (props: IRichTextProps): JSX.Element => {
   }, [editorID]);
 
   useEffect(() => {
-    timeOutRef.current && clearTimeout(timeOutRef.current);
-    timeOutRef.current = setTimeout(() => {
-      delayedChange();
-    }, 300);
+    if (delayed !== false) {
+      timeOutRef.current && clearTimeout(timeOutRef.current);
+      timeOutRef.current = setTimeout(() => {
+        delayedChange();
+      }, 300);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorState]);
 
   const handleOnChange = (editorState: EditorState) => {
     setEditorState(editorState);
+    delayed === false && delayedChange();
   };
 
   const delayedChange = () => {
@@ -106,7 +109,7 @@ const RichText = (props: IRichTextProps): JSX.Element => {
   );
 };
 
-interface IRichTextProps {
+export interface IRichTextProps {
   editorID: number;
   value: string;
   error?: boolean;
@@ -115,6 +118,7 @@ interface IRichTextProps {
   onChange: (value: string) => void;
   handleValidation?: (value: string) => void;
   html: boolean;
+  delayed?: boolean;
 }
 
 export default memo(RichText);

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

@@ -47,7 +47,7 @@ const Select = (props: ISelectProps): JSX.Element => {
   const searchable = type === "inline" ? false : true;
 
   return (
-    <div data-testid="selectComponent">
+    <div data-testid="select-component">
       <S.StyledSelect
         name={name}
         value={getObjectValue(value, optionValues)}
@@ -69,7 +69,7 @@ const Select = (props: ISelectProps): JSX.Element => {
   );
 };
 
-interface ISelectProps {
+export interface ISelectProps {
   name: string;
   value: string;
   options: IOptionProps[];

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

@@ -41,7 +41,7 @@ const SliderField = (props: ITextFieldProps): JSX.Element => {
   );
 };
 
-interface ITextFieldProps {
+export interface ITextFieldProps {
   title: string;
   value: number;
   defaultValue?: number;