@griddo/ax 11.6.1 → 11.6.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.6.1",
+  "version": "11.6.2",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -99,7 +99,6 @@
     "jsdom-global": "3.0.2",
     "lodash.isequal": "4.5.0",
     "markdown-draft-js": "2.4.0",
-    "masonic": "4.1.0",
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "6.0.1",
     "pkg-dir": "5.0.0",
@@ -224,5 +223,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "07d7b29c342d4683beafc6fd8e9c26a572c38e25"
+  "gitHead": "ce1be2946a2f6320ce6b82d38a3cdd6277b13000"
 }

package/src/components/Browser/index.tsx

@@ -35,6 +35,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
   const domain = window.location.origin;
   const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}&type=${editorType}`;
   const isPageEditor = editorType === "page";
+  const isFormEditor = editorType === "form";
 
   const [resolution, setResolution] = useState("desktop");
   const { isVisible, toggleToast, setIsVisible } = useToast();
@@ -146,7 +147,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
         </S.NavBar>
       )}
       {showIframe ? (
-        <S.FrameWrapper hasBorder={isPageEditor} data-testid="navbar-iframe-wrapper">
+        <S.FrameWrapper hasBorder={isPageEditor} isFormEditor={isFormEditor} data-testid="navbar-iframe-wrapper">
           <iframe
             title="Preview"
             width={getWidth(resolution)}

package/src/components/Browser/style.tsx

@@ -46,13 +46,14 @@ const IconWrapper = styled.div<{ active?: boolean }>`
   }
 `;
 
-const FrameWrapper = styled.div<{ hasBorder: boolean }>`
+const FrameWrapper = styled.div<{ hasBorder: boolean; isFormEditor: boolean }>`
   border-left: ${(p) => (p.hasBorder ? `1px solid ${p.theme.color.uiLine}` : "none")};
   border-right: 1px solid ${(p) => p.theme.color.uiLine};
   border-bottom: ${(p) => (p.hasBorder ? `1px solid ${p.theme.color.uiLine}` : "none")};
   display: flex;
   justify-content: center;
   height: 100%;
+  padding: ${(p) => (p.isFormEditor ? p.theme.spacing.m : "0")};
 `;
 
 const Wrapper = styled.div`

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

@@ -3,7 +3,7 @@ import { IconAction, SideModal, Tooltip } from "@ax/components";
 
 const AddItemButton = (props: IProps) => {
   const { handleClick, whiteList, categories, theme, isOpen, contentType, toggleModal } = props;
-  const addAction = whiteList.length <= 1 ? () => handleClick(whiteList[0]) : toggleModal;
+  const addAction = whiteList.length <= 1 && contentType !== "fields" ? () => handleClick(whiteList[0]) : toggleModal;
 
   const tooltip = contentType === "fields" ? "Add field" : contentType === "module" ? "Add module" : "Add component";
 

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

@@ -54,6 +54,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     setNotificationAction,
     copyModuleAction,
     duplicateModuleAction,
+    setSelectedFormFieldAction,
   } = actions || {};
 
   // fix for old not array values
@@ -76,7 +77,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   const isModuleArr = contentType === "modules" || contentType === "fields";
   const isFormArr = contentType === "fields";
 
-  const { isOpen, toggleModal } = useModal(isFormArr, false);
+  const { isOpen, toggleModal } = useModal(false, false);
   const [isBulkOpen, setIsBulkOpen] = useState(false);
   const [draggingId, setDraggingId] = useState<number | null>(null);
   const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
@@ -123,10 +124,15 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const selectItems = () => (checkState.isAllSelected ? resetBulkSelection() : selectAllItems());
 
-  const showAddItemButton = (!maxItems || fixedValue.length < maxItems) && !disabled && whiteList.length > 0;
+  const handleToggleModal = () =>
+    isFormArr && setSelectedFormFieldAction ? setSelectedFormFieldAction(field) : toggleModal();
+
+  const isAbletoAdd = (!maxItems || fixedValue.length < maxItems) && !disabled && whiteList.length > 0;
+
+  const showAddItemButton = isAbletoAdd && (!isFormArr || (isFormArr && !!setSelectedFormFieldAction));
 
   const showPasteModuleButton =
-    showAddItemButton &&
+    isAbletoAdd &&
     (isModuleArr || objKey === "componentModules") &&
     (modulesToPaste.length > 0 || unavailableModules.length > 0);
 
@@ -167,7 +173,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               actions={actions}
               selectedContent={selectedContent}
               disabled={disabled || isModuleDisabled}
-              canDuplicate={showAddItemButton && !isModuleDeactivated}
+              canDuplicate={isAbletoAdd && !isModuleDeactivated}
               canDelete={canDelete}
               parentKey={objKey}
               theme={theme}
@@ -293,7 +299,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
           {showAddItemButton && !disabled && (
             <AddItemButton
               isOpen={isOpen}
-              toggleModal={toggleModal}
+              toggleModal={handleToggleModal}
               whiteList={whiteList}
               categories={categories}
               handleClick={handleAdd}
@@ -351,6 +357,7 @@ export interface IMixableComponentArrayProps {
     pasteModuleAction: (editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>;
     setNotificationAction: (notification: INotification) => void;
     replaceModuleAction: (module: any, parent: any, objKey: string) => void;
+    setSelectedFormFieldAction: (field: ISchemaField | null) => void;
   };
   categories?: any[];
   disabled?: boolean;

package/src/components/Fields/FormContainer/FormModal/index.tsx

@@ -1,7 +1,5 @@
 import React, { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { Masonry, RenderComponentProps } from "masonic";
-import { v4 as uuidv4 } from "uuid";
 
 import { FormContent, GetFormsParams, IModal, IQueryValue, IRootState, ISite } from "@ax/types";
 import {
@@ -110,19 +108,6 @@ const FormModal = (props: IFormModal): JSX.Element => {
     </S.Filters>
   );
 
-  const MasonryCard = (props: RenderComponentProps<FormContent>) => {
-    const { data: form } = props;
-    const handleClick = () => setSelectedForm(form);
-    return (
-      <S.FormWrapper key={form.id}>
-        <S.FormItem onClick={handleClick} isSelected={form.id === selectedForm?.id}>
-          <img src={form.thumbnail} alt={form.title} title={form.title} />
-        </S.FormItem>
-        <S.FormTitle>{form.title}</S.FormTitle>
-      </S.FormWrapper>
-    );
-  };
-
   const emptySearchStateProps = {
     icon: "search",
     title: "Oh! No Results Found",
@@ -174,14 +159,17 @@ const FormModal = (props: IFormModal): JSX.Element => {
             </S.EmptyWrapper>
           ) : (
             <S.FormsGrid>
-              <Masonry
-                key={uuidv4()}
-                items={forms}
-                columnGutter={16}
-                columnWidth={336}
-                render={MasonryCard}
-                columnCount={3}
-              />
+              {forms.map((form) => {
+                const handleClick = () => setSelectedForm(form);
+                return (
+                  <S.FormWrapper key={form.id}>
+                    <S.FormItem onClick={handleClick} isSelected={form.id === selectedForm?.id}>
+                      <img src={form.thumbnail} alt={form.title} title={form.title} />
+                    </S.FormItem>
+                    <S.FormTitle>{form.title}</S.FormTitle>
+                  </S.FormWrapper>
+                );
+              })}
             </S.FormsGrid>
           )}
         </S.ModalContent>

package/src/components/Fields/FormContainer/FormModal/style.tsx

@@ -69,12 +69,14 @@ const TabsWrapper = styled.div`
 
 const FormsGrid = styled.div`
   padding-bottom: ${(p) => p.theme.spacing.l};
+  columns: 300px;
 `;
 
 const FormWrapper = styled.div`
   display: flex;
   flex-direction: column;
   padding-bottom: ${(p) => p.theme.spacing.s};
+  break-inside: avoid-column;
 `;
 
 const FormItem = styled.div<{ isSelected: boolean }>`

package/src/components/SearchField/index.tsx

@@ -100,6 +100,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus={focus && showField}
             inputSize={size}
+            name="searchInput"
           />
           {inputValue.trim() !== "" && searchOnEnter && <S.HelpText>Press ENTER</S.HelpText>}
           {closeOnInactive || inputValue.length > 0 ? (

package/src/components/SideModal/SideModalOption/index.tsx

@@ -12,7 +12,7 @@ const getThumbnailData = (option: any, theme: string) => {
 };
 
 const SideModalOption = (props: IProps) => {
-  const { option, handleClick, theme, smallMargin } = props;
+  const { option, handleClick, theme } = props;
 
   const isNavigationDefault = ["header", "footer"].includes(option.type);
 
@@ -36,7 +36,7 @@ const SideModalOption = (props: IProps) => {
   ) : null;
 
   return (
-    <S.Item onClick={setOption} smallMargin={smallMargin} data-testid="side-modal-option">
+    <S.Item onClick={setOption} data-testid="side-modal-option">
       <S.Thumbnail data-testid="side-modal-option-img" {...thumbnailProps} />
       {label}
       {defaultTag}
@@ -49,7 +49,6 @@ interface IProps {
   handleClick?: (option: any) => void;
   children: string;
   theme: string;
-  smallMargin: boolean;
 }
 
 export default memo(SideModalOption);

package/src/components/SideModal/SideModalOption/style.tsx

@@ -1,10 +1,10 @@
 import styled from "styled-components";
 
-const Item = styled.li<{ smallMargin: boolean }>`
+const Item = styled.li`
   cursor: pointer;
   padding: ${(p) => p.theme.spacing.xs};
   padding-bottom: ${(p) => p.theme.spacing.s};
-  margin-bottom: ${(p) => (p.smallMargin ? p.theme.spacing.xs : p.theme.spacing.s)};
+  margin-bottom: ${(p) => p.theme.spacing.s};
   box-shadow: ${(p) => p.theme.shadow.shadowS};
   border-radius: ${(p) => p.theme.radii.s};
   ${(p) => p.theme.textStyle.uiS};

package/src/components/SideModal/index.tsx

@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import { useHandleClickOutside } from "@ax/hooks";
 import { getDisplayName, filterByCategory } from "@ax/helpers";
 import SideModalOption from "@ax/components/SideModal/SideModalOption";
-import { MenuItem, SearchField, IconAction, FloatingButton } from "@ax/components";
+import { MenuItem, SearchField, IconAction } from "@ax/components";
 import { ModuleCategoryInfo } from "@ax/types";
 
 import * as S from "./style";
@@ -25,7 +25,6 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
   const componentList: any = [];
   const hasCategories = categories && categories.length > 1;
-  const hasFieldsStyle = optionsType === "fields";
 
   const optionList = componentOptions ? componentList : whiteList;
 
@@ -63,7 +62,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     if (onClick) {
       onClick(moduleType);
     }
-    !hasFieldsStyle && handleCloseModal();
+    handleCloseModal();
   };
 
   const handleCloseModal = () => {
@@ -72,7 +71,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
   };
 
   const handleClickOutside = (e: any) => {
-    if (node.current?.contains(e.target) || hasFieldsStyle) {
+    if (node.current?.contains(e.target)) {
       return;
     }
 
@@ -137,13 +136,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
         if (!name.includes(search)) return null;
       }
       return (
-        <SideModalOption
-          option={option}
-          handleClick={handleClick}
-          key={`${option}${i}`}
-          theme={theme}
-          smallMargin={hasFieldsStyle}
-        >
+        <SideModalOption option={option} handleClick={handleClick} key={`${option}${i}`} theme={theme}>
           {displayName}
         </SideModalOption>
       );
@@ -151,23 +144,12 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
   return createPortal(
     <>
-      <S.Wrapper
-        ref={node}
-        optionsType={optionsType}
-        isOpen={isOpen}
-        data-testid="side-modal"
-        className={hasFieldsStyle ? "form-fields" : ""}
-      >
+      <S.Wrapper ref={node} optionsType={optionsType} isOpen={isOpen} data-testid="side-modal">
         <S.Header>
-          {!hasFieldsStyle && <S.Title data-testid="side-modal-title">{optionsType}</S.Title>}
+          <S.Title data-testid="side-modal-title">{optionsType}</S.Title>
           {showSearch && optionsType !== "components" && (
             <S.SearchWrapper>
-              <SearchField
-                onChange={setSearchQuery}
-                closeOnInactive={!hasFieldsStyle}
-                small={!filters}
-                placeholder={hasFieldsStyle ? "Search field" : ""}
-              />
+              <SearchField onChange={setSearchQuery} closeOnInactive={true} small={!filters} value={searchQuery} />
             </S.SearchWrapper>
           )}
           {!showSearch && (
@@ -177,11 +159,6 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
           )}
         </S.Header>
         <S.ColumnsWrapper>
-          {hasFieldsStyle && (
-            <S.FloatingButtonWrapper>
-              <FloatingButton icon="leftArrow" size="S" onClick={handleCloseModal} />
-            </S.FloatingButtonWrapper>
-          )}
           {(filters || featuredFilters) && (
             <S.Content>
               {featuredFilters && <S.FeaturedWrapper>{featuredFilters}</S.FeaturedWrapper>}
@@ -191,13 +168,6 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
           <S.Content>{filteredOptions}</S.Content>
         </S.ColumnsWrapper>
       </S.Wrapper>
-      {hasFieldsStyle && (
-        <S.ClosedWrapper isOpen={!isOpen}>
-          <S.ClosedFloatingButtonWrapper>
-            <FloatingButton text="fields" icon="rightArrow" size="S" onClick={toggleModal} />
-          </S.ClosedFloatingButtonWrapper>
-        </S.ClosedWrapper>
-      )}
     </>,
     document.body
   );

package/src/containers/Forms/actions.tsx

@@ -597,9 +597,13 @@ function moveModule(
     if (!formContent) return;
 
     const templateContent = formContent.template;
+    const isRoot = selectedContent.component === "FormPage";
+
+    const contentElements = isRoot ? [...selectedContent.template[key]] : [...selectedContent[key]];
+    const editorID = isRoot ? templateContent.editorID : selectedContent.editorID;
+
+    const { element: selectedModule } = findByEditorID(templateContent, editorID);
 
-    const contentElements = [...(selectedContent as any).template[key]];
-    const { element: selectedModule } = findByEditorID(templateContent, templateContent.editorID);
     selectedModule[key] = moveElement(elementID, contentElements, newIndex);
 
     const updatedContent = {
@@ -610,7 +614,7 @@ function moveModule(
     };
 
     dispatch(setFormContent(updatedContent));
-    dispatch(setSelectedFormContent(updatedContent));
+    dispatch(setSelectedFormContent(isRoot ? updatedContent : selectedModule));
   };
 }
 

package/src/containers/Forms/reducer.tsx

@@ -25,7 +25,7 @@ export interface IFormsState {
   tab: string;
   currentFormID: number | null;
   currentFormStatus: string | null;
-  selectedContent: Record<string, unknown>;
+  selectedContent: Record<string, any>;
   selectedEditorID: number;
   selectedParent: Record<string, unknown> | null;
   breadcrumb: IBreadcrumbItem[];

package/src/modules/Forms/FormEditor/Editor/SideModal/SectionOption/index.tsx

@@ -0,0 +1,23 @@
+import React, { memo } from "react";
+import { ISchemaField } from "@ax/types";
+
+import * as S from "./style";
+
+const SectionOption = (props: IProps) => {
+  const { option, handleClick } = props;
+
+  const setOption = () => handleClick(option);
+
+  return (
+    <S.Item onClick={setOption} data-testid="section-option">
+      Fields for {option.title}
+    </S.Item>
+  );
+};
+
+interface IProps {
+  option: ISchemaField;
+  handleClick: (option: ISchemaField) => void;
+}
+
+export default memo(SectionOption);

package/src/modules/Forms/FormEditor/Editor/SideModal/SectionOption/style.tsx

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+const Item = styled.li`
+  ${(p) => p.theme.textStyle.uiS};
+  cursor: pointer;
+  padding: ${(p) => p.theme.spacing.s};
+  padding-bottom: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  border-radius: ${(p) => p.theme.radii.s};
+  background-color: ${(p) => p.theme.color.interactiveBackground};
+  &:hover {
+    background: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+  &:focus {
+    background-color: ${(p) => p.theme.color.overlayFocusPrimary};
+  }
+`;
+
+export { Item };

package/src/modules/Forms/FormEditor/Editor/SideModal/SideModalOption/index.tsx

@@ -0,0 +1,34 @@
+import React, { memo } from "react";
+
+import { getDisplayName, getThumbnailProps, filterImageText } from "@ax/helpers";
+
+import * as S from "./style";
+
+const getThumbnailData = (option: string, theme: string) => {
+  const optionText = filterImageText(option);
+  return getThumbnailProps(optionText, false, theme);
+};
+
+const SideModalOption = (props: IProps) => {
+  const { option, handleClick, theme } = props;
+  const thumbnailProps = getThumbnailData(option, theme);
+  const label = getDisplayName(option);
+
+  const setOption = () => handleClick(option);
+
+  return (
+    <S.Item onClick={setOption} data-testid="side-modal-option">
+      <S.Thumbnail data-testid="side-modal-option-img" {...thumbnailProps} />
+      {label}
+    </S.Item>
+  );
+};
+
+interface IProps {
+  option: string;
+  handleClick: (option: string) => void;
+  children: string;
+  theme: string;
+}
+
+export default memo(SideModalOption);

package/src/modules/Forms/FormEditor/Editor/SideModal/SideModalOption/style.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const Item = styled.li`
+  cursor: pointer;
+  padding: ${(p) => p.theme.spacing.xs};
+  padding-bottom: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  border-radius: ${(p) => p.theme.radii.s};
+  ${(p) => p.theme.textStyle.uiS};
+  background-color: ${(p) => p.theme.color.interactiveBackground};
+  &:hover {
+    background: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+  &:focus {
+    background-color: ${(p) => p.theme.color.overlayFocusPrimary};
+  }
+`;
+
+const Thumbnail = styled.img`
+  cursor: pointer;
+  padding-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const TagWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
+export { Item, Thumbnail, TagWrapper };

package/src/modules/Forms/FormEditor/Editor/SideModal/index.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from "react";
+
+import { getDisplayName } from "@ax/helpers";
+import { SearchField, FloatingButton, NoteField } from "@ax/components";
+import { ISchemaField } from "@ax/types";
+
+import SideModalOption from "./SideModalOption";
+import SectionOption from "./SectionOption";
+
+import * as S from "./style";
+
+const SideModal = (props: ISideModalProps): JSX.Element | null => {
+  const { onClick, theme, fieldArrays, selectedField, selectField } = props;
+
+  const isMultiArray = fieldArrays.length > 1;
+
+  const [isOpen, setIsOpen] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const handleClick = (option: string) => onClick(option);
+
+  const handleSectionClick = (option: ISchemaField) => selectField(option);
+  const handleBackClick = () => selectField(null);
+
+  const toggleOpen = () => {
+    setSearchQuery("");
+    setIsOpen((state) => !state);
+  };
+
+  const filteredOptions = selectedField?.whiteList?.map((option: string, i: number) => {
+    const displayName = getDisplayName(option);
+    if (searchQuery.length > 0) {
+      const name = displayName.toLowerCase();
+      const search = searchQuery.toLocaleLowerCase();
+      if (!name.includes(search)) return <></>;
+    }
+    return (
+      <SideModalOption option={option} handleClick={handleClick} key={`${option}${i}`} theme={theme}>
+        {displayName}
+      </SideModalOption>
+    );
+  }) || <></>;
+
+  const sectionOptions = fieldArrays.map((option) => (
+    <SectionOption option={option} handleClick={handleSectionClick} key={option.key} />
+  ));
+
+  const noteText = {
+    text: (
+      <>
+        Select <strong>which section</strong> you want to add the fields to.
+      </>
+    ),
+  };
+
+  return (
+    <>
+      <S.Wrapper isOpen={isOpen} data-testid="side-modal" className="form-fields">
+        {isMultiArray && !selectedField ? (
+          <>
+            <S.Header>
+              <NoteField value={noteText} />
+            </S.Header>
+            <S.ColumnsWrapper>
+              <S.FloatingButtonWrapper>
+                {isOpen && <FloatingButton icon="leftArrow" size="S" onClick={toggleOpen} />}
+              </S.FloatingButtonWrapper>
+              <S.Content>{sectionOptions}</S.Content>
+            </S.ColumnsWrapper>
+          </>
+        ) : (
+          <>
+            <S.Header>
+              {isMultiArray && selectedField && (
+                <S.BreadCrumb>
+                  <S.BreadCrumbItem isLastItem={false} onClick={handleBackClick}>
+                    Back
+                  </S.BreadCrumbItem>
+                  /<S.BreadCrumbItem isLastItem={true}>{selectedField.title}</S.BreadCrumbItem>
+                </S.BreadCrumb>
+              )}
+              <S.SearchWrapper>
+                <SearchField
+                  onChange={setSearchQuery}
+                  value={searchQuery}
+                  closeOnInactive={false}
+                  small={true}
+                  placeholder="Search field"
+                />
+              </S.SearchWrapper>
+            </S.Header>
+            <S.ColumnsWrapper>
+              <S.FloatingButtonWrapper>
+                {isOpen && <FloatingButton icon="leftArrow" size="S" onClick={toggleOpen} />}
+              </S.FloatingButtonWrapper>
+              <S.Content>{filteredOptions}</S.Content>
+            </S.ColumnsWrapper>
+          </>
+        )}
+      </S.Wrapper>
+      <S.ClosedWrapper isOpen={!isOpen}>
+        <S.ClosedFloatingButtonWrapper>
+          {!isOpen && <FloatingButton text="fields" icon="rightArrow" size="S" onClick={toggleOpen} />}
+        </S.ClosedFloatingButtonWrapper>
+      </S.ClosedWrapper>
+    </>
+  );
+};
+
+export interface ISideModalProps {
+  onClick: (option: string) => void;
+  theme: string;
+  fieldArrays: ISchemaField[];
+  selectedField: ISchemaField | null;
+  selectField: (field: ISchemaField | null) => void;
+}
+
+export default SideModal;

package/src/modules/Forms/FormEditor/Editor/SideModal/style.tsx

@@ -0,0 +1,116 @@
+import styled from "styled-components";
+
+const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} 0`};
+`;
+
+const Content = styled.div`
+  list-style: none;
+  padding: ${(p) => p.theme.spacing.s};
+  height: ${(p) => `calc(100vh - ${p.theme.spacing.xl})`};
+  width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
+  overflow: auto;
+  border-right: 1px solid ${(p) => p.theme.colors.uiLine};
+  &:last-child {
+    border-right: 0;
+    width: ${(p) => `calc(${p.theme.spacing.xl} * 4)`};
+  }
+`;
+
+const Wrapper = styled.div<{ isOpen: boolean }>`
+  position: relative;
+  height: 100%;
+  background: ${(p) => p.theme.colors.uiBackground01};
+  box-shadow: ${(p) => p.theme.shadow.leftPanel};
+  margin-left: ${(p) => (p.isOpen ? "0" : "-256px")};
+  opacity: ${(p) => (p.isOpen ? "1" : "0")};
+  z-index: 1000;
+  width: 256px;
+  flex-shrink: 0;
+  transition: ${(p) =>
+    !p.isOpen
+      ? "margin-left 0.5s ease-in-out 0s, opacity 0.1s ease 0.5s"
+      : "opacity 0.1s ease, margin-left 0.5s ease-in-out"};
+`;
+
+const ColumnsWrapper = styled.div`
+  display: flex;
+`;
+
+const SearchWrapper = styled.div`
+  width: 100%;
+`;
+
+const FloatingButtonWrapper = styled.div`
+  position: absolute;
+  right: -16px;
+  top: 60px;
+`;
+
+const ClosedWrapper = styled.div<{ isOpen: boolean }>`
+  position: relative;
+  background-color: ${(p) => p.theme.colors.uiBackground02};
+  width: ${(p) => p.theme.spacing.xs};
+  border-right: ${(p) => `2px solid ${p.theme.colors.interactive01}`};
+  height: 100vh;
+  margin-left: ${(p) => (p.isOpen ? "0" : "-100px")};
+  display: ${(p) => (p.isOpen ? "flex" : "none")};
+  transition: display 0.1s ease 1s;
+`;
+
+const ClosedFloatingButtonWrapper = styled.div`
+  position: absolute;
+  right: -77px;
+  top: 56px;
+`;
+
+const BreadCrumb = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const BreadCrumbItem = styled.button<{ isLastItem: boolean }>`
+  border: none;
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => (p.isLastItem ? p.theme.color.textMediumEmphasis : p.theme.color.interactive01)};
+  background: transparent;
+  padding: 0 ${(p) => p.theme.spacing.xxs};
+  border-radius: ${(p) => p.theme.radii.s};
+  cursor: ${(p) => (p.isLastItem ? "default" : "pointer")};
+  border: 1px solid transparent;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+
+  &:focus {
+    border: ${(p) => (p.isLastItem ? "none" : `1px solid ${p.theme.color.interactive01}`)};
+    background: ${(p) => (p.isLastItem ? "none" : p.theme.color.overlayFocusPrimary)};
+  }
+
+  &:active {
+    background: ${(p) => (p.isLastItem ? "none" : p.theme.color.overlayPressedPrimary)};
+  }
+
+  &:hover {
+    background: ${(p) => (p.isLastItem ? "none" : p.theme.color.overlayHoverPrimary)};
+  }
+`;
+
+export {
+  Wrapper,
+  Content,
+  Header,
+  ColumnsWrapper,
+  SearchWrapper,
+  FloatingButtonWrapper,
+  ClosedWrapper,
+  ClosedFloatingButtonWrapper,
+  BreadCrumb,
+  BreadCrumbItem,
+};

package/src/modules/Forms/FormEditor/Editor/index.tsx

@@ -1,10 +1,14 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { ResizePanel } from "@ax/components";
-import { IBreadcrumbItem, IErrorItem, IModule, INotification, IRootState, ISchema } from "@ax/types";
+import { IBreadcrumbItem, IErrorItem, IModule, INotification, IRootState, ISchema, ISchemaField } from "@ax/types";
 import { formsActions } from "@ax/containers/Forms";
+import { getFormTemplate } from "@ax/helpers";
 import PageBrowser from "../PageBrowser";
 import FormConfigPanel from "./FormConfigPanel";
+import SideModal from "./SideModal";
+
+import * as S from "./style";
 
 const Editor = (props: IProps) => {
   const {
@@ -17,6 +21,7 @@ const Editor = (props: IProps) => {
     breadcrumb,
     selectedParent,
     errors,
+    template,
     setErrors,
     setNotification,
     setSelectedTab,
@@ -29,6 +34,35 @@ const Editor = (props: IProps) => {
     pasteModule,
   } = props;
 
+  const [selectedField, setSelectedField] = useState<ISchemaField | null>(null);
+  const [fieldArrays, setFieldArrays] = useState<ISchemaField[]>([]);
+
+  const hasFieldArrays = !!fieldArrays && fieldArrays.length > 0;
+  const isMultiArray = fieldArrays.length > 1;
+
+  useEffect(() => {
+    const getFormFieldArrays = (schema: ISchema | Record<string, never>) => {
+      let content: ISchemaField[] = [];
+      if (schema.component === "FormPage") {
+        const templateSchema = getFormTemplate(template);
+        content = templateSchema?.content || [];
+      } else {
+        content = schema.configTabs[0].fields;
+      }
+
+      return content.filter((field: ISchemaField) => field.type === "FormFieldArray");
+    };
+
+    const fields = getFormFieldArrays(schema);
+    const initState = fields.length === 1 ? fields[0] : null;
+    setFieldArrays(fields);
+    setSelectedField(initState);
+  }, [schema, template]);
+
+  const handleClick = (fieldType: string) => !!selectedField && addModule(fieldType, selectedField.key);
+
+  const handleSetSelectedField = (field: ISchemaField | null) => setSelectedField(field);
+
   const actions = {
     setNotificationAction: setNotification,
     addModuleAction: addModule,
@@ -37,11 +71,25 @@ const Editor = (props: IProps) => {
     moveModuleAction: moveModule,
     copyModuleAction: copyModule,
     pasteModuleAction: pasteModule,
+    setSelectedFormFieldAction: isMultiArray ? handleSetSelectedField : undefined,
   };
 
   return (
     <ResizePanel
-      leftPanel={<PageBrowser isReadOnly={false} theme={theme} browserRef={browserRef} />}
+      leftPanel={
+        <S.EditorWrapper>
+          {hasFieldArrays && (
+            <SideModal
+              onClick={handleClick}
+              theme={theme}
+              fieldArrays={fieldArrays}
+              selectedField={selectedField}
+              selectField={handleSetSelectedField}
+            />
+          )}
+          <PageBrowser isReadOnly={false} theme={theme} browserRef={browserRef} />
+        </S.EditorWrapper>
+      }
       rightPanel={
         <FormConfigPanel
           schema={schema}
@@ -69,6 +117,7 @@ interface IEditorStateProps {
   schema: ISchema | Record<string, never>;
   breadcrumb: IBreadcrumbItem[];
   selectedParent: Record<string, unknown> | null;
+  template: string;
 }
 
 interface IPageBrowserDispatchProps {
@@ -96,6 +145,7 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   schema: state.forms.schema,
   breadcrumb: state.forms.breadcrumb,
   selectedParent: state.forms.selectedParent,
+  template: state.forms.template,
 });
 
 const mapDispatchToProps = {

package/src/modules/Forms/FormEditor/Editor/style.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const EditorWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+`;
+
+export { EditorWrapper };

package/src/modules/Forms/FormEditor/PageBrowser/style.tsx

@@ -3,7 +3,6 @@ import styled from "styled-components";
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;
-  padding-left: ${(p) => p.theme.spacing.s};
 `;
 
 export { Wrapper };

package/src/modules/MediaGallery/index.tsx

@@ -75,6 +75,7 @@ const MediaGallery = (props: IProps) => {
     displayMode,
     selectedTab,
     foldersTree,
+    isUploading,
   } = props;
 
   const initState: IImageFolder = { images: { items: [], totalItems: 0, currentPage: 1 }, folders: [] };
@@ -271,6 +272,7 @@ const MediaGallery = (props: IProps) => {
 
   const handleBackClick = () => {
     const parentID = breadcrumb.length >= 2 ? breadcrumb[breadcrumb.length - 2].id : null;
+    resetBulkSelection();
     setPage(firstPage);
     updateCurrentFolder(parentID);
   };
@@ -440,6 +442,7 @@ const MediaGallery = (props: IProps) => {
 
   const handleUpdateCurrentFolder = (folderID: number | null) => {
     setSearchQuery("");
+    resetBulkSelection();
     setPage(firstPage);
     updateCurrentFolder(folderID);
   };
@@ -585,6 +588,7 @@ const MediaGallery = (props: IProps) => {
     ? {
         label: "Upload",
         action: () => toggleUploadModal(),
+        disabled: isUploading,
       }
     : undefined;
 
@@ -862,6 +866,7 @@ interface IProps {
   displayMode: "grid" | "list";
   selectedTab: "site" | "global";
   foldersTree: IFolderTree[];
+  isUploading: boolean;
   getFolderContent(params: IGetFolderParams): Promise<void>;
   getFoldersTree(siteID: number | "global"): Promise<void>;
   updateCurrentFolder(folderID: number | null): void;
@@ -926,6 +931,7 @@ const mapStateToProps = (state: IRootState) => ({
   displayMode: state.gallery.displayMode,
   selectedTab: state.gallery.selectedTab,
   foldersTree: state.gallery.foldersTree,
+  isUploading: state.gallery.isUploading,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(MediaGallery);

package/src/types/index.tsx

@@ -191,6 +191,7 @@ export interface ISchema {
   category?: string;
   styles?: Record<string, string>;
   maxModulesPerPage?: number;
+  content?: ISchemaField[];
   [key: string]: any;
   default?: {
     title?: string | { content: string };