@griddo/ax 1.68.7 → 1.69.0

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

@@ -5,13 +5,13 @@ import { Tooltip, IconAction, Toast } from "@ax/components";
 import { INotification } from "@ax/types";
 
 const PasteModuleButton = (props: IProps): JSX.Element => {
-  const { pasteModule, setNotification, setHistoryPush, editorID, isModuleCopyUnavailable } = props;
+  const { pasteModule, setNotification, setHistoryPush, editorID, isModuleCopyUnavailable, arrayKey } = props;
 
   const { isVisible, toggleToast, setIsVisible } = useToast();
 
   const handlePasteModule = async () => {
     if (!isModuleCopyUnavailable) {
-      const pasteResult = await pasteModule(editorID);
+      const pasteResult = await pasteModule(editorID, arrayKey);
       if (pasteResult.error) {
         const { type, text } = pasteResult.error;
         setNotification && setNotification({ type, text });
@@ -40,11 +40,12 @@ const PasteModuleButton = (props: IProps): JSX.Element => {
 };
 
 interface IProps {
-  pasteModule: (editorID: number) => Promise<{ error?: INotification }>;
+  pasteModule: (editorID: number, key: string) => Promise<{ error?: INotification }>;
   setNotification?: (notification: INotification) => void;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   editorID: number;
   isModuleCopyUnavailable: boolean;
+  arrayKey: string;
 }
 
 export default memo(PasteModuleButton);

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

@@ -1,5 +1,6 @@
 import React from "react";
 import differenceInSeconds from "date-fns/differenceInSeconds";
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
 
 import { IModule } from "@ax/types";
 import { ComponentContainer, SideModal } from "@ax/components";
@@ -95,7 +96,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const showPasteModuleButton =
     showAddItemButton &&
-    isModuleArr &&
+    (isModuleArr || objKey === "componentModules") &&
     !!moduleCopy &&
     timeSinceModuleCopy < eightHoursInSeconds &&
     (whiteList.includes(moduleCopyComponent) || isModuleCopyUnavailable);
@@ -106,6 +107,60 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
+  const ComponentList = React.memo(function ComponentList({ components }: any) {
+    return components.map((element: any, i: number) => {
+      const { editorID } = element;
+      const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule } = getComponentProps(
+        element,
+        activatedModules,
+        isModuleArr
+      );
+      const text = getText(componentTitle || displayName, i);
+      return (
+        <Draggable draggableId={`${editorID}`} index={i} key={editorID}>
+          {(provided) => (
+            <ComponentContainer
+              actionReplace={toggleModal}
+              canReplace={canReplace}
+              isArray={true}
+              key={editorID}
+              editorID={editorID}
+              goTo={goTo}
+              text={text}
+              moduleTitle={moduleTitle}
+              whiteList={whiteList}
+              categories={categories}
+              actions={actions}
+              selectedContent={selectedContent}
+              disabled={disabled}
+              canDuplicate={showAddItemButton && !isModuleDeactivated}
+              parentKey={objKey}
+              theme={theme}
+              arrayLength={components.length}
+              innerRef={provided.innerRef}
+              provided={provided}
+              isModule={isModule}
+            />
+          )}
+        </Draggable>
+      );
+    });
+  });
+
+  const onDragEnd = (result: DropResult) => {
+    const { moveModuleAction } = actions;
+
+    if (!result.destination) {
+      return;
+    }
+
+    if (result.destination.index === result.source.index) {
+      return;
+    }
+
+    moveModuleAction(parseInt(result.draggableId), selectedContent, result.destination.index, objKey);
+  };
+
   return (
     <S.Wrapper>
       <S.Title>
@@ -121,6 +176,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               pasteModule={actions.pasteModuleAction}
               setNotification={actions.setNotificationAction}
               setHistoryPush={setHistoryPush}
+              arrayKey={objKey}
             />
           )}
           {showAddItemButton && !disabled && (
@@ -136,39 +192,18 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
           )}
         </S.ActionsWrapper>
       </S.ItemRow>
-      {fixedValue &&
-        fixedValue.map((element: any, i: number) => {
-          const { editorID } = element;
-          const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule } = getComponentProps(
-            element,
-            activatedModules,
-            isModuleArr
-          );
-          const text = getText(componentTitle || displayName, i);
-          return (
-            <ComponentContainer
-              actionReplace={toggleModal}
-              canReplace={canReplace}
-              isArray={true}
-              arrayLength={fixedValue.length}
-              index={i}
-              key={editorID}
-              editorID={editorID}
-              goTo={goTo}
-              text={text}
-              moduleTitle={moduleTitle}
-              whiteList={whiteList}
-              categories={categories}
-              actions={actions}
-              selectedContent={selectedContent}
-              disabled={disabled}
-              canDuplicate={showAddItemButton && !isModuleDeactivated}
-              parentKey={objKey}
-              theme={theme}
-              isModule={isModule}
-            />
-          );
-        })}
+      {fixedValue && (
+        <DragDropContext onDragEnd={onDragEnd}>
+          <Droppable droppableId="list">
+            {(provided) => (
+              <div ref={provided.innerRef} {...provided.droppableProps}>
+                <ComponentList components={fixedValue} />
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      )}
       {displayReplaceSideModal && isOpen && (
         <SideModal
           optionsType={optionsType}

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
 
 import { IModule } from "@ax/types";
 import { ComponentContainer } from "@ax/components";
@@ -57,32 +58,34 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
-  return (
-    <S.Wrapper data-testid="sameComponentWrapper">
-      <S.Title>
-        {title} <Asterisk />
-      </S.Title>
-      <S.ItemRow>
-        <S.Subtitle>{value && value.length} items</S.Subtitle>
-        {showAddItemButton && !disabled && (
-          <AddItemButton handleClick={handleAdd} tooltipText={isModuleArr ? "Add module" : "Add component"} />
-        )}
-      </S.ItemRow>
-      {value &&
-        Array.isArray(value) &&
-        value.map((element: any, i: number) => {
-          const { editorID } = element;
-          const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule } = getComponentProps(
-            element,
-            activatedModules,
-            isModuleArr
-          );
-          const text = getText(componentTitle || displayName, i);
-          return (
+  const onDragEnd = (result: DropResult) => {
+    const { moveModuleAction } = actions;
+
+    if (!result.destination) {
+      return;
+    }
+
+    if (result.destination.index === result.source.index) {
+      return;
+    }
+
+    moveModuleAction(parseInt(result.draggableId), selectedContent, result.destination.index, objKey);
+  };
+
+  const ComponentList = React.memo(function ComponentList({ components }: any) {
+    return components.map((element: any, i: number) => {
+      const { editorID } = element;
+      const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule } = getComponentProps(
+        element,
+        activatedModules,
+        isModuleArr
+      );
+      const text = getText(componentTitle || displayName, i);
+      return (
+        <Draggable draggableId={`${editorID}`} index={i} key={editorID}>
+          {(provided) => (
             <ComponentContainer
               isArray={true}
-              arrayLength={value.length}
-              index={i}
               key={editorID}
               editorID={editorID}
               goTo={goTo}
@@ -96,10 +99,40 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
               canDuplicate={showAddItemButton && !isModuleDeactivated}
               parentKey={objKey}
               theme={theme}
+              arrayLength={components.length}
+              innerRef={provided.innerRef}
+              provided={provided}
               isModule={isModule}
             />
-          );
-        })}
+          )}
+        </Draggable>
+      );
+    });
+  });
+
+  return (
+    <S.Wrapper data-testid="sameComponentWrapper">
+      <S.Title>
+        {title} <Asterisk />
+      </S.Title>
+      <S.ItemRow>
+        <S.Subtitle>{value && value.length} items</S.Subtitle>
+        {showAddItemButton && !disabled && (
+          <AddItemButton handleClick={handleAdd} tooltipText={isModuleArr ? "Add module" : "Add component"} />
+        )}
+      </S.ItemRow>
+      {value && Array.isArray(value) && (
+        <DragDropContext onDragEnd={onDragEnd}>
+          <Droppable droppableId="list">
+            {(provided) => (
+              <div ref={provided.innerRef} {...provided.droppableProps}>
+                <ComponentList components={value} />
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      )}
     </S.Wrapper>
   );
 };

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

@@ -1,19 +1,13 @@
 import React from "react";
 
-import { ActionMenu, ReorderArrows } from "@ax/components";
+import { ActionMenu } from "@ax/components";
 
 import * as S from "./style";
 
 const ArrayContainerButtons = (props: any) => {
-  const { handleDownClick, handleUpClick, listLength, index, options, icon } = props;
+  const { options, icon } = props;
   return (
     <S.ButtonsWrapper>
-      <ReorderArrows
-        handleDownClick={handleDownClick}
-        handleUpClick={handleUpClick}
-        listLength={listLength}
-        index={index}
-      />
       <ActionMenu options={options} icon={icon} />
     </S.ButtonsWrapper>
   );

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { DraggableProvided } from "react-beautiful-dnd";
 
 import { useModal, useToast } from "@ax/hooks";
 import { isEmptyContainer, getDisplayName, trimText } from "@ax/helpers";
@@ -22,27 +23,26 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     actions,
     title,
     categories,
-    index,
-    arrayLength,
     disabled,
     canDuplicate,
     parentKey,
     theme,
     canReplace,
     actionReplace,
+    arrayLength,
+    innerRef,
+    provided,
     isModule,
   } = props;
 
   const { isVisible, toggleToast, setIsVisible } = useToast();
 
   let deleteModuleAction: any;
-  let moveModuleAction: any;
   let duplicateModuleAction: any;
   let copyModuleAction: any;
 
   if (actions) {
     deleteModuleAction = actions.deleteModuleAction;
-    moveModuleAction = actions.moveModuleAction;
     duplicateModuleAction = actions.duplicateModuleAction;
     copyModuleAction = actions.copyModuleAction;
   }
@@ -124,26 +124,12 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
 
   const actionMenuIcon = "more";
 
-  const handleUpClick = (e: any) => moveModule(e, false);
-
-  const handleDownClick = (e: any) => moveModule(e, true);
-
-  const moveModule = (e: any, isPush: boolean) => {
-    e.preventDefault();
-    e.stopPropagation();
-    moveModuleAction(editorID, selectedContent, isPush, parentKey);
-  };
-
   const handleOptionClick = (option: any) => actions.addComponentAction(option);
 
   const compoundKey = parentKey ? `${parentKey}.${objKey}` : objKey;
   const handleReplace = (option: any) => actions.replaceModuleAction(option, selectedContent, compoundKey);
 
   const arrayContainerButtonsProps = {
-    handleDownClick,
-    handleUpClick,
-    listLength: arrayLength,
-    index,
     options: actionArrayMenuOptions,
     icon: actionMenuIcon,
   };
@@ -161,7 +147,20 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     />
   ) : (
     <>
-      <S.Component isArray={isArray} onClick={handleClick} disabled={disabled} className={`editorId-${editorID}`}>
+      <S.Component
+        disabled={disabled}
+        className={`editorId-${editorID}`}
+        onClick={handleClick}
+        ref={innerRef}
+        {...provided?.draggableProps}
+      >
+        {isArray && provided && arrayLength > 1 && (
+          <S.HandleWrapper {...provided?.dragHandleProps}>
+            <S.IconHandleWrapper>
+              <Icon name="drag" size="16" />
+            </S.IconHandleWrapper>
+          </S.HandleWrapper>
+        )}
         {containerInfo && !disabled && (
           <S.IconWrapper>
             <Icon name={containerText} />
@@ -209,14 +208,15 @@ interface IComponentContainerProps {
   selectedContent?: any;
   objKey?: string;
   actions: any;
-  index: number;
-  arrayLength: number;
   disabled?: boolean;
   canDuplicate?: boolean;
   parentKey?: string;
   theme: string;
   canReplace?: boolean;
   actionReplace?: () => void;
+  arrayLength: number;
+  innerRef?: any;
+  provided?: DraggableProvided;
   isModule?: boolean;
 }
 

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

@@ -1,14 +1,14 @@
 import styled from "styled-components";
 
 const IconWrapper = styled.div`
-  background-color: ${p => p.theme.color.uiBackground03};
+  background-color: ${(p) => p.theme.color.uiBackground03};
   border-radius: 4px;
-  height: calc(${p => p.theme.spacing.s} * 2);
-  width: calc(${p => p.theme.spacing.s} * 2);
+  height: calc(${(p) => p.theme.spacing.s} * 2);
+  width: calc(${(p) => p.theme.spacing.s} * 2);
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: ${p => p.theme.spacing.xs};
+  margin-right: ${(p) => p.theme.spacing.xs};
 `;
 
 const HiddenButtonsWrapper = styled.span`
@@ -17,32 +17,31 @@ const HiddenButtonsWrapper = styled.span`
   opacity: 0;
 `;
 
-const Component = styled.span<{ isArray: boolean | undefined; disabled?: boolean }>`
-  color: ${p => p.theme.color.textHighEmphasis};
+const Component = styled.span<{ disabled?: boolean }>`
+  color: ${(p) => p.theme.color.textHighEmphasis};
   position: relative;
   display: flex;
-  align-items: center;
-  justify-content: ${p => p.isArray ? "space-between" : "initial"};
+  align-items: stretch;
   width: 100%;
-  background: ${p => p.theme.color.uiBackground02};
+  background: ${(p) => p.theme.color.uiBackground02};
   border: 1px solid transparent;
-  margin-bottom: ${p => p.theme.spacing.xs};
-  padding: calc(${p => p.theme.spacing.xs} - 1px) ${p => p.theme.spacing.xs};
-  border-radius: ${p => p.theme.radii.s};
-  box-shadow: ${p => p.theme.shadow.shadowS};
-  ${p => p.theme.textStyle.fieldLabel};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  padding: calc(${(p) => p.theme.spacing.xs} - 1px) ${(p) => p.theme.spacing.xs};
+  border-radius: ${(p) => p.theme.radii.s};
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  ${(p) => p.theme.textStyle.fieldLabel};
   text-align: left;
-  cursor: ${p => p.disabled ? `default` : `pointer`};
+  cursor: ${(p) => (p.disabled ? `default` : `pointer`)};
 
-  &:hover ${HiddenButtonsWrapper}{
+  &:hover ${HiddenButtonsWrapper} {
     display: flex;
     opacity: 1;
   }
 
   &:focus,
   &:active {
-    background: ${p => p.disabled ? p.theme.color.uiBackground02 : p.theme.color.overlayFocusPrimary};
-    border: 1px solid ${p => p.disabled ? `transparent` : p.theme.color.interactive01};
+    background: ${(p) => (p.disabled ? p.theme.color.uiBackground02 : p.theme.color.overlayFocusPrimary)};
+    border: 1px solid ${(p) => (p.disabled ? `transparent` : p.theme.color.interactive01)};
     outline: none;
   }
 `;
@@ -50,27 +49,47 @@ const Component = styled.span<{ isArray: boolean | undefined; disabled?: boolean
 const Text = styled.div`
   display: flex;
   flex-direction: column;
-  margin-left: ${p => p.theme.spacing.xs};
+  margin-left: ${(p) => p.theme.spacing.xs};
+  justify-content: center;
 `;
 
-const Label = styled.span<{containerInfo: boolean | undefined; disabled?: boolean}>`
-  margin: ${p => p.theme.spacing.xxs } 0;
-  ${p => p.containerInfo ? p.theme.textStyle.headingXS : null };
-  color: ${p => p.disabled ? p.theme.color.interactiveDisabled : p.containerInfo ? p.theme.color.textMediumEmphasis : p.theme.color.textHighEmphasis};
+const Label = styled.span<{ containerInfo: boolean | undefined; disabled?: boolean }>`
+  margin: ${(p) => p.theme.spacing.xxs} 0;
+  ${(p) => (p.containerInfo ? p.theme.textStyle.headingXS : null)};
+  color: ${(p) =>
+    p.disabled
+      ? p.theme.color.interactiveDisabled
+      : p.containerInfo
+      ? p.theme.color.textMediumEmphasis
+      : p.theme.color.textHighEmphasis};
 `;
 
-const Title = styled.span<{disabled?: boolean}>`
-  ${p => p.theme.textStyle.uiXS };
-  color: ${p => p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textMediumEmphasis};
-  margin-bottom: ${p => p.theme.spacing.xxs};
+const Title = styled.span<{ disabled?: boolean }>`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textMediumEmphasis)};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
 const ButtonsWrapper = styled.span`
   display: flex;
   align-items: center;
+  margin-left: auto;
 `;
 
+const HandleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
 
+const IconHandleWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.textLowEmphasis};
+    }
+  }
+`;
 
 export {
   IconWrapper,
@@ -79,5 +98,7 @@ export {
   Label,
   Title,
   ButtonsWrapper,
-  HiddenButtonsWrapper
+  HiddenButtonsWrapper,
+  HandleWrapper,
+  IconHandleWrapper,
 };

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

@@ -4,7 +4,7 @@ import { ISite } from "@ax/types";
 
 import * as S from "./style";
 
-const MultiCheckSelectGroup = (props: IProps) => {
+const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
   const { value, onChange, site, elements, note } = props;
 
   return (
@@ -38,7 +38,7 @@ const MultiCheckSelectGroup = (props: IProps) => {
   );
 };
 
-interface IProps {
+export interface IMultiCheckSelectGroupProps {
   value: any;
   elements: any[];
   onChange: (value: string | string[]) => void;

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

@@ -1,14 +1,14 @@
+import React from "react";
 import styled from "styled-components";
 import MultiCheckSelect from "../MultiCheckSelect";
 import NoteField from "../NoteField";
 
-
-const StyledMultiCheckSelect = styled(MultiCheckSelect)`
-  margin-bottom: ${p => p.theme.spacing.xs};
+const StyledMultiCheckSelect = styled((props) => <MultiCheckSelect {...props} />)`
+  margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
 const StyledNoteField = styled(NoteField)`
-  margin-bottom: ${p => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
 export { StyledMultiCheckSelect, StyledNoteField };

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/index.tsx

@@ -32,7 +32,7 @@ const AutoItem = (props: IProps) => {
   const actionMenuItem = (item: any, source: string) => {
     const handleClick = () => item.action(source);
     return (
-      <S.ActionItem key={item.icon} onClick={handleClick}>
+      <S.ActionItem key={item.icon} onClick={handleClick} data-testid="auto-item-action-item">
         <Icon name={item.icon} />
         <S.ActionText>{item.label}</S.ActionText>
       </S.ActionItem>

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

@@ -135,9 +135,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
 
   const addSource =
     state.sourceTitles.length > 1 ? (
-      <FloatingMenu Button={addSourceButton}>
-        {sourceMenu(state.sourceTitles)}
-      </FloatingMenu>
+      <FloatingMenu Button={addSourceButton}>{sourceMenu(state.sourceTitles)}</FloatingMenu>
     ) : null;
 
   const removeItem = (item: string) => {
@@ -172,7 +170,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
   };
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="auto-panel-wrapper">
       <S.FormWrapper>
         <S.DataLabel>Data source</S.DataLabel>
         <S.SourcesWrapper>

package/src/components/Fields/ReferenceField/AutoPanel/style.tsx

@@ -47,6 +47,9 @@ const SelectWrapper = styled.div`
   position: absolute;
   right: 0;
   margin-top: ${(p) => `-${p.theme.spacing.xs}`};
+  div {
+    right: 0;
+  }
 `;
 
 const ActionsWrapper = styled.div`

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

@@ -47,12 +47,12 @@ const useReferenceProvider = (modes?: string[]) => {
     [setState, state]
   );
 
-  const setReorderElements = (item: IStructuredDataContent, isPush: boolean) => {
+  const setReorderElements = (item: IStructuredDataContent, newIndex: number) => {
     const { selectedItems, fixed, fullRelations = false } = state;
-    const newItems = moveElement(item.id, selectedItems, isPush, "id");
+    const newItems = moveElement(item.id, selectedItems, newIndex, "id");
     const originalItemId = item.relatedPage?.originalStructuredDataId;
     const itemId = state.fixed.includes(originalItemId) ? originalItemId : item.id;
-    const newFixed = moveArrayElement(itemId, fixed, isPush);
+    const newFixed = moveArrayElement(itemId, fixed, newIndex);
     const newState: IReferenceState = {
       ...state,
       selectedItems: newItems,