@griddo/ax 10.2.21 → 10.2.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.2.21",
+  "version": "10.2.22",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -109,7 +109,6 @@
     "lodash.isequal": "4.5.0",
     "markdown-draft-js": "^2.2.1",
     "mini-css-extract-plugin": "0.11.3",
-    "node-sass": "^6.0.0",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "pkg-dir": "^5.0.0",
     "polished": "3.4.1",
@@ -231,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "76f7c6804b511c785978ceb9bf94a2516c7da5bd"
+  "gitHead": "9816323e3b6056b4978f41803c23ca8b86b901a8"
 }

package/src/__tests__/components/Fields/ReferenceField/ReferenceField.test.tsx

@@ -538,10 +538,7 @@ describe("onChange events", () => {
     //     rerender(Component);
     //   });
 
-    referenceFieldItems = screen.getAllByTestId("reference-field-item");
-=======
     const referenceFieldItems = screen.getAllByTestId("reference-field-item");
->>>>>>> release/1.72
     expect(referenceFieldItems[0]).toHaveTextContent("Article 02");
 
     const droppable = screen.getByTestId("droppable");
@@ -630,55 +627,5 @@ describe("onChange events", () => {
     expect(referenceFieldItems[0]).toHaveTextContent("Article 02");
   });*/
 
-  test("should hide the drag handle if list length is lower than two", async () => {
-    defaultProps.source = ["ARTICLES"];
-    defaultProps.value = {
-      mode: "manual",
-      fixed: [],
-    };
-    const initialState = { ...initialStore, ...defaultProps };
-    const onChange = jest.fn();
-
-    mockApiCalls();
-
-    const Component = (
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <ReferenceField {...initialState} onChange={onChange} />
-      </ThemeProvider>
-    );
-
-    const { rerender } = render(Component, { store });
-
-    await act(async () => {
-      rerender(Component);
-    });
-
-    let referenceFieldItems = screen.getAllByTestId("reference-field-item");
-    expect(referenceFieldItems.length).toBe(2);
-
-    const iconActionComponents = screen.getAllByTestId("icon-action-component");
-
-    await act(async () => {
-      fireEvent.click(iconActionComponents[2]);
-    });
-
-    await act(async () => {
-      rerender(Component);
-    });
-
-    const actionMenuItem = screen.getByTestId("action-menu-item");
 
-    await act(async () => {
-      fireEvent.click(actionMenuItem);
-    });
-
-    await act(async () => {
-      rerender(Component);
-    });
-
-    referenceFieldItems = screen.getAllByTestId("reference-field-item");
-    expect(referenceFieldItems.length).toBe(1);
-    const handleWrappers = screen.getAllByTestId("handle-wrapper");
-    expect(handleWrappers[0].hidden).toBe(true);
-  });
 });

package/src/components/BrowserContent/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from "react";
 import * as components from "components";
 import { builderSSR, ssrHelpers, SiteProvider } from "components";
-import { Preview } from "@griddo/core";
+import { Core, Preview } from "@griddo/core";
 import { ILanguage, ISocialState } from "@ax/types";
 
 const BrowserContent = (props: IProps) => {
@@ -72,7 +72,7 @@ interface IProps {
   header?: any;
   footer?: any;
   languageID: number;
-  pageLanguages: ILanguage[];
+  pageLanguages: Core.Page["pageLanguages"];
   renderer: "editor" | "preview";
   selectEditorID?(
     selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },

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

@@ -1,11 +1,12 @@
 import React from "react";
 
 import { IconAction } from "@ax/components";
+import { ISite } from "@ax/types";
 
 import * as S from "./style";
 
 const ArrayFieldInline = (props: IProps): JSX.Element => {
-  const { fields, item, index, onChange, handleDelete } = props;
+  const { fields, item, index, onChange, handleDelete, site } = props;
 
   const deleteItem = () => handleDelete(index);
 
@@ -19,7 +20,7 @@ const ArrayFieldInline = (props: IProps): JSX.Element => {
 
       return {
         ...field,
-        props: { ...field.props, value: item[key], objKey: key, onChange: handleChange, innerFields },
+        props: { ...field.props, value: item[key], objKey: key, onChange: handleChange, innerFields, site },
         key,
       };
     });
@@ -43,6 +44,7 @@ interface IProps {
   index: number;
   onChange: (value: Record<string, unknown>) => void;
   handleDelete: (index: number) => void;
+  site: ISite | null;
 }
 
 export default ArrayFieldInline;

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

@@ -1,9 +1,10 @@
 import React from "react";
+import { ISite } from "@ax/types";
 
 import * as S from "./style";
 
 const ArrayFieldItem = (props: IProps): JSX.Element => {
-  const { fields, item, name, index, onChange, handleDelete, isOpen, setIsOpen } = props;
+  const { fields, item, name, index, onChange, handleDelete, isOpen, setIsOpen, site } = props;
 
   const handleClick = () => (isOpen === index ? setIsOpen(null) : setIsOpen(index));
 
@@ -35,7 +36,7 @@ const ArrayFieldItem = (props: IProps): JSX.Element => {
 
       return {
         ...field,
-        props: { ...field.props, value: item[key], objKey: key, onChange: handleChange, innerFields },
+        props: { ...field.props, value: item[key], objKey: key, onChange: handleChange, innerFields, site },
         key,
       };
     });
@@ -61,6 +62,7 @@ interface IProps {
   handleDelete: (index: number) => void;
   isOpen: number | null;
   setIsOpen: (index: number | null) => void;
+  site: ISite | null;
 }
 
 export default ArrayFieldItem;

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

@@ -2,13 +2,14 @@ import React, { useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 
 import { Button, FieldsDivider } from "@ax/components";
+import { ISite } from "@ax/types";
 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;
+  const { value, name, innerFields, onChange, divider, arrayType, site } = props;
 
   const initialValue = value ? Object.values(value) : [];
   const initialValueMapped = initialValue.map((val: any) => {
@@ -59,6 +60,7 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
                 index={index}
                 onChange={handleFieldChange}
                 handleDelete={handleDelete}
+                site={site}
               />
             ) : (
               <ArrayFieldItem
@@ -71,6 +73,7 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
                 handleDelete={handleDelete}
                 isOpen={isOpen}
                 setIsOpen={setIsOpen}
+                site={site}
               />
             );
           })}
@@ -91,6 +94,7 @@ export interface IProps {
   innerFields: any[];
   divider: { title: string; text: string };
   arrayType: string;
+  site: ISite | null;
 }
 
 export default ArrayFieldGroup;

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

@@ -133,14 +133,14 @@ const FileDragAndDrop = (props: IProps) => {
               <S.FilesButton ref={filesButtonRef} type="button" buttonStyle="line" onClick={handleFileClick}>
                 Select files
               </S.FilesButton>
-              <S.DragSubtitle>Valid formats: {validFormats.join(", ")}. Max. size: 25MB</S.DragSubtitle>
+              <S.DragSubtitle>Valid formats: {validFormats.join(", ")}. Max. size: {MAX_SIZE}MB</S.DragSubtitle>
             </S.DragStatus>
             <S.DragOverStatus>
               <S.DragIcon>
                 <Icon name="success" size="48" />
               </S.DragIcon>
               <S.DragTitle>Drop your file</S.DragTitle>
-              <S.DragSubtitle>Valid formats: {validFormats.join(", ")}. Max. size: 25MB</S.DragSubtitle>
+              <S.DragSubtitle>Valid formats: {validFormats.join(", ")}. Max. size: {MAX_SIZE}MB</S.DragSubtitle>
             </S.DragOverStatus>
           </S.StatusWrapper>
         </DragAndDrop>

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

@@ -4,6 +4,7 @@ import { useModal } from "@ax/hooks";
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
 import { Icon, Modal, TextField } from "@ax/components";
 import FileDragAndDrop from "./FileDragAndDrop";
+import { MAX_SIZE } from "./store";
 
 import * as S from "./style";
 
@@ -87,7 +88,7 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
               <Icon name="File" size="24" />
             </S.IconWrapper>
           </S.Field>
-          <S.HelpText>Valid formats: {validFormats.join(", ")}. Max. size: 25MB</S.HelpText>
+          <S.HelpText>Valid formats: {validFormats.join(", ")}. Max. size: {MAX_SIZE}MB</S.HelpText>
         </>
       )}
       {value && (

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

@@ -3,7 +3,7 @@ const SET_IN_DROP_ZONE = "SET_IN_DROP_ZONE";
 const SET_IS_UPLOADING = "SET_IS_UPLOADING";
 const SET_UPLOAD_SUCCESS = "SET_UPLOAD_SUCCESS";
 const SET_UPLOAD_ERROR = "SET_UPLOAD_ERROR";
-export const MAX_SIZE = 25; // MB
+export const MAX_SIZE = 50; // MB
 
 export const reducer = (prevState: IGalleryStore, action: any): IGalleryStore => {
   switch (action.type) {

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

@@ -4,6 +4,7 @@ import { structuredData } from "@ax/api";
 import { isReqOk } from "@ax/helpers";
 import { IGetStructuredDataParams, IDataSource, ISite, IStructuredData } from "@ax/types";
 import { Button, CheckField, FieldsBehavior, FloatingMenu, Icon, IconAction, SearchField, Tag } from "@ax/components";
+import { IFilter } from "../../Context";
 
 import * as S from "./style";
 
@@ -207,7 +208,7 @@ interface IState {
 interface IProps {
   source: IDataSource;
   canDelete: boolean;
-  filter: number[];
+  filter: IFilter[];
   currentSite: ISite | null;
   structuredDataSite: IStructuredData[];
   handleDelete: (value: string) => void;

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

@@ -14,7 +14,7 @@ import {
   UniqueCheck,
 } from "@ax/components";
 
-import { IReferenceState, useReference } from "../Context";
+import { IFilter, IReferenceState, useReference } from "../Context";
 import AutoItem from "./AutoItem";
 
 import * as S from "./style";
@@ -277,7 +277,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
           {state.source &&
             state.source.length > 0 &&
             state.source.map((singleSource: string) => {
-              const sourceFilters = state.filter.filter((f: any) => f.source === singleSource);
+              const sourceFilters = state.filter.filter((f: IFilter) => f.source === singleSource);
               const source = state.sourceTitles.find((el: IDataSource) => el.id === singleSource);
               return source ? (
                 <AutoItem

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

@@ -38,7 +38,7 @@ const useReferenceProvider = (modes?: string[]) => {
   const [state, setState] = useState<IReferenceState>({ ...initState, mode });
 
   const setModeAndSource = useCallback(
-    (mode: string, source: never[]) => {
+    (mode: string, source: string[]) => {
       const defaultState = {
         ...state,
         mode,
@@ -92,7 +92,7 @@ export interface IReferenceState {
   site?: number;
 }
 
-interface IFilter {
+export interface IFilter {
   id: number;
   label: string;
   source: string;

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { connect } from "react-redux";
 import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
 
@@ -16,7 +16,7 @@ const ItemList = (props: IProps) => {
   const { state, setState, setReorderElements } = useReference();
   const { fixed, selectedItems, sourceTitles, fullRelations } = state;
 
-  useEffect(() => {
+  const getParams = useCallback(() => {
     const params = {
       mode: "manual",
       fixed: items,
@@ -24,8 +24,13 @@ const ItemList = (props: IProps) => {
       site,
     };
 
+    return params;
+  }, [items]);
+
+  useEffect(() => {
     const getItems = async () => {
       const siteID = currentSite ? currentSite : "global";
+      const params = getParams();
       const response = await structuredData.getDistributorContent(siteID, params);
       if (isReqOk(response?.status)) {
         setState((state: IReferenceState) => ({ ...state, selectedItems: response.data }));
@@ -37,9 +42,9 @@ const ItemList = (props: IProps) => {
         console.log("Error en getItems");
       }
     };
-    getItems();
+    items.length && getItems();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
+  }, [getParams]);
 
   const handleDelete = (item: IStructuredDataContent) => {
     const langItem = item.dataLanguages?.length

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

@@ -73,7 +73,7 @@ const ManualPanel = (props: IProps) => {
 
   const handleOnClick = (item: IStructuredDataContent) => {
     let newSelIds: number[];
-    let selItems: number[];
+    let selItems: IStructuredDataContent[];
     const itemSelectedID = item.dataLanguages?.length
       ? item.dataLanguages.find((dataLang: IDataLanguage) => state.fixed.includes(dataLang.id))?.id
       : state.fixed.includes(item.id)

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

@@ -196,7 +196,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   const dataBlock = isAuto ? (
     <AutoData />
   ) : (
-    <ItemList items={value ? value.fixed : []} handleListDelete={handleListDelete} site={value.site} />
+    <ItemList items={value?.fixed ? value.fixed : []} handleListDelete={handleListDelete} site={value?.site} />
   );
 
   return (

package/src/components/Image/index.tsx

@@ -1,5 +1,5 @@
+import { GriddoImage, GriddoImageCommonProps } from "@griddo/core";
 import React from "react";
-import { GriddoImage } from "@griddo/core";
 import { createCloudinaryUrl, isCloudinary } from "./utils";
 
 const DAM_DEFAULTS = {
@@ -9,25 +9,29 @@ const DAM_DEFAULTS = {
   formats: ["webp"],
 };
 
-const Image = (props: IImageProps): React.ReactElement => {
+const Image = (props: ICloudinaryImageProps | GriddoImageCommonProps) => {
   const { url } = props;
 
+  if (!url) {
+    return null;
+  }
+
   if (isCloudinary(url)) {
-    const cloudinaryUrl = createCloudinaryUrl({ props });
-    return <img data-testid="image-wrapper" src={cloudinaryUrl} alt="Griddo site thumbnail" />;
+    const cloudinaryProps = props as ICloudinaryImageProps;
+    const cloudinaryUrl = createCloudinaryUrl({ props: cloudinaryProps });
+    return <img src={cloudinaryUrl} data-testid="image-wrapper" />;
   } else {
-    return <GriddoImage {...DAM_DEFAULTS} {...props} />;
+    const griddoProps = { ...DAM_DEFAULTS, ...props } as GriddoImageCommonProps;
+    return <GriddoImage {...griddoProps} />;
   }
 };
 
-export interface IImageProps {
+export interface ICloudinaryImageProps {
+  url: string;
   width: number;
   height?: number;
-  url: string;
   quality?: number;
-  crop?: string;
-  loading?: string;
-  formats?: string[];
+  alt?: string;
 }
 
 export default Image;

package/src/components/Image/utils.ts

@@ -1,4 +1,4 @@
-import { IImageProps } from "./index";
+import { ICloudinaryImageProps } from "./index";
 
 // The string to split up the cloudinary url
 const CLOUDINARY_SEPARATOR = "image/upload";
@@ -48,7 +48,7 @@ interface ICloudinaryParams {
 }
 
 interface ICreateCloudinaryUrl {
-  props: IImageProps;
+  props: ICloudinaryImageProps;
   retina?: boolean;
 }
 

package/src/global.d.ts

@@ -6,6 +6,5 @@ declare module "lodash.isequal";
 declare module "is-wsl";
 declare module "react-draft-wysiwyg";
 declare module "history";
-declare module "@griddo/core";
 declare module "draftjs-to-html";
 declare module "html-to-draftjs";

package/src/modules/Users/UserEdit/index.tsx

@@ -32,7 +32,7 @@ const UserEdit = (props: IProps) => {
   }, [user]);
 
   const handleSave = async () => {
-    if(isOpenAdvise){
+    if (isOpenAdvise) {
       toggleAdviseModal();
     }
     const updated = form.id ? await updateUser(form.id, form, false) : false;
@@ -60,12 +60,13 @@ const UserEdit = (props: IProps) => {
   const isSameUser = currentUser && currentUser.id === user.id;
   const isDeleteDisabled = isSiteView && user.isSuperAdmin;
 
-  const rightLineButtonProps = !isSameUser && !isDeleteDisabled
-    ? {
-        label: isSiteView ? "Remove user from this site" : "Delete User",
-        action: toggleModal,
-      }
-    : undefined;
+  const rightLineButtonProps =
+    !isSameUser && !isDeleteDisabled
+      ? {
+          label: isSiteView ? "Remove user from this site" : "Delete User",
+          action: toggleModal,
+        }
+      : undefined;
 
   const getUpdatedSites = () => {
     const hasAll = form.roles.find((siteRole: ISiteRoles) => siteRole.siteId === "all");
@@ -87,7 +88,7 @@ const UserEdit = (props: IProps) => {
     const updatedSites = getUpdatedSites();
     const formWithUpdatedSites = { ...form, roles: updatedSites };
 
-    const updated = await updateUser(user.id, formWithUpdatedSites, true);
+    const updated = await updateUser(user.id, formWithUpdatedSites, false, false);
     if (updated) {
       setHistoryPush(usersRoute);
     }
@@ -157,8 +158,8 @@ const UserEdit = (props: IProps) => {
         size="S"
       >
         <S.ModalContent>
-          Before editing an user, <strong>select the user's permissions and site access</strong>. If you proceed without selecting
-          any permissions, the user <strong>won't have access to anything or view any content</strong>.
+          Before editing an user, <strong>select the user's permissions and site access</strong>. If you proceed without
+          selecting any permissions, the user <strong>won't have access to anything or view any content</strong>.
         </S.ModalContent>
       </Modal>
       {isVisible && <Toast {...toastProps} />}
@@ -177,7 +178,7 @@ const mapStateToProps = (state: IRootState) => ({
 
 interface IDispatchProps {
   setHistoryPush(path: string): void;
-  updateUser(id: number, data: any, isProfile: boolean): Promise<boolean>;
+  updateUser(id: number, data: IUser, isProfile: boolean, isList?: boolean): Promise<boolean>;
   deleteUser(id: number): Promise<boolean>;
 }