@griddo/ax 11.14.2 → 11.14.3-rc.0

package/src/modules/Content/atoms.tsx

@@ -1,21 +1,12 @@
-import React from "react";
+import type React from "react";
 
+import { Button, ErrorToast, FieldsBehavior, Modal, Select } from "@ax/components";
 import type { IModal, ISite } from "@ax/types";
-import { Modal, FieldsBehavior, Select, Button } from "@ax/components";
 
 import * as S from "./style";
 
 const DeleteModal = (props: IDeleteModal): JSX.Element => {
-	const {
-		isOpen,
-		toggleModal,
-		mainModalAction,
-		secondaryModalAction,
-		isTranslated,
-		deleteAllVersions,
-		setDeleteAllVersions,
-		title,
-	} = props;
+	const { isOpen, toggleModal, isTranslated, deleteAllVersions, setDeleteAllVersions, title, onDelete, isDeleting } = props;
 
 	const options = [
 		{
@@ -32,13 +23,21 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 
 	const pageTitle = title ? <strong>{title}</strong> : "this";
 
+	const mainAction = {
+		title: isDeleting ? "Deleting" : "Delete page",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
 			title="Delete Page?"
-			secondaryAction={secondaryModalAction}
-			mainAction={mainModalAction}
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
 			size="S"
 		>
 			{isTranslated ? (
@@ -81,17 +80,25 @@ const SecondaryActionButton = (props: IActionButton): JSX.Element => (
 );
 
 const CopyModal = (props: ICopyModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, setSite, sites, site } = props;
+	const { isOpen, toggleModal, setSite, sites, site, onCopy } = props;
 	const sitesOptions = sites.map((site: ISite) => ({ label: site.name, value: site.id.toString() }));
 
+	const mainAction = {
+		title: "Copy page",
+		onClick: onCopy,
+		disabled: !site,
+	};
+
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
 			size="S"
 			title="Copy page in another site"
-			mainAction={mainModalAction}
-			secondaryAction={secondaryModalAction}
+			mainAction={mainAction}
+			secondaryAction={secondaryAction}
 			overflow="visible"
 		>
 			<S.ModalContent>
@@ -114,11 +121,109 @@ const CopyModal = (props: ICopyModal): JSX.Element => {
 	);
 };
 
+const DuplicatePageModal = (props: IDuplicatePageModal): JSX.Element => {
+	const { isOpen, toggleModal, modalState, onNameChange, onSlugChange, onDuplicate, isSaving } = props;
+
+	const mainAction = {
+		title: "Duplicate",
+		onClick: onDuplicate,
+		disabled: !modalState.title.trim() || !modalState.slug.trim() || isSaving,
+	};
+
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title="Duplicate page"
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
+			size="M"
+		>
+			<ErrorToast />
+			{isOpen ? (
+				<S.ModalContent>
+					<FieldsBehavior
+						fieldType="TextField"
+						name="title"
+						title="Title"
+						mandatory={true}
+						value={modalState.title}
+						onChange={onNameChange}
+					/>
+					<FieldsBehavior
+						fieldType="TextField"
+						name="slug"
+						title="Slug"
+						mandatory={true}
+						value={modalState.slug}
+						onChange={onSlugChange}
+					/>
+				</S.ModalContent>
+			) : null}
+		</Modal>
+	);
+};
+
+const RemovePageModal = (props: IRemovePageModal): JSX.Element => {
+	const { isOpen, toggleModal, pageTitle, onRemove } = props;
+
+	const mainAction = {
+		title: "Remove",
+		onClick: onRemove,
+	};
+
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title="Remove page from this site?"
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
+			size="S"
+		>
+			{isOpen ? (
+				<S.ModalContent>
+					<p>
+						Are you sure you want to remove <strong>'{pageTitle}'</strong> from this site?
+						<br />
+						This action <strong>cannot be undone</strong>.
+					</p>
+				</S.ModalContent>
+			) : null}
+		</Modal>
+	);
+};
+
+const UnpublishPageModal = (props: IUnpublishPageModal): JSX.Element => {
+	const { isOpen, toggleModal } = props;
+
+	const mainAction = { title: "Ok", onClick: toggleModal };
+
+	return (
+		<Modal isOpen={isOpen} hide={toggleModal} size="S" title="Unpublish Modified Page" mainAction={mainAction}>
+			{isOpen && (
+				<S.ModalContent>
+					<p>
+						There are some saved changes that are not published on this page. To Unpublish this page,{" "}
+						<strong>you must publish these changes or discard them.</strong>
+					</p>
+				</S.ModalContent>
+			)}
+		</Modal>
+	);
+};
+
 interface IDeleteModal extends IModal {
 	isTranslated: boolean;
 	deleteAllVersions: boolean;
 	setDeleteAllVersions: React.Dispatch<React.SetStateAction<boolean>>;
 	title?: string;
+	onDelete: () => void;
+	isDeleting?: boolean;
 }
 
 interface IActionButton {
@@ -131,6 +236,30 @@ interface ICopyModal extends IModal {
 	setSite: React.Dispatch<React.SetStateAction<any>>;
 	sites: ISite[];
 	site: string | null;
+	onCopy: () => void;
 }
 
-export { DeleteModal, CopyModal, MainActionButton, SecondaryActionButton };
+interface IDuplicatePageModal extends IModal {
+	modalState: { title: string; slug: string };
+	onNameChange: (value: string) => void;
+	onSlugChange: (value: string) => void;
+	onDuplicate: () => void;
+	isSaving: boolean;
+}
+
+interface IRemovePageModal extends IModal {
+	pageTitle: string;
+	onRemove: () => void;
+}
+
+interface IUnpublishPageModal extends IModal {}
+
+export {
+	DeleteModal,
+	CopyModal,
+	DuplicatePageModal,
+	RemovePageModal,
+	UnpublishPageModal,
+	MainActionButton,
+	SecondaryActionButton,
+};

package/src/modules/Content/index.tsx

@@ -818,13 +818,6 @@ const Content = (props: IProps): JSX.Element => {
 
 	const resetFilter = () => resetFilterQuery();
 
-	const mainDeleteModalAction = {
-		title: isDeleting ? "Deleting" : "Delete",
-		onClick: bulkDelete,
-		disabled: isDeleting,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
 
 	const undoDeleteAction = async () => {
 		if (deletedItem) {
@@ -972,8 +965,8 @@ const Content = (props: IProps): JSX.Element => {
 			<DeleteModal
 				isOpen={isDeleteOpen}
 				toggleModal={toggleDeleteModal}
-				mainModalAction={mainDeleteModalAction}
-				secondaryModalAction={secondaryDeleteModalAction}
+				onDelete={bulkDelete}
+				isDeleting={isDeleting}
 				{...{ isTranslated: arePagesTranslated, deleteAllVersions, setDeleteAllVersions }}
 			/>
 			{isVisible && <Toast {...toastProps} />}

package/src/modules/Forms/FormCategoriesList/CategoryItem/index.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { connect } from "react-redux";
 
-import { CheckField, Icon } from "@ax/components";
+import { CheckField, Icon, TruncatedTooltip } from "@ax/components";
 import { formsActions } from "@ax/containers/Forms";
 import { useModal, usePermission } from "@ax/hooks";
 import type { FormCategory, ICheck } from "@ax/types";
@@ -88,10 +88,14 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 					<CheckField name="check" value={category.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
 				</S.CheckCell>
 				<S.NameCell role="cell" clickable={true}>
-					<div>{content?.title || ""}</div>
+					<TruncatedTooltip content={content?.title || ""} expanded top={-5}>
+						<S.Title>{content?.title || ""}</S.Title>
+					</TruncatedTooltip>
 				</S.NameCell>
 				<S.CodeCell role="cell" clickable={true}>
-					{category.content.code}
+					<TruncatedTooltip content={category.content.code} expanded top={-5}>
+						<S.Code>{category.content.code}</S.Code>
+					</TruncatedTooltip>
 				</S.CodeCell>
 				<S.ActionsCell role="cell">
 					<S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />

package/src/modules/Forms/FormCategoriesList/CategoryItem/style.tsx

@@ -23,16 +23,48 @@ const NameCell = styled(Cell)<{ clickable: boolean }>`
   align-items: center;
   justify-content: flex-start;
   flex-grow: 1;
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
 `;
 
 const ActionsCell = styled(Cell)`
   flex: 0 0 80px;
 `;
 
+const Title = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
+`;
+
 const CodeCell = styled(Cell)<{ clickable: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
   pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   flex: 0 0 250px;
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const Code = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
 `;
 
 const StyledActionMenu = styled(ActionMenu)`
@@ -84,8 +116,10 @@ const IconWrapperDrag = styled.div`
 export {
 	CheckCell,
 	NameCell,
+	Title,
 	ActionsCell,
 	CodeCell,
+	Code,
 	StyledActionMenu,
 	CategoryRow,
 	FlagsWrapper,

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

@@ -9,7 +9,7 @@ import { formsActions } from "@ax/containers/Forms";
 import { findFieldsErrors } from "@ax/forms";
 import { RouteLeavingGuard } from "@ax/guards";
 import { getDefaultTheme } from "@ax/helpers";
-import { useModal, usePermission, useShouldBeSaved } from "@ax/hooks";
+import { useModals, usePermissions, useShouldBeSaved } from "@ax/hooks";
 import type {
 	FormContent,
 	FormLanguage,
@@ -78,23 +78,20 @@ const FormEditor = (props: IProps) => {
 	const [notification, setNotification] = useState<INotification | null>(null);
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const [errors, setErrors] = useState<IErrorItem[]>([]);
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
-	const { isOpen: isUseOpen, toggleModal: toggleUseModal } = useModal();
-	const { isOpen: isUpdateOpen, toggleModal: toggleUpdateModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["delete", "unpublish", "use", "update"]);
 
 	const { isDirty, setIsDirty } = useShouldBeSaved(formContent);
 	const browserRef = useRef<HTMLDivElement>(null);
 
-	const deleteFormPermission = isSiteView ? "forms.deleteForms" : "global.forms.deleteForms";
-	const publishFormPermission = isSiteView ? "forms.publishUnpublishForms" : "global.forms.publishUnpublishForms";
-	const isAllowedToDeleteForm = usePermission(deleteFormPermission);
-	const isAllowedToPublishForm = usePermission(publishFormPermission);
+	const isAllowedTo = usePermissions({
+		deleteForms: isSiteView ? "forms.deleteForms" : "global.forms.deleteForms",
+		publishUnpublishForms: isSiteView ? "forms.publishUnpublishForms" : "global.forms.publishUnpublishForms",
+	});
 
 	const toastMsg = (
 		<>
 			This form is used in some pages. Changes will apply to all pages where it’s{" "}
-			<button type="button" onClick={toggleUseModal}>
+			<button type="button" onClick={() => toggleModal("use")}>
 				in use.
 			</button>
 		</>
@@ -130,7 +127,7 @@ const FormEditor = (props: IProps) => {
 	const handleSavePage = async (updateState?: FormState) => {
 		const { saveForm } = props;
 
-		isUpdateOpen && toggleUpdateModal();
+		isOpen("update") && toggleModal("update");
 
 		const skipErrorCheck =
 			skipReviewOnPublish || (!isPublishedForm && !updateState) || (isPublishedForm && updateState === "inactive");
@@ -155,16 +152,16 @@ const FormEditor = (props: IProps) => {
 				text: "This form is currently used on multiple pages. Please remove it from those pages before deleting.",
 				type: "error",
 				btnText: "Show pages",
-				onClick: toggleUseModal,
+				onClick: () => toggleModal("use"),
 			});
 		} else {
 			const allFormVersions = dataLanguages.map((lang: FormLanguage) => lang.id);
 			const isDeleted = deleteAllVersions ? await deleteForm(allFormVersions) : await deleteForm(id);
 			if (isDeleted) {
 				setHistoryPush(backLinkRoute, false);
+				toggleModal("delete");
 			}
 		}
-		toggleDeleteModal();
 	};
 
 	const handleDiscarChanges = async () => {
@@ -181,12 +178,12 @@ const FormEditor = (props: IProps) => {
 				text: "This form is currently used on multiple pages. Please remove it from those pages before unpublishing.",
 				type: "error",
 				btnText: "Show pages",
-				onClick: toggleUseModal,
+				onClick: () => toggleModal("use"),
 			});
 		} else {
 			handleSavePage("inactive");
 		}
-		isUnpublishOpen && toggleUnpublishModal();
+		isOpen("unpublish") && toggleModal("unpublish");
 	};
 
 	const getSelectedFormLanguage = (language: ILanguage) =>
@@ -224,11 +221,11 @@ const FormEditor = (props: IProps) => {
 		});
 	}
 
-	if (isAllowedToDeleteForm) {
+	if (isAllowedTo.deleteForms) {
 		menuOptions.push({
 			label: "Delete form",
 			icon: "delete",
-			action: toggleDeleteModal,
+			action: () => toggleModal("delete"),
 		});
 	}
 
@@ -236,7 +233,7 @@ const FormEditor = (props: IProps) => {
 		state && state === "active"
 			? {
 					label: "Unpublish form",
-					action: toggleUnpublishModal,
+					action: () => toggleModal("unpublish"),
 				}
 			: {
 					label: "Publish form",
@@ -244,7 +241,7 @@ const FormEditor = (props: IProps) => {
 				};
 
 	const downArrowMenu = {
-		button: isAllowedToPublishForm ? publishButton : undefined,
+		button: isAllowedTo.publishUnpublishForms ? publishButton : undefined,
 		options: menuOptions,
 		displayed: !deleted,
 	};
@@ -258,26 +255,9 @@ const FormEditor = (props: IProps) => {
 	const rightButtonProps = {
 		label: isSaving ? "Saving" : !isDirty ? "Saved" : isPublishedForm ? "Update changes" : "Save",
 		disabled: (!isDirty && formID !== null && !isNewTranslation) || isSaving,
-		action: () => (formInUse ? toggleUpdateModal() : handleSavePage()),
-	};
-
-	const mainDeleteModalAction = {
-		title: "Delete form",
-		onClick: removeItem,
+		action: () => (formInUse ? toggleModal("update") : handleSavePage()),
 	};
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
 
-	const mainUnpublishModalAction = {
-		title: "Unpublish form",
-		onClick: unpublishForm,
-	};
-
-	const secondaryUnpublishModalAction = { title: "Cancel", onClick: toggleUnpublishModal };
-
-	const mainUpdateModalAction = {
-		title: "Update changes",
-		onClick: () => handleSavePage(),
-	};
 
 	return isLoading ? (
 		<Loading />
@@ -334,26 +314,24 @@ const FormEditor = (props: IProps) => {
 				</S.Content>
 			</MainWrapper>
 			<DeleteModal
-				isOpen={isDeleteOpen}
-				toggleModal={toggleDeleteModal}
-				mainModalAction={mainDeleteModalAction}
-				secondaryModalAction={secondaryDeleteModalAction}
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
+				onDelete={removeItem}
 				{...{ title, isTranslated, deleteAllVersions, setDeleteAllVersions }}
 			/>
 			<UnPublishModal
-				isOpen={isUnpublishOpen}
-				toggleModal={toggleUnpublishModal}
-				mainModalAction={mainUnpublishModalAction}
-				secondaryModalAction={secondaryUnpublishModalAction}
+				isOpen={isOpen("unpublish")}
+				toggleModal={() => toggleModal("unpublish")}
+				onUnpublish={unpublishForm}
 				title={title}
 			/>
-			{isUpdateOpen && (
-				<UpdateModal isOpen={isUpdateOpen} toggleModal={toggleUpdateModal} mainModalAction={mainUpdateModalAction} />
+			{isOpen("update") && (
+				<UpdateModal isOpen={isOpen("update")} toggleModal={() => toggleModal("update")} onUpdate={() => handleSavePage()} />
 			)}
-			{isUseOpen && (
+			{isOpen("use") && (
 				<FormUseModal
-					isOpen={isUseOpen}
-					toggleModal={toggleUseModal}
+					isOpen={isOpen("use")}
+					toggleModal={() => toggleModal("use")}
 					isSiteView={!!currentSiteInfo?.id}
 					formInUse={formInUse}
 				/>