@griddo/ax 11.10.45 → 11.10.46-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.10.45",
+	"version": "11.10.46-rc.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6d4675ea1342dd0cd23de683dc7cfbd16cce126f"
+	"gitHead": "333efc7d155c7a8eddf01ee85fc729f7dd08891c"
 }

package/src/components/Fields/IntegrationsField/IntegrationItem/index.tsx

@@ -1,12 +1,11 @@
-import * as React from "react";
-
-import { Icon, ActionMenu, Tooltip, Button, Toast } from "@ax/components";
+import { ActionMenu, Button, Icon, Toast, Tooltip } from "@ax/components";
 import { useModal, useToast } from "@ax/hooks";
-import { IIntegration, IIntegrationVariable, ILanguage } from "@ax/types";
+import type { IIntegration, IIntegrationVariable, ILanguage } from "@ax/types";
 
-import VariablesPanel from "./VariablesPanel";
-import CustomPanel from "./CustomPanel";
 import { DeleteModal } from "./atoms";
+import CustomPanel from "./CustomPanel";
+import VariablesPanel from "./VariablesPanel";
+
 import * as S from "./style";
 
 const IntegrationItem = (props: IProps): JSX.Element => {
@@ -60,7 +59,7 @@ const IntegrationItem = (props: IProps): JSX.Element => {
 	const integrationName = isCustom ? "Custom Code" : integration.name;
 
 	const mainDeleteModalAction = {
-		title: "Remove add-on",
+		title: "Remove",
 		onClick: removeItem,
 	};
 	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };

package/src/components/LanguageMenu/index.tsx

@@ -1,15 +1,12 @@
-import React from "react";
-
 import { Flag, Icon } from "@ax/components";
-import { ILanguage } from "@ax/types";
+import type { ILanguage } from "@ax/types";
 
 import * as S from "./style";
 
 const LanguageMenu = (props: ILanguageMenuProps): JSX.Element => {
-	const { availableLanguages, language, setLanguage, isInAppBar, currentLanguages } = props;
+	const { availableLanguages, language, setLanguage, isInAppBar, currentLanguages, isDraft } = props;
 
-	const getCurrentLanguage = (lang: string) =>
-		currentLanguages && currentLanguages.find((currLanguage) => currLanguage.locale === lang);
+	const getCurrentLanguage = (lang: string) => currentLanguages?.find((currLanguage) => currLanguage.locale === lang);
 
 	const isNewVersion = (lang: string) => currentLanguages && !getCurrentLanguage(lang);
 	const isEditableVersion = (lang: string) => currentLanguages && getCurrentLanguage(lang);
@@ -37,11 +34,17 @@ const LanguageMenu = (props: ILanguageMenuProps): JSX.Element => {
 	};
 
 	const languageMenuItem = (item: ILanguage) => {
-		const handleClick = () => setLanguage(item);
+		const isDisabled = isDraft && isNewVersion(item.locale);
+		const handleClick = () => {
+			if (!isDisabled) {
+				setLanguage(item);
+			}
+		};
 		return (
 			<S.LanguageItem
 				key={item.locale}
 				selected={item.locale === language}
+				disabled={isDisabled}
 				onClick={handleClick}
 				data-testid="language-menu-item"
 			>
@@ -52,9 +55,10 @@ const LanguageMenu = (props: ILanguageMenuProps): JSX.Element => {
 							<S.Locale>{item.label}</S.Locale> - {item.language}
 						</S.LanguageText>
 					</S.LanguageLabel>
-					{isNewVersion(item.locale) && language !== item.locale && (
-						<S.LanguageSubtext> Add new version </S.LanguageSubtext>
+					{isNewVersion(item.locale) && language !== item.locale && !isDisabled && (
+						<S.LanguageSubtext>Add new version</S.LanguageSubtext>
 					)}
+					{isDisabled && <S.LanguageSubtext>Draft cannot be translated</S.LanguageSubtext>}
 				</S.LanguageItemWrapper>
 				{getLanguageIcon(item.locale)}
 			</S.LanguageItem>
@@ -73,6 +77,7 @@ export interface ILanguageMenuProps {
 	availableLanguages: ILanguage[];
 	currentLanguages: ILanguage[];
 	isInAppBar?: boolean;
+	isDraft?: boolean;
 	setLanguage(lang: ILanguage): void;
 }
 

package/src/components/LanguageMenu/style.tsx

@@ -11,7 +11,7 @@ const LanguageTextWrapper = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
-const LanguageItem = styled.li<{ selected: boolean }>`
+const LanguageItem = styled.li<{ selected: boolean; disabled?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -20,12 +20,14 @@ const LanguageItem = styled.li<{ selected: boolean }>`
   padding: ${(p) => p.theme.spacing.s};
   min-height: ${(p) => p.theme.spacing.l};
   min-width: calc(${(p) => p.theme.spacing.l} * 4);
+  opacity: ${(p) => (p.disabled ? 0.5 : 1)};
+  cursor: ${(p) => (p.disabled ? "not-allowed" : "pointer")};
   &:focus {
-    background: ${(p) => p.theme.color.overlayFocusPrimary};
+    background: ${(p) => (p.disabled ? "transparent" : p.theme.color.overlayFocusPrimary)};
   }
   &:hover {
-    background: ${(p) => p.theme.color.overlayHoverPrimary};
-    color: ${(p) => (p.selected ? p.theme.color.interactive01 : p.theme.color.textHighEmphasis)};
+    background: ${(p) => (p.disabled ? "transparent" : p.theme.color.overlayHoverPrimary)};
+    color: ${(p) => (p.disabled ? p.theme.color.textMediumEmphasis : p.selected ? p.theme.color.interactive01 : p.theme.color.textHighEmphasis)};
   }
 `;
 

package/src/components/MainWrapper/AppBar/index.tsx

@@ -227,6 +227,7 @@ const AppBar = (props: IProps): JSX.Element => {
 										currentLanguages={currentLanguages || availableLanguages}
 										setLanguage={handleLanguage}
 										isInAppBar={true}
+										isDraft={pageStatus === "modified"}
 									/>
 								</FloatingMenu>
 							</Tooltip>

package/src/containers/PageEditor/actions.tsx

@@ -1,124 +1,123 @@
-import type { Dispatch } from "redux";
-
-import {
-	isReqOk,
-	getDefaultSchema,
-	getDefaultTemplate,
-	deepClone,
-	getSchema,
-	getStructuredDataFromPage,
-	getCurrentPageStructuredData,
-	getNullValue,
-	handleRequest,
-	protectFormKeys,
-} from "@ax/helpers";
+import { pages, sites, structuredData } from "@ax/api";
+import { appActions } from "@ax/containers/App";
+import { navigationActions } from "@ax/containers/Navigation";
+import { sitesActions } from "@ax/containers/Sites";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { usersActions } from "@ax/containers/Users";
 import {
-	getUpdatedComponents,
-	getUpdatedSections,
-	updateComponent,
-	updateByEditorID,
+	checkH1content,
+	checkMaxModules,
+	evaluateComputedFields,
 	findByEditorID,
+	findFieldsErrors,
+	findPackagesActivationErrors,
 	generateEditorIDs,
-	parseData,
-	getNewBreadcrumb,
-	moveModule,
-	getLastModuleEditorID,
 	getLastComponentEditorID,
-	replaceElements,
-	findFieldsErrors,
+	getLastModuleEditorID,
+	getNewBreadcrumb,
 	getParentKey,
-	checkH1content,
+	getUpdatedComponents,
+	getUpdatedSections,
+	moveModule,
+	parseData,
 	parseValidationErrors,
-	findPackagesActivationErrors,
-	checkMaxModules,
-	evaluateComputedFields,
+	replaceElements,
+	updateByEditorID,
+	updateComponent,
 } from "@ax/forms";
-import { appActions } from "@ax/containers/App";
-import { navigationActions } from "@ax/containers/Navigation";
-import { structuredDataActions } from "@ax/containers/StructuredData";
-import { sitesActions } from "@ax/containers/Sites";
-import { usersActions } from "@ax/containers/Users";
-import { pages, sites, structuredData } from "@ax/api";
 import {
-	getDefaultPageNavigation,
-	getDefaultIntegrations,
-	getPageData,
-	getPageNavigation,
-	getStateValues,
-	addElementToCollection,
-	addElementToComponent,
-} from "./utils";
+	deepClone,
+	getCurrentPageStructuredData,
+	getDefaultSchema,
+	getDefaultTemplate,
+	getNullValue,
+	getSchema,
+	getStructuredDataFromPage,
+	handleRequest,
+	isReqOk,
+	protectFormKeys,
+} from "@ax/helpers";
+import type {
+	IBreadcrumbItem,
+	IComponent,
+	IErrorItem,
+	IGetSitePagesParams,
+	IModule,
+	INotification,
+	IPage,
+	IPageLanguage,
+	IRootState,
+	ISavePageParams,
+	ISchema,
+	IStructuredDataContent,
+	IUserEditing,
+} from "@ax/types";
+
+import type { Dispatch } from "redux";
+
 import {
+	RESET_PAGE_EDITOR_STORE,
 	SET_BREADCRUMB,
-	SET_SCHEMA,
-	SET_TAB,
-	SET_SELECTED_EDITOR_ID,
-	SET_SELECTED_CONTENT,
-	SET_EDITOR_CONTENT,
-	SET_TEMPLATE,
+	SET_COPY_MODULE,
 	SET_CURRENT_PAGE_ID,
-	SET_CURRENT_PAGE_STATUS,
-	SET_CURRENT_PAGE_NAME,
 	SET_CURRENT_PAGE_LANGUAGES,
-	SET_IS_NEW_TRANSLATION,
-	SET_TEMPLATE_CONFIG,
-	SET_SELECTED_PARENT,
+	SET_CURRENT_PAGE_NAME,
+	SET_CURRENT_PAGE_STATUS,
+	SET_EDITOR_CONTENT,
 	SET_ERRORS,
-	SET_VALIDATED,
-	SET_SITE_PAGE_ID,
-	SET_USER_EDITING,
-	SET_LAST_ELEMENT_ADDED_ID,
-	SET_COPY_MODULE,
 	SET_IS_IA_TRANSLATED,
+	SET_IS_NEW_TRANSLATION,
+	SET_LAST_ELEMENT_ADDED_ID,
 	SET_LAST_TIMEOUT,
-	RESET_PAGE_EDITOR_STORE,
+	SET_SCHEMA,
 	SET_SCROLL_EDITOR_ID,
+	SET_SELECTED_CONTENT,
+	SET_SELECTED_EDITOR_ID,
+	SET_SELECTED_PARENT,
+	SET_SITE_PAGE_ID,
+	SET_TAB,
+	SET_TEMPLATE,
+	SET_TEMPLATE_CONFIG,
+	SET_USER_EDITING,
+	SET_VALIDATED,
 } from "./constants";
-
 import type {
-	IPage,
-	ISavePageParams,
-	IBreadcrumbItem,
-	ISchema,
-	IErrorItem,
-	IUserEditing,
-	IStructuredDataContent,
-	INotification,
-	IPageLanguage,
-	IComponent,
-	IModule,
-	IRootState,
-	IGetSitePagesParams,
-} from "@ax/types";
-import type {
-	ISetBreadcrumb,
-	ISetSchema,
-	ISetTab,
-	ISetSelectedEditorID,
 	IFieldProps,
-	ISetEditorContent,
-	ISetTemplate,
-	ISetSelectedContent,
+	IResetPageEditorStore,
+	ISetBreadcrumb,
+	ISetCopyModule,
 	ISetCurrentPageIDAction,
-	ISetCurrentPageStatusAction,
-	ISetCurrentPageNameAction,
 	ISetCurrentPageLanguagesAction,
-	ISetIsNewTranslation,
-	ISetTemplateConfig,
-	ISetSelectedParent,
+	ISetCurrentPageNameAction,
+	ISetCurrentPageStatusAction,
+	ISetEditorContent,
 	ISetErrors,
-	ISetValidated,
-	ISetSitePageID,
-	ISetUserEditing,
-	ISetLastElementAddedId,
-	ISetCopyModule,
 	ISetIsIATranslated,
+	ISetIsNewTranslation,
+	ISetLastElementAddedId,
 	ISetLastTimeout,
-	IResetPageEditorStore,
+	ISetSchema,
 	ISetScrollEditorID,
+	ISetSelectedContent,
+	ISetSelectedEditorID,
+	ISetSelectedParent,
+	ISetSitePageID,
+	ISetTab,
+	ISetTemplate,
+	ISetTemplateConfig,
+	ISetUserEditing,
+	ISetValidated,
 } from "./interfaces";
-
 import { pageStatus } from "./interfaces";
+import {
+	addElementToCollection,
+	addElementToComponent,
+	getDefaultIntegrations,
+	getDefaultPageNavigation,
+	getPageData,
+	getPageNavigation,
+	getStateValues,
+} from "./utils";
 
 const { setIsLoading, setIsSaving, handleError } = appActions;
 const { getDefaults } = navigationActions;
@@ -330,7 +329,11 @@ function getPageBreadcrumb(pageId: number): (dispatch: Dispatch, getState: () =>
 	};
 }
 
-function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
+function getPage(
+	pageID?: number,
+	global?: boolean,
+	preferDraft?: boolean,
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
 	return async (dispatch, getState) => {
 		try {
 			dispatch(setIsLoading(true));
@@ -345,6 +348,10 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
 				const response: { status: number; data: IPage } = await pages.getPageInfo(pageID);
 				const page: IPage = parseData(response.data, true);
 
+				if (preferDraft && page.haveDraftPage) {
+					return getPage(page.haveDraftPage, global)(dispatch, getState);
+				}
+
 				if (currentSiteInfo) {
 					await getPageLanguages(pageID, currentSiteInfo.id, page.entity)(dispatch);
 				} else {

package/src/locales/en-US.ts

@@ -74,4 +74,10 @@ export const enUS = {
 		user: { one: "user", other: "users" },
 		rol: { one: "rol", other: "roles" },
 	},
+	actionLabel: {
+		delete: {
+			imperative: "delete", // Para botones: "Delete"
+			running: "deleting", // Gerundio: "Deleting..."
+		},
+	},
 } as const;

package/src/locales/es-ES.ts

@@ -74,4 +74,10 @@ export const esES = {
 		user: { one: "usuario", other: "usuarios" },
 		rol: { one: "rol", other: "roles" },
 	},
+	actionLabel: {
+		delete: {
+			imperative: "borrar", // Para botones: "Delete"
+			running: "borrando", // Gerundio: "Deleting..."
+		},
+	},
 } as const;

package/src/locales/index.ts

@@ -15,8 +15,23 @@ const allLocales = {
  * @param entry La entrada del objeto de locales
  * @param count El número de elementos (por defecto 1)
  */
-export const pluralize = (entry: ItemLabel, count: number = 1): string => {
+export function pluralize(entry: ItemLabel, count: number = 1) {
 	return count === 1 ? entry.one : entry.other;
-};
+}
+
+/**
+ * Converts a given string to Title Case, capitalizing the first letter of every word.
+ * @param text - The input string to format.
+ * @returns The transformed string with every word capitalized.
+ */
+export function toTitleCase(text: string) {
+	if (!text) return text;
+
+	return text
+		.toLowerCase()
+		.split(" ")
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join(" ");
+}
 
 export const LOCALE = allLocales[currentLocale as keyof typeof allLocales];

package/src/modules/Analytics/DimensionItem/index.tsx

@@ -1,11 +1,10 @@
-import React from "react";
-
-import { IDimension } from "@ax/types";
-import { useModal } from "@ax/hooks";
-import { splitAndJoin, trimText } from "@ax/helpers";
 import { Modal } from "@ax/components";
+import { splitAndJoin, trimText } from "@ax/helpers";
+import { useModal } from "@ax/hooks";
+import type { IDimension } from "@ax/types";
 
 import DimensionPanel from "../DimensionPanel";
+
 import * as S from "./style";
 
 const Item = (props: IProps): JSX.Element => {
@@ -29,7 +28,7 @@ const Item = (props: IProps): JSX.Element => {
 	];
 
 	const mainRemoveModalAction = {
-		title: "Delete Dimension",
+		title: "Delete",
 		onClick: removeDimension,
 	};
 

package/src/modules/Analytics/GroupItem/index.tsx

@@ -1,11 +1,10 @@
-import React from "react";
-
-import { IDimension, IDimensionsGroup } from "@ax/types";
-import { useModal } from "@ax/hooks";
-import { splitAndJoin } from "@ax/helpers";
 import { Modal } from "@ax/components";
+import { splitAndJoin } from "@ax/helpers";
+import { useModal } from "@ax/hooks";
+import type { IDimension, IDimensionsGroup } from "@ax/types";
 
 import GroupPanel from "../GroupPanel";
+
 import * as S from "./style";
 
 const Item = (props: IProps): JSX.Element => {
@@ -29,7 +28,7 @@ const Item = (props: IProps): JSX.Element => {
 	];
 
 	const mainRemoveModalAction = {
-		title: "Delete Group",
+		title: "Delete",
 		onClick: removeGroup,
 	};
 

package/src/modules/Categories/CategoriesList/CategoryItem/index.tsx

@@ -1,15 +1,18 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
-import { AnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
 
-import { structuredDataActions } from "@ax/containers/StructuredData";
-import { useModal, usePermission } from "@ax/hooks";
-import { ICheck, IRootState, IDataLanguage, IStructuredDataCategory, ILanguage, ICategoryGroup } from "@ax/types";
-import { CheckField, FloatingMenu, Flag, LanguageMenu, Icon, Tag } from "@ax/components";
 import { structuredData } from "@ax/api";
+import { CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tag } from "@ax/components";
+import { structuredDataActions } from "@ax/containers/StructuredData";
 import { isReqOk } from "@ax/helpers";
-import CategoryPanel from "../CategoryPanel";
+import { useModal, usePermission } from "@ax/hooks";
+import type { ICategoryGroup, ICheck, IDataLanguage, ILanguage, IRootState, IStructuredDataCategory } from "@ax/types";
+
+import { type AnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
+
 import { DeleteGroupModal, DeleteModal } from "../atoms";
+import CategoryPanel from "../CategoryPanel";
 import { isCategory, isCategoryGroup } from "../utils";
 
 import * as S from "./style";
@@ -51,8 +54,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 	const allowedToEditTaxonomy = currentSiteID ? allowedToEditSiteCategory : allowedToEditGlobalCategory;
 	const allowedToDeleteTaxonomy = currentSiteID ? allowedToDeleteSiteCategory : allowedToDeleteGlobalCategory;
 
-	const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>
-		isSorting || wasDragging ? false : true;
+	const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) => !(isSorting || wasDragging);
 
 	const { attributes, isDragging, listeners, setDraggableNodeRef, setDroppableNodeRef, transform, transition } =
 		useSortable({
@@ -111,16 +113,13 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 	const getCurrentLanguages = () => {
 		const availables: ILanguage[] = [];
 
-		dataLanguages &&
-			dataLanguages.forEach(
-				(dataLang) =>
-					languages &&
-					languages.forEach((language) => {
-						if (language.id === dataLang.language) {
-							availables.push(language);
-						}
-					}),
-			);
+		dataLanguages?.forEach((dataLang) => {
+			languages?.forEach((language) => {
+				if (language.id === dataLang.language) {
+					availables.push(language);
+				}
+			});
+		});
 
 		return availables;
 	};
@@ -148,7 +147,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 			id: language.id,
 		};
 
-		const isNew = currentLanguages.find((l) => l.id === language.id) ? false : true;
+		const isNew = !currentLanguages.find((l) => l.id === language.id);
 		let content: IStructuredDataCategory | ICategoryGroup | null = null;
 		if (!isNew) {
 			const translationLang = category.dataLanguages.find((dataLang) => dataLang.language === lang.id);
@@ -183,7 +182,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 	);
 
 	const mainDeleteModalAction = {
-		title: "Yes, delete it",
+		title: "delete",
 		onClick: removeCategory,
 	};
 
@@ -196,7 +195,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 
 	const secondaryDeleteGroupModalAction = { title: "Cancel", onClick: toggleGroupModal };
 
-	const selectable = isCategoryGroup(category) && category.selectable === false ? false : true;
+	const selectable = !(isCategoryGroup(category) && category.selectable === false);
 
 	return (
 		<>
@@ -216,6 +215,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 						</S.IconWrapperDrag>
 						<S.IconWrapper onClick={handleCheckClick}>
 							{onCollapse && (
+								// biome-ignore lint/a11y/useSemanticElements: TODO: fix this
 								<div onClick={onCollapse} role="button" tabIndex={0} onKeyDown={onCollapse}>
 									{collapsed ? <Icon name="UpArrow" /> : <Icon name="DownArrow" />}
 								</div>
@@ -307,7 +307,7 @@ interface IDispatchProps {
 type ICategoryItemProps = IProps & IDispatchProps;
 
 const mapStateToProps = (state: IRootState) => ({
-	currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+	currentSiteID: state.sites.currentSiteInfo?.id ?? null,
 });
 
 const mapDispatchToProps = {

package/src/modules/Categories/CategoriesList/index.tsx

@@ -6,6 +6,7 @@ import { appActions } from "@ax/containers/App";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { sortBy } from "@ax/helpers";
 import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
+import { LOCALE, toTitleCase } from "@ax/locales";
 import type {
 	ICategoryGroup,
 	IDataPack,
@@ -345,22 +346,30 @@ const CategoriesList = (props: IProps): JSX.Element => {
 	};
 
 	const mainDeleteModalAction = {
-		title: "Yes, delete it",
+		title: isBulkLoading ? "deleting" : "delete",
 		onClick: bulkDelete,
+		disabled: isBulkLoading,
 	};
 
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+	const secondaryDeleteModalAction = {
+		title: "Cancel",
+		onClick: toggleDeleteModal,
+	};
 
 	const mainDeleteGroupModalAction = {
-		title: "Delete",
+		title: isBulkLoading ? "deleting" : "delete",
+		disabled: isBulkLoading,
 		onClick: bulkDelete,
 	};
 
-	const secondaryDeleteGroupModalAction = { title: "Cancel", onClick: toggleGroupModal };
+	const secondaryDeleteGroupModalAction = {
+		title: "cancel",
+		onClick: toggleGroupModal,
+	};
 
 	return (
 		<MainWrapper
-			title="Categories"
+			title={toTitleCase(LOCALE.entityLabel.category.other)}
 			rightButton={rightButtonProps}
 			language={lang}
 			availableLanguages={availableLanguages}

package/src/modules/Content/PageItem/index.tsx

@@ -451,7 +451,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 	);
 
 	const mainRemoveModalAction = {
-		title: "Remove Page",
+		title: "Remove",
 		onClick: handleRemoveItemFromSite,
 	};
 

package/src/modules/Content/index.tsx

@@ -824,7 +824,7 @@ const Content = (props: IProps): JSX.Element => {
 	const resetFilter = () => resetFilterQuery();
 
 	const mainDeleteModalAction = {
-		title: isDeleting ? "Deleting pages" : "Delete pages",
+		title: isDeleting ? "Deleting" : "Delete",
 		onClick: bulkDelete,
 		disabled: isDeleting,
 	};

package/src/modules/FileDrive/index.tsx

@@ -582,8 +582,9 @@ const FileDrive = (props: IProps) => {
 	const secondaryNewModalAction = { title: "Cancel", onClick: toggleNewModal };
 
 	const mainDeleteModalAction = {
-		title: "Delete documents",
+		title: isBulkLoading ? "Deleting" : "Delete",
 		onClick: () => handleBulkDeleteFile(),
+		disabled: isBulkLoading,
 	};
 
 	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };

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

@@ -1,13 +1,15 @@
-import React from "react";
+import type React from "react";
 import { connect } from "react-redux";
-import { useSortable } from "@dnd-kit/sortable";
 
+import { CheckField, Icon } from "@ax/components";
 import { formsActions } from "@ax/containers/Forms";
 import { useModal, usePermission } from "@ax/hooks";
-import { FormCategory, ICheck } from "@ax/types";
-import { CheckField, Icon } from "@ax/components";
-import CategoryPanel from "../CategoryPanel";
+import type { FormCategory, ICheck } from "@ax/types";
+
+import { useSortable } from "@dnd-kit/sortable";
+
 import { DeleteModal } from "../atoms";
+import CategoryPanel from "../CategoryPanel";
 
 import * as S from "./style";
 
@@ -60,7 +62,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 		: [];
 
 	const mainDeleteModalAction = {
-		title: "Yes, delete it",
+		title: "delete",
 		onClick: removeCategory,
 	};
 

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

@@ -188,8 +188,9 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 	};
 
 	const mainDeleteModalAction = {
-		title: "Yes, delete it",
+		title: isBulkLoading ? "Deleting" : "delete",
 		onClick: bulkDelete,
+		disabled: isBulkLoading,
 	};
 
 	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };

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

@@ -16,7 +16,6 @@ import { formsActions } from "@ax/containers/Forms";
 import { ITEMS_PER_PAGE } from "@ax/containers/Forms/constants";
 import { getFormTemplates, getSchemaFormCategories } from "@ax/helpers";
 import { useBulkSelection, useCategoryColors, useModal, usePermission, useToast } from "@ax/hooks";
-import { LOCALE, pluralize } from "@ax/locales";
 import type {
 	FormContent,
 	FormState,
@@ -303,8 +302,9 @@ const FormList = (props: IUserListProps): JSX.Element => {
 	const secondaryUnpublishModalAction = { title: "Cancel", onClick: toggleUnpublishModal };
 
 	const mainDeleteModalAction = {
-		title: `Delete form${selectedItems.all.length > 1 ? "s" : ""}`,
+		title: isBulkLoading ? "Deleting" : "Delete",
 		onClick: handleDeleteForm,
+		disabled: isBulkLoading,
 	};
 
 	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };

package/src/modules/GlobalEditor/index.tsx

@@ -556,12 +556,12 @@ const GlobalEditor = (props: IProps) => {
 		if (selectedPageLanguage) {
 			createNewTranslation(false);
 			setCurrentPageID(selectedPageLanguage.pageId);
-			await getPage(selectedPageLanguage.pageId);
+			await getPage(selectedPageLanguage.pageId, true, isDraft);
 			resetDirty();
 		} else {
 			isAllowedToEditContentPage && setSelectedTab("edit");
 			createNewTranslation(true);
-			await getPage(pageID);
+			await getPage(pageID, true);
 		}
 	};
 
@@ -780,7 +780,7 @@ const mapDispatchToProps = {
 };
 
 interface IPageEditorDispatchProps {
-	getPage(pageID?: number, global?: boolean): Promise<void>;
+	getPage(pageID?: number, global?: boolean, preferDraft?: boolean): Promise<void>;
 	savePage(data?: {
 		createDraft?: boolean;
 		publishPage?: { status: string };

package/src/modules/MediaGallery/index.tsx

@@ -635,8 +635,9 @@ const MediaGallery = (props: IProps) => {
 	const secondaryNewModalAction = { title: "Cancel", onClick: toggleNewModal };
 
 	const mainDeleteModalAction = {
-		title: "Delete images",
+		title: isBulkLoading ? "Deleting" : "Delete",
 		onClick: () => handleBulkDeleteFile(),
+		disabled: isBulkLoading,
 	};
 
 	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };

package/src/modules/PageEditor/index.tsx

@@ -601,7 +601,7 @@ const PageEditor = (props: IProps) => {
 		if (selectedPageLanguage) {
 			createNewTranslation(false);
 			setCurrentPageID(selectedPageLanguage.pageId);
-			await getPage(selectedPageLanguage.pageId);
+			await getPage(selectedPageLanguage.pageId, false, isDraft);
 			resetDirty();
 		} else {
 			isAllowedToEditContentPage && setSelectedTab("edit");
@@ -814,8 +814,8 @@ const PageEditor = (props: IProps) => {
 					secondaryAction={secondaryDirtyNavigateAction}
 				>
 					<S.ModalContent>
-						{dirtyNavigateModalText} If you exit without saving it, it will be lost. Do you want to discard
-						your changes?
+						{dirtyNavigateModalText} If you exit without saving it, it will be lost. Do you want to discard your
+						changes?
 					</S.ModalContent>
 				</Modal>
 			</MainWrapper>
@@ -893,7 +893,7 @@ const mapDispatchToProps = {
 };
 
 interface IPageEditorDispatchProps {
-	getPage(pageID?: number): Promise<void>;
+	getPage(pageID?: number, global?: boolean, preferDraft?: boolean): Promise<void>;
 	savePage(data?: {
 		createDraft?: boolean;
 		publishPage?: { status: string };

package/src/modules/Redirects/index.tsx

@@ -235,8 +235,9 @@ const Redirects = (props: IProps): JSX.Element => {
 	};
 
 	const mainDeleteModalAction = {
-		title: "Delete redirects",
+		title: isBulkLoading ? "Deleting" : "Delete",
 		onClick: bulkDelete,
+		disabled: isBulkLoading,
 	};
 
 	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };

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

@@ -210,13 +210,14 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 	};
 
 	const mainDeleteModalAction = {
-		title: "Delete add-ons",
+		title: isBulkLoading ? "Deleting" : "Delete",
 		onClick: bulkDelete,
+		disabled: isBulkLoading,
 	};
 	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
 
 	const mainDeactivateModalAction = {
-		title: "Deactivate add-ons",
+		title: "Deactivate",
 		onClick: bulkDeactivate,
 	};
 	const secondaryDeactivateModalAction = { title: "Cancel", onClick: toggleModalDeactivate };

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

@@ -58,9 +58,8 @@ import BulkHeader from "./BulkHeader";
 import ContentFilters from "./ContentFilters";
 import GlobalPageItem from "./GlobalPageItem";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
-import StructuredDataItem from "./StructuredDataItem";
 import NewContentModal from "./NewContentModal";
-
+import StructuredDataItem from "./StructuredDataItem";
 import {
 	filterByStatus,
 	getAllLangPagesIds,
@@ -365,8 +364,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	};
 
 	const bulkDelete = async () => {
-		toggleDeleteModal();
-
+		setIsBulkLoading(true);
 		const idsToBeDeleted = getAllLangPagesIds(currentSitePages, selectedItems, deleteAllVersions);
 		const deleted = isStructuredDataFromPage
 			? await deleteBulk(idsToBeDeleted)
@@ -383,6 +381,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 			? setPage(previousPage)
 			: isStructuredDataFromPage && handleGetGlobalPages();
 		unselectAllItems();
+		toggleDeleteModal();
+		setIsBulkLoading(false);
 	};
 
 	const handleBulkDelete = () => {
@@ -436,9 +436,12 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 
 	const handleAddToBulk = (item: ICheck) => addToBulkSelection(item, bulkFilter);
 
-	const bulkPublish = () => (isStructuredDataFromPage ? bulkPublishPage(true) : bulkPublishData("undraft"));
+	const bulkPublish = async () => {
+		isStructuredDataFromPage ? await bulkPublishPage(true) : await bulkPublishData("undraft");
+	};
 
-	const bulkUnpublish = () => (isStructuredDataFromPage ? bulkPublishPage(false) : bulkPublishData("draft"));
+	const bulkUnpublish = async () =>
+		isStructuredDataFromPage ? await bulkPublishPage(false) : await bulkPublishData("draft");
 
 	const unselectAllItems = () => resetBulkSelection();
 
@@ -738,7 +741,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 			<DeleteModal
 				isOpen={isDeleteOpen}
 				toggleModal={toggleDeleteModal}
-				mainModalAction={{ title: "Delete pages", onClick: bulkDelete }}
+				mainModalAction={{
+					title: isBulkLoading ? "Deleting" : "Delete",
+					onClick: bulkDelete,
+					disabled: isBulkLoading,
+				}}
 				secondaryModalAction={{ title: "Cancel", onClick: toggleDeleteModal }}
 				{...{ arePagesTranslated, deleteAllVersions, setDeleteAllVersions }}
 			/>

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

@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
+import { Loading, MainWrapper, Modal, Toast } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
-import { Loading, MainWrapper, Modal, Toast } from "@ax/components";
-import { IRootState, ISite, IUser } from "@ax/types";
 import { useModal, useShouldBeSaved, useToast } from "@ax/hooks";
+import type { IRootState, ISite, IUser } from "@ax/types";
+
 import UserForm from "../UserForm";
 
 import * as S from "./style";
@@ -81,7 +82,7 @@ const UserEdit = (props: IProps) => {
 	};
 
 	const mainDeleteAction = {
-		title: isSiteView ? "Remove user" : "Delete User",
+		title: isSiteView ? "Remove" : "Delete",
 		onClick: isSiteView ? handleRemoveUserFromSite : handleDelete,
 	};
 

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

@@ -1,11 +1,11 @@
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { connect } from "react-redux";
 
-import { ICheck, IUser, ISite, IRole, ISiteRoles } from "@ax/types";
-import { useAdaptiveText, useModal, usePermission, useToast } from "@ax/hooks";
-import { getDaysAgo } from "@ax/helpers";
+import { Avatar, CheckField, ElementsTooltip, Modal, Tag, Toast, Tooltip } from "@ax/components";
 import { usersActions } from "@ax/containers/Users";
-import { CheckField, Avatar, Modal, Tag, Tooltip, Toast, ElementsTooltip } from "@ax/components";
+import { getDaysAgo } from "@ax/helpers";
+import { useAdaptiveText, useModal, usePermission, useToast } from "@ax/hooks";
+import type { ICheck, IRole, ISite, ISiteRoles, IUser } from "@ax/types";
 
 import * as S from "./style";
 
@@ -89,7 +89,7 @@ const UserItem = (props: IUserItemProps): JSX.Element => {
 	};
 
 	const mainDeleteAction = {
-		title: isSiteView ? "Remove user" : "Delete user",
+		title: isSiteView ? "Remove" : "Delete",
 		onClick: isSiteView ? handleRemoveUserFromSite : handleDeleteUser,
 	};
 

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

@@ -221,7 +221,11 @@ const UserList = (props: IUserListProps): JSX.Element => {
 		toggleToast();
 	};
 
-	const mainDeleteAction = { title: isSiteView ? "Remove from this site" : "Delete Users", onClick: bulkDelete };
+	const mainDeleteAction = {
+		title: isSiteView ? (isBulkLoading ? "Removing" : "Remove") : isBulkLoading ? "Deleting" : "Delete",
+		onClick: bulkDelete,
+		disabled: isBulkLoading,
+	};
 	const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
 
 	const filterLabels = {

package/src/types/index.tsx

@@ -846,7 +846,7 @@ export interface IDataPackConfigImport {
 export interface IModal {
 	isOpen: boolean;
 	toggleModal: () => void;
-	mainModalAction?: { title: string; onClick: () => void };
+	mainModalAction?: { title: string; onClick: () => void; disabled?: boolean };
 	secondaryModalAction?: { title: string; onClick: () => void };
 	isChild?: boolean;
 }