@griddo/ax 1.72.11 → 1.73.2

package/src/components/Notification/SubNotification/style.tsx

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div<{ isVisible: boolean }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: ${(p) => `0 ${p.theme.spacing.m}`};
+  color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  ${(p) => p.theme.textStyle.uiM};
+  display: ${(p) => (p.isVisible ? "block" : "none")};
+  transition: all 0.5s;
+  background-color: ${(p) => p.theme.colors.overlayHoverDark};
+  border-bottom: 1px solid ${(p) => p.theme.colors.iconLowEmphasisInverse};
+`;
+
+const Row = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: ${(p) => p.theme.spacing.l};
+  z-index: 2;
+  padding-left: ${(p) => `calc( ${p.theme.spacing.m} + ${p.theme.spacing.s})`};
+  padding-right: ${(p) => p.theme.spacing.xxs};
+
+  svg {
+    width: ${(p) => p.theme.spacing.s};
+    height: ${(p) => p.theme.spacing.s};
+    path {
+      fill: ${(p) => p.theme.color.textHighEmphasisInverse};
+    }
+  }
+`;
+
+const Text = styled.span``;
+
+const ActionsWrapper = styled.div`
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+`;
+
+const CloseWrapper = styled.span`
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+`;
+
+export { Wrapper, Text, Row, ActionsWrapper, CloseWrapper };

package/src/components/Notification/index.tsx

@@ -1,36 +1,36 @@
 import React, { useState } from "react";
 import { Icon } from "@ax/components";
+import SubNotification from "./SubNotification";
 
 import * as S from "./style";
 
-const Notification = (props: IProps) => {
-  const { text, type, btnText, resetError, onClick, closeButton = true, actionsBelow } = props;
+const Notification = (props: INotificationProps): JSX.Element => {
+  const { text, type, btnText, resetError, onClick, closeButton = true, actionsBelow, subErrors } = props;
 
-  const [isOpen, setIsOpen] = useState(true);
+  const [isVisible, setIsVisible] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
 
   const getNotificationIcon = (type: string) => {
     switch (type) {
       case "error":
       case "info":
         return (
-          <S.IconWrapper>
+          <S.IconWrapper data-testid="alert-icon">
             <Icon name="alert" />
           </S.IconWrapper>
         );
       case "success":
         return (
-          <S.IconWrapper>
+          <S.IconWrapper data-testid="success-icon">
             <Icon name="done" />
           </S.IconWrapper>
         );
       case "warning":
         return (
-          <S.IconWrapper>
+          <S.IconWrapper data-testid="warning-icon">
             <Icon name="warning" />
           </S.IconWrapper>
         );
-      default:
-        return null;
     }
   };
 
@@ -40,37 +40,50 @@ const Notification = (props: IProps) => {
 
   const handleClose = () => {
     resetError && resetError();
-    setIsOpen(false);
+    setIsVisible(false);
   };
 
+  const toggleShow = () => setIsOpen(!isOpen);
+
   const ActionBtn = () => (
-    <S.ActionBtn onClick={handleClick} actionsBelow={actionsBelow}>
+    <S.ActionBtn onClick={handleClick} actionsBelow={actionsBelow} data-testid="action-button">
       {btnText}
     </S.ActionBtn>
   );
 
+  const showText = isOpen ? "Hide errors" : "Show errors";
+
   return (
-    <>
-      <S.Wrapper isOpen={isOpen} className={type}>
+    <S.Wrapper isVisible={isVisible} className={type} data-testid="notification-wrapper">
+      <S.NotificationWrapper>
         <S.Row>
           {getNotificationIcon(type)}
           <S.Text>{text}</S.Text>
           <S.ActionsWrapper>
+            {subErrors && subErrors.length > 0 && (
+              <S.Button onClick={toggleShow} isOpen={isOpen} data-testid="suberrors-button">
+                {showText}
+              </S.Button>
+            )}
             {btnText && !actionsBelow && <ActionBtn />}
             {closeButton && (
-              <S.CloseWrapper onClick={handleClose}>
-                <Icon name="close" />
+              <S.CloseWrapper onClick={handleClose} data-testid="close-button">
+                <Icon name="close" size="24" />
               </S.CloseWrapper>
             )}
           </S.ActionsWrapper>
         </S.Row>
         {btnText && actionsBelow && <ActionBtn />}
-      </S.Wrapper>
-    </>
+      </S.NotificationWrapper>
+      {isOpen &&
+        subErrors &&
+        subErrors.length > 0 &&
+        subErrors.map((not: { id: number; error: string }) => <SubNotification key={not.id} text={not.error} />)}
+    </S.Wrapper>
   );
 };
 
-interface IProps {
+export interface INotificationProps {
   text: string;
   type: "error" | "info" | "success" | "warning";
   resetError?: () => void;
@@ -78,6 +91,7 @@ interface IProps {
   onClick?: () => void;
   closeButton?: boolean;
   actionsBelow?: boolean;
+  subErrors?: { id: number; error: string }[];
 }
 
 export default Notification;

package/src/components/Notification/style.tsx

@@ -1,14 +1,9 @@
 import styled from "styled-components";
 
-const Wrapper = styled.div<{ isOpen: boolean }>`
+const Wrapper = styled.div<{ isVisible: boolean }>`
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  display: ${(p) => (p.isOpen ? "block" : "none")};
-  padding: ${(p) => `0 ${p.theme.spacing.m}`};
-  color: ${(p) => p.theme.color.textHighEmphasisInverse};
-  ${(p) => p.theme.textStyle.uiL};
+  display: ${(p) => (p.isVisible ? "block" : "none")};
   transition: all 0.5s;
   &.error {
     background-color: ${(p) => p.theme.colors.error};
@@ -24,6 +19,16 @@ const Wrapper = styled.div<{ isOpen: boolean }>`
   }
 `;
 
+const NotificationWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: ${(p) => `0 ${p.theme.spacing.m}`};
+  color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  ${(p) => p.theme.textStyle.uiL};
+`;
+
 const Row = styled.div`
   display: flex;
   align-items: center;
@@ -74,4 +79,24 @@ const ActionBtn = styled.button<{ actionsBelow?: boolean }>`
   margin-bottom: ${(p) => (p.actionsBelow ? p.theme.spacing.s : 0)};
 `;
 
-export { Wrapper, Text, IconWrapper, Row, CloseWrapper, ActionBtn, ActionsWrapper };
+const Button = styled.div<{ isOpen: boolean }>`
+  position: relative;
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textHighEmphasisInverse};
+  padding-right: ${(p) => p.theme.spacing.s};
+  margin-right: ${(p) => p.theme.spacing.m};
+  cursor: pointer;
+  :after {
+    position: absolute;
+    right: 0;
+    top: ${(p) => (p.isOpen ? `6px` : `2px`)};
+    content: "";
+    border: solid ${(p) => p.theme.color.interactiveInverse};
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: ${(p) => (p.isOpen ? `rotate(-135deg)` : `rotate(45deg)`)};
+  }
+`;
+
+export { Wrapper, NotificationWrapper, Text, IconWrapper, Row, CloseWrapper, ActionBtn, ActionsWrapper, Button };

package/src/components/ReorderArrows/index.tsx

@@ -13,13 +13,13 @@ const ReorderArrows = (props: IReorderArrows): JSX.Element => {
   const Arrows = () => (
     <>
       {!isFirst && (
-        <S.ReorderArrow setMargin={isLast}>
+        <S.ReorderArrow data-testid="reorder-last" setMargin={isLast}>
           {" "}
           <IconAction icon="FullArrowUp" size="s" onClick={handleUpClick} />{" "}
         </S.ReorderArrow>
       )}
       {!isLast && (
-        <S.ReorderArrow>
+        <S.ReorderArrow data-testid="reorder-first">
           {" "}
           <IconAction icon="FullArrowDown" size="s" onClick={handleDownClick} />{" "}
         </S.ReorderArrow>
@@ -30,7 +30,7 @@ const ReorderArrows = (props: IReorderArrows): JSX.Element => {
   return <>{showReorderArrows && <Arrows />}</>;
 };
 
-interface IReorderArrows {
+export interface IReorderArrows {
   index: number;
   listLength: number;
   handleUpClick: (e: any) => void;

package/src/components/ResizePanel/ResizeHandle/index.tsx

@@ -2,46 +2,37 @@ import React from "react";
 
 import * as S from "./style";
 
-class ResizeHandle extends React.Component<IResizeHandleProps> {
-  private _handleResize: any;
-  private _handleMouseUp: any;
-
-  public initListeners = () => {
-    window.addEventListener("mousemove", this._handleResize, false);
-    window.addEventListener("mouseup", this._handleMouseUp, false);
-  }
-
-  public removeListeners = () => {
-    window.removeEventListener("mousemove", this._handleResize, false);
-    window.removeEventListener("mouseup", this._handleMouseUp, false);
-  }
-
-  public handleMouseDown = () => {
-    this._handleResize = this.handleResize.bind(this);
-    this._handleMouseUp = this.handleMouseUp.bind(this);
-    this.initListeners();
-  }
-
-  public handleMouseUp = () => {
-    this.removeListeners();
-  }
-
-  public handleResize = (e: MouseEvent) => {
+const ResizeHandle = (props: IResizeHandleProps): JSX.Element => {
+  const { left } = props;
+
+  const initListeners = () => {
+    window.addEventListener("mousemove", handleResize, false);
+    window.addEventListener("mouseup", handleMouseUp, false);
+  };
+
+  const removeListeners = () => {
+    window.removeEventListener("mousemove", handleResize, false);
+    window.removeEventListener("mouseup", handleMouseUp, false);
+  };
+
+  const handleMouseDown = () => initListeners();
+
+  const handleMouseUp = () => removeListeners();
+
+  const handleResize = (e: MouseEvent) => {
     e.preventDefault();
-    const { onMouseMove } = this.props;
-    const newWidth = window.document.body.offsetWidth - e.pageX;
+    const { onMouseMove } = props;
+    const newWidth = window.document.body.offsetWidth - e.clientX;
     onMouseMove(newWidth);
-  }
-
-  public render() {
-    const { left } = this.props;
-    return (
-      <S.HandlerWrapper>
-        <S.Handler onMouseDown={this.handleMouseDown} left={left ? left : 0} />
-      </S.HandlerWrapper>
-    );
-  }
-}
+  };
+
+  return (
+    <S.HandlerWrapper>
+      <S.Handler onMouseDown={handleMouseDown} left={left ? left : 0} data-testid="handler" />
+    </S.HandlerWrapper>
+  );
+};
+
 export interface IResizeHandleProps {
   onMouseMove: (value: number) => void;
   left?: number;

package/src/components/ResizePanel/index.tsx

@@ -3,7 +3,7 @@ import ResizeHandle from "./ResizeHandle";
 
 import * as S from "./style";
 
-const ResizePanel = (props: IProps): JSX.Element => {
+const ResizePanel = (props: IResizePanelProps): JSX.Element => {
   const { leftPanel, rightPanel, fixed = true } = props;
 
   const [rwidth, setRwidth] = useState(0);
@@ -12,7 +12,6 @@ const ResizePanel = (props: IProps): JSX.Element => {
   const rightPanelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-
     if (rightPanelRef.current) {
       setRwidth(rightPanelRef.current.offsetWidth);
     }
@@ -22,8 +21,7 @@ const ResizePanel = (props: IProps): JSX.Element => {
     };
 
     window.addEventListener("scroll", handleScroll);
-
-  },[rightPanelRef]);
+  }, [rightPanelRef]);
 
   const resize = (value: number) => {
     if (value > 344) {
@@ -33,24 +31,24 @@ const ResizePanel = (props: IProps): JSX.Element => {
 
   return (
     <>
-      { fixed ?
-        <S.LeftPanel>
-          <S.FixedPanel width={rwidth} left={scroll}>{leftPanel}</S.FixedPanel>
-        </S.LeftPanel>
-        :
-        <S.LeftPanel>
-          {leftPanel}
+      {fixed ? (
+        <S.LeftPanel data-testid="left-panel-fixed">
+          <S.FixedPanel width={rwidth} left={scroll} data-testid="fixed-panel">
+            {leftPanel}
+          </S.FixedPanel>
         </S.LeftPanel>
-      }
-      <S.RightPanel width={rwidth} ref={rightPanelRef}>
+      ) : (
+        <S.LeftPanel data-testid="left-panel">{leftPanel}</S.LeftPanel>
+      )}
+      <S.RightPanel width={rwidth} ref={rightPanelRef} data-testid="right-panel">
         <ResizeHandle left={scroll} onMouseMove={resize} />
-          {rightPanel}
+        {rightPanel}
       </S.RightPanel>
     </>
   );
 };
 
-interface IProps {
+export interface IResizePanelProps {
   leftPanel: JSX.Element | JSX.Element[];
   rightPanel: JSX.Element | JSX.Element[];
   fixed?: boolean;

package/src/components/SearchField/index.tsx

@@ -4,7 +4,7 @@ import { Select } from "../Fields";
 
 import * as S from "./style";
 
-const SearchField = (props: IProps): JSX.Element => {
+const SearchField = (props: ISearchFieldProps): JSX.Element => {
   const {
     onChange,
     placeholder,
@@ -56,12 +56,12 @@ const SearchField = (props: IProps): JSX.Element => {
   const showField = isOpen || !closeOnInactive;
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="search-field-wrapper">
       {showField ? (
-        <S.FieldWrapper closeOnInactive={closeOnInactive} disabled={disabled}>
+        <S.FieldWrapper closeOnInactive={closeOnInactive} disabled={disabled} data-testid="field-wrapper">
           {searchFilters && searchFilters.length && (
             <>
-              <S.FilterWrapper>
+              <S.FilterWrapper data-testid="filter-wrapper">
                 <Select
                   name="filterSelect"
                   value={selectValue}
@@ -82,20 +82,21 @@ const SearchField = (props: IProps): JSX.Element => {
             placeholder={placeholder}
             closeOnInactive={closeOnInactive}
             disabled={disabled}
+            data-testid="search-input"
           />
           {inputValue.trim() !== "" && searchOnEnter && <S.HelpText>Press ENTER</S.HelpText>}
           {closeOnInactive || inputValue.length > 0 ? (
-            <S.IconCloseWrapper onClick={handleClick}>
+            <S.IconCloseWrapper onClick={handleClick} data-testid="icon-close-wrapper">
               <Icon name="close" size="24" />
             </S.IconCloseWrapper>
           ) : (
-            <S.IconSearchWrapper disabled={disabled}>
+            <S.IconSearchWrapper disabled={disabled} data-testid="icon-search-wrapper-2">
               <Icon name="search" size="24" />
             </S.IconSearchWrapper>
           )}
         </S.FieldWrapper>
       ) : (
-        <S.IconSearchWrapper disabled={disabled} onClick={toggleField}>
+        <S.IconSearchWrapper disabled={disabled} onClick={toggleField} data-testid="icon-search-wrapper">
           <Icon name="search" size="24" />
         </S.IconSearchWrapper>
       )}
@@ -103,7 +104,7 @@ const SearchField = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface ISearchFieldProps {
   onChange(query: string): void;
   placeholder?: string;
   closeOnInactive?: boolean;

package/src/containers/Analytics/actions.tsx

@@ -28,7 +28,10 @@ function getAnalytics(siteId: number | string = "global"): (dispatch: any) => Pr
   };
 }
 
-function updateAnalytics(analyticsState: IAnalytics, siteId: number | string = "global"): (dispatch: any) => Promise<boolean> {
+function updateAnalytics(
+  analyticsState: IAnalytics,
+  siteId: number | string = "global"
+): (dispatch: any) => Promise<boolean> {
   return async (dispatch) => {
     try {
       const { scriptCode, dimensions, groups } = analyticsState;
@@ -38,13 +41,20 @@ function updateAnalytics(analyticsState: IAnalytics, siteId: number | string = "
         promises.push(analytics.createDimensions(siteId, { dimensions }));
         promises.push(analytics.createDimensionsGroups(siteId, { groups }));
         return Promise.all(promises);
-      }
+      };
 
       const responseActions = {
         handleSuccess: () => {
           dispatch(getAnalytics());
         },
-        handleError: (response: any) => appActions.handleError(response)(dispatch),
+        handleError: (response: any) => {
+          const {
+            data: { message },
+          } = response;
+          const isMultiple = Array.isArray(message) && message.length > 1;
+          const msg = isMultiple ? `The action failed due to ${message.length} errors.` : undefined;
+          appActions.handleError(response, isMultiple, msg)(dispatch);
+        },
       };
 
       return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
@@ -60,7 +70,7 @@ function updateScriptCode(scriptCode: string, siteId: number): (dispatch: any) =
     try {
       const callback = async () => {
         return analytics.updateScriptCode(siteId, { scriptCode });
-      }
+      };
 
       const responseActions = {
         handleSuccess: () => {

package/src/containers/App/actions.tsx

@@ -97,15 +97,25 @@ function resetError(): ISetErrorAction {
   return { type: RESET_ERROR, payload: { code: undefined, text: "" } };
 }
 
-function handleError(response: any): (dispatch: Dispatch) => Promise<void> {
+function handleError(response: any, isMultiple = false, msg?: string): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
-    const { data, btnText, actionsBelow, text } = response;
+    const {
+      data: { code, message },
+      btnText,
+      actionsBelow,
+      text,
+    } = response;
+
+    const firstMsg = Array.isArray(message) ? message[0].error : message || text;
+
     const error = {
-      code: data?.code,
-      text: data?.message || text,
+      code,
+      text: msg ? msg : firstMsg,
       btnText,
       actionsBelow,
+      subErrors: isMultiple ? message : [],
     };
+
     dispatch(setError(error));
   };
 }
@@ -117,7 +127,7 @@ function login(email: string, password: string, rememberMe: boolean): (dispatch:
     const loginResponse: any = await global.login(email, password);
     dispatch(setIsLogging(false));
     switch (loginResponse.status) {
-      case 200:
+      case 200: {
         const {
           data: { token },
         } = loginResponse;
@@ -130,7 +140,8 @@ function login(email: string, password: string, rememberMe: boolean): (dispatch:
           localStorage.setItem("user", JSON.stringify(user));
         }
         break;
-      case 403:
+      }
+      case 403: {
         const error = {
           ...loginResponse,
           btnText: "Lost your password?",
@@ -138,6 +149,7 @@ function login(email: string, password: string, rememberMe: boolean): (dispatch:
         };
         handleError(error)(dispatch);
         break;
+      }
       default:
         handleError(loginResponse)(dispatch);
         break;

package/src/containers/App/reducer.tsx

@@ -30,6 +30,7 @@ export interface IError {
   text: any;
   btnText?: string | undefined;
   actionsBelow?: boolean | undefined;
+  subErrors?: any[];
 }
 
 export interface IUser {

package/src/containers/Domains/actions.tsx

@@ -37,7 +37,14 @@ function updateDomainsRobots(robots: IDomainRobot[]): (dispatch: any) => Promise
         handleSuccess: () => {
           dispatch(getDomainsRobots());
         },
-        handleError: (response: any) => appActions.handleError(response)(dispatch),
+        handleError: (response: any) => {
+          const {
+            data: { message },
+          } = response;
+          const isMultiple = Array.isArray(message) && message.length > 1;
+          const msg = isMultiple ? `The action failed due to ${message.length} errors.` : undefined;
+          appActions.handleError(response, isMultiple, msg)(dispatch);
+        },
       };
 
       return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);

package/src/containers/Navigation/Defaults/actions.tsx

@@ -309,10 +309,17 @@ function deleteNavigation(
       const responseActions = {
         handleSuccess: () => getNavigationByType(type)(dispatch, getState),
         handleError: (response: any) => {
+          const {
+            data: { message },
+          } = response;
+
           if (isBulk) {
             getNavigationByType(type)(dispatch, getState);
           }
-          appActions.handleError(response)(dispatch);
+
+          const isMultiple = Array.isArray(message) && message.length > 1;
+          const msg = isMultiple ? `The delete action failed due to ${message.length} errors.` : undefined;
+          appActions.handleError(response, isMultiple, msg)(dispatch);
         },
       };
 
@@ -335,7 +342,14 @@ function restoreNavigation(
     try {
       const responseActions = {
         handleSuccess: () => getNavigationByType(type)(dispatch, getState),
-        handleError: (response: any) => appActions.handleError(response)(dispatch),
+        handleError: (response: any) => {
+          const {
+            data: { message },
+          } = response;
+          const isMultiple = Array.isArray(message) && message.length > 1;
+          const msg = isMultiple ? `The restore action failed due to ${message.length} errors.` : undefined;
+          appActions.handleError(response, isMultiple, msg)(dispatch);
+        },
       };
 
       const callback = async () =>