@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/modules/GlobalEditor/index.tsx

@@ -38,6 +38,7 @@ import type {
 	IUserEditing,
 } from "@ax/types";
 
+import { DeleteModal } from "./atoms";
 import Editor from "./Editor";
 import Preview from "./Preview";
 
@@ -83,6 +84,7 @@ const GlobalEditor = (props: IProps) => {
 
 	const defaultTab = isAllowedTo.editContentPages ? "edit" : "view";
 
+	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const [isReadOnly, setIsReadOnly] = useState(false);
 	const [selectedTab, setSelectedTab] = useState(defaultTab);
 	const [notification, setNotification] = useState<INotification | null>(null);
@@ -106,6 +108,7 @@ const GlobalEditor = (props: IProps) => {
 		"headingsPreview",
 		"keywordsPreview",
 		"dirtyNavigate",
+		"delete",
 	]);
 
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
@@ -118,6 +121,7 @@ const GlobalEditor = (props: IProps) => {
 	const isEditLive = isPublished && hasDraft;
 	const isScheduled = props.pageStatus === pageStatus.SCHEDULED;
 	const isDeleted = editorContent.deleted;
+	const isTranslated = pageLanguages.length > 1;
 	const defaultContentTab = "content";
 
 	const errorNotificationText =
@@ -185,13 +189,17 @@ const GlobalEditor = (props: IProps) => {
 	const setRoute = (path: string) => props.setHistoryPush(path, true);
 
 	const removePage = async () => {
-		const { deletePage } = props;
+		const { deletePage, deleteBulk } = props;
 		const path = "/data";
 
-		const deleted = await deletePage();
-
-		if (deleted) {
-			setRoute(path);
+		try {
+			const allPageVersions = pageLanguages.map((lang: IPageLanguage) => lang.pageId);
+			const isDeleted = deleteAllVersions ? await deleteBulk(allPageVersions) : await deletePage();
+			if (isDeleted) {
+				setRoute(path);
+			}
+		} finally {
+			toggleModal("delete");
 		}
 	};
 
@@ -388,9 +396,9 @@ const GlobalEditor = (props: IProps) => {
 
 	if (!isDraft && isAllowedTo.deletePages) {
 		menuOptions.push({
-			label: "Delete page",
+			label: "Delete",
 			icon: "delete",
-			action: removePage,
+			action: () => toggleModal("delete"),
 		});
 	}
 
@@ -759,6 +767,13 @@ const GlobalEditor = (props: IProps) => {
 						</S.ModalContent>
 					)}
 				</Modal>
+				<DeleteModal
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
+					onDelete={removePage}
+					isDeleting={isSaving}
+					{...{ isTranslated, deleteAllVersions, setDeleteAllVersions }}
+				/>
 				<ScheduleModal
 					isOpen={isOpen("schedule")}
 					toggleModal={() => toggleModal("schedule")}
@@ -875,6 +890,7 @@ const mapDispatchToProps = {
 	sendPagePing: pageEditorActions.sendPagePing,
 	setStructuredDataFilter: structuredDataActions.setFilter,
 	discardDraft: pageEditorActions.discardDraft,
+	deleteBulk: pageEditorActions.deleteBulk,
 	getUserCurrentPermissions: usersActions.getUserCurrentPermissions,
 	schedulePublication: pageEditorActions.schedulePublication,
 	restorePage: pageEditorActions.restorePage,
@@ -902,6 +918,7 @@ interface IPageEditorDispatchProps {
 	sendPagePing(pageID: number): Promise<boolean>;
 	setStructuredDataFilter(filter: string | null): void;
 	discardDraft(): Promise<void>;
+	deleteBulk(ids: number[]): Promise<boolean>;
 	getUserCurrentPermissions(): Promise<void>;
 	schedulePublication(date: string | null, isDraft: boolean): Promise<boolean>;
 	restorePage(id: number | number[]): Promise<boolean>;

package/src/modules/MediaGallery/FolderItem/index.tsx

@@ -1,12 +1,13 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
-import { IActionMenuOption, IFolder, IGetFolderParams } from "@ax/types";
 import { Icon, Tooltip } from "@ax/components";
-import { useModal } from "@ax/hooks";
 import { galleryActions } from "@ax/containers/Gallery";
-import { DeleteFolderModal, MoveItemModal, RenameFolderModal } from "../atoms";
 import { trimText } from "@ax/helpers";
+import { useModals } from "@ax/hooks";
+import type { IActionMenuOption, IFolder, IGetFolderParams, IRootState } from "@ax/types";
+
+import { DeleteFolderModal, MoveItemModal, RenameFolderModal } from "../atoms";
 
 import * as S from "./style";
 
@@ -16,6 +17,7 @@ const FolderItem = (props: IProps) => {
 		isAllowedToDelete,
 		isAllowedToEdit,
 		isAllowedToMove,
+		isSaving,
 		onClick,
 		onDelete,
 		toggleToast,
@@ -26,9 +28,7 @@ const FolderItem = (props: IProps) => {
 
 	const initState = { folderName, parentId };
 	const [folderForm, setFolderForm] = useState(initState);
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isRenameOpen, toggleModal: toggleRenameModal } = useModal();
-	const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["delete", "rename", "move"]);
 
 	const setName = (name: string) => setFolderForm({ ...folderForm, folderName: name });
 	const setParent = (folderID: number) => setFolderForm({ ...folderForm, parentId: folderID });
@@ -40,7 +40,7 @@ const FolderItem = (props: IProps) => {
 			{
 				label: "Rename",
 				icon: "edit",
-				action: () => toggleRenameModal(),
+				action: () => toggleModal("rename"),
 			},
 		];
 
@@ -50,7 +50,7 @@ const FolderItem = (props: IProps) => {
 				{
 					label: "Move to...",
 					icon: "change",
-					action: () => toggleMoveModal(),
+					action: () => toggleModal("move"),
 				},
 			];
 		}
@@ -62,16 +62,16 @@ const FolderItem = (props: IProps) => {
 			{
 				label: "Delete",
 				icon: "delete",
-				action: () => toggleDeleteModal(),
+				action: () => toggleModal("delete"),
 			},
 		];
 	}
 
 	const handleClick = () => onClick(id);
 
-	const handleDeleteFolder = () => {
-		onDelete(folder);
-		isDeleteOpen && toggleDeleteModal();
+	const handleDeleteFolder = async () => {
+		await onDelete(folder);
+		isOpen("delete") && toggleModal("delete");
 	};
 
 	const handleUpdateFolder = async (toast = false) => {
@@ -82,39 +82,17 @@ const FolderItem = (props: IProps) => {
 			params,
 		);
 		if (updated) {
-			isRenameOpen && toggleRenameModal();
+			isOpen("rename") && toggleModal("rename");
 			toast && toggleToast("1 Folder moved to another folder");
 		}
 	};
 
 	const handleModalClose = () => {
 		setFolderForm(initState);
-		isMoveOpen && toggleMoveModal();
-		isRenameOpen && toggleRenameModal();
+		isOpen("move") && toggleModal("move");
+		isOpen("rename") && toggleModal("rename");
 	};
 
-	const mainDeleteModalAction = {
-		title: "Delete Folder",
-		onClick: () => handleDeleteFolder(),
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const mainRenameModalAction = {
-		title: "Rename Folder",
-		onClick: () => handleUpdateFolder(),
-		disabled: folderForm.folderName.trim().length === 0,
-	};
-
-	const secondaryRenameModalAction = { title: "Cancel", onClick: handleModalClose };
-
-	const mainMoveModalAction = {
-		title: "Move",
-		onClick: () => handleUpdateFolder(true),
-	};
-
-	const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
-
 	const FolderTitle = () =>
 		folderName.length > 15 ? (
 			<Tooltip content={folderName}>
@@ -133,35 +111,36 @@ const FolderItem = (props: IProps) => {
 				<FolderTitle />
 				<S.StyledActionMenu icon="more" options={menuOptions} tooltip="File actions" />
 			</S.Wrapper>
-			{isDeleteOpen && (
+			{isOpen("delete") && (
 				<DeleteFolderModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
 					title={folderName}
+					onDelete={handleDeleteFolder}
+					isDeleting={isSaving}
 				/>
 			)}
-			{isRenameOpen && (
+			{isOpen("rename") && (
 				<RenameFolderModal
-					isOpen={isRenameOpen}
+					isOpen={isOpen("rename")}
 					toggleModal={handleModalClose}
-					mainModalAction={mainRenameModalAction}
-					secondaryModalAction={secondaryRenameModalAction}
 					value={folderForm.folderName}
 					setValue={setName}
+					onUpdateFolder={() => handleUpdateFolder()}
+					isNameEmpty={folderForm.folderName.trim().length === 0}
+					isUpdating={isSaving}
 				/>
 			)}
-			{isMoveOpen && (
+			{isOpen("move") && (
 				<MoveItemModal
-					isOpen={isMoveOpen}
+					isOpen={isOpen("move")}
 					toggleModal={handleModalClose}
-					mainModalAction={mainMoveModalAction}
-					secondaryModalAction={secondaryMoveModalAction}
 					folder={folderForm.parentId}
 					setFolder={setParent}
 					hidden={[folder.id]}
 					hideRoot={!parentId}
+					onMove={() => handleUpdateFolder(true)}
+					isMoving={isSaving}
 				/>
 			)}
 		</>
@@ -173,6 +152,7 @@ interface IProps {
 	isAllowedToEdit: boolean;
 	isAllowedToDelete: boolean;
 	isAllowedToMove: boolean;
+	isSaving: boolean;
 	onClick(folderID: number): void;
 	onDelete(folder: IFolder): void;
 	toggleToast(state: string): void;
@@ -184,8 +164,12 @@ interface IProps {
 	): Promise<boolean>;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+	isSaving: state.app.isSaving,
+});
+
 const mapDispatchToProps = {
 	updateFolder: galleryActions.updateFolder,
 };
 
-export default connect(null, mapDispatchToProps)(FolderItem);
+export default connect(mapStateToProps, mapDispatchToProps)(FolderItem);

package/src/modules/MediaGallery/GridItem/index.tsx

@@ -1,7 +1,9 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
+
 import { Icon } from "@ax/components";
-import { IActionMenuOption, ICheck, IImage } from "@ax/types";
-import { useModal } from "@ax/hooks";
+import { useModals } from "@ax/hooks";
+import type { IActionMenuOption, ICheck, IImage } from "@ax/types";
 
 import { DeleteFileModal, MoveItemModal } from "../atoms";
 
@@ -15,6 +17,7 @@ const GridItem = (props: IProps) => {
 		isAllowedToDelete,
 		isAllowedToEdit,
 		isAllowedToMove,
+		isSaving,
 		onChange,
 		onClick,
 		onDelete,
@@ -24,8 +27,7 @@ const GridItem = (props: IProps) => {
 	const { id, name, thumb, alt, folderId } = image;
 
 	const [selectedFolder, setSelectedFolder] = useState<number | null>(currentFolderID || null);
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["delete", "move"]);
 
 	const handleCheckClick = (isChecked: boolean) => (e: React.MouseEvent<HTMLDivElement>) => {
 		e.stopPropagation();
@@ -51,7 +53,7 @@ const GridItem = (props: IProps) => {
 				{
 					label: "Move to...",
 					icon: "change",
-					action: () => toggleMoveModal(),
+					action: () => toggleModal("move"),
 				},
 			];
 		}
@@ -63,70 +65,56 @@ const GridItem = (props: IProps) => {
 			{
 				label: "Delete",
 				icon: "delete",
-				action: () => toggleDeleteModal(),
+				action: () => toggleModal("delete"),
 			},
 		];
 	}
 
-	const handleDeleteFile = () => {
-		onDelete(id);
-		isDeleteOpen && toggleDeleteModal();
+	const handleDeleteFile = async () => {
+		await onDelete(id);
+		toggleModal("delete");
 	};
 
-	const handleMoveFile = () => {
+	const handleMoveFile = async () => {
 		if (folderId !== selectedFolder) {
-			onMove(id, selectedFolder || "root");
-			isMoveOpen && toggleMoveModal();
+			await onMove(id, selectedFolder || "root");
+			isOpen("move") && toggleModal("move");
 			setSelectedFolder(0);
 		}
 	};
 
 	const handleModalClose = () => {
 		setSelectedFolder(0);
-		isMoveOpen && toggleMoveModal();
-	};
-
-	const mainDeleteModalAction = {
-		title: "Delete image",
-		onClick: () => handleDeleteFile(),
+		toggleModal("move");
 	};
 
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const mainMoveModalAction = {
-		title: "Move",
-		onClick: () => handleMoveFile(),
-	};
-
-	const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
-
 	return (
 		<>
 			<S.ImageWrapper data-testid="image-item" onClick={handleClick} selected={isSelected}>
 				<img src={thumb} alt={alt} />
-				<S.IconWrapper onClick={handleCheckClick(isSelected ? false : true)}>
+				<S.IconWrapper onClick={handleCheckClick(!isSelected)}>
 					<Icon name={isSelected ? "successSolid" : "emptyCheck"} size="24" />
 				</S.IconWrapper>
 				<S.StyledActionMenu icon="more" options={menuOptions} />
 			</S.ImageWrapper>
-			{isDeleteOpen && (
+			{isOpen("delete") && (
 				<DeleteFileModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
 					title={name}
+					onDelete={handleDeleteFile}
+					isDeleting={isSaving}
 				/>
 			)}
-			{isMoveOpen && (
+			{isOpen("move") && (
 				<MoveItemModal
-					isOpen={isMoveOpen}
+					isOpen={isOpen("move")}
 					toggleModal={handleModalClose}
-					mainModalAction={mainMoveModalAction}
-					secondaryModalAction={secondaryMoveModalAction}
 					folder={selectedFolder}
 					setFolder={setSelectedFolder}
+					onMove={handleMoveFile}
 					hideRoot={!folderId}
+					isMoving={isSaving}
 				/>
 			)}
 		</>
@@ -140,6 +128,7 @@ interface IProps {
 	isAllowedToEdit: boolean;
 	isAllowedToDelete: boolean;
 	isAllowedToMove: boolean;
+	isSaving: boolean;
 	onChange(e: ICheck): void;
 	onClick(image: IImage): void;
 	onDelete(imageID: number): void;

package/src/modules/MediaGallery/ImageModal/DetailPanel/index.tsx

@@ -9,9 +9,10 @@ import { LOCALE } from "@ax/locales";
 import type { IGetFolderParams, IImage, IRootState } from "@ax/types";
 
 import { DeleteFileModal } from "../../atoms";
-import * as S from "./style";
 import UsageContent from "./UsageContent";
 
+import * as S from "./style";
+
 const DetailPanel = (props: IProps) => {
 	const {
 		image,
@@ -30,6 +31,7 @@ const DetailPanel = (props: IProps) => {
 	const { name, size, published, title, alt, tags, width, height } = image;
 
 	const [selectedTab, setSelectedTab] = useState("details");
+	const [isDeleting, setIsDeleting] = useState(false);
 	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
@@ -59,9 +61,14 @@ const DetailPanel = (props: IProps) => {
 
 	const handleCopyUrl = () => navigator.clipboard.writeText(image.url);
 
-	const handleDeleteFile = () => {
-		onDelete(image.id);
-		isDeleteOpen && toggleDeleteModal();
+	const handleDeleteFile = async () => {
+		setIsDeleting(true);
+		try {
+			await onDelete(image.id);
+		} finally {
+			setIsDeleting(false);
+			toggleDeleteModal();
+		}
 	};
 
 	const handleSelectedTab = (tab: "details" | "in use") => {
@@ -70,13 +77,6 @@ const DetailPanel = (props: IProps) => {
 		}
 	};
 
-	const mainNewModalAction = {
-		title: "Delete image",
-		onClick: () => handleDeleteFile(),
-	};
-
-	const secondaryNewModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
 	const tabs = ["details", "in use"];
 
 	return (
@@ -168,9 +168,9 @@ const DetailPanel = (props: IProps) => {
 				<DeleteFileModal
 					isOpen={isDeleteOpen}
 					toggleModal={toggleDeleteModal}
-					mainModalAction={mainNewModalAction}
-					secondaryModalAction={secondaryNewModalAction}
 					title={image.name}
+					onDelete={handleDeleteFile}
+					isDeleting={isDeleting}
 					isChild={true}
 				/>
 			)}

package/src/modules/MediaGallery/ImageModal/index.tsx

@@ -69,19 +69,12 @@ const ImageModal = (props: IProps) => {
 		message: "1 image replaced",
 	};
 
-	const handleMainAction = () => {
+	const handleDiscard = () => {
 		toggleSaveModal();
 		resetDirty();
 		changeFile(isArrowPrev);
 	};
 
-	const mainModalAction = {
-		title: "Yes, discard changes",
-		onClick: () => handleMainAction(),
-	};
-
-	const secondaryModalAction = { title: "Cancel", onClick: toggleSaveModal };
-
 	return (
 		<>
 			<S.Wrapper>
@@ -139,14 +132,7 @@ const ImageModal = (props: IProps) => {
 				/>
 			</S.Wrapper>
 			{isVisible && <Toast {...toastProps} />}
-			{isSaveOpen && (
-				<NotSavedModal
-					isOpen={isSaveOpen}
-					toggleModal={toggleSaveModal}
-					mainModalAction={mainModalAction}
-					secondaryModalAction={secondaryModalAction}
-				/>
-			)}
+			{isSaveOpen && <NotSavedModal isOpen={isSaveOpen} toggleModal={toggleSaveModal} onDiscard={handleDiscard} />}
 		</>
 	);
 };

package/src/modules/MediaGallery/ListItem/index.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import { useState } from "react";
+
 import { CheckField, ElementsTooltip, Tooltip } from "@ax/components";
-import { IActionMenuOption, ICheck, IImage } from "@ax/types";
 import { formatBytes, getFileExtension, trimText } from "@ax/helpers";
-import { useModal } from "@ax/hooks";
+import { useModals } from "@ax/hooks";
+import type { IActionMenuOption, ICheck, IImage } from "@ax/types";
 
 import { DeleteFileModal, MoveItemModal } from "../atoms";
 
@@ -17,6 +18,7 @@ const ListItem = (props: IProps) => {
 		isAllowedToEdit,
 		isAllowedToMove,
 		hoverCheck,
+		isSaving,
 		onChange,
 		onClick,
 		onDelete,
@@ -26,8 +28,7 @@ const ListItem = (props: IProps) => {
 	const imageType = getFileExtension(image.name);
 
 	const [selectedFolder, setSelectedFolder] = useState<number | null>(currentFolderID || null);
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["delete", "move"]);
 
 	const handleChange = (value: ICheck) => onChange(value);
 	const handleClick = () => onClick(image);
@@ -49,7 +50,7 @@ const ListItem = (props: IProps) => {
 				{
 					label: "Move to...",
 					icon: "change",
-					action: () => toggleMoveModal(),
+					action: () => toggleModal("move"),
 				},
 			];
 		}
@@ -61,43 +62,29 @@ const ListItem = (props: IProps) => {
 			{
 				label: "Delete",
 				icon: "delete",
-				action: () => toggleDeleteModal(),
+				action: () => toggleModal("delete"),
 			},
 		];
 	}
 
-	const handleDeleteFile = () => {
-		onDelete(id);
-		isDeleteOpen && toggleDeleteModal();
+	const handleDeleteFile = async () => {
+		await onDelete(id);
+		toggleModal("delete");
 	};
 
-	const handleMoveFile = () => {
+	const handleMoveFile = async () => {
 		if (folderId !== selectedFolder) {
-			onMove(id, selectedFolder || "root");
-			isMoveOpen && toggleMoveModal();
+			await onMove(id, selectedFolder || "root");
+			isOpen("move") && toggleModal("move");
 			setSelectedFolder(0);
 		}
 	};
 
 	const handleModalClose = () => {
 		setSelectedFolder(0);
-		isMoveOpen && toggleMoveModal();
-	};
-
-	const mainDeleteModalAction = {
-		title: "Delete image",
-		onClick: () => handleDeleteFile(),
+		toggleModal("move");
 	};
 
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const mainMoveModalAction = {
-		title: "Move",
-		onClick: () => handleMoveFile(),
-	};
-
-	const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
-
 	const FileTitle = () => (name.length > 50 ? <Tooltip content={name}>{trimText(name, 50)}</Tooltip> : <>{name}</>);
 
 	return (
@@ -140,24 +127,24 @@ const ListItem = (props: IProps) => {
 					<S.StyledActionMenu icon="more" options={menuOptions} tooltip="File actions" />
 				</S.ActionsCell>
 			</S.ItemRow>
-			{isDeleteOpen && (
+			{isOpen("delete") && (
 				<DeleteFileModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
 					title={name}
+					onDelete={handleDeleteFile}
+					isDeleting={isSaving}
 				/>
 			)}
-			{isMoveOpen && (
+			{isOpen("move") && (
 				<MoveItemModal
-					isOpen={isMoveOpen}
+					isOpen={isOpen("move")}
 					toggleModal={handleModalClose}
-					mainModalAction={mainMoveModalAction}
-					secondaryModalAction={secondaryMoveModalAction}
 					folder={selectedFolder}
 					setFolder={setSelectedFolder}
+					onMove={handleMoveFile}
 					hideRoot={!folderId}
+					isMoving={isSaving}
 				/>
 			)}
 		</>
@@ -176,6 +163,7 @@ interface IProps {
 	onDelete(fileID: number): void;
 	onMove(fileID: number, folderID: number | "root"): void;
 	hoverCheck: boolean;
+	isSaving: boolean;
 }
 
 export default ListItem;