@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/modules/Navigation/Defaults/Item/index.tsx

@@ -1,12 +1,12 @@
-import { useState } from "react";
 import { connect } from "react-redux";
 
-import type { ICheck, ILanguage, INavigationLanguage, INavigation } from "@ax/types";
-import { useModal, usePermission } from "@ax/hooks";
+import { CheckField } from "@ax/components";
 import { appActions } from "@ax/containers/App";
-import { navigationActions, menuActions } from "@ax/containers/Navigation";
-import { CheckField, FieldsBehavior, Modal } from "@ax/components";
+import { menuActions, navigationActions } from "@ax/containers/Navigation";
+import { useModals, usePermissions } from "@ax/hooks";
+import type { ICheck, ILanguage, INavigation, INavigationLanguage, IRootState } from "@ax/types";
 
+import { DeleteModal, RenameModal, SetDefaultModal } from "../atoms";
 import { Translations } from "./atoms";
 
 import * as S from "./style";
@@ -32,22 +32,28 @@ const DefaultItem = (props: IProps): JSX.Element => {
 		toggleReplaceModal,
 		getMenus,
 		hoverCheck,
+		isSaving,
 	} = props;
 
-	const [inputValue, setInputValue] = useState("");
-
-	const { isOpen: isRenameOpened, toggleModal: toggleRenameModal } = useModal();
-	const { isOpen: isDefaultOpened, toggleModal: toggleDefaultModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["rename", "default", "delete"]);
 
 	const { locale } = lang;
 	const { navigationLanguages, type } = defaultContent;
 
-	const isAllowedToEditHeaders = usePermission("navigation.editSiteHeaders") && type === "header";
-	const isAllowedToEditFooters = usePermission("navigation.editSiteFooters") && type === "footer";
-	const isAllowedToCreateHeaders = usePermission("navigation.createSiteHeaders") && type === "header";
-	const isAllowedToCreateFooters = usePermission("navigation.createSiteFooters") && type === "footer";
-	const isAllowedToDeleteHeaders = usePermission("navigation.deleteSiteHeaders") && type === "header";
-	const isAllowedToDeleteFooters = usePermission("navigation.deleteSiteFooters") && type === "footer";
+	const isAllowedTo = usePermissions({
+		editHeaders: "navigation.editSiteHeaders",
+		editFooters: "navigation.editSiteFooters",
+		createHeaders: "navigation.createSiteHeaders",
+		createFooters: "navigation.createSiteFooters",
+		deleteHeaders: "navigation.deleteSiteHeaders",
+		deleteFooters: "navigation.deleteSiteFooters",
+	});
+
+	console.log(navigationLanguages, "langs");
+
+	const isAllowedToEdit = type === "header" ? isAllowedTo.editHeaders : isAllowedTo.editFooters;
+	const isAllowedToCreate = type === "header" ? isAllowedTo.createHeaders : isAllowedTo.createFooters;
+	const isAllowedToDelete = type === "header" ? isAllowedTo.deleteHeaders : isAllowedTo.deleteFooters;
 
 	const goToEditor = () => {
 		handleClick(defaultContent);
@@ -56,8 +62,8 @@ const DefaultItem = (props: IProps): JSX.Element => {
 
 	const handleOnChange = (value: ICheck) => onChange(value);
 
-	const handleRenameItem = () => {
-		const updatedItem = { ...defaultContent, title: inputValue };
+	const handleRenameItem = (newTitle: string) => {
+		const updatedItem = { ...defaultContent, title: newTitle };
 		updateNavigation(defaultContent.id!, updatedItem);
 	};
 
@@ -65,38 +71,43 @@ const DefaultItem = (props: IProps): JSX.Element => {
 
 	const handleErrorAction = () => toggleReplaceModal();
 
-	const removeItem = async () => {
-		const deleted = await deleteNavigation(defaultContent.id!, defaultContent.type, handleErrorAction);
-		setDeletedNav(defaultContent.id!);
+	const isTranslated = navigationLanguages.length > 1;
+
+	const handleDeleteConfirm = async (deleteAllVersions: boolean) => {
+		const idsToDelete: number | number[] = deleteAllVersions
+			? navigationLanguages.map((nav) => nav.navigationId)
+			: defaultContent.id!;
+
+		const deleted = await deleteNavigation(idsToDelete, defaultContent.type, handleErrorAction);
+		setDeletedNav(idsToDelete);
 		if (deleted) {
 			toggleToast();
+			toggleModal("delete");
 		}
 	};
 
-	const renameOption =
-		isAllowedToEditFooters || isAllowedToEditHeaders
-			? {
-					label: "Rename",
-					icon: "edit",
-					action: toggleRenameModal,
-				}
-			: undefined;
-
-	const deleteOption =
-		isAllowedToDeleteFooters || isAllowedToDeleteHeaders
-			? {
-					label: "Delete",
-					icon: "delete",
-					action: removeItem,
-				}
-			: undefined;
+	const renameOption = isAllowedToEdit
+		? {
+				label: "Rename",
+				icon: "edit",
+				action: () => toggleModal("rename"),
+			}
+		: undefined;
+
+	const deleteOption = isAllowedToDelete
+		? {
+				label: "Delete",
+				icon: "delete",
+				action: () => toggleModal("delete"),
+			}
+		: undefined;
 
 	const setAsDefaultOption =
-		!defaultContent.setAsDefault && (isAllowedToEditHeaders || isAllowedToEditFooters)
+		!defaultContent.setAsDefault && isAllowedToEdit
 			? {
 					label: "Set as default",
 					icon: "modules",
-					action: toggleDefaultModal,
+					action: () => toggleModal("default"),
 				}
 			: undefined;
 
@@ -117,17 +128,6 @@ const DefaultItem = (props: IProps): JSX.Element => {
 
 	const currentLanguages = getCurrentLanguages();
 
-	const handleCloseModal = () => {
-		setInputValue("");
-		toggleRenameModal();
-	};
-
-	const mainRenameModalAction = { title: "Rename", onClick: handleRenameItem, disabled: !inputValue.trim() };
-	const secondaryRenameModalAction = { title: "Cancel", onClick: handleCloseModal };
-
-	const mainDefaultModalAction = { title: "Yes, set as default", onClick: handleSetDefault };
-	const secondaryDefaultModalAction = { title: "Cancel", onClick: toggleDefaultModal };
-
 	const getSelectedNavLanguage = (navLanguages: INavigationLanguage[], language: ILanguage) =>
 		navLanguages.find((navLang) => navLang.languageId === language.id);
 
@@ -148,11 +148,11 @@ const DefaultItem = (props: IProps): JSX.Element => {
 		setHistoryPush("/sites/navigations/editor", true);
 	};
 
-	const availableLanguages = isAllowedToCreateFooters || isAllowedToCreateHeaders ? languages : currentLanguages;
+	const availableLanguages = isAllowedToCreate ? languages : currentLanguages;
 
 	return (
 		<>
-			<S.DefaultRow role="rowgroup" selected={isSelected} clickable={isAllowedToEditHeaders || isAllowedToEditFooters}>
+			<S.DefaultRow role="rowgroup" selected={isSelected} clickable={isAllowedToEdit}>
 				<S.CheckCell role="cell">
 					<CheckField
 						name="check"
@@ -179,45 +179,26 @@ const DefaultItem = (props: IProps): JSX.Element => {
 					<S.StyledActionMenu icon="more" options={menuOptions} />
 				</S.ActionCell>
 			</S.DefaultRow>
-			<Modal
-				isOpen={isRenameOpened}
-				hide={handleCloseModal}
-				title={`Rename ${defaultContent.component}`}
-				secondaryAction={secondaryRenameModalAction}
-				mainAction={mainRenameModalAction}
-				size="S"
-			>
-				{isRenameOpened ? (
-					<S.ModalContent>
-						<FieldsBehavior
-							fieldType="TextField"
-							name="name"
-							title="Name"
-							mandatory={true}
-							value={inputValue}
-							onChange={setInputValue}
-							placeholder={`Type a new name for the ${defaultContent.type}`}
-						/>
-					</S.ModalContent>
-				) : null}
-			</Modal>
-			<Modal
-				isOpen={isDefaultOpened}
-				hide={toggleDefaultModal}
-				title={`Default ${defaultContent.component}`}
-				secondaryAction={secondaryDefaultModalAction}
-				mainAction={mainDefaultModalAction}
-				size="S"
-			>
-				{isDefaultOpened ? (
-					<S.ModalContent>
-						<p>
-							There is already a header defined as default. If you change it to this one, it will be shown on all the
-							pages on this site. Are you sure your want to make this change?
-						</p>
-					</S.ModalContent>
-				) : null}
-			</Modal>
+			<RenameModal
+				isOpen={isOpen("rename")}
+				toggleModal={() => toggleModal("rename")}
+				defaultContent={defaultContent}
+				onRename={handleRenameItem}
+			/>
+			<SetDefaultModal
+				isOpen={isOpen("default")}
+				toggleModal={() => toggleModal("default")}
+				defaultContent={defaultContent}
+				onSetDefault={handleSetDefault}
+			/>
+			<DeleteModal
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
+				isTranslated={isTranslated}
+				title={defaultContent.title}
+				onDelete={handleDeleteConfirm}
+				isDeleting={isSaving}
+			/>
 		</>
 	);
 };
@@ -232,8 +213,8 @@ interface IProps {
 	isSelected: boolean;
 	toggleToast(): void;
 	onChange: (e: any) => void;
-	setDeletedNav(item: number): void;
-	deleteNavigation(navID: number, type: string, errorAction: () => void): Promise<boolean>;
+	setDeletedNav(item: number | number[]): void;
+	deleteNavigation(navID: number | number[], type: string, errorAction: () => void): Promise<boolean>;
 	setDefaultNavigation(navID: number, type: string): void;
 	setLanguage(lang: { locale: string; id: number | null }): void;
 	createNewTranslation(isNewTranslation: boolean): void;
@@ -242,8 +223,13 @@ interface IProps {
 	toggleReplaceModal: () => void;
 	getMenus(): Promise<void>;
 	hoverCheck: boolean;
+	isSaving: boolean;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+	isSaving: state.app.isSaving,
+});
+
 const mapDispatchToProps = {
 	updateNavigation: navigationActions.updateNavigation,
 	deleteNavigation: navigationActions.deleteNavigation,
@@ -255,4 +241,4 @@ const mapDispatchToProps = {
 	getMenus: menuActions.getMenus,
 };
 
-export default connect(null, mapDispatchToProps)(DefaultItem);
+export default connect(mapStateToProps, mapDispatchToProps)(DefaultItem);

package/src/modules/Navigation/Defaults/atoms.tsx

@@ -1,28 +1,200 @@
-import React from "react";
+import type React from "react";
+import { useState } from "react";
+
+import { FieldsBehavior, Modal } from "@ax/components";
+import type { IModal, INavigation } from "@ax/types";
+
 import * as S from "./style";
 
 const NavigationModulesWarning = (props: INavigationModulesWarning): JSX.Element => {
 	const { goTo } = props;
 
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+		if (e.key === "Enter") {
+			goTo();
+		}
+	};
+
 	return (
 		<S.NavigationModulesWarning>
 			<S.NavigationModulesTitle>Navigation Modules</S.NavigationModulesTitle>
 			<S.NavigationModulesDescription>
 				Create as many headers as you need for your site. You can decide on which page to use each one. To change the
 				header design, you have to go to{" "}
-				<S.SiteSettingsLink>
-					<span onClick={goTo} onKeyPress={goTo} role="checkbox" aria-checked="false" tabIndex={0}>
-						Site Settings
-					</span>
-				</S.SiteSettingsLink>
+				<button type="button" onClick={goTo} onKeyDown={handleKeyDown} tabIndex={0}>
+					Site Settings
+				</button>
 				.
 			</S.NavigationModulesDescription>
 		</S.NavigationModulesWarning>
 	);
 };
 
+const DeleteModal = (props: IDeleteModal): JSX.Element => {
+	const { isOpen, toggleModal, isTranslated, title, onDelete, isDeleting, itemCount } = props;
+	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
+
+	const isBulkDelete = itemCount && itemCount > 1;
+
+	const options = [
+		{
+			title: "Delete only this version",
+			name: "deletePage",
+			value: false,
+		},
+		{
+			title: "Delete all languages versions",
+			name: "deleteAll",
+			value: true,
+		},
+	];
+
+	const itemTitle = title ? <strong>{title}</strong> : "this";
+
+	const mainAction = {
+		title: isDeleting ? "Deleting" : "Delete",
+		onClick: () => onDelete(deleteAllVersions),
+		disabled: isDeleting,
+	};
+
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title="Delete navigation?"
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
+			size="S"
+			height="auto"
+		>
+			{isTranslated ? (
+				<>
+					<S.ModalContent>
+						<p>
+							{isBulkDelete ? (
+								<>
+									You are going to delete <strong>{itemCount} navigations</strong> that have some translations
+									associated. Choose if you want to delete all languages versions or only this one.
+								</>
+							) : (
+								<>
+									You are going to delete {itemTitle} navigation that have some translations associated. Choose if you
+									want to delete all languages versions or only this one.
+								</>
+							)}
+						</p>
+						<FieldsBehavior
+							name="removeAllVersions"
+							fieldType="RadioGroup"
+							value={deleteAllVersions}
+							options={options}
+							onChange={setDeleteAllVersions}
+						/>
+					</S.ModalContent>
+				</>
+			) : (
+				<S.ModalContent>
+					{isBulkDelete ? (
+						<>
+							Are you sure you want to delete <strong>{itemCount} navigations</strong>?
+						</>
+					) : (
+						<>Are you sure you want to delete {itemTitle} navigation?</>
+					)}
+				</S.ModalContent>
+			)}
+		</Modal>
+	);
+};
+
+const RenameModal = (props: IRenameModal): JSX.Element => {
+	const { isOpen, toggleModal, defaultContent, onRename } = props;
+	const [inputValue, setInputValue] = useState("");
+
+	const handleClose = () => {
+		setInputValue("");
+		toggleModal();
+	};
+
+	const handleRename = () => {
+		onRename(inputValue);
+		handleClose();
+	};
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={handleClose}
+			title={`Rename ${defaultContent.component}`}
+			secondaryAction={{ title: "Cancel", onClick: handleClose }}
+			mainAction={{ title: "Rename", onClick: handleRename, disabled: !inputValue.trim() }}
+			size="S"
+			height="auto"
+		>
+			{isOpen ? (
+				<S.ModalContent>
+					<FieldsBehavior
+						fieldType="TextField"
+						name="name"
+						title="Name"
+						mandatory={true}
+						value={inputValue}
+						onChange={setInputValue}
+						placeholder={`Type a new name for the ${defaultContent.type}`}
+					/>
+				</S.ModalContent>
+			) : null}
+		</Modal>
+	);
+};
+
+const SetDefaultModal = (props: ISetDefaultModal): JSX.Element => {
+	const { isOpen, toggleModal, defaultContent, onSetDefault } = props;
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title={`Default ${defaultContent.component}`}
+			secondaryAction={{ title: "Cancel", onClick: toggleModal }}
+			mainAction={{ title: "Yes, set as default", onClick: onSetDefault }}
+			size="S"
+			height="auto"
+		>
+			{isOpen ? (
+				<S.ModalContent>
+					<p>
+						There is already a header defined as default. If you change it to this one, it will be shown on all the
+						pages on this site. Are you sure your want to make this change?
+					</p>
+				</S.ModalContent>
+			) : null}
+		</Modal>
+	);
+};
+
 interface INavigationModulesWarning {
 	goTo(): void;
 }
 
-export { NavigationModulesWarning };
+interface IDeleteModal extends IModal {
+	isTranslated: boolean;
+	title?: string;
+	onDelete: (deleteAllVersions: boolean) => void;
+	isDeleting?: boolean;
+	itemCount?: number;
+}
+
+interface IRenameModal extends IModal {
+	defaultContent: INavigation;
+	onRename: (value: string) => void;
+}
+
+interface ISetDefaultModal extends IModal {
+	defaultContent: INavigation;
+	onSetDefault: () => void;
+}
+
+export { NavigationModulesWarning, DeleteModal, RenameModal, SetDefaultModal };

package/src/modules/Navigation/Defaults/index.tsx

@@ -5,10 +5,10 @@ import { ErrorToast, MainWrapper, Notification, TableList, Toast } from "@ax/com
 import { appActions } from "@ax/containers/App";
 import { menuActions, navigationActions } from "@ax/containers/Navigation";
 import { capitalize, isMultipleNavigationModules } from "@ax/helpers";
-import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
+import { useBulkSelection, useModals, usePermissions, useToast } from "@ax/hooks";
 import type { IFooter, IHeader, ILanguage, INavigation, IRootState, ISite } from "@ax/types";
 
-import { NavigationModulesWarning } from "./atoms";
+import { DeleteModal, NavigationModulesWarning } from "./atoms";
 import BulkHeader from "./BulkHeader";
 import DefaultItem from "./Item";
 import DefaultNav from "./Nav";
@@ -38,9 +38,9 @@ const DefaultsList = (props: IProps): JSX.Element => {
 		getMenus,
 		resetDefaultsValues,
 		currentSiteInfo,
+		isSaving,
 	} = props;
 
-	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [page, setPage] = useState(1);
 	const [deletedNav, setDeletedNav] = useState<number | number[] | null>(null);
 	const [updatedPages, setUpdatedPages] = useState<number | null>(null);
@@ -49,10 +49,17 @@ const DefaultsList = (props: IProps): JSX.Element => {
 	const [isScrolling, setIsScrolling] = useState(false);
 	const tableRef = useRef<HTMLDivElement>(null);
 	const [isNavigationNotificationOpen, setIsNavigationNotificationOpen] = useState(false);
-	const { isOpen: isReplaceOpened, toggleModal: toggleReplaceModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["replace", "delete"]);
 
-	const isAllowedToCreate = usePermission(`navigation.createSite${selectedDefault}`);
-	const isAllowedToDelete = usePermission(`navigation.deleteSite${selectedDefault}`);
+	const isAllowedTo = usePermissions({
+		createHeaders: "navigation.createSiteHeaders",
+		createFooters: "navigation.createSiteFooters",
+		deleteHeaders: "navigation.deleteSiteHeaders",
+		deleteFooters: "navigation.deleteSiteFooters",
+	});
+
+	const isAllowedToCreate = selectedDefault === "Headers" ? isAllowedTo.createHeaders : isAllowedTo.createFooters;
+	const isAllowedToDelete = selectedDefault === "Headers" ? isAllowedTo.deleteHeaders : isAllowedTo.deleteFooters;
 
 	const navIds = useMemo(() => currentDefaultsContent?.map((nav) => nav.id), [currentDefaultsContent]);
 
@@ -162,16 +169,32 @@ const DefaultsList = (props: IProps): JSX.Element => {
 		togglePagesToast();
 	};
 
-	const bulkDelete = async () => {
-		setIsBulkLoading(true);
-		const deleted = await deleteNavigation(selectedItems.all, currentType, toggleReplaceModal);
-		setDeletedNav(selectedItems.all);
+	const handleBulkDeleteConfirm = async (deleteAllVersions: boolean) => {
+		let idsToDelete = selectedItems.all;
+		if (deleteAllVersions) {
+			const allTranslationIds = new Set(selectedItems.all);
+			selectedItems.all.forEach((id) => {
+				const nav = currentDefaultsContent?.find((n) => n.id === id);
+				nav?.navigationLanguages.forEach((lang) => {
+					allTranslationIds.add(lang.navigationId);
+				});
+			});
+			idsToDelete = Array.from(allTranslationIds);
+		}
+
+		const deleted = await deleteNavigation(idsToDelete, currentType, () => toggleModal("replace"));
+		setDeletedNav(idsToDelete);
 		if (deleted) {
 			toggleToast();
+			toggleModal("delete");
+			resetBulkSelection();
 		}
-		setIsBulkLoading(false);
 	};
 
+	const hasAnyTranslation = currentDefaultsContent?.some(
+		(nav) => selectedItems.all.includes(nav.id) && nav.navigationLanguages.length > 1,
+	);
+
 	const onScroll = (e: React.UIEvent<HTMLDivElement>) => setIsScrolling((e.target as HTMLDivElement).scrollTop > 0);
 
 	const bulkActions = isAllowedToDelete
@@ -179,7 +202,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 				{
 					icon: "delete",
 					text: "delete",
-					action: bulkDelete,
+					action: () => toggleModal("delete"),
 				},
 			]
 		: [];
@@ -196,7 +219,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 				checkState={checkState}
 				isScrolling={isScrolling}
 				setHoverCheck={setHoverCheck}
-				isLoading={isBulkLoading}
+				isLoading={isSaving}
 			/>
 		),
 		[
@@ -210,7 +233,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 			checkState,
 			isScrolling,
 			setHoverCheck,
-			isBulkLoading,
+			isSaving,
 		],
 	);
 
@@ -262,7 +285,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 									onChange={addToBulkSelection}
 									handleClick={setContent}
 									setHistoryPush={setHistoryPush}
-									toggleReplaceModal={toggleReplaceModal}
+									toggleReplaceModal={() => toggleModal("replace")}
 									hoverCheck={checkState.hoverCheck}
 								/>
 							);
@@ -272,15 +295,23 @@ const DefaultsList = (props: IProps): JSX.Element => {
 				{isVisible && <Toast {...toastProps} />}
 				{isPagesVisible && <Toast {...toastPagesProps} />}
 			</S.DefaultListWrapper>
-			{isReplaceOpened && (
+			{isOpen("replace") && (
 				<ReplaceNavModal
-					isOpen={isReplaceOpened}
-					toggleModal={toggleReplaceModal}
+					isOpen={isOpen("replace")}
+					toggleModal={() => toggleModal("replace")}
 					type={currentType}
 					navID={deletedNav}
 					toggleToast={handleToast}
 				/>
 			)}
+			<DeleteModal
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
+				isTranslated={hasAnyTranslation || false}
+				onDelete={handleBulkDeleteConfirm}
+				isDeleting={isSaving}
+				itemCount={selectedItems.all.length}
+			/>
 		</MainWrapper>
 	);
 };
@@ -292,6 +323,7 @@ const mapStateToProps = (state: IRootState) => ({
 	currentDefaultsContent: state.navigation.currentDefaultsContent,
 	totalItems: state.navigation.totalItems,
 	currentSiteInfo: state.sites.currentSiteInfo,
+	isSaving: state.app.isSaving,
 });
 
 interface IDispatchProps {
@@ -315,6 +347,7 @@ interface IDefaultsProps {
 	currentDefaultsContent: INavigation[];
 	totalItems: number;
 	currentSiteInfo: ISite | null;
+	isSaving: boolean;
 }
 
 type IProps = IDefaultsProps & IDispatchProps;

package/src/modules/Navigation/Defaults/style.tsx

@@ -32,14 +32,17 @@ const NavigationModulesTitle = styled.div`
 
 const NavigationModulesDescription = styled.div`
   ${(p) => p.theme.textStyle.uiM};
+  button {
+    ${(p) => p.theme.textStyle.uiS};
+    color: ${(p) => p.theme.color.interactive01};
+  }
 `;
 
-const SiteSettingsLink = styled.div`
-  display: inline;
-  ${(p) => p.theme.textStyle.uiS};
-  color: ${(p) => p.theme.color.interactive01};
-  span {
-    cursor: pointer;
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
   }
 `;
 
@@ -50,5 +53,5 @@ export {
 	NavigationModulesWarning,
 	NavigationModulesTitle,
 	NavigationModulesDescription,
-	SiteSettingsLink,
+	ModalContent,
 };