@griddo/ax 11.4.24 → 11.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.4.24",
+  "version": "11.5.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -224,5 +224,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ab8d7009d1dceabebdf975dc5bef4e3013d8624"
+  "gitHead": "cf3db6035618b29bb1bf2a0b650e8be3199605ad"
 }

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

@@ -6,7 +6,7 @@ import { ThemeProvider } from "styled-components";
 import { mock } from "jest-mock-extended";
 import thunk from "redux-thunk";
 
-import { render, screen, cleanup, fireEvent } from "../../../../../config/jest/test-utils";
+import { render, screen, cleanup, fireEvent, act } from "../../../../../config/jest/test-utils";
 
 import ImageField, { IImageFieldProps } from "@ax/components/Fields/ImageField";
 import { parseTheme } from "@ax/helpers";
@@ -35,13 +35,6 @@ const defaultProps = mock<IImageFieldProps>();
 const initialStore = {
   ...defaultStore,
   gallery: {
-    data: {
-      items: [],
-      isImageSelected: false,
-      imageSelected: null,
-      page: 1,
-      isFinished: false,
-    },
     isLoading: {
       init: false,
       more: false,
@@ -55,6 +48,12 @@ const initialStore = {
     isSuccess: false,
     isError: false,
     errorMsg: "",
+    currentFolderContent: null,
+    currentFolderID: null,
+    breadcrumb: [],
+    foldersTree: [],
+    displayMode: "grid",
+    selectedTab: "site",
   },
 };
 
@@ -93,7 +92,8 @@ describe("ImageField component rendering", () => {
       width: 1444,
       height: 640,
       orientation: "L",
-      site: "global",
+      site: null,
+      folderId: null,
     };
 
     defaultProps.selectedContent = {
@@ -120,6 +120,7 @@ describe("ImageField component rendering", () => {
         height: 353,
         orientation: "L",
         site: 113,
+        folderId: null,
       },
     };
 
@@ -137,7 +138,7 @@ describe("ImageField component rendering", () => {
     expect(screen.getByTestId("previewDiv")).toBeVisible();
   });
 
-  it("should render the component with image with no url attr", () => {
+  it("should render the component with image with no url attr", async () => {
     defaultProps.value = "image.png";
 
     defaultProps.selectedContent = {
@@ -164,14 +165,17 @@ describe("ImageField component rendering", () => {
         height: 353,
         orientation: "L",
         site: 113,
+        folderId: null,
       },
     };
 
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <ImageField {...defaultProps} />
-      </ThemeProvider>,
-      { store }
+    await act(async () =>
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ImageField {...defaultProps} />
+        </ThemeProvider>,
+        { store }
+      )
     );
 
     expect(screen.getByTestId("fieldWrapper")).toBeTruthy();
@@ -179,7 +183,7 @@ describe("ImageField component rendering", () => {
     expect(screen.getByTestId("previewDiv")).toBeVisible();
   });
 
-  it("should render the component with no image", () => {
+  it("should render the component with no image", async () => {
     defaultProps.value = null;
 
     defaultProps.selectedContent = {
@@ -206,14 +210,17 @@ describe("ImageField component rendering", () => {
         height: 353,
         orientation: "L",
         site: 113,
+        folderId: null,
       },
     };
 
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <ImageField {...defaultProps} />
-      </ThemeProvider>,
-      { store }
+    await act(async () =>
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ImageField {...defaultProps} />
+        </ThemeProvider>,
+        { store }
+      )
     );
 
     expect(screen.getByTestId("fieldWrapper")).toBeTruthy();
@@ -221,7 +228,7 @@ describe("ImageField component rendering", () => {
     expect(screen.getByTestId("previewDiv")).not.toBeVisible();
   });
 
-  it("should render the component with image with undefined", () => {
+  it("should render the component with image with undefined", async () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     defaultProps.value = undefined;
@@ -250,14 +257,17 @@ describe("ImageField component rendering", () => {
         height: 353,
         orientation: "L",
         site: 113,
+        folderId: null,
       },
     };
 
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <ImageField {...defaultProps} />
-      </ThemeProvider>,
-      { store }
+    await act(async () =>
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <ImageField {...defaultProps} />
+        </ThemeProvider>,
+        { store }
+      )
     );
 
     expect(screen.getByTestId("fieldWrapper")).toBeTruthy();
@@ -267,7 +277,7 @@ describe("ImageField component rendering", () => {
 });
 
 describe("ImageField triggers", () => {
-  it("should handle the onClick", () => {
+  it("should handle the onClick", async () => {
     defaultProps.value = {
       id: 857,
       name: ".png",
@@ -284,7 +294,8 @@ describe("ImageField triggers", () => {
       width: 1444,
       height: 640,
       orientation: "L",
-      site: "global",
+      site: null,
+      folderId: null,
     };
 
     defaultProps.selectedContent = {
@@ -311,10 +322,12 @@ describe("ImageField triggers", () => {
         height: 353,
         orientation: "L",
         site: 113,
+        folderId: null,
       },
     };
     const setIsGalleryMock = defaultProps.setIsGalleryOpened as jest.MockedFunction<() => void>;
     defaultProps.disabled = false;
+
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <ImageField {...defaultProps} />
@@ -325,7 +338,8 @@ describe("ImageField triggers", () => {
     const fieldWrapperAction = screen.getByTestId("fieldWrapper");
     expect(fieldWrapperAction).toBeTruthy();
 
-    fireEvent.click(fieldWrapperAction);
+    await act(async () => fireEvent.click(fieldWrapperAction));
+
     expect(setIsGalleryMock).toBeCalled();
   });
 
@@ -346,7 +360,8 @@ describe("ImageField triggers", () => {
       width: 1444,
       height: 640,
       orientation: "L",
-      site: "global",
+      site: null,
+      folderId: null,
     };
 
     defaultProps.selectedContent = {
@@ -373,6 +388,7 @@ describe("ImageField triggers", () => {
         height: 353,
         orientation: "L",
         site: 113,
+        folderId: null,
       },
     };
     const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
@@ -401,7 +417,7 @@ describe("ImageField triggers", () => {
     expect(previewDiv).not.toBeVisible();
   });
 
-  it("should handle the change action", () => {
+  it("should handle the change action", async () => {
     defaultProps.value = {
       id: 857,
       name: ".png",
@@ -418,7 +434,8 @@ describe("ImageField triggers", () => {
       width: 1444,
       height: 640,
       orientation: "L",
-      site: "global",
+      site: null,
+      folderId: null,
     };
 
     defaultProps.selectedContent = {
@@ -445,6 +462,7 @@ describe("ImageField triggers", () => {
         height: 353,
         orientation: "L",
         site: 113,
+        folderId: null,
       },
     };
     const setIsGalleryMock = defaultProps.setIsGalleryOpened as jest.MockedFunction<() => void>;
@@ -459,7 +477,7 @@ describe("ImageField triggers", () => {
     const iconActions = screen.getAllByTestId("icon-action-component");
     expect(iconActions).toHaveLength(2);
 
-    fireEvent.click(iconActions[0]);
+    await act(async () => fireEvent.click(iconActions[0]));
     expect(setIsGalleryMock).toBeCalled();
 
     rerender(

package/src/api/folders.tsx

@@ -0,0 +1,62 @@
+import { template } from "./config";
+import { IServiceConfig, sendRequest } from "./utils";
+
+const SERVICES: { [key: string]: IServiceConfig } = {
+  CREATE_FOLDER: {
+    ...template,
+    endpoint: "/folders",
+    method: "POST",
+  },
+  UPDATE_FOLDER: {
+    ...template,
+    endpoint: "/folders/",
+    method: "PUT",
+  },
+  DELETE_FOLDER: {
+    ...template,
+    endpoint: ["/folders/", "/type/"],
+    method: "DELETE",
+  },
+  DELETE_FOLDER_BULK: {
+    ...template,
+    endpoint: "/folders/bulk",
+    method: "DELETE",
+  },
+};
+
+const createFolder = async (data: {
+  type: "images" | "files";
+  folderName: string;
+  site: number | null;
+  parentId: number | null;
+}) => {
+  return sendRequest(SERVICES.CREATE_FOLDER, data);
+};
+
+const updateFolder = async (folderID: number, data: { parentId: number; folderName: string }) => {
+  const { host, endpoint } = SERVICES.UPDATE_FOLDER;
+  SERVICES.UPDATE_FOLDER.dynamicUrl = `${host}${endpoint}${folderID}`;
+
+  return sendRequest(SERVICES.UPDATE_FOLDER, data);
+};
+
+const deleteFolder = async (folderID: number, type: "images" | "files") => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.DELETE_FOLDER;
+  SERVICES.DELETE_FOLDER.dynamicUrl = `${host}${prefix}${folderID}${suffix}${type}`;
+
+  return sendRequest(SERVICES.DELETE_FOLDER);
+};
+
+const deleteFolderBulk = async (ids: number[]) => {
+  return sendRequest(SERVICES.DELETE_FOLDER_BULK, { ids });
+};
+
+export default {
+  createFolder,
+  updateFolder,
+  deleteFolder,
+  deleteFolderBulk,
+};

package/src/api/images.tsx

@@ -1,5 +1,7 @@
+import { encodeData } from "@ax/helpers";
 import { template } from "./config";
 import { IServiceConfig, sendRequest, sendUploadRequest } from "./utils";
+import { IGetFolderParams } from "@ax/types";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
   CREATE_IMAGE: {
@@ -22,11 +24,52 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/image/",
     method: "DELETE",
   },
+  DELETE_IMAGE_BULK: {
+    ...template,
+    endpoint: "/image/bulk",
+    method: "DELETE",
+  },
   CREATE_THUMBNAIL: {
     ...template,
     endpoint: ["/thumbnail/contentId/", "/contentType/"],
     method: "POST",
   },
+  GET_IMAGES_FOLDER: {
+    ...template,
+    endpoint: ["/images/site/", "/folder"],
+    method: "GET",
+  },
+  GET_IMAGES_FOLDER_TREE: {
+    ...template,
+    endpoint: ["/images/site/", "/folder/tree"],
+    method: "GET",
+  },
+  MOVE_IMAGE: {
+    ...template,
+    endpoint: ["/image/", "/folder/"],
+    method: "PUT",
+  },
+  MOVE_IMAGE_BULK: {
+    ...template,
+    endpoint: "/image/bulk/folder/",
+    method: "PUT",
+  },
+  DOWNLOAD_IMAGES: {
+    ...template,
+    endpoint: "/image/downloads/",
+    method: "POST",
+    responseType: "blob",
+  },
+  IMAGE_IN_USE: {
+    ...template,
+    endpoint: ["/image/", "/inuse/"],
+    method: "GET",
+  },
+  IMAGE_REPLACE: {
+    ...template,
+    endpoint: ["/image/", "/replace"],
+    method: "PUT",
+  },
 };
 
 const createImage = async (data: FormData, setProgress?: (progress: number) => void) => {
@@ -54,6 +97,8 @@ const deleteImage = async (imageID: number) => {
   return sendRequest(SERVICES.DELETE_IMAGE);
 };
 
+const deleteImageBulk = async (ids: number[]) => sendRequest(SERVICES.DELETE_IMAGE_BULK, { ids });
+
 const createThumbnail = async (contentID: number, contentType: "form" | "navigation", data: FormData) => {
   const {
     host,
@@ -64,4 +109,117 @@ const createThumbnail = async (contentID: number, contentType: "form" | "navigat
   return sendRequest(SERVICES.CREATE_THUMBNAIL, data);
 };
 
-export default { createImage, getImageInfo, updateImage, deleteImage, createThumbnail };
+const getImagesFolderContent = async (params: IGetFolderParams) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_IMAGES_FOLDER;
+
+  const {
+    siteID,
+    folderID,
+    search,
+    thumbHeight = 188,
+    thumbWidth,
+    pagination,
+    page,
+    itemsPerPage,
+    query: filters = "",
+  } = params;
+
+  const data = {
+    ...(folderID && { folder: folderID }),
+    ...(search && { search }),
+    ...(thumbWidth && { thumbWidth }),
+    ...(thumbHeight && { thumbHeight }),
+    ...(pagination && { pagination }),
+    ...(page && { page }),
+    ...(itemsPerPage && { itemsPerPage }),
+  };
+
+  const queryParams = encodeData(data);
+  const queryFilters = filters.length ? `${queryParams}&${filters}` : queryParams;
+  const query = queryFilters.length ? `?${queryFilters}` : "";
+
+  SERVICES.GET_IMAGES_FOLDER.dynamicUrl = `${host}${prefix}${siteID}${suffix}${query}`;
+
+  return sendRequest(SERVICES.GET_IMAGES_FOLDER);
+};
+
+const getFoldersTree = async (siteID: number | "global") => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_IMAGES_FOLDER_TREE;
+
+  SERVICES.GET_IMAGES_FOLDER_TREE.dynamicUrl = `${host}${prefix}${siteID}${suffix}`;
+
+  return sendRequest(SERVICES.GET_IMAGES_FOLDER_TREE);
+};
+
+const moveImage = async (imageID: number, folderID: number | "root") => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.MOVE_IMAGE;
+
+  SERVICES.MOVE_IMAGE.dynamicUrl = `${host}${prefix}${imageID}${suffix}${folderID}`;
+
+  return sendRequest(SERVICES.MOVE_IMAGE);
+};
+
+const moveImageBulk = async (ids: number[], folderID: number | "root") => {
+  const { host, endpoint } = SERVICES.MOVE_IMAGE_BULK;
+
+  SERVICES.MOVE_IMAGE_BULK.dynamicUrl = `${host}${endpoint}${folderID}`;
+
+  return sendRequest(SERVICES.MOVE_IMAGE_BULK, { ids });
+};
+
+const downloadImages = async (imageID: number | number[], zip: boolean) => {
+  const { host, endpoint } = SERVICES.DOWNLOAD_IMAGES;
+
+  const query = zip ? "?zip=on" : "";
+
+  SERVICES.DOWNLOAD_IMAGES.dynamicUrl = `${host}${endpoint}${imageID}${query}`;
+
+  return sendRequest(SERVICES.DOWNLOAD_IMAGES);
+};
+
+const getImageInUse = async (imageID: number) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.IMAGE_IN_USE;
+
+  SERVICES.IMAGE_IN_USE.dynamicUrl = `${host}${prefix}${imageID}${suffix}`;
+
+  return sendRequest(SERVICES.IMAGE_IN_USE);
+};
+
+const replaceImage = async (data: FormData, imageID: number, setProgress?: (progress: number) => void) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.IMAGE_REPLACE;
+
+  SERVICES.IMAGE_REPLACE.dynamicUrl = `${host}${prefix}${imageID}${suffix}`;
+
+  return sendUploadRequest(SERVICES.IMAGE_REPLACE, data, setProgress);
+};
+
+export default {
+  createImage,
+  getImageInfo,
+  updateImage,
+  deleteImage,
+  deleteImageBulk,
+  createThumbnail,
+  getImagesFolderContent,
+  getFoldersTree,
+  moveImage,
+  moveImageBulk,
+  downloadImages,
+  getImageInUse,
+  replaceImage,
+};

package/src/api/index.tsx

@@ -19,6 +19,7 @@ import analytics from "./analytics";
 import roles from "./roles";
 import integrations from "./integrations";
 import forms from "./forms";
+import folders from "./folders";
 
 export {
   sites,
@@ -42,4 +43,5 @@ export {
   roles,
   integrations,
   forms,
+  folders,
 };

package/src/api/sites.tsx

@@ -304,7 +304,7 @@ const getSitePagesLight = async (params: IGetSitePagesParams): Promise<AxiosResp
 };
 
 const getSiteImages = async (
-  site: number | string,
+  site: number | "global",
   page: number,
   itemsPerPage: number | null,
   thumbWidth?: number,

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

@@ -4,7 +4,7 @@ import { Icon, IconAction, Gallery, Modal, Image, FieldsBehavior } from "@ax/com
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
 import { IImage, ISite } from "@ax/types";
 import { useModal } from "@ax/hooks";
-import GalleryDragAndDrop from "@ax/components/Gallery/GalleryPanel/GalleryDragAndDrop";
+import ImageDragAndDrop from "@ax/modules/MediaGallery/ImageDragAndDrop";
 
 import * as S from "./style";
 
@@ -111,6 +111,8 @@ const ImageField = (props: IImageFieldProps) => {
     isImage(value) && onChange({ ...value, alt: altValue });
   };
 
+  const handleUpload = (file: IImage[]) => getImageSelected(file[0]);
+
   return (
     <>
       <S.FieldWrapper
@@ -179,12 +181,11 @@ const ImageField = (props: IImageFieldProps) => {
         <Gallery getImageSelected={getImageSelected} toggleModal={toggleModal} site={site} />
       </Modal>
       <Modal isOpen={isOpenDD} hide={toggleModalDD} size="M" title="Upload Media">
-        <GalleryDragAndDrop
-          site={site ? site.id : "global"}
-          isImageSelected={false}
-          allowUpload={true}
-          selectImage={getImageSelected}
+        <ImageDragAndDrop
+          siteID={site ? site.id : "global"}
+          isAllowedToUpload={true}
           validFormats={validFormats}
+          handleUpload={handleUpload}
           visible={false}
         />
       </Modal>

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

@@ -57,8 +57,10 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
       "image.beforeUpload": async function (images: FileList) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const editor: any = this;
-        const { url } = await uploadImage(images[0], imageSite);
-        editor.image.insert(url, true, null, editor.image.get(), null);
+        const result = await uploadImage(images[0], imageSite);
+        if (result) {
+          editor.image.insert(result.url, true, null, editor.image.get(), null);
+        }
         return false;
       },
       blur: function () {
@@ -100,7 +102,7 @@ const mapStateToProps = (state: IRootState) => ({
 });
 
 interface IDispatchProps {
-  uploadImage: (imageFile: File, site: number | string) => Promise<IImage>;
+  uploadImage: (imageFile: File, site: number | string) => Promise<IImage | null>;
 }
 
 const mapDispatchToProps = {

package/src/components/FileGallery/index.tsx

@@ -79,20 +79,20 @@ const FileGallery = (props: IProps): JSX.Element => {
   const allowedToAddSiteFile = usePermission("mediaGallery.addFiles");
   const allowedToAddGlobalFile = usePermission("global.mediaGallery.addGlobalFiles");
   const allowedToAddGlobalFileFromSite = usePermission("mediaGallery.addGlobalFilesFromSite");
-  const allowedToAddFile = isTabGlobal
-    ? allowedToAddGlobalFileFromSite
-    : isSiteView
-      ? allowedToAddSiteFile
-      : allowedToAddGlobalFile;
+  const allowedToAddFile = !isSiteView
+    ? allowedToAddGlobalFile
+    : isTabGlobal
+      ? allowedToAddGlobalFileFromSite
+      : allowedToAddSiteFile;
 
   const allowedToEditSiteFile = usePermission("mediaGallery.editFilesss");
   const allowedToEditGlobalFile = usePermission("global.mediaGallery.editGlobalFiles");
   const allowedToEditGlobalFileFromSite = usePermission("mediaGallery.editGlobalFilesInSite");
-  const allowedToEditFile = isTabGlobal
-    ? allowedToEditGlobalFileFromSite
-    : isSiteView
-      ? allowedToEditSiteFile
-      : allowedToEditGlobalFile;
+  const allowedToEditFile = !isSiteView
+    ? allowedToEditGlobalFile
+    : isTabGlobal
+      ? allowedToEditGlobalFileFromSite
+      : allowedToEditSiteFile;
 
   const tabs: string[] = [];
   if (isSiteView && allowedToAccessGlobalFromSite) {
@@ -109,12 +109,13 @@ const FileGallery = (props: IProps): JSX.Element => {
     };
 
     return params;
-  }, [currentFolderID, searchQuery, selectedTab, filterQuery]);
+  }, [currentFolderID, searchQuery, filterQuery, siteID]);
 
   useLayoutEffect(() => {
     return () => {
       updateCurrentFolder(null);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -126,7 +127,7 @@ const FileGallery = (props: IProps): JSX.Element => {
     };
     handleGetContent();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getParams]);
+  }, [getParams, selectedTab]);
 
   useEffect(() => {
     const handleGetTree = async () => await getFoldersTree(siteID);
@@ -192,6 +193,13 @@ const FileGallery = (props: IProps): JSX.Element => {
     message: "No documents found in this folder.",
   };
 
+  const filters = (
+    <>
+      <Type filterItems={filterItems} value={filterValues["filterType"]} />
+      <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
+    </>
+  );
+
   return (
     <S.Wrapper data-testid="file-gallery-wrapper">
       <S.FolderPanel isOpen={isPanelOpen} ref={ref}>
@@ -208,13 +216,11 @@ const FileGallery = (props: IProps): JSX.Element => {
                 <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
               </S.TabsWrapper>
             )}
-            <S.Filters>
-              <Type filterItems={filterItems} value={filterValues["filterType"]} />
-              <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
-            </S.Filters>
+            <S.Filters>{filters}</S.Filters>
           </S.Header>
         )}
         <S.Search>
+          {!isSiteView && <S.FiltersGlobal>{filters}</S.FiltersGlobal>}
           <SearchField
             onChange={setSearchQuery}
             value={searchQuery}