@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/modules/FileDrive/atoms.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import type React from "react";
 
-import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
+import { FieldsBehavior, Modal } from "@ax/components";
+import type { IModal } from "@ax/types";
+
+import type { IFolderFormState } from ".";
 import FolderTree from "./FolderTree";
-import { IFolderFormState } from ".";
 
 import * as S from "./style";
 
@@ -47,8 +48,16 @@ const NewFolderModal = (props: INewModalProps): JSX.Element => {
 	);
 };
 
-const DeleteFolderModal = (props: IDeleteModalProps): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, title } = props;
+const DeleteFolderModal = (props: IDeleteFolderModalProps): JSX.Element => {
+	const { isOpen, toggleModal, title, onDelete, isDeleting = false } = props;
+
+	const mainModalAction = {
+		title: isDeleting ? "Deleting" : "Delete",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
@@ -69,13 +78,21 @@ const DeleteFolderModal = (props: IDeleteModalProps): JSX.Element => {
 };
 
 const RenameFolderModal = (props: IRenameModalProps): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, value, setValue } = props;
+	const { isOpen, toggleModal, value, setValue, onUpdateFolder, isUpdating = false, isNameEmpty = false } = props;
 
 	const setNameValue = (name: string) => setValue(name);
 
+	const mainModalAction = {
+		title: isUpdating ? "Updating..." : "Rename Folder",
+		onClick: onUpdateFolder,
+		disabled: isNameEmpty || isUpdating,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
 	const handleKeyDown = (e: React.KeyboardEvent) => {
 		if (e.key === "Enter") {
-			mainModalAction?.onClick();
+			mainModalAction.onClick();
 		}
 	};
 
@@ -87,7 +104,7 @@ const RenameFolderModal = (props: IRenameModalProps): JSX.Element => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
-			height={244}
+			height="auto"
 		>
 			<S.ModalContent>
 				<S.NoMarginFieldsBehavior
@@ -106,7 +123,15 @@ const RenameFolderModal = (props: IRenameModalProps): JSX.Element => {
 };
 
 const DeleteFileModal = (props: IDeleteModalProps): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, title, isChild } = props;
+	const { isOpen, toggleModal, title, isChild, onDelete, isDeleting = false } = props;
+
+	const mainModalAction = {
+		title: isDeleting ? "Deleting" : "Delete",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
@@ -116,7 +141,7 @@ const DeleteFileModal = (props: IDeleteModalProps): JSX.Element => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
-			height={240}
+			height="auto"
 			isChild={isChild}
 		>
 			<S.ModalContent>
@@ -128,10 +153,18 @@ const DeleteFileModal = (props: IDeleteModalProps): JSX.Element => {
 };
 
 const MoveItemModal = (props: IMoveModalProps): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, folder, setFolder, hidden, hideRoot } = props;
+	const { isOpen, toggleModal, folder, setFolder, hidden, hideRoot, onMove = () => {}, isMoving = false } = props;
 
 	const handleSetFolder = (folderID: number) => setFolder(folderID);
 
+	const mainModalAction = {
+		title: isMoving ? "Moving" : "Move",
+		onClick: onMove,
+		disabled: isMoving,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
 	return (
 		<Modal
 			isOpen={isOpen}
@@ -180,10 +213,22 @@ interface INewModalProps extends IModal {
 interface IRenameModalProps extends IModal {
 	value: string;
 	setValue(value: string): void;
+	onUpdateFolder(): void | Promise<void>;
+	isUpdating?: boolean;
+	isNameEmpty?: boolean;
 }
 
 interface IDeleteModalProps extends IModal {
 	title: string;
+	onDelete(): void;
+	isDeleting?: boolean;
+	isChild?: boolean;
+}
+
+interface IDeleteFolderModalProps extends IModal {
+	title: string;
+	onDelete(): void;
+	isDeleting?: boolean;
 }
 
 interface IMoveModalProps extends IModal {
@@ -191,6 +236,8 @@ interface IMoveModalProps extends IModal {
 	setFolder(folderID: number): void;
 	hidden?: number[];
 	hideRoot?: boolean;
+	onMove(): void;
+	isMoving?: boolean;
 }
 
 export { NewFolderModal, DeleteFolderModal, DeleteFileModal, MoveItemModal, RenameFolderModal, NotSavedModal };

package/src/modules/FileDrive/index.tsx

@@ -19,9 +19,8 @@ import {
 	Toast,
 	Tooltip,
 } from "@ax/components";
-import { VALID_FILE_FORMATS } from "@ax/constants";
 import { fileDriveActions } from "@ax/containers/FileDrive";
-import { useBulkSelection, useIsDirty, useModal, usePermission, useResizable, useToast } from "@ax/hooks";
+import { useBulkSelection, useIsDirty, useModals, usePermissions, useResizable, useToast } from "@ax/hooks";
 import type {
 	IBulkAction,
 	IFile,
@@ -79,7 +78,6 @@ const FileDrive = (props: IProps) => {
 		folders,
 	} = currentFolderContent || { files: { totalItems: 0, items: [] }, folders: [] };
 
-	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [isPanelOpen, setPanelOpen] = useState(false);
 	const [fileSelected, setFileSelected] = useState<IFile | null>(null);
 	const [selectedFolder, setSelectedFolder] = useState<number>(currentFolderID || 0);
@@ -91,12 +89,7 @@ const FileDrive = (props: IProps) => {
 	const [wrapperWidth, setWrapperWidth] = useState<number>();
 	const tableRef = useRef<HTMLDivElement>(null);
 	const wrapperRef = useRef<HTMLDivElement>(null);
-	const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
-	const { isOpen: isUploadOpen, toggleModal: toggleUploadModal } = useModal();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
-	const { isOpen: isSaveOpen, toggleModal: toggleSaveModal } = useModal();
-	const { isOpen, toggleModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["new", "upload", "delete", "move", "save", "file"]);
 	const { isVisible, toggleToast, setIsVisible } = useToast();
 	const { isVisible: isNewVisible, toggleToast: toggleNewToast, setIsVisible: setIsNewVisible } = useToast();
 	const { isVisible: isDeleteVisible, toggleToast: toggleDeleteToast, setIsVisible: setIsDeleteVisible } = useToast();
@@ -127,34 +120,50 @@ const FileDrive = (props: IProps) => {
 	const isRoot = !breadcrumb.length;
 	const isGrid = displayMode === "grid";
 
-	const allowedToAccessGlobalFromSite = usePermission("mediaGallery.accessToGlobalFileDriveFromSite");
-
-	const allowedToAddSiteFile = usePermission("mediaGallery.addFiles");
-	const allowedToAddGlobalFile = usePermission("global.mediaGallery.addGlobalFiles");
-	const allowedToAddGlobalFileFromSite = usePermission("mediaGallery.addGlobalFilesFromSite");
-	const allowedToAddFile = !isSiteView
-		? allowedToAddGlobalFile
-		: isTabGlobal
-			? allowedToAddGlobalFileFromSite
-			: allowedToAddSiteFile;
-
-	const allowedToEditSiteFile = usePermission("mediaGallery.editFiles");
-	const allowedToEditGlobalFile = usePermission("global.mediaGallery.editGlobalFiles");
-	const allowedToEditGlobalFileFromSite = usePermission("mediaGallery.editGlobalFilesInSite");
-	const allowedToEditFile = !isSiteView
-		? allowedToEditGlobalFile
-		: isTabGlobal
-			? allowedToEditGlobalFileFromSite
-			: allowedToEditSiteFile;
-
-	const allowedToDeleteSiteFile = usePermission("mediaGallery.deleteFiles");
-	const allowedToDeleteGlobalFile = usePermission("global.mediaGallery.deleteGlobalFiles");
-	const allowedToDeleteGlobalFileFromSite = usePermission("mediaGallery.deleteGlobalFilesInSite");
-	const allowedToDeleteFile = !isSiteView
-		? allowedToDeleteGlobalFile
-		: isTabGlobal
-			? allowedToDeleteGlobalFileFromSite
-			: allowedToDeleteSiteFile;
+	const {
+		allowedToAccessGlobalFromSite,
+		allowedToAddSiteFile,
+		allowedToAddGlobalFile,
+		allowedToAddGlobalFileFromSite,
+		allowedToEditSiteFile,
+		allowedToEditGlobalFile,
+		allowedToEditGlobalFileFromSite,
+		allowedToDeleteSiteFile,
+		allowedToDeleteGlobalFile,
+		allowedToDeleteGlobalFileFromSite,
+	} = usePermissions({
+		allowedToAccessGlobalFromSite: "mediaGallery.accessToGlobalFileDriveFromSite",
+		allowedToAddSiteFile: "mediaGallery.addFiles",
+		allowedToAddGlobalFile: "global.mediaGallery.addGlobalFiles",
+		allowedToAddGlobalFileFromSite: "mediaGallery.addGlobalFilesFromSite",
+		allowedToEditSiteFile: "mediaGallery.editFiles",
+		allowedToEditGlobalFile: "global.mediaGallery.editGlobalFiles",
+		allowedToEditGlobalFileFromSite: "mediaGallery.editGlobalFilesInSite",
+		allowedToDeleteSiteFile: "mediaGallery.deleteFiles",
+		allowedToDeleteGlobalFile: "global.mediaGallery.deleteGlobalFiles",
+		allowedToDeleteGlobalFileFromSite: "mediaGallery.deleteGlobalFilesInSite",
+	});
+
+	const selectPermission = (site: boolean, global: boolean, fromSite: boolean) =>
+		!isSiteView ? global : isTabGlobal ? fromSite : site;
+
+	const allowedToAddFile = selectPermission(
+		allowedToAddSiteFile,
+		allowedToAddGlobalFile,
+		allowedToAddGlobalFileFromSite,
+	);
+
+	const allowedToEditFile = selectPermission(
+		allowedToEditSiteFile,
+		allowedToEditGlobalFile,
+		allowedToEditGlobalFileFromSite,
+	);
+
+	const allowedToDeleteFile = selectPermission(
+		allowedToDeleteSiteFile,
+		allowedToDeleteGlobalFile,
+		allowedToDeleteGlobalFileFromSite,
+	);
 
 	const getParams = useCallback(() => {
 		const params = {
@@ -226,7 +235,7 @@ const FileDrive = (props: IProps) => {
 
 	const handleNewFolder = () => {
 		setFolderForm(initFolderState);
-		!isNewOpen && toggleNewModal();
+		!isOpen("new") && toggleModal("new");
 	};
 
 	const changeDisplayMode = (mode: "grid" | "list") => updateDisplayMode(mode);
@@ -247,7 +256,7 @@ const FileDrive = (props: IProps) => {
 			parentId: folderForm.folderID || undefined,
 		});
 		if (isCreated) {
-			isNewOpen && toggleNewModal();
+			isOpen("new") && toggleModal("new");
 			toggleNewToast();
 		}
 	};
@@ -261,13 +270,13 @@ const FileDrive = (props: IProps) => {
 
 	const handleClick = (file: IFile) => {
 		setFileSelected(file);
-		toggleModal();
+		toggleModal("file");
 	};
 
 	const handleUpload = async (files: IFile[]) => {
 		setFileSelected(files[0]);
-		isUploadOpen && toggleUploadModal();
-		toggleModal();
+		isOpen("upload") && toggleModal("upload");
+		toggleModal("file");
 		const params = getParams();
 		await getFolderContent(params);
 	};
@@ -290,7 +299,7 @@ const FileDrive = (props: IProps) => {
 	};
 
 	const handleMultipleUpload = async (files: File[]) => {
-		isUploadOpen && toggleUploadModal();
+		isOpen("upload") && toggleModal("upload");
 
 		const initialProgress = files.map(() => 0);
 		setProgressItems(initialProgress);
@@ -304,7 +313,7 @@ const FileDrive = (props: IProps) => {
 
 	const handleCloseModal = () => {
 		if (isDirty) {
-			toggleSaveModal();
+			toggleModal("save");
 		} else {
 			resetFileModal();
 		}
@@ -315,7 +324,7 @@ const FileDrive = (props: IProps) => {
 		setGalleryItems(filesIds);
 		setGalleryDelete(true);
 		resetDirty();
-		toggleModal();
+		toggleModal("file");
 	};
 
 	const handleDeleteFile = async (fileID: number) => {
@@ -327,15 +336,13 @@ const FileDrive = (props: IProps) => {
 	};
 
 	const handleBulkDeleteFile = async () => {
-		setIsBulkLoading(true);
 		const isDeleted = await deleteFile(selectedItems.all, siteID);
 		if (isDeleted) {
 			setNumDocs(selectedItems.all.length);
-			toggleDeleteModal();
+			toggleModal("delete");
 			toggleDeleteToast();
 			resetBulkSelection();
 		}
-		setIsBulkLoading(false);
 	};
 
 	const handleMoveFile = async (fileID: number, folderID: number) => {
@@ -347,16 +354,14 @@ const FileDrive = (props: IProps) => {
 	};
 
 	const handleBulkMoveFile = async () => {
-		setIsBulkLoading(true);
 		const isMoved = await moveFile(selectedItems.all, selectedFolder, siteID);
 		if (isMoved) {
 			setNumDocs(selectedItems.all.length);
-			toggleMoveModal();
+			toggleModal("move");
 			toggleMoveToast();
 			setSelectedFolder(0);
 			resetBulkSelection();
 		}
-		setIsBulkLoading(false);
 	};
 
 	const handleBulkEditFile = () => {
@@ -365,13 +370,13 @@ const FileDrive = (props: IProps) => {
 			setGalleryItems(selectedItems.all);
 			setFileSelected(currentFile);
 			setGalleryDelete(false);
-			toggleModal();
+			toggleModal("file");
 		}
 	};
 
 	const handleModalClose = () => {
 		setSelectedFolder(0);
-		isMoveOpen && toggleMoveModal();
+		isOpen("move") && toggleModal("move");
 	};
 
 	const handleSelectFile = (id: number) => {
@@ -382,10 +387,8 @@ const FileDrive = (props: IProps) => {
 	};
 
 	const handleDownloadBulk = async () => {
-		setIsBulkLoading(true);
 		await downloadFiles(selectedItems.all, true);
 		resetBulkSelection();
-		setIsBulkLoading(false);
 	};
 
 	const handleUpdateCurrentFolder = (folderID: number | null) => {
@@ -416,7 +419,7 @@ const FileDrive = (props: IProps) => {
 			{
 				icon: "change",
 				text: "Move to",
-				action: toggleMoveModal,
+				action: () => toggleModal("move"),
 			},
 		];
 	}
@@ -436,7 +439,7 @@ const FileDrive = (props: IProps) => {
 			{
 				icon: "delete",
 				text: "delete",
-				action: toggleDeleteModal,
+				action: () => toggleModal("delete"),
 			},
 		];
 	}
@@ -452,7 +455,7 @@ const FileDrive = (props: IProps) => {
 			isSearching={isSearching}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
-			isLoading={isBulkLoading}
+			isLoading={isSaving}
 		/>
 	);
 
@@ -477,6 +480,7 @@ const FileDrive = (props: IProps) => {
 						isAllowedToEdit={allowedToEditFile}
 						isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
 						isSearching={isSearching}
+						isSaving={isSaving}
 					/>
 				);
 			})}
@@ -506,6 +510,7 @@ const FileDrive = (props: IProps) => {
 							isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
 							isSearching={isSearching}
 							hoverCheck={checkState.hoverCheck}
+							isSaving={isSaving}
 						/>
 					);
 				})}
@@ -541,14 +546,14 @@ const FileDrive = (props: IProps) => {
 	const rightButtonProps = allowedToAddFile
 		? {
 				label: "Upload",
-				action: () => toggleUploadModal(),
+				action: () => toggleModal("upload"),
 			}
 		: undefined;
 
 	const emptyProps = {
 		message: allowedToAddFile ? "To start using files in your site, upload as many documents as you need" : "",
 		button: allowedToAddFile ? "Upload file" : undefined,
-		action: () => toggleUploadModal(),
+		action: () => toggleModal("upload"),
 	};
 
 	const emptySearchStateProps = {
@@ -563,25 +568,10 @@ const FileDrive = (props: IProps) => {
 		disabled: folderForm.name.trim().length === 0 || isSaving,
 	};
 
-	const secondaryNewModalAction = { title: "Cancel", onClick: toggleNewModal };
-
-	const mainDeleteModalAction = {
-		title: isBulkLoading ? "Deleting" : "Delete",
-		onClick: () => handleBulkDeleteFile(),
-		disabled: isBulkLoading,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const mainMoveModalAction = {
-		title: "Move",
-		onClick: () => handleBulkMoveFile(),
-	};
-
-	const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
+	const secondaryNewModalAction = { title: "Cancel", onClick: () => toggleModal("new") };
 
 	const handleMainAction = () => {
-		toggleSaveModal();
+		toggleModal("save");
 		resetFileModal();
 	};
 
@@ -590,7 +580,7 @@ const FileDrive = (props: IProps) => {
 		onClick: () => handleMainAction(),
 	};
 
-	const secondarySaveModalAction = { title: "Cancel", onClick: toggleSaveModal };
+	const secondarySaveModalAction = { title: "Cancel", onClick: () => toggleModal("save") };
 
 	const foldersIcon = isPanelOpen ? <Icon name="closePanel" size="24" /> : <Icon name="openPanel" size="24" />;
 
@@ -707,7 +697,7 @@ const FileDrive = (props: IProps) => {
 											selectItems={selectItems}
 											bulkActions={bulkActions}
 											selectedItems={selectedItems}
-											isLoading={isBulkLoading}
+											isLoading={isSaving}
 										/>
 									)}
 									{!hasFolders && isRoot && !isSearching && <NewFolderButton />}
@@ -723,18 +713,18 @@ const FileDrive = (props: IProps) => {
 					)}
 				</S.ContentWrapper>
 			</S.Wrapper>
-			{isNewOpen && (
+			{isOpen("new") && (
 				<NewFolderModal
-					isOpen={isNewOpen}
-					toggleModal={toggleNewModal}
+					isOpen={isOpen("new")}
+					toggleModal={() => toggleModal("new")}
 					mainModalAction={mainNewModalAction}
 					secondaryModalAction={secondaryNewModalAction}
 					form={folderForm}
 					setForm={setFolderForm}
 				/>
 			)}
-			<Modal isOpen={isUploadOpen} hide={toggleUploadModal} size="XL" title="Upload file">
-				{isUploadOpen && (
+			<Modal isOpen={isOpen("upload")} hide={() => toggleModal("upload")} size="XL" title="Upload file">
+				{isOpen("upload") && (
 					<FileDragAndDrop
 						folderID={currentFolderID}
 						handleUpload={handleUpload}
@@ -743,8 +733,8 @@ const FileDrive = (props: IProps) => {
 					/>
 				)}
 			</Modal>
-			<Modal isOpen={isOpen} hide={handleCloseModal} size="XL" title="Document details">
-				{isOpen && fileSelected && (
+			<Modal isOpen={isOpen("file")} hide={handleCloseModal} size="XL" title="Document details">
+				{isOpen("file") && fileSelected && (
 					<FileModal
 						file={fileSelected}
 						toggleModal={handleCloseModal}
@@ -762,29 +752,29 @@ const FileDrive = (props: IProps) => {
 					/>
 				)}
 			</Modal>
-			{isDeleteOpen && (
+			{isOpen("delete") && (
 				<DeleteFileModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
 					title="these documents"
+					onDelete={handleBulkDeleteFile}
+					isDeleting={isSaving}
 				/>
 			)}
-			{isMoveOpen && (
+			{isOpen("move") && (
 				<MoveItemModal
-					isOpen={isMoveOpen}
+					isOpen={isOpen("move")}
 					toggleModal={handleModalClose}
-					mainModalAction={mainMoveModalAction}
-					secondaryModalAction={secondaryMoveModalAction}
 					folder={selectedFolder}
 					setFolder={setSelectedFolder}
+					onMove={handleBulkMoveFile}
+					isMoving={isSaving}
 				/>
 			)}
-			{isSaveOpen && (
+			{isOpen("save") && (
 				<NotSavedModal
-					isOpen={isSaveOpen}
-					toggleModal={toggleSaveModal}
+					isOpen={isOpen("save")}
+					toggleModal={() => toggleModal("save")}
 					mainModalAction={mainSaveModalAction}
 					secondaryModalAction={secondarySaveModalAction}
 				/>