@griddo/ax 11.15.9 → 11.16.0-rc.1

package/src/components/RestrictionsModal/index.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+
+import { Loading, Modal } from "@ax/components";
+import type { IModal, IRootState, IUser, PageAccessGrantsSummary } from "@ax/types";
+
+import CurrentAccessList from "./CurrentAccessList";
+import OptionsStep from "./OptionsStep";
+import RolesList from "./RolesList";
+import UsersList from "./UsersList";
+import { fetchUsers } from "./utils";
+
+import * as S from "./style";
+
+type Step = "current" | "options" | "list";
+const STEPS: Step[] = ["current", "options", "list"];
+
+const RestrictionsModal = (props: IRestrictionsModalProps): JSX.Element => {
+	const { isOpen, toggleModal, currentAccessGrants, onUpdateAccessGrants, isSaving } = props;
+	const currentSiteInfo = useSelector((state: IRootState) => state.sites.currentSiteInfo);
+	const [currentStep, setCurrentStep] = useState<Step>("options");
+	const [restrictionType, setRestrictionType] = useState<"users" | "roles">("users");
+	const [selectedUsers, setSelectedUsers] = useState<IUser[]>([]);
+	const [isLoadingUsers, setIsLoadingUsers] = useState(false);
+	const hasInitializedRef = useRef(false);
+
+	useEffect(() => {
+		if (currentAccessGrants?.users && currentAccessGrants?.users.length > 0 && isOpen) {
+			const initializeSelected = async () => {
+				setIsLoadingUsers(true);
+				const data = await fetchUsers("", currentSiteInfo);
+				if (data) {
+					const selected = data.filter((user: IUser) => currentAccessGrants.users.includes(user.id!));
+					setSelectedUsers(selected);
+				}
+				setIsLoadingUsers(false);
+			};
+			initializeSelected();
+		}
+	}, [currentAccessGrants?.users, currentSiteInfo, isOpen]);
+
+	useEffect(() => {
+		if (isOpen && !hasInitializedRef.current) {
+			hasInitializedRef.current = true;
+
+			// Determine initial step and restriction type
+			if (currentAccessGrants?.users?.length) {
+				setRestrictionType("users");
+				setCurrentStep("current");
+			} else if (currentAccessGrants?.roles?.length) {
+				setRestrictionType("roles");
+				setCurrentStep("current");
+			} else {
+				setRestrictionType("users");
+				setCurrentStep("options");
+			}
+		} else if (!isOpen) {
+			hasInitializedRef.current = false;
+		}
+	}, [isOpen, currentAccessGrants]);
+
+	const stepIndex = STEPS.indexOf(currentStep);
+
+	const handleNext = () => {
+		setCurrentStep(STEPS[stepIndex + 1]);
+	};
+
+	const handleEdit = () => {
+		setCurrentStep("list");
+	};
+
+	const handleResetAccess = async () => {
+		setCurrentStep("options");
+		const newAccessGrants = {
+			users: [],
+			roles: [],
+		};
+		setSelectedUsers([]);
+		await onUpdateAccessGrants(newAccessGrants);
+		toggleModal();
+	};
+
+	const handleClose = () => {
+		setCurrentStep("options");
+		setRestrictionType("users");
+		setSelectedUsers([]);
+		toggleModal();
+	};
+
+	const handleApply = async (ids: number[]) => {
+		const newAccessGrants = {
+			users: restrictionType === "users" ? ids : [],
+			roles: restrictionType === "roles" ? ids : [],
+		};
+		setSelectedUsers([]);
+		await onUpdateAccessGrants(newAccessGrants);
+	};
+
+	const handleRestrictionTypeChange = (value: string) => {
+		if (value === "users" || value === "roles") {
+			setRestrictionType(value);
+		}
+	};
+
+	const getTitle = (): string => {
+		switch (currentStep) {
+			case "current":
+			case "list":
+				return "Page restrictions";
+			default:
+				return "Page restrictions";
+		}
+	};
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={handleClose}
+			title={getTitle()}
+			size="S"
+			height={currentStep === "options" || currentStep === "current" ? "auto" : 640}
+		>
+			<S.ModalContent>
+				{currentStep === "current" &&
+					(isLoadingUsers ? (
+						<S.LoadingContainer>
+							<Loading />
+						</S.LoadingContainer>
+					) : (
+						<CurrentAccessList
+							restrictionType={restrictionType}
+							currentAccessGrants={currentAccessGrants}
+							onEdit={handleEdit}
+							users={selectedUsers}
+						/>
+					))}
+
+				{currentStep === "options" && (
+					<OptionsStep
+						restrictionType={restrictionType}
+						onRestrictionTypeChange={handleRestrictionTypeChange}
+						onCancel={handleClose}
+						onNext={handleNext}
+					/>
+				)}
+
+				{currentStep === "list" && (
+					<>
+						{restrictionType === "users" && (
+							<UsersList
+								onCancel={handleClose}
+								onApply={handleApply}
+								selectedUserIds={currentAccessGrants?.users || []}
+								isSaving={isSaving}
+								onResetAccess={handleResetAccess}
+								users={selectedUsers}
+							/>
+						)}
+						{restrictionType === "roles" && (
+							<RolesList
+								onCancel={handleClose}
+								onApply={handleApply}
+								selectedRoleIds={currentAccessGrants?.roles || []}
+								isSaving={isSaving}
+								onResetAccess={handleResetAccess}
+							/>
+						)}
+					</>
+				)}
+			</S.ModalContent>
+		</Modal>
+	);
+};
+
+interface IRestrictionsModalProps extends IModal {
+	currentAccessGrants?: PageAccessGrantsSummary;
+	onUpdateAccessGrants: (accessGrants: PageAccessGrantsSummary) => Promise<void>;
+	isSaving: boolean;
+}
+
+export default RestrictionsModal;

package/src/components/RestrictionsModal/style.tsx

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const OptionsGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.spacing.xs};
+  margin: ${(p) => `${p.theme.spacing.m} 0`};
+`;
+
+const ListContainer = styled.div`
+  margin-top: ${(p) => p.theme.spacing.m};
+`;
+
+const OptionsList = styled.ul``;
+
+const LoadingContainer = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+export { ListContainer, LoadingContainer, ModalContent, OptionsList, OptionsGroup, Text };

package/src/components/RestrictionsModal/utils.tsx

@@ -0,0 +1,24 @@
+import { users } from "@ax/api";
+import { isReqOk } from "@ax/helpers";
+import type { IUser } from "@ax/types";
+
+const fetchUsers = async (query = "", currentSiteInfo?: { id: number } | null) => {
+	try {
+		const searchQuery = query.length ? `&query=${query}` : "";
+		const params = { filterQuery: "?order=name-asc", query: searchQuery };
+		const items = currentSiteInfo ? await users.getSiteUsers(params, currentSiteInfo.id) : await users.getUsers(params);
+		if (items && isReqOk(items.status)) {
+			let data = items.data;
+			// Filter to global users only when no specific site is selected
+			if (!currentSiteInfo) {
+				data = data.filter((user: IUser) => user.roles.some((role) => role.siteId === "global"));
+			}
+			return data;
+		}
+	} catch (e) {
+		console.log(e);
+	}
+	return null;
+};
+
+export { fetchUsers };

package/src/components/ScheduleModal/index.tsx

@@ -7,7 +7,7 @@ import type { IModal } from "@ax/types";
 import * as S from "./style";
 
 const ScheduleModal = (props: IScheduleModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, scheduleDate, setScheduleDate } = props;
+	const { isOpen, toggleModal, scheduleDate, setScheduleDate, onSchedule } = props;
 
 	const [error, setError] = useState(false);
 
@@ -33,15 +33,24 @@ const ScheduleModal = (props: IScheduleModal): JSX.Element => {
 		}
 	};
 
-	const modalAction: any = { ...mainModalAction, disabled: error };
+	const mainAction = {
+		title: "Schedule",
+		onClick: onSchedule,
+		disabled: error,
+	};
+
+	const secondaryAction = {
+		title: "Cancel",
+		onClick: () => toggleModal(),
+	};
 
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
 			title="Schedule publication"
-			secondaryAction={secondaryModalAction}
-			mainAction={modalAction}
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
 			size="M"
 			height={330}
 			overflow="visible"
@@ -77,16 +86,26 @@ const ScheduleModal = (props: IScheduleModal): JSX.Element => {
 	);
 };
 
-const CancelScheduleModal = (props: IModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+const CancelScheduleModal = (props: ICancelScheduleModal): JSX.Element => {
+	const { isOpen, toggleModal, onCancelSchedule } = props;
+
+	const mainAction = {
+		title: "Cancel Schedule",
+		onClick: onCancelSchedule,
+	};
+
+	const secondaryAction = {
+		title: "Back",
+		onClick: () => toggleModal(),
+	};
 
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
 			title="Cancel schedule publication"
-			secondaryAction={secondaryModalAction}
-			mainAction={mainModalAction}
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
 			size="S"
 			height={240}
 		>
@@ -103,6 +122,11 @@ const CancelScheduleModal = (props: IModal): JSX.Element => {
 interface IScheduleModal extends IModal {
 	scheduleDate: { date: string; time: string };
 	setScheduleDate: (scheduleDate: { date: string; time: string }) => void;
+	onSchedule: () => void;
+}
+
+interface ICancelScheduleModal extends IModal {
+	onCancelSchedule: () => void;
 }
 
 export { ScheduleModal, CancelScheduleModal };

package/src/components/SelectionComponent/index.tsx

@@ -0,0 +1,65 @@
+import { Button, CheckField, RadioField, TruncatedTooltip } from "@ax/components";
+
+import * as S from "./style";
+
+const SelectionComponent = (props: IProps): JSX.Element => {
+	const { name, value, label, description, isSelected, multi, btnText, btnAction, onToggle } = props;
+
+	const handleToggle = () => {
+		onToggle(value);
+	};
+
+	const handleFieldClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleToggle();
+		}
+	};
+
+	return (
+		<S.Wrapper isSelected={isSelected} onClick={handleToggle} onKeyDown={handleKeyDown} role="button" tabIndex={0}>
+			{multi ? (
+				<button type="button" onClick={handleFieldClick} onKeyDown={handleKeyDown} tabIndex={-1}>
+					<CheckField name={name} value={value} checked={isSelected} onChange={() => onToggle(value)} tabIndex={-1} />
+				</button>
+			) : (
+				<button type="button" onClick={handleFieldClick} onKeyDown={handleKeyDown} tabIndex={-1}>
+					<RadioField name={name} value={value} checked={isSelected} onChange={() => onToggle(value)} tabIndex={-1} />
+				</button>
+			)}
+			<S.Info>
+				<S.LabelWrapper>
+					<TruncatedTooltip content={label} expanded top={-5}>
+						<S.Label>{label}</S.Label>
+					</TruncatedTooltip>
+				</S.LabelWrapper>
+				{description && <S.Description>{description}</S.Description>}
+				{btnText && (
+					<S.ButtonWrapper>
+						<Button type="button" buttonStyle="text" onClick={btnAction}>
+							{btnText}
+						</Button>
+					</S.ButtonWrapper>
+				)}
+			</S.Info>
+		</S.Wrapper>
+	);
+};
+
+interface IProps {
+	name: string;
+	value: string;
+	label: string;
+	description?: string;
+	isSelected: boolean;
+	multi: boolean;
+	onToggle: (value: string) => void;
+	btnText?: string;
+	btnAction?: () => void;
+}
+
+export default SelectionComponent;

package/src/components/SelectionComponent/style.tsx

@@ -0,0 +1,69 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div<{ isSelected: boolean }>`
+  position: relative;
+  display: flex;
+  border: ${(p) => (p.isSelected ? `1px solid ${p.theme.color.interactive01}` : `1px solid ${p.theme.color.uiLine}`)};
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  cursor: pointer;
+  :before {
+    content: "";
+    border-radius: ${(p) => p.theme.radii.s};
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.1s;
+  }
+  :hover:before {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    opacity: 1;
+  }
+`;
+
+const Info = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 1;
+  min-width: 0;
+  padding-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const LabelWrapper = styled.div`
+  width: 100%;
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const Label = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiL};
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
+`;
+
+const Description = styled.div`
+ ${(p) => p.theme.textStyle.uiXS};
+ color: ${(p) => p.theme.colors.textMediumEmphasis};
+ margin-top: ${(p) => p.theme.spacing.xxs};
+ width: 100%;
+ min-width: 0;
+`;
+
+const ButtonWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
+export { Wrapper, Info, LabelWrapper, Description, Label, ButtonWrapper };

package/src/components/TableFilters/RoleFilter/index.tsx

@@ -1,8 +1,8 @@
-import React, { useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals } from "@ax/helpers";
-import { IFilterValue, IQueryValue } from "@ax/types";
+import type { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -31,7 +31,7 @@ const RoleFilter = (props: IRoleFilterProps): JSX.Element => {
 		}
 		setSelectedValue(selection);
 		const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
-			const label = filters && filters.find((opt: IFilterValue) => opt.value === value);
+			const label = filters?.find((opt: IFilterValue) => opt.value === value);
 			return { value, label: label?.title || "" };
 		});
 		filterItems(pointer, queryFilters);

package/src/components/TableList/TableItem/style.tsx

@@ -23,17 +23,13 @@ export const Row = styled.div<{ selected: boolean; global?: boolean }>`
 
   display: flex;
   flex-flow: row;
-  border: 1px solid ${(p) => p.theme.color.uiLine};
+  border: 1px solid ${(p) => (p.selected ? `${p.theme.color.interactive01}` : p.theme.color.uiLine)};
   border-radius: ${(p) => p.theme.radii.s};
   margin-bottom: ${(p) => p.theme.spacing.xs};
   cursor: pointer;
-  :before {
+  &:before {
     content: "";
-    background-color: ${(p) => (p.selected ? p.theme.color.overlayPressedPrimary : `transparent`)};
-    /* This border-radius does not comply with the design system, but it prevents
-     * a "gap" from appearing between the row and the selected row due to the
-     * border-radius not matching (because of the border-width) */
-    border-radius: 3px;
+    border-radius: 4px;
     position: absolute;
     top: 0;
     left: 0;
@@ -43,10 +39,8 @@ export const Row = styled.div<{ selected: boolean; global?: boolean }>`
     transition: opacity 0.1s;
     pointer-events: none;
   }
-  :hover {
-    &:before {
-      background-color: ${(p) =>
-				p.selected ? p.theme.color.overlayPressedPrimary : p.theme.color.overlayHoverPrimary};
-      opacity: 1;
-    }
+  &:hover:before {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    opacity: 1;
+  }
 `;

package/src/components/Tabs/index.tsx

@@ -6,9 +6,10 @@ import * as S from "./style";
 const Tabs = (props: ITabsProps): JSX.Element => {
 	const { tabs, icons, active, setSelectedTab, isInAppBar, noMargins, inversed, disabled } = props;
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: setSelectedTab is stable and should not trigger re-renders
 	useEffect(() => {
 		tabs && tabs.length === 1 && setSelectedTab(tabs[0]);
-	}, [tabs, setSelectedTab]);
+	}, [tabs]);
 
 	if (tabs) {
 		return (

package/src/components/UserRolesAndSites/index.tsx

@@ -1,5 +1,5 @@
 import { ElementsTooltip } from "@ax/components";
-import type { IRole, ISite, ISiteRoles } from "@ax/types";
+import type { IRole, ISite, UserRoleAssignment } from "@ax/types";
 
 import RoleItem from "./RoleItem";
 
@@ -93,7 +93,7 @@ const UserRolesAndSites = (props: IUserRolesAndSitesProps): JSX.Element => {
 
 interface IUserRolesAndSitesProps {
 	isSuperAdmin: boolean;
-	userRoles: ISiteRoles[];
+	userRoles: UserRoleAssignment[];
 	sites: ISite[];
 	roles: IRole[];
 	showRows?: boolean;

package/src/components/index.tsx

@@ -8,6 +8,7 @@ import BulkSelectionOptions from "./BulkSelectionOptions";
 import Button from "./Button";
 import CategoryCell from "./CategoryCell";
 import Circle from "./Circle";
+import ContentItem from "./ContentItem";
 import ConfigPanel from "./ConfigPanel";
 import DragAndDrop from "./DragAndDrop";
 import ElementsTooltip from "./ElementsTooltip";
@@ -95,9 +96,11 @@ import ProgressBar from "./ProgressBar";
 import ReorderArrows from "./ReorderArrows";
 import ResizePanel from "./ResizePanel";
 import RestoreModal from "./RestoreModal";
+import RestrictionsModal from "./RestrictionsModal";
 import { CancelScheduleModal, ScheduleModal } from "./ScheduleModal";
 import SearchField from "./SearchField";
 import SearchTagsBar from "./SearchTagsBar";
+import SelectionComponent from "./SelectionComponent";
 import SharePageModal from "./SharePageModal";
 import SideModal from "./SideModal";
 import StatusTile from "./StatusTile";
@@ -150,6 +153,7 @@ export {
 	Circle,
 	ComponentArray,
 	ComponentContainer,
+	ContentItem,
 	ConditionalField,
 	ConfigPanel,
 	CustomizeFilters,
@@ -220,12 +224,14 @@ export {
 	ReorderArrows,
 	ResizePanel,
 	RestoreModal,
+	RestrictionsModal,
 	RichText,
 	RoleFilter,
 	ScheduleModal,
 	SearchField,
 	SearchTagsBar,
 	Select,
+	SelectionComponent,
 	SEOPreview,
 	SharePageModal,
 	SideModal,

package/src/containers/PageEditor/actions.tsx

@@ -51,6 +51,7 @@ import type {
 	ISchema,
 	IStructuredDataContent,
 	IUserEditing,
+	PageAccessGrantsSummary,
 } from "@ax/types";
 
 import type { Dispatch } from "redux";
@@ -69,6 +70,7 @@ import {
 	SET_IS_NEW_TRANSLATION,
 	SET_LAST_ELEMENT_ADDED_ID,
 	SET_LAST_TIMEOUT,
+	SET_PAGE_ACCESS_GRANTS,
 	SET_SCHEMA,
 	SET_SCROLL_EDITOR_ID,
 	SET_SELECTED_CONTENT,
@@ -96,6 +98,7 @@ import type {
 	ISetIsNewTranslation,
 	ISetLastElementAddedId,
 	ISetLastTimeout,
+	ISetPageAccessGrants,
 	ISetSchema,
 	ISetScrollEditorID,
 	ISetSelectedContent,
@@ -230,6 +233,10 @@ function setScrollEditorID(scrollEditorID: number | null): ISetScrollEditorID {
 	return { type: SET_SCROLL_EDITOR_ID, payload: { scrollEditorID } };
 }
 
+function setPageAccessGrants(accessGrants: PageAccessGrantsSummary): ISetPageAccessGrants {
+	return { type: SET_PAGE_ACCESS_GRANTS, payload: { accessGrants } };
+}
+
 function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
 	return async (dispatch, getState) => {
 		try {
@@ -384,6 +391,7 @@ function getPage(
 					dispatch(setTemplateConfig(page.templateConfig));
 					dispatch(setUserEditing(page.editing));
 					dispatch(setCurrentPageStatus(pageLiveStatus));
+					dispatch(setPageAccessGrants(page.accessGrants));
 				}
 			} else {
 				if (!isNewTranslation) {
@@ -1632,6 +1640,40 @@ function schedulePublication(
 	};
 }
 
+function updatePageAccessGrants(data: {
+	siteID: number | "global";
+	pageID: number | null;
+	accessGrants: PageAccessGrantsSummary;
+}): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
+	return async (dispatch, getState) => {
+		try {
+			if (!data.pageID) {
+				dispatch(setPageAccessGrants(data.accessGrants));
+				updateEditorContent(0, "accessGrants", data.accessGrants)(dispatch, getState);
+				return true;
+			}
+
+			const responseActions = {
+				handleSuccess: () => {
+					dispatch(setPageAccessGrants(data.accessGrants));
+				},
+				handleError: (response: any) => appActions.handleError(response)(dispatch),
+			};
+
+			const callback = async () => {
+				if (data.pageID) {
+					return await pages.setPageAccessGrants({ ...data, pageID: data.pageID });
+				}
+			};
+
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+		} catch (e) {
+			console.log(e);
+			return false;
+		}
+	};
+}
+
 export {
 	setEditorContent,
 	setTemplate,
@@ -1687,4 +1729,5 @@ export {
 	setScrollEditorID,
 	addComponentInArray,
 	replaceModuleInArray,
+	updatePageAccessGrants,
 };

package/src/containers/PageEditor/constants.tsx

@@ -24,6 +24,7 @@ export const SET_IS_IA_TRANSLATED = `${NAME}/SET_IS_IA_TRANSLATED`;
 export const SET_LAST_TIMEOUT = `${NAME}/SET_LAST_TIMEOUT`;
 export const RESET_PAGE_EDITOR_STORE = `${NAME}/RESET_PAGE_EDITOR_STORE`;
 export const SET_SCROLL_EDITOR_ID = `${NAME}/SET_SCROLL_EDITOR_ID`;
+export const SET_PAGE_ACCESS_GRANTS = `${NAME}/SET_PAGE_ACCESS_GRANTS`;
 
 export const INITIAL_TEMPLATE = "BasicTemplate";
 export const MULTIMEDIA_COMPONENTS = ["LinkableImage", "Video"];