@griddo/ax 1.67.10 → 1.68.2

package/src/components/ConfigPanel/Header/index.tsx

@@ -1,17 +1,22 @@
 import React, { memo } from "react";
 
 import { IBreadcrumbItem } from "@ax/types";
-import { Breadcrumb } from "@ax/components";
+import { Breadcrumb, Toast } from "@ax/components";
+import { useToast } from "@ax/hooks";
 
 import * as S from "./style";
 
 const Header = (props: IProps) => {
   const { breadcrumb, schema, selectedParent, activatedModules, actions, setSelectedContent } = props;
-  const { duplicateModuleAction, deleteModuleAction } = actions;
+  const { duplicateModuleAction, deleteModuleAction, copyModuleAction } = actions;
   const title = breadcrumb[breadcrumb.length - 1].displayName;
   const component = breadcrumb[breadcrumb.length - 1].component;
   const editorID = breadcrumb[breadcrumb.length - 1].editorID;
   const parentID = breadcrumb.length > 1 ? breadcrumb[breadcrumb.length - 2].editorID : breadcrumb[0].editorID;
+  const isModule = schema.schemaType === "module";
+  const isInArray = Array.isArray(selectedParent);
+
+  const { isVisible, toggleToast, setIsVisible } = useToast();
 
   const removeItem = () => {
     setSelectedContent(parentID);
@@ -23,6 +28,11 @@ const Header = (props: IProps) => {
     setSelectedContent(parentID);
   };
 
+  const copyItem = () => {
+    const isCopied = copyModuleAction(editorID);
+    isCopied && toggleToast();
+  };
+
   const duplicateOpt = {
     label: "duplicate",
     icon: "duplicate",
@@ -35,20 +45,27 @@ const Header = (props: IProps) => {
     action: removeItem,
   };
 
-  const isInArray = Array.isArray(selectedParent);
+  const copyOpt = {
+    label: "copy",
+    icon: "copy",
+    action: copyItem,
+  };
 
-  const isModuleDeactivated =
-    schema.schemaType === "module" && isInArray && activatedModules && !activatedModules.includes(component);
+  const isModuleDeactivated = isModule && isInArray && activatedModules && !activatedModules.includes(component);
   const canDuplicate = !isModuleDeactivated;
 
-  const menuOptions = !canDuplicate ? [deleteOpt] : [duplicateOpt, deleteOpt];
+  let menuOptions = !canDuplicate ? [deleteOpt] : [duplicateOpt, deleteOpt];
+  menuOptions = isModule ? [...menuOptions, copyOpt] : menuOptions;
 
   return (
-    <S.HeaderWrapper>
-      <S.Title>{title}</S.Title>
-      <Breadcrumb breadcrumb={breadcrumb} setSelectedContent={setSelectedContent} />
-      {isInArray && <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />}
-    </S.HeaderWrapper>
+    <>
+      <S.HeaderWrapper>
+        <S.Title>{title}</S.Title>
+        <Breadcrumb breadcrumb={breadcrumb} setSelectedContent={setSelectedContent} />
+        {isInArray && <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />}
+      </S.HeaderWrapper>
+      {isVisible && <Toast message="1 module copied to clipboard" setIsVisible={setIsVisible} />}
+    </>
   );
 };
 

package/src/components/ConfigPanel/index.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useRef } from "react";
-import { isEmptyObj } from "@ax/helpers";
 
+import { isEmptyObj } from "@ax/helpers";
 import { Loading } from "@ax/components";
-import Header from "./Header";
 import { IBreadcrumbItem, IUserEditing } from "@ax/types";
 
 import Form from "./Form";
 import NavigationForm from "./NavigationForm";
 import GlobalPageForm from "./GlobalPageForm";
 import PreviewForm from "./PreviewForm";
+import Header from "./Header";
 
 import * as S from "./style";
 

package/src/components/ErrorCenter/index.tsx

@@ -16,14 +16,19 @@ const ErrorCenter = (props: IProps): JSX.Element => {
 
   const getErrorItem = (item: IErrorItem): JSX.Element => {
     const handleClick = () => {
-      actions?.goToError(item.editorID, item.tab, item.template);
-      goToElement(item.key);
+      if (item.hasDeactivatedPackage) {
+        actions?.goToPackage();
+      } else {
+        item.editorID && actions?.goToError(item.editorID, item.tab, item.template);
+        goToElement(item.key);
+      }
     };
 
     const icon = item.type === "warning" ? "warning" : "alert";
+    const isClicable = !!item.editorID || !!item.hasDeactivatedPackage || !!item.key;
 
     return (
-      <S.Wrapper key={`${item.editorID}${item.key}`} clickable={!!item.editorID} onClick={handleClick}>
+      <S.Wrapper key={`${item.editorID}${item.key}`} clickable={isClicable} onClick={handleClick}>
         <S.Header type={item.type}>
           <Icon name={icon} size="16" />
           <S.Type>{item.type}</S.Type>
@@ -31,7 +36,8 @@ const ErrorCenter = (props: IProps): JSX.Element => {
         <S.Content>
           <S.Title>{item.message}</S.Title>
           <S.Subtitle>{item.name}</S.Subtitle>
-          {item.editorID && <S.Link>Go to field</S.Link>}
+          {isClicable && !item.hasDeactivatedPackage && <S.Link>Go to field</S.Link>}
+          {isClicable && item.hasDeactivatedPackage && <S.Link>Go to package</S.Link>}
         </S.Content>
       </S.Wrapper>
     );
@@ -49,6 +55,7 @@ interface IProps {
   errors: IErrorItem[];
   actions?: {
     goToError(editorID: number | null, tab: string, template: boolean): void;
+    goToPackage(): void;
   };
 }
 

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

@@ -5,6 +5,8 @@ import { Button, FieldsDivider } from "@ax/components";
 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 } = props;
 
@@ -73,11 +75,11 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
             );
           })}
       </div>
-      <div>
+      <S.ButtonWrapper>
         <Button type="button" onClick={handleClick} buttonStyle="line">
           {`Add ${name}`}
         </Button>
-      </div>
+      </S.ButtonWrapper>
     </div>
   );
 };

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+const ButtonWrapper = styled.div`
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+export { ButtonWrapper };

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import { checkgroups } from "@ax/api";
 import { isReqOk } from "@ax/helpers";
-import { CheckField } from "@ax/components";
+import CheckField from "@ax/components/Fields/CheckField";
 import { ISite, ICheck } from "@ax/types";
 
 import * as S from "./style";

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ICheck } from "@ax/types";
-import { Icon } from "@ax/components";
+import Icon from "@ax/components/Icon";
 
 import * as S from "./style";
 

package/src/components/Fields/ColorPicker/Picker/index.tsx

@@ -57,17 +57,23 @@ const Picker = (props: IProps): JSX.Element => {
   const gridColors = colors ? colors : defaultColors;
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="pickerWrapper">
       <S.Cover background={color} light={isLight(color)}>
         {color}
       </S.Cover>
       <S.Grid>
         {gridColors.map((item: string) => (
-          <S.GridItem key={item} background={item} onClick={handleClick(item)} selected={item === color} />
+          <S.GridItem
+            data-testid="gridItem"
+            key={item}
+            background={item}
+            onClick={handleClick(item)}
+            selected={item === color}
+          />
         ))}
       </S.Grid>
       <S.InputWrapper>
-        <S.Input type="text" value={inputValue} onChange={handleChange} />
+        <S.Input data-testid="inputPicker" type="text" value={inputValue} onChange={handleChange} />
       </S.InputWrapper>
     </S.Wrapper>
   );

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

@@ -30,7 +30,6 @@ const ColorPicker = (props: IProps): JSX.Element => {
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let inputValue = e.target.value;
     dispatch({ inputValue });
-
     const re3 = /^#[0-9a-fA-F]{3}$/;
     const re6 = /^#[0-9a-fA-F]{6}$/;
 
@@ -42,7 +41,6 @@ const ColorPicker = (props: IProps): JSX.Element => {
       dispatch({ color: inputValue });
       onChange(inputValue);
     }
-
     error && handleValidation && handleValidation(inputValue, { colorHex: true });
   };
 
@@ -75,19 +73,16 @@ const ColorPicker = (props: IProps): JSX.Element => {
     if (defaultOptions(colorOptions) || !themeExists) return defaultsOptions;
 
     // Si options tiene el theme, devuelve las options de ese theme.
-    if (themeExists) {
-      const optionsObj = colorOptions.find((entry) => entry.theme === theme);
-      return optionsObj && optionsObj.options;
-    }
-
-    return [];
+    const optionsObj = colorOptions.find((entry) => entry.theme === theme);
+    return optionsObj && optionsObj.options;
   };
 
   return (
-    <S.Wrapper ref={wrapper}>
+    <S.Wrapper ref={wrapper} data-testid="colorPickerWrapper">
       <S.InputWrapper>
         <S.ColorWrapper background={state.color} />
         <S.Input
+          data-testid="inputPickerWrapper"
           type="text"
           value={state.inputValue}
           onChange={handleInputChange}

package/src/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton/index.tsx

@@ -15,8 +15,9 @@ const PasteModuleButton = (props: IProps): JSX.Element => {
       if (pasteResult.error) {
         const { type, text } = pasteResult.error;
         setNotification && setNotification({ type, text });
+      } else {
+        toggleToast();
       }
-      toggleToast();
     } else {
       const notification: INotification = {
         type: "error",

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -35,10 +35,12 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   } = props;
 
   const moduleCopyComponent = moduleCopy?.element.component;
+
   const availableDataPackModule = availableDataPacks?.reduce((prev: any, curr: any) => {
     const packModule = curr.modules.find((module: any) => module.id === moduleCopyComponent);
     return prev || packModule;
   }, null);
+
   const isModuleCopyUnavailable =
     availableDataPackModule &&
     !whiteList.includes(moduleCopyComponent) &&
@@ -88,9 +90,9 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   };
 
   const showAddItemButton = (!maxItems || fixedValue.length < maxItems) && !disabled;
-
   const timeSinceModuleCopy = !!moduleCopy && differenceInSeconds(new Date(), new Date(moduleCopy.date));
   const eightHoursInSeconds = 8 * 60 * 60;
+
   const showPasteModuleButton =
     showAddItemButton &&
     isModuleArr &&
@@ -111,31 +113,33 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
       </S.Title>
       <S.ItemRow>
         <S.Subtitle>{fixedValue && fixedValue.length} items</S.Subtitle>
-        {showPasteModuleButton && (
-          <PasteModuleButton
-            editorID={editorID}
-            isModuleCopyUnavailable={isModuleCopyUnavailable}
-            pasteModule={actions.pasteModuleAction}
-            setNotification={actions.setNotificationAction}
-            setHistoryPush={setHistoryPush}
-          />
-        )}
-        {showAddItemButton && !disabled && (
-          <AddItemButton
-            isOpen={isOpen}
-            toggleModal={toggleModal}
-            whiteList={whiteList}
-            categories={categories}
-            handleClick={handleAdd}
-            isModuleArr={isModuleArr}
-            theme={theme}
-          />
-        )}
+        <S.ActionsWrapper data-testid="mixableComponentWrapper">
+          {showPasteModuleButton && (
+            <PasteModuleButton
+              editorID={editorID}
+              isModuleCopyUnavailable={isModuleCopyUnavailable}
+              pasteModule={actions.pasteModuleAction}
+              setNotification={actions.setNotificationAction}
+              setHistoryPush={setHistoryPush}
+            />
+          )}
+          {showAddItemButton && !disabled && (
+            <AddItemButton
+              isOpen={isOpen}
+              toggleModal={toggleModal}
+              whiteList={whiteList}
+              categories={categories}
+              handleClick={handleAdd}
+              isModuleArr={isModuleArr}
+              theme={theme}
+            />
+          )}
+        </S.ActionsWrapper>
       </S.ItemRow>
       {fixedValue &&
         fixedValue.map((element: any, i: number) => {
           const { editorID } = element;
-          const { moduleTitle, isModuleDeactivated, componentTitle, displayName } = getComponentProps(
+          const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule } = getComponentProps(
             element,
             activatedModules,
             isModuleArr
@@ -161,6 +165,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               canDuplicate={showAddItemButton && !isModuleDeactivated}
               parentKey={objKey}
               theme={theme}
+              isModule={isModule}
             />
           );
         })}

package/src/components/Fields/ComponentArray/MixableComponentArray/style.tsx

@@ -9,36 +9,8 @@ const Title = styled.p`
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
 `;
 
-const Component = styled.button`
-  ${(p) => p.theme.textStyle.fieldLabel};
-  color: ${(p) => p.theme.color.textHighEmphasis};
-  display: block;
-  height: ${(p) => p.theme.spacing.l};
-  background: ${(p) => p.theme.color.uiBackground02};
-  border: 1px solid transparent;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-  margin-bottom: ${(p) => p.theme.spacing.xs};
-  padding: 0 ${(p) => p.theme.spacing.s};
-  border-radius: ${(p) => p.theme.radii.s};
-  box-shadow: ${(p) => p.theme.shadow.field};
-
-  &:hover {
-    background: ${(p) => p.theme.color.overlayHoverPrimary};
-  }
-
-  &:focus,
-  &:active {
-    background: ${(p) => p.theme.color.overlayFocusPrimary};
-    border: 1px solid ${(p) => p.theme.color.interactive01};
-    outline: none;
-  }
-`;
-
 const ItemRow = styled.div`
   display: flex;
-  justify-content: space-between;
   align-items: center;
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
@@ -54,15 +26,8 @@ const Asterisk = styled.span`
 
 const ActionsWrapper = styled.div`
   display: flex;
-  gap: ${(p) => p.theme.spacing.xxs};
+  margin-left: auto;
+  align-items: center;
 `;
 
-export {
-  Wrapper,
-  Title,
-  Component,
-  ItemRow,
-  Subtitle,
-  Asterisk,
-  ActionsWrapper
-};
+export { Wrapper, Title, ItemRow, Subtitle, Asterisk, ActionsWrapper };

package/src/components/Fields/ComponentArray/SameComponentArray/index.tsx

@@ -58,7 +58,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="sameComponentWrapper">
       <S.Title>
         {title} <Asterisk />
       </S.Title>
@@ -72,7 +72,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
         Array.isArray(value) &&
         value.map((element: any, i: number) => {
           const { editorID } = element;
-          const { moduleTitle, isModuleDeactivated, componentTitle, displayName } = getComponentProps(
+          const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule } = getComponentProps(
             element,
             activatedModules,
             isModuleArr
@@ -96,6 +96,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
               canDuplicate={showAddItemButton && !isModuleDeactivated}
               parentKey={objKey}
               theme={theme}
+              isModule={isModule}
             />
           );
         })}

package/src/components/Fields/ComponentArray/SameComponentArray/style.tsx

@@ -9,33 +9,6 @@ const Title = styled.p`
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
 `;
 
-const Component = styled.button`
-  ${(p) => p.theme.textStyle.fieldLabel};
-  color: ${(p) => p.theme.color.textHighEmphasis};
-  display: block;
-  height: ${(p) => p.theme.spacing.l};
-  background: ${(p) => p.theme.color.uiBackground02};
-  border: 1px solid transparent;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-  margin-bottom: ${(p) => p.theme.spacing.xs};
-  padding: 0 ${(p) => p.theme.spacing.s};
-  border-radius: ${(p) => p.theme.radii.s};
-  box-shadow: ${(p) => p.theme.shadow.field};
-
-  &:hover {
-    background: ${(p) => p.theme.color.overlayHoverPrimary};
-  }
-
-  &:focus,
-  &:active {
-    background: ${(p) => p.theme.color.overlayFocusPrimary};
-    border: 1px solid ${(p) => p.theme.color.interactive01};
-    outline: none;
-  }
-`;
-
 const ItemRow = styled.div`
   display: flex;
   justify-content: space-between;
@@ -52,4 +25,4 @@ const Asterisk = styled.span`
   color: ${(p) => p.theme.color.error};
 `;
 
-export { Wrapper, Title, Component, ItemRow, Subtitle, Asterisk };
+export { Wrapper, Title, ItemRow, Subtitle, Asterisk };

package/src/components/Fields/ComponentArray/helpers.tsx

@@ -23,7 +23,7 @@ const getComponentProps = (element: any, activatedModules: string[], isModuleArr
   const componentTitle = !isModule && displayName !== title && title;
   const isModuleDeactivated = isModuleArr && activatedModules && !activatedModules.includes(component);
 
-  return { moduleTitle, isModuleDeactivated, componentTitle, displayName };
+  return { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule };
 };
 
 const containerToComponentArray = (value: Record<string, IComponent>): IComponent[] =>

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

@@ -30,6 +30,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     theme,
     canReplace,
     actionReplace,
+    isModule,
   } = props;
 
   const { isVisible, toggleToast, setIsVisible } = useToast();
@@ -107,7 +108,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
   };
 
   const actionArrayMenuOptions = [
-    copyOpt,
+    ...(isModule ? [copyOpt] : []),
     ...(canDuplicate ? [duplicateOpt] : []),
     deleteOpt,
     ...(canReplace ? [replaceOpt] : []),
@@ -216,6 +217,7 @@ interface IComponentContainerProps {
   theme: string;
   canReplace?: boolean;
   actionReplace?: () => void;
+  isModule?: boolean;
 }
 
 export default ComponentContainer;

package/src/components/Fields/FileField/FileDragAndDrop/index.tsx

@@ -108,7 +108,7 @@ const FileDragAndDrop = (props: IProps) => {
   const errorWrapper = state.errorMsg ? <S.ErrorMsg>{state.errorMsg}</S.ErrorMsg> : null;
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="file-drag-and-drop-wrapper">
       <S.DragAndDropWrapper
         inDropZone={state.inDropZone}
         uploading={state.isUploading}

package/src/components/Fields/FileField/FileDragAndDrop/style.tsx

@@ -163,9 +163,8 @@ export const FilesInput = styled.input<{ ref: any }>`
   display: none;
 `;
 
-export const FilesButton = styled((props) => <Button {...props} />).attrs((props: any) => ({
-  ref: props.ref,
-}))<{ ref: any }>`
+const _Button: any = React.forwardRef((props: any, ref?: React.Ref<HTMLDivElement>) => <Button {...props} />);
+export const FilesButton = styled(_Button)`
   margin-top: ${(p) => p.theme.spacing.xs};
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 
 import { useModal } from "@ax/hooks";
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
@@ -7,7 +7,7 @@ import FileDragAndDrop from "./FileDragAndDrop";
 
 import * as S from "./style";
 
-const FileField = (props: IProps) => {
+const FileField = (props: IFileFieldProps): JSX.Element => {
   const { disabled, value, onChange } = props;
 
   const { isOpen, toggleModal } = useModal(false);
@@ -61,7 +61,7 @@ const FileField = (props: IProps) => {
 
   return (
     <>
-      <S.FileDataWrapper>
+      <S.FileDataWrapper data-testid="file-data-wrapper">
         <S.FileName>{fileName}</S.FileName>
         <S.FileData>
           <div>Uploaded: {fileDate}</div>
@@ -69,7 +69,7 @@ const FileField = (props: IProps) => {
         </S.FileData>
       </S.FileDataWrapper>
       {value && value.url && (
-        <S.TextFieldWrapper>
+        <S.TextFieldWrapper data-testid="text-field-wrapper">
           <TextField
             name="url"
             value={value.url}
@@ -82,7 +82,7 @@ const FileField = (props: IProps) => {
       )}
       {!value && (
         <>
-          <S.Field onClick={handleClick}>
+          <S.Field onClick={handleClick} data-testid="field-icon-wrapper">
             <S.IconWrapper>
               <Icon name="File" size="24" />
             </S.IconWrapper>
@@ -106,7 +106,7 @@ const FileField = (props: IProps) => {
   );
 };
 
-interface IProps {
+export interface IFileFieldProps {
   value: any;
   onChange: (value: any) => void;
   disabled?: boolean;

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

@@ -4,13 +4,13 @@ import * as S from "./style";
 
 import { Icon, Tooltip } from "@ax/components";
 
-const HiddenField = ({ title, showField, hasMultipleOptions }: IHiddenFieldProps) => {
+const HiddenField = ({ title, showField, hasMultipleOptions }: IHiddenFieldProps): JSX.Element => {
   return hasMultipleOptions ? (
-    <S.WrapperMultipleOptions onClick={showField}>
+    <S.WrapperMultipleOptions onClick={showField} data-testid="field-multiple-options">
       <Icon name="add" />
     </S.WrapperMultipleOptions>
   ) : (
-    <S.Wrapper onClick={showField}>
+    <S.Wrapper onClick={showField} data-testid="field-single-option">
       <S.Label>{title}</S.Label>
       <Tooltip content="Show">
         <Icon name="add" />

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

@@ -1,23 +1,14 @@
 import React, { useState, memo } from "react";
 
 import { ISite } from "@ax/types";
-import { AsyncCheckGroup, CheckGroup } from "@ax/components";
+import AsyncCheckGroup from "@ax/components/Fields/AsyncCheckGroup";
+import CheckGroup from "@ax/components/Fields/CheckGroup";
 
 import * as S from "./style";
 
 const MultiCheckSelect = (props: IProps) => {
-  const {
-    placeholder,
-    source,
-    value,
-    onChange,
-    site,
-    className,
-    mandatory,
-    options,
-    selectAllOption,
-    floating,
-  } = props;
+  const { placeholder, source, value, onChange, site, className, mandatory, options, selectAllOption, floating } =
+    props;
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -26,27 +17,17 @@ const MultiCheckSelect = (props: IProps) => {
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
   return (
-    <S.Wrapper className={className}>
-      <S.Field isOpen={isOpen} onClick={handleClick}>
+    <S.Wrapper className={className} data-testid="multi-check-select-wrapper">
+      <S.Field isOpen={isOpen} onClick={handleClick} data-testid="field">
         {placeholder} <Asterisk />
       </S.Field>
       {isOpen && (
         <S.DropDown floating={floating}>
           {options && (
-            <CheckGroup
-              options={options}
-              value={value}
-              onChange={onChange}
-              selectAllOption={selectAllOption}
-            />
+            <CheckGroup options={options} value={value} onChange={onChange} selectAllOption={selectAllOption} />
           )}
           {source && (
-            <AsyncCheckGroup
-              source={source}
-              site={site}
-              value={value}
-              onChange={onChange}
-              fullHeight={true} />
+            <AsyncCheckGroup source={source} site={site} value={value} onChange={onChange} fullHeight={true} />
           )}
         </S.DropDown>
       )}