@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/style.tsx

@@ -103,18 +103,23 @@ const ColumnCell = styled(Cell)`
   align-items: center;
 `;
 
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
 export {
-	CheckCell,
-	NameCell,
 	ActionsCell,
-	ActionsWrapper,
-	StyledActionMenu,
-	TransCell,
+	CheckCell,
+	ColumnCell,
+	FlagsWrapper,
 	LiveCell,
-	StatusCell,
+	ModalContent,
 	ModDate,
+	NameCell,
+	StatusCell,
 	StructuredDataRow,
-	FlagsWrapper,
+	StyledActionMenu,
 	Title,
-	ColumnCell,
+	TransCell,
+	ActionsWrapper,
 };

package/src/modules/StructuredData/StructuredDataList/index.tsx

@@ -45,7 +45,7 @@ import type {
 	IStructuredDataValue,
 } from "@ax/types";
 
-import { DeleteModal } from "./atoms";
+import { DeleteModal } from "../atoms";
 import BulkHeader from "./BulkHeader";
 import ContentFilters from "./ContentFilters";
 import GlobalPageItem from "./GlobalPageItem";
@@ -85,6 +85,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 		filter,
 		setFilter,
 		isLoading,
+		isSaving,
 		setCurrentPageID,
 		addTemplate,
 		template,
@@ -117,7 +118,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	const isLastItem = page === lastPage && currentSitePages.length === 1;
 
 	const [isScrolling, setIsScrolling] = useState(false);
-	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [deletedItem, setDeletedItem] = useState<number | number[] | null>(null);
 	const { isVisible: isDataToast, toggleToast: toggleDataToast, setIsVisible: setIsDataToast } = useToast();
 	const { isVisible: isPageToast, toggleToast: togglePageToast, setIsVisible: setIsPageToast } = useToast();
@@ -349,7 +349,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	};
 
 	const bulkDelete = async () => {
-		setIsBulkLoading(true);
 		const idsToBeDeleted = getAllLangPagesIds(currentSitePages, selectedItems, deleteAllVersions);
 		const deleted = isStructuredDataFromPage
 			? await deleteBulk(idsToBeDeleted)
@@ -367,7 +366,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 			: isStructuredDataFromPage && handleGetGlobalPages();
 		unselectAllItems();
 		toggleModal("delete");
-		setIsBulkLoading(false);
 	};
 
 	const handleBulkDelete = () => {
@@ -378,7 +376,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	};
 
 	const bulkPublishPage = async (isPublish: boolean) => {
-		setIsBulkLoading(true);
 		const { notPublished, published, drafts } = selectedItems;
 
 		if (drafts && drafts.length > 0) {
@@ -407,14 +404,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 
 		handleGetGlobalPages();
 		unselectAllItems();
-		setIsBulkLoading(false);
 	};
 
 	const bulkPublishData = (status: string) => {
-		setIsBulkLoading(true);
 		setDataStatus(selectedItems.all, status);
 		unselectAllItems();
-		setIsBulkLoading(false);
 	};
 
 	const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
@@ -493,7 +487,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 			checkState={checkState}
 			isScrolling={isScrolling}
 			isEditable={isDataEditable}
-			isLoading={isBulkLoading}
+			isLoading={isSaving}
 			isFromPage={isStructuredDataFromPage}
 			sortItems={sortItems}
 			sortedListStatus={sortedListStatus}
@@ -693,6 +687,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 						onScroll={onScroll}
 						hasFixedHeader={true}
 						tableRef={tableRef}
+						skipLoading={isSaving}
 					>
 						<>
 							<S.SearchTags>
@@ -730,13 +725,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 			<DeleteModal
 				isOpen={isOpen("delete")}
 				toggleModal={() => toggleModal("delete")}
-				mainModalAction={{
-					title: isBulkLoading ? "Deleting" : "Delete",
-					onClick: bulkDelete,
-					disabled: isBulkLoading,
-				}}
-				secondaryModalAction={{ title: "Cancel", onClick: () => toggleModal("delete") }}
-				{...{ arePagesTranslated, deleteAllVersions, setDeleteAllVersions }}
+				arePagesTranslated={arePagesTranslated}
+				deleteAllVersions={deleteAllVersions}
+				setDeleteAllVersions={setDeleteAllVersions}
+				onDelete={bulkDelete}
+				isDeleting={isSaving}
 			/>
 			{isDataToast && <Toast action={undoDeleteData} setIsVisible={setIsDataToast} message={"Data deleted"} />}
 			{isPageToast && (
@@ -761,6 +754,7 @@ const mapStateToProps = (state: IRootState) => ({
 	currentSiteID: state.sites.currentSiteInfo?.id || null,
 	activatedDataPacks: state.dataPacks.activated,
 	isLoading: state.app.isLoading,
+	isSaving: state.app.isSaving,
 	template: state.pageEditor.template,
 	currentSitePages: state.sites.currentSitePages,
 	currentSiteErrorPages: state.sites.currentSiteErrorPages,
@@ -838,6 +832,7 @@ interface ICategoriesProps {
 	currentSiteID: number | null;
 	activatedDataPacks: IDataPack[];
 	isLoading: boolean;
+	isSaving: boolean;
 	template: string;
 	currentSitePages: IPage[];
 	currentSiteErrorPages: number[];

package/src/modules/StructuredData/{StructuredDataList/atoms.tsx → atoms.tsx}

@@ -1,19 +1,20 @@
-import React from "react";
+import type React from "react";
 
-import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior, Button } from "@ax/components";
+import { FieldsBehavior, Modal } from "@ax/components";
+import type { IModal } from "@ax/types";
 
-import * as S from "./style";
+import * as S from "./StructuredDataList/style";
 
 const DeleteModal = (props: IDeleteModal): JSX.Element => {
 	const {
 		isOpen,
 		toggleModal,
-		mainModalAction,
-		secondaryModalAction,
 		arePagesTranslated,
 		deleteAllVersions,
 		setDeleteAllVersions,
+		onDelete,
+		isDeleting,
+		title,
 	} = props;
 
 	const options = [
@@ -29,6 +30,14 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 		},
 	];
 
+	const mainModalAction = {
+		title: isDeleting ? "Deleting" : "Delete",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
 	return (
 		<Modal
 			isOpen={isOpen}
@@ -37,13 +46,15 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
+			height="auto"
 		>
 			{arePagesTranslated ? (
 				<>
 					<S.ModalContent>
 						<p>
-							Are you sure you want to delete <strong>these pages</strong> page? If you delete it, this page does not
-							appear in the sites associated. Also, this page has some translations associated.
+							Are you sure you want to delete {title ? <strong>{title}</strong> : <strong>these pages</strong>} page? If
+							you delete it, this page does not appear in the sites associated. Also, this page has some translations
+							associated.
 						</p>
 						<FieldsBehavior
 							name="removeAllVersions"
@@ -56,35 +67,21 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 				</>
 			) : (
 				<S.ModalContent>
-					Are you sure you want to delete <strong>these pages</strong> page? If you delete it, this page does not appear
-					in the sites associated. This action <strong>cannot be undone</strong>.
+					Are you sure you want to delete {title ? <strong>{title}</strong> : <strong>these pages</strong>} page? If you
+					delete it, this page does not appear in the sites associated. This action <strong>cannot be undone</strong>.
 				</S.ModalContent>
 			)}
 		</Modal>
 	);
 };
 
-const MainActionButton = (props: IActionButton): JSX.Element => (
-	<Button type="button" onClick={props.onClick}>
-		{props.title}
-	</Button>
-);
-
-const SecondaryActionButton = (props: IActionButton): JSX.Element => (
-	<Button type="button" buttonStyle="text" onClick={props.onClick}>
-		{props.title}
-	</Button>
-);
-
 interface IDeleteModal extends IModal {
 	arePagesTranslated: boolean;
 	deleteAllVersions: boolean;
 	setDeleteAllVersions: React.Dispatch<React.SetStateAction<boolean>>;
+	onDelete: () => void;
+	isDeleting?: boolean;
+	title?: string;
 }
 
-interface IActionButton {
-	onClick: () => void;
-	title: string;
-}
-
-export { DeleteModal, MainActionButton, SecondaryActionButton };
+export { DeleteModal };

package/src/modules/Users/UserList/UserItem/index.tsx

@@ -1,10 +1,12 @@
 import { connect } from "react-redux";
 
-import { Avatar, CheckField, ElementsTooltip, Modal, Tag, Toast, Tooltip, TruncatedTooltip } from "@ax/components";
+import { Avatar, CheckField, ElementsTooltip, Tag, Toast, Tooltip, TruncatedTooltip } from "@ax/components";
 import { usersActions } from "@ax/containers/Users";
 import { getDaysAgo } from "@ax/helpers";
 import { useModal, usePermission, useToast } from "@ax/hooks";
-import type { ICheck, IRole, ISite, ISiteRoles, IUser } from "@ax/types";
+import type { ICheck, IRole, IRootState, ISite, ISiteRoles, IUser } from "@ax/types";
+
+import { DeleteModal } from "../atoms";
 
 import * as S from "./style";
 
@@ -21,6 +23,7 @@ const UserItem = (props: IUserItemProps): JSX.Element => {
 		isSiteView = false,
 		roles,
 		hoverCheck,
+		isSaving,
 		toggleDeleteToast,
 		removeUserFromSite,
 		getUsers,
@@ -84,13 +87,6 @@ const UserItem = (props: IUserItemProps): JSX.Element => {
 		}
 	};
 
-	const mainDeleteAction = {
-		title: isSiteView ? "Remove" : "Delete",
-		onClick: isSiteView ? handleRemoveUserFromSite : handleDeleteUser,
-	};
-
-	const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
-
 	const tagColor = user.status === "invited" ? "#FFBB37" : "#AFC628";
 	const days = user.dateCreated ? getDaysAgo(user.dateCreated) : "";
 	const tooltipText = user.status === "invited" ? `Invited: ${days}` : "User Active";
@@ -203,32 +199,14 @@ const UserItem = (props: IUserItemProps): JSX.Element => {
 					<S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
 				</S.ActionsCell>
 			</S.UserRow>
-			<Modal
+			<DeleteModal
 				isOpen={isOpen}
-				hide={toggleModal}
-				title={isSiteView ? "Remove user from this site?" : "Delete User?"}
-				secondaryAction={secondaryDeleteAction}
-				mainAction={mainDeleteAction}
-			>
-				{isOpen ? (
-					<S.ModalContent data-testid="modal-delete-content">
-						{isSiteView ? (
-							<p>
-								Are you sure you want to remove <strong>{user.email}</strong> from this site? If you remove it, this
-								user will no longer have access to this site but it will still be able to log in.
-							</p>
-						) : (
-							<p>
-								Are you sure you want to delete <strong>{user.email}</strong>? If you delete it, this user will no
-								longer be able to log in.
-							</p>
-						)}
-						<p>
-							This action <strong>cannot be undone</strong>.
-						</p>
-					</S.ModalContent>
-				) : null}
-			</Modal>
+				toggleModal={toggleModal}
+				onDelete={isSiteView ? handleRemoveUserFromSite : handleDeleteUser}
+				isSiteView={isSiteView}
+				userEmail={user.email}
+				isDeleting={isSaving}
+			/>
 			{isVisible && <Toast {...toastProps} />}
 		</>
 	);
@@ -242,12 +220,17 @@ interface IProps {
 	isSiteView?: boolean;
 	roles: IRole[];
 	hoverCheck: boolean;
+	isSaving: boolean;
 	onChange: (value: ICheck) => void;
 	onClick: (id: number) => void;
 	toggleDeleteToast: () => void;
 	getUsers: () => void;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+	isSaving: state.app.isSaving,
+});
+
 const mapDispatchToProps = {
 	deleteUser: usersActions.deleteUser,
 	resendInvitation: usersActions.resendInvitation,
@@ -262,4 +245,4 @@ interface IDispatchProps {
 
 export type IUserItemProps = IProps & IDispatchProps;
 
-export default connect(null, mapDispatchToProps)(UserItem);
+export default connect(mapStateToProps, mapDispatchToProps)(UserItem);

package/src/modules/Users/UserList/atoms.tsx

@@ -0,0 +1,61 @@
+import { Modal } from "@ax/components";
+import type { IModal } from "@ax/types";
+
+import * as S from "./style";
+
+const DeleteModal = (props: IDeleteModalProps): JSX.Element => {
+	const { isOpen, toggleModal, onDelete, isSiteView, userEmail, isBulk = false, isDeleting = false } = props;
+
+	const action = isSiteView ? "Remove" : "Delete";
+	const actionGerund = isSiteView ? "Removing" : "Deleting";
+
+	const buttonTitle = isDeleting ? actionGerund : action;
+	const modalTitle = isBulk
+		? isSiteView
+			? "Remove users from this site?"
+			: "Delete Users?"
+		: isSiteView
+			? "Remove user from this site?"
+			: "Delete User?";
+
+	const getContent = () => {
+		if (isBulk) {
+			return isSiteView
+				? "Are you sure you want to remove these users from this site? If you remove them, these users will no longer have access to this site but they will still be able to log in. This action cannot be undone."
+				: "Are you sure you want to delete these users? If you delete them, they no longer be able to log in.";
+		}
+		return isSiteView
+			? `Are you sure you want to remove ${userEmail} from this site? If you remove it, this user will no longer have access to this site but it will still be able to log in.`
+			: `Are you sure you want to delete ${userEmail}? If you delete it, this user will no longer be able to log in.`;
+	};
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title={modalTitle}
+			secondaryAction={{ title: "Cancel", onClick: toggleModal }}
+			mainAction={{ title: buttonTitle, onClick: onDelete, disabled: isDeleting }}
+			height="auto"
+		>
+			{isOpen && (
+				<S.ModalContent data-testid="modal-delete-content">
+					<p>{getContent()}</p>
+					<p>
+						This action <strong>cannot be undone</strong>.
+					</p>
+				</S.ModalContent>
+			)}
+		</Modal>
+	);
+};
+
+interface IDeleteModalProps extends IModal {
+	onDelete: () => void;
+	isSiteView?: boolean;
+	userEmail?: string;
+	isBulk?: boolean;
+	isDeleting?: boolean;
+}
+
+export { DeleteModal };

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

@@ -6,7 +6,6 @@ import {
 	ErrorToast,
 	FilterTagsBar,
 	MainWrapper,
-	Modal,
 	Nav,
 	SearchTagsBar,
 	TableList,
@@ -19,6 +18,7 @@ import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
 import type { IGetRoles, IGetSitesParams, IQueryValue, IRole, IRootState, ISite, IUser } from "@ax/types";
 
 import BulkHeader from "./BulkHeader";
+import { DeleteModal } from "./atoms";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
 import UserItem from "./UserItem";
 import { getSortedListStatus } from "./utils";
@@ -40,12 +40,12 @@ const UserList = (props: IUserListProps): JSX.Element => {
 		getRoles,
 		roles,
 		getSites,
+		isSaving,
 	} = props;
 
 	const itemsPerPage = 50;
 	const firstPage = 1;
 
-	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [page, setPage] = useState(1);
 	const [isScrolling, setIsScrolling] = useState(false);
 	const [searchQuery, setSearchQuery] = useState<string>("");
@@ -143,7 +143,6 @@ const UserList = (props: IUserListProps): JSX.Element => {
 	};
 
 	const bulkDelete = async () => {
-		setIsBulkLoading(true);
 		if (isSiteView) {
 			const siteId = currentSiteInfo.id;
 			await removeUsersBulk(siteId, selectedItems.all);
@@ -154,7 +153,6 @@ const UserList = (props: IUserListProps): JSX.Element => {
 		toggleModal();
 		toggleToast();
 		resetBulkSelection();
-		setIsBulkLoading(false);
 	};
 
 	const rightButtonProps = allowedToCreateUsers
@@ -205,7 +203,7 @@ const UserList = (props: IUserListProps): JSX.Element => {
 			roles={roles}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
-			isLoading={isBulkLoading}
+			isLoading={isSaving}
 		/>
 	);
 
@@ -221,13 +219,6 @@ const UserList = (props: IUserListProps): JSX.Element => {
 		toggleToast();
 	};
 
-	const mainDeleteAction = {
-		title: isSiteView ? (isBulkLoading ? "Removing" : "Remove") : isBulkLoading ? "Deleting" : "Delete",
-		onClick: bulkDelete,
-		disabled: isBulkLoading,
-	};
-	const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
-
 	const filterLabels = {
 		filterRoles: "Role",
 		filterSites: "Site",
@@ -290,27 +281,14 @@ const UserList = (props: IUserListProps): JSX.Element => {
 					</TableList>
 				</S.TableListWrapper>
 			</S.UsersWrapper>
-			<Modal
+			<DeleteModal
 				isOpen={isOpen}
-				hide={toggleModal}
-				title={isSiteView ? "Remove users from this site?" : "Delete Users?"}
-				secondaryAction={secondaryDeleteAction}
-				mainAction={mainDeleteAction}
-			>
-				{isOpen ? (
-					<S.ModalContent data-testid="user-delete-bulk-modal">
-						<p>
-							{isSiteView
-								? "Are you sure you want to remove these users from this site? If you remove them, these users will no longer have access to this site but they will still be able to log in. This action cannot be undone."
-								: "Are you sure you want to delete these users? If you delete them, they no longer be able to log in."}
-						</p>
-
-						<p>
-							This action <strong>cannot be undone</strong>.
-						</p>
-					</S.ModalContent>
-				) : null}
-			</Modal>
+				toggleModal={toggleModal}
+				onDelete={bulkDelete}
+				isSiteView={isSiteView}
+				isBulk={true}
+				isDeleting={isSaving}
+			/>
 			{isVisible && <Toast {...toastProps} />}
 		</MainWrapper>
 	);
@@ -321,6 +299,7 @@ const mapStateToProps = (state: IRootState) => ({
 	currentSiteInfo: state.sites.currentSiteInfo,
 	sites: state.sites.sites,
 	roles: state.users.roles,
+	isSaving: state.app.isSaving,
 });
 
 const mapDispatchToProps = {
@@ -350,6 +329,7 @@ interface IProps {
 	currentSiteInfo: ISite | null;
 	sites: ISite[];
 	roles: IRole[];
+	isSaving: boolean;
 }
 
 export type IUserListProps = IProps & IDispatchProps;