@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/modules/Settings/Integrations/index.tsx

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { EmptyState, ErrorToast, FilterTagsBar, MainWrapper, TableList, Toast } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { integrationsActions } from "@ax/containers/Integrations";
-import { useBulkSelection, useEmptyState, useModal, usePermission, useToast } from "@ax/hooks";
+import { useBulkSelection, useEmptyState, useModals, usePermissions, useToast } from "@ax/hooks";
 import type { IEmptyStateProps, IIntegration, IQueryValue, IRootState } from "@ax/types";
 
 import {
@@ -33,6 +33,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 		integrations,
 		totalItems,
 		currentSite,
+		isSaving,
 		resetIntegrations,
 		deleteIntegration,
 		changeIntegrationState,
@@ -45,12 +46,10 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 		throw new Error(`ERROR: User reached Integrations with null site info`);
 	}
 
-	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [isScrolling, setIsScrolling] = useState(false);
 	const tableRef = useRef<HTMLDivElement>(null);
 	const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery, isFiltered } = useFilterQuery();
-	const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
-	const { isOpen: isOpenDeactivate, toggleModal: toggleModalDeactivate } = useModal();
+	const { isOpen, toggleModal } = useModals(["delete", "deactivate"]);
 	const {
 		isVisible: isVisibleDelete,
 		toggleToast: toggleToastDelete,
@@ -64,9 +63,11 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 		state: stateToastChange,
 	} = useToast();
 
-	const isAllowedToManageIntegrations = usePermission("general.manageSiteThirdPartyIntegrations");
-	const isAllowedToDeactivateIntegrations = usePermission("general.deactivateSiteThirdPartyIntegrations");
-	const isAllowedToDeleteIntegrations = usePermission("general.deleteSiteThirdPartyIntegrations");
+	const isAllowedTo = usePermissions({
+		manage: "general.manageSiteThirdPartyIntegrations",
+		deactivate: "general.deactivateSiteThirdPartyIntegrations",
+		delete: "general.deleteSiteThirdPartyIntegrations",
+	});
 
 	const sensors = useSensors(
 		useSensor(PointerSensor, {
@@ -126,27 +127,23 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 	} = useBulkSelection(filteredIntegrationsIds);
 
 	const bulkDelete = async () => {
-		setIsBulkLoading(true);
 		const params = getParams();
 		const deleted = await deleteIntegration(selectedItems.all, params);
 		if (deleted) {
 			toggleToastDelete({ total: selectedItems.all.length });
 		}
-		toggleModalDelete();
+		toggleModal("delete");
 		resetBulkSelection();
-		setIsBulkLoading(false);
 	};
 
 	const bulkDeactivate = async () => {
-		setIsBulkLoading(true);
 		const params = getParams();
 		const changed = await changeIntegrationState(selectedItems.all, false, params);
 		if (changed) {
 			toggleToastChange({ total: selectedItems.all.length, active: false });
 		}
-		toggleModalDeactivate();
+		toggleModal("deactivate");
 		resetBulkSelection();
-		setIsBulkLoading(false);
 	};
 
 	const unselectAllItems = () => resetBulkSelection();
@@ -158,22 +155,21 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 	const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) =>
 		setFiltersSelection(filterPointer, filtersSelected);
 
-	const bulkActions: { icon: string; text: string; action: () => void | Promise<void> }[] =
-		isAllowedToDeleteIntegrations
-			? [
-					{
-						icon: "delete",
-						text: "delete",
-						action: toggleModalDelete,
-					},
-				]
-			: [];
-
-	if (isAllowedToDeactivateIntegrations) {
+	const bulkActions: { icon: string; text: string; action: () => void | Promise<void> }[] = isAllowedTo.delete
+		? [
+				{
+					icon: "delete",
+					text: "delete",
+					action: () => toggleModal("delete"),
+				},
+			]
+		: [];
+
+	if (isAllowedTo.deactivate) {
 		bulkActions.push({
 			icon: "deactivate",
 			text: "Deactivate",
-			action: toggleModalDeactivate,
+			action: () => toggleModal("deactivate"),
 		});
 	}
 
@@ -190,7 +186,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 			bulkActions={bulkActions}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
-			isLoading={isBulkLoading}
+			isLoading={isSaving}
 		/>
 	);
 
@@ -209,18 +205,6 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 		}
 	};
 
-	const mainDeleteModalAction = {
-		title: isBulkLoading ? "Deleting" : "Delete",
-		onClick: bulkDelete,
-		disabled: isBulkLoading,
-	};
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
-
-	const mainDeactivateModalAction = {
-		title: "Deactivate",
-		onClick: bulkDeactivate,
-	};
-	const secondaryDeactivateModalAction = { title: "Cancel", onClick: toggleModalDeactivate };
 
 	const deletedToastProps = {
 		setIsVisible: setIsVisibleDelete,
@@ -234,7 +218,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 		}`,
 	};
 
-	const rightButtonProps = isAllowedToManageIntegrations
+	const rightButtonProps = isAllowedTo.manage
 		? {
 				label: "New Custom Code",
 				action: () => setHistoryPush(`/sites/settings/addons/new`),
@@ -310,20 +294,20 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 				</S.ContentWrapper>
 			</S.Wrapper>
 			<DeleteModal
-				isOpen={isOpenDelete}
-				toggleModal={toggleModalDelete}
-				secondaryModalAction={secondaryDeleteModalAction}
-				mainModalAction={mainDeleteModalAction}
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
+				onDelete={bulkDelete}
+				isDeleting={isSaving}
 				integrations={integrations}
 				selectedIds={selectedItems.all}
 			/>
 			<DeactivateModal
-				isOpen={isOpenDeactivate}
-				toggleModal={toggleModalDeactivate}
-				secondaryModalAction={secondaryDeactivateModalAction}
-				mainModalAction={mainDeactivateModalAction}
+				isOpen={isOpen("deactivate")}
+				toggleModal={() => toggleModal("deactivate")}
 				integrations={integrations}
 				selectedIds={selectedItems.all}
+				onDeactivate={bulkDeactivate}
+				isDeactivating={isSaving}
 			/>
 		</MainWrapper>
 	);
@@ -334,6 +318,7 @@ const mapStateToProps = (state: IRootState) => ({
 	integrations: state.integrations.integrations,
 	totalItems: state.integrations.totalItems,
 	currentSite: state.sites.currentSiteInfo?.id ?? null,
+	isSaving: state.app.isSaving,
 });
 
 const mapDispatchToProps = {
@@ -351,6 +336,7 @@ interface IStateProps {
 	integrations: IIntegration[];
 	totalItems: number;
 	currentSite: number | null;
+	isSaving: boolean;
 }
 
 interface IDispatchProps {

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

@@ -27,6 +27,7 @@ import type {
 	ISite,
 } from "@ax/types";
 
+import { DeleteModal } from "../atoms";
 import ConnectedField from "./ConnectedField";
 
 import * as S from "./style";
@@ -70,12 +71,16 @@ const Form = (props: IProps) => {
 	const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
 	const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
 	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
+	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+	const [isDeleting, setIsDeleting] = useState(false);
+	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const { isDirty, resetDirty, setIsDirty } = useIsDirty(form);
 	const path = site ? "/sites/pages" : "/data";
 
 	const { fields } = schema;
 	const inversed = !site;
 	const languages = site ? siteLanguages : globalLangs;
+	const arePagesTranslated = (form?.dataLanguages?.length ?? 0) > 1;
 
 	const fieldsTranslate: ISchemaField[] = [
 		{
@@ -207,12 +212,14 @@ const Form = (props: IProps) => {
 		setHistoryPush("/sites/settings/content-types", false);
 	};
 
-	const removeItem = () => {
-		deleteStructuredDataContent(form.id).then((deleted: boolean) => {
-			if (deleted) {
-				setHistoryPush(path, true);
-			}
-		});
+	const removeItem = async () => {
+		setIsDeleting(true);
+		const deleted = await deleteStructuredDataContent(form.id);
+		setIsDeleting(false);
+		toggleDeleteModal();
+		if (deleted) {
+			setHistoryPush(path, true);
+		}
 	};
 
 	const publishItem = async () => {
@@ -280,7 +287,7 @@ const Form = (props: IProps) => {
 			{
 				label: "Delete",
 				icon: "delete",
-				action: removeItem,
+				action: toggleDeleteModal,
 			},
 		],
 	};
@@ -350,7 +357,7 @@ const Form = (props: IProps) => {
 		onClick: toggleCancelScheduleModal,
 	};
 
-	return isLoading ? (
+	return isLoading && !isDeleting ? (
 		<Loading />
 	) : (
 		<>
@@ -421,6 +428,16 @@ const Form = (props: IProps) => {
 				mainModalAction={mainCancelScheduleModalAction}
 				secondaryModalAction={secondaryCancelScheduleModalAction}
 			/>
+			<DeleteModal
+				isOpen={isDeleteOpen}
+				toggleModal={toggleDeleteModal}
+				title={title || "this item"}
+				arePagesTranslated={arePagesTranslated}
+				deleteAllVersions={deleteAllVersions}
+				setDeleteAllVersions={setDeleteAllVersions}
+				onDelete={removeItem}
+				isDeleting={isDeleting}
+			/>
 			<RestoreModal
 				isOpen={isRestoreOpen}
 				toggleModal={toggleRestoreModal}

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/atoms.tsx

@@ -1,74 +1,13 @@
-import React from "react";
+import type React from "react";
 
-import type { IModal } from "@ax/types";
-import { Modal, FieldsBehavior, ErrorToast } from "@ax/components";
+import { ErrorToast, FieldsBehavior, Modal } from "@ax/components";
 import { slugify } from "@ax/helpers";
+import type { IModal } from "@ax/types";
 
 import * as S from "./style";
 
-const DeleteModal = (props: IDeleteModal): JSX.Element => {
-	const {
-		isOpen,
-		toggleModal,
-		mainModalAction,
-		secondaryModalAction,
-		title,
-		isTranslated,
-		deleteAllVersions,
-		setDeleteAllVersions,
-	} = props;
-
-	const options = [
-		{
-			title: "Delete only this version",
-			name: "deletePage",
-			value: false,
-		},
-		{
-			title: "Delete all languages versions",
-			name: "deleteAll",
-			value: true,
-		},
-	];
-
-	return (
-		<Modal
-			isOpen={isOpen}
-			hide={toggleModal}
-			title="Delete Global Data?"
-			secondaryAction={secondaryModalAction}
-			mainAction={mainModalAction}
-			size="S"
-		>
-			{isTranslated ? (
-				<>
-					<S.ModalContent>
-						<p>
-							Are you sure you want to delete <strong>{title}</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"
-							fieldType="RadioGroup"
-							value={deleteAllVersions}
-							options={options}
-							onChange={setDeleteAllVersions}
-						/>
-					</S.ModalContent>
-				</>
-			) : (
-				<S.ModalContent>
-					Are you sure you want to delete <strong>{title}</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 DuplicateModal = (props: IDuplicateModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, duplicateModalState, setDuplicateModalState } =
-		props;
+	const { isOpen, toggleModal, duplicateModalState, setDuplicateModalState, onDuplicate, isSaving } = props;
 
 	const handleNameChange = (value: string) => {
 		setDuplicateModalState({ title: value, slug: slugify(value) });
@@ -78,6 +17,19 @@ const DuplicateModal = (props: IDuplicateModal): JSX.Element => {
 		setDuplicateModalState((state: { title: string; slug: string }) => ({ ...state, slug: value }));
 	};
 
+	const handleCloseDuplicate = () => {
+		toggleModal();
+		setDuplicateModalState({ title: "", slug: "" });
+	};
+
+	const mainModalAction = {
+		title: isSaving ? "Duplicating" : "Duplicate",
+		onClick: onDuplicate,
+		disabled: !duplicateModalState.title.trim() || !duplicateModalState.slug.trim() || isSaving,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: handleCloseDuplicate };
+
 	return (
 		<Modal
 			isOpen={isOpen}
@@ -110,8 +62,10 @@ const DuplicateModal = (props: IDuplicateModal): JSX.Element => {
 	);
 };
 
-const UnpublishModal = (props: IModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction } = props;
+const UnpublishModal = (props: IUnpublishModal): JSX.Element => {
+	const { isOpen, toggleModal } = props;
+
+	const mainModalAction = { title: "Ok", onClick: toggleModal };
 
 	return (
 		<Modal isOpen={isOpen} hide={toggleModal} title="Unpublish Modified Page" mainAction={mainModalAction} size="S">
@@ -125,16 +79,13 @@ const UnpublishModal = (props: IModal): JSX.Element => {
 	);
 };
 
-interface IDeleteModal extends IModal {
-	title: string;
-	isTranslated: boolean;
-	deleteAllVersions: boolean;
-	setDeleteAllVersions: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
 interface IDuplicateModal extends IModal {
 	duplicateModalState: { title: string; slug: string };
 	setDuplicateModalState: React.Dispatch<React.SetStateAction<{ title: string; slug: string }>>;
+	onDuplicate: () => void;
+	isSaving: boolean;
 }
 
-export { DeleteModal, DuplicateModal, UnpublishModal };
+interface IUnpublishModal extends IModal {}
+
+export { DuplicateModal, UnpublishModal };

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

@@ -34,7 +34,8 @@ import type {
 	ISchemaField,
 } from "@ax/types";
 
-import { DeleteModal, DuplicateModal, UnpublishModal } from "./atoms";
+import { DeleteModal } from "../../atoms";
+import { DuplicateModal, UnpublishModal } from "./atoms";
 import { getCurrentLanguages } from "./utils";
 
 import * as S from "./style";
@@ -292,27 +293,8 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
 	menuOptions = globalPage.liveStatus?.status === pageStatus.PUBLISHED ? [viewOption, ...menuOptions] : menuOptions;
 
-	const handleCloseDuplicate = () => {
-		toggleModal("duplicate");
-		setDuplicateModalState({ title: "", slug: "" });
-	};
-
-	const mainDuplicateModalAction = {
-		title: "Duplicate",
-		onClick: handleDuplicatePage,
-		disabled: !duplicateModalState.title.trim() || !duplicateModalState.slug.trim() || isSaving,
-	};
-
-	const secondaryDuplicateModalAction = { title: "Cancel", onClick: handleCloseDuplicate };
-
 	const isTranslated = globalPage.pageLanguages.length > 1;
 
-	const mainDeleteModalAction = {
-		title: "Delete page",
-		onClick: removeItem,
-	};
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: () => toggleModal("delete") };
-
 	const currentLanguages = getCurrentLanguages(languages, pageLanguages);
 
 	const changeLanguage = (language: { locale: string; id: number | null }) => {
@@ -376,8 +358,6 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
 	const getLiveStatus = () => (isScheduledPub ? "scheduled" : haveDraftPage ? "modified" : liveStatus.status);
 
-	const mainUnpublishAction = { title: "Ok", onClick: () => toggleModal("unpublish") };
-
 	const CategoryColumns = buildCategoryColumns(
 		categoryColumns,
 		activeColumns,
@@ -445,22 +425,22 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 			<DuplicateModal
 				isOpen={isOpen("duplicate")}
 				toggleModal={() => toggleModal("duplicate")}
-				mainModalAction={mainDuplicateModalAction}
-				secondaryModalAction={secondaryDuplicateModalAction}
-				{...{ duplicateModalState, setDuplicateModalState }}
+				duplicateModalState={duplicateModalState}
+				setDuplicateModalState={setDuplicateModalState}
+				onDuplicate={handleDuplicatePage}
+				isSaving={isSaving}
 			/>
 			<DeleteModal
 				isOpen={isOpen("delete")}
 				toggleModal={() => toggleModal("delete")}
-				mainModalAction={mainDeleteModalAction}
-				secondaryModalAction={secondaryDeleteModalAction}
-				{...{ title: globalPage.title, isTranslated, deleteAllVersions, setDeleteAllVersions }}
-			/>
-			<UnpublishModal
-				isOpen={isOpen("unpublish")}
-				toggleModal={() => toggleModal("unpublish")}
-				mainModalAction={mainUnpublishAction}
+				title={globalPage.title}
+				arePagesTranslated={isTranslated}
+				deleteAllVersions={deleteAllVersions}
+				setDeleteAllVersions={setDeleteAllVersions}
+				onDelete={removeItem}
+				isDeleting={isSaving}
 			/>
+			<UnpublishModal isOpen={isOpen("unpublish")} toggleModal={() => toggleModal("unpublish")} />
 		</>
 	);
 };
@@ -504,6 +484,8 @@ interface IGlobalPageItemProps {
 	skipReview?: boolean;
 	hoverCheck?: boolean;
 	isSaving: boolean;
+	isDeleting?: boolean;
+	onDeletingChange?(isDeleting: boolean): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({

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

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { connect } from "react-redux";
 
 import { CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tooltip, TruncatedTooltip } from "@ax/components";
@@ -9,7 +10,7 @@ import {
 	getHumanLastModifiedDate,
 	getScheduleFormatDate,
 } from "@ax/helpers";
-import { usePermissions } from "@ax/hooks";
+import { useModal, usePermissions } from "@ax/hooks";
 import type {
 	ICheck,
 	IColumn,
@@ -23,6 +24,7 @@ import type {
 	IStructuredDataContent,
 } from "@ax/types";
 
+import { DeleteModal } from "../../atoms";
 import { getPermission } from "./utils";
 
 import * as S from "./style";
@@ -54,6 +56,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 		currentSiteInfo,
 		hoverCheck,
 		getDataContent,
+		isSaving,
 	} = props;
 
 	const isPrivateData = currentStructuredData?.private || false;
@@ -66,11 +69,15 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 		deletePages: getPermission("delete", isGlobal, isPrivateData),
 	});
 
+	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
+
 	const { locale } = lang;
 	const { dataLanguages, publicationScheduled } = structuredData;
 
 	const isScheduledPub = !!publicationScheduled && structuredData.draft;
 	const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
+	const arePagesTranslated = dataLanguages.length > 1;
 
 	const publishedTooltip: Record<string, string> = {
 		active: "Live",
@@ -88,13 +95,14 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 
 	const handleOnChange = (value: ICheck) => onChange(value);
 
-	const removeItem = async () =>
-		deleteStructuredDataContent(structuredData.id).then((deleted: boolean) => {
-			if (deleted) {
-				setDeletedItem(structuredData.id);
-				toggleToast();
-			}
-		});
+	const removeItem = async () => {
+		const deleted = await deleteStructuredDataContent(structuredData.id);
+		if (deleted) {
+			setDeletedItem(structuredData.id);
+			toggleToast();
+		}
+		toggleDeleteModal();
+	};
 
 	const publishItem = async () => setDataStatus(structuredData.id, "undraft");
 
@@ -200,7 +208,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 		menuOptions.push({
 			label: "delete",
 			icon: "delete",
-			action: removeItem,
+			action: toggleDeleteModal,
 		});
 	}
 
@@ -222,38 +230,50 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 	);
 
 	return (
-		<S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable}>
-			<S.CheckCell role="cell">
-				<CheckField
-					name="check"
-					value={structuredData.id}
-					checked={isSelected || hoverCheck}
-					onChange={handleOnChange}
-				/>
-			</S.CheckCell>
-			<S.NameCell role="cell" onClick={_handleClick}>
-				<TruncatedTooltip content={structuredData.content.title} expanded top={1}>
-					<S.Title>{structuredData.content.title}</S.Title>
-				</TruncatedTooltip>
-			</S.NameCell>
-			{activeColumns.includes("live") && (
-				<S.LiveCell role="cell" onClick={_handleClick}>
-					<Tooltip content={publishedTooltip[checkStatus()]}>
-						<Icon name={checkStatus()} />
-					</Tooltip>
-				</S.LiveCell>
-			)}
-			{CategoryColumns}
-			{activeColumns.includes("status") && (
-				<S.StatusCell role="cell" onClick={_handleClick}>
-					<S.ModDate>{`Mod. ${getHumanLastModifiedDate(structuredData.modified)}`}</S.ModDate>
-				</S.StatusCell>
-			)}
-			{activeColumns.includes("translation") && <S.TransCell role="cell">{translations}</S.TransCell>}
-			<S.ActionsCell role="cell">
-				<S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
-			</S.ActionsCell>
-		</S.StructuredDataRow>
+		<>
+			<S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable}>
+				<S.CheckCell role="cell">
+					<CheckField
+						name="check"
+						value={structuredData.id}
+						checked={isSelected || hoverCheck}
+						onChange={handleOnChange}
+					/>
+				</S.CheckCell>
+				<S.NameCell role="cell" onClick={_handleClick}>
+					<TruncatedTooltip content={structuredData.content.title} expanded top={1}>
+						<S.Title>{structuredData.content.title}</S.Title>
+					</TruncatedTooltip>
+				</S.NameCell>
+				{activeColumns.includes("live") && (
+					<S.LiveCell role="cell" onClick={_handleClick}>
+						<Tooltip content={publishedTooltip[checkStatus()]}>
+							<Icon name={checkStatus()} />
+						</Tooltip>
+					</S.LiveCell>
+				)}
+				{CategoryColumns}
+				{activeColumns.includes("status") && (
+					<S.StatusCell role="cell" onClick={_handleClick}>
+						<S.ModDate>{`Mod. ${getHumanLastModifiedDate(structuredData.modified)}`}</S.ModDate>
+					</S.StatusCell>
+				)}
+				{activeColumns.includes("translation") && <S.TransCell role="cell">{translations}</S.TransCell>}
+				<S.ActionsCell role="cell">
+					<S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
+				</S.ActionsCell>
+			</S.StructuredDataRow>
+			<DeleteModal
+				isOpen={isDeleteOpen}
+				toggleModal={toggleDeleteModal}
+				title={structuredData.content.title}
+				arePagesTranslated={arePagesTranslated}
+				deleteAllVersions={deleteAllVersions}
+				setDeleteAllVersions={setDeleteAllVersions}
+				onDelete={removeItem}
+				isDeleting={isSaving}
+			/>
+		</>
 	);
 };
 
@@ -283,11 +303,13 @@ interface IStructuredDataItemProps {
 	setCurrentDataID(id: number | null): void;
 	currentSiteInfo: ISite | null;
 	hoverCheck?: boolean;
+	isSaving: boolean;
 }
 
 const mapStateToProps = (state: IRootState) => ({
 	currentStructuredData: state.structuredData.currentStructuredData,
 	currentSiteInfo: state.sites.currentSiteInfo,
+	isSaving: state.app.isSaving,
 });
 
 const mapDispatchToProps = {