@griddo/ax 11.15.9 → 11.16.0-rc.1

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

@@ -1,15 +1,28 @@
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { connect } from "react-redux";
-import type { ISite, IRootState, IUser, IRole, ISiteRoles } from "@ax/types";
+
+import {
+	Button,
+	ErrorToast,
+	FieldsBehavior,
+	FloatingPanel,
+	MainWrapper,
+	Modal,
+	Notification,
+	PageFinder,
+	SearchField,
+} from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
-import { ErrorToast, FieldsBehavior, MainWrapper, SearchField, Notification, Button, Modal } from "@ax/components";
-import { useModal } from "@ax/hooks";
+import { isValidEmail } from "@ax/helpers/forms";
+import { useModals } from "@ax/hooks";
+import type { IPage, IRole, IRootState, ISite, IUser, UserPagePermissionEntry, UserRoleAssignment } from "@ax/types";
 
+import { PagePermissionsList, SettingsSection } from "./atoms";
+import OptionItem from "./OptionItem";
 import SiteItem from "./SiteItem";
 import RolesModal from "./SiteItem/RolesModal";
 import RoleItem from "./SiteItem/RolesModal/RoleItem";
-import OptionItem from "./OptionItem";
 
 import * as S from "./style";
 
@@ -18,18 +31,19 @@ const UserCreate = (props: IUserCreateProps) => {
 
 	const isSiteView = !!site;
 
-	const initState: IState = { name: "", email: "", roles: [], isSuperAdmin: false };
+	const initState: IState = { name: "", email: "", roles: [], pagePermissions: [], isSuperAdmin: false };
 	const [state, setState] = useState(initState);
+	const [userAlreadyExists, setUserAlreadyExists] = useState(false);
+	const [selectedPages, setSelectedPages] = useState<IPage[]>([]);
 
-	const getSortedSitesByName = (sites: ISite[]) =>
-		sites.sort((site1: ISite, site2: ISite) => site1.name.localeCompare(site2.name));
-	const sortedByNameSites = getSortedSitesByName(sites);
+	const { isOpen, toggleModal } = useModals(["roles", "advise", "pagePermissions"]);
 
-	const [sitesList, setSiteList] = useState(sortedByNameSites);
-	const [userAlreadyExists, setUserAlreadyExists] = useState(false);
+	const sortedByNameSites = useMemo(
+		() => [...sites].sort((site1: ISite, site2: ISite) => site1.name.localeCompare(site2.name)),
+		[sites],
+	);
 
-	const { isOpen, toggleModal } = useModal(false);
-	const { isOpen: isOpenAdvise, toggleModal: toggleAdviseModal } = useModal(false);
+	const findRolesBySiteId = (siteId: number | string) => state.roles.find((role) => role.siteId === siteId);
 
 	const handleNameChange = (value: string) => setState({ ...state, name: value });
 
@@ -37,20 +51,21 @@ const UserCreate = (props: IUserCreateProps) => {
 
 	const handleCreate = async () => {
 		const { email } = state;
+		if (!isValidEmail(email)) {
+			return;
+		}
 		const globalUser = users.find((user) => user.email === email);
 		setUserAlreadyExists(false);
 
 		const BASE_URL = isSiteView ? "/sites/users" : "/users";
 
-		if (isOpenAdvise) {
-			toggleAdviseModal();
+		if (isOpen("advise")) {
+			toggleModal("advise");
 		}
 
 		if (isSiteView && globalUser?.id) {
 			const { id, roles } = globalUser;
-			const userAlreadyExists = roles.find(
-				(siteRole: ISiteRoles) => siteRole.siteId === "all" || siteRole.siteId === site.id,
-			);
+			const userAlreadyExists = roles.find((siteRole) => siteRole.siteId === "all" || siteRole.siteId === site.id);
 			if (userAlreadyExists) {
 				setUserAlreadyExists(true);
 			} else {
@@ -68,12 +83,12 @@ const UserCreate = (props: IUserCreateProps) => {
 		}
 	};
 
-	const selectSite = (id: number | string) => {
+	const selectSite = (id: number | "global" | "all") => {
 		const { roles } = state;
-		const hasSite = roles.find((siteRole: ISiteRoles) => siteRole.siteId === id);
+		const hasSite = roles.find((siteRole) => siteRole.siteId === id);
 		if (hasSite) {
 			const filteredRoles = roles.filter(
-				(siteRole: ISiteRoles) =>
+				(siteRole) =>
 					(Number.isInteger(id) && siteRole.siteId !== id && siteRole.siteId !== "all") ||
 					(!Number.isInteger(id) && siteRole.siteId !== id),
 			);
@@ -83,23 +98,29 @@ const UserCreate = (props: IUserCreateProps) => {
 		}
 	};
 
+	const [filteredSites, setFilteredSites] = useState(sortedByNameSites);
+
+	useEffect(() => {
+		setFilteredSites(sortedByNameSites);
+	}, [sortedByNameSites]);
+
 	const filterSitesList = (query: string) => {
-		const filteredSites = sites.filter((site) =>
+		const filtered = sites.filter((site) =>
 			site.name.toLowerCase().replace(" ", "").includes(query.toLowerCase().replace(" ", "")),
 		);
-		const sortedSites = getSortedSitesByName(filteredSites);
-		setSiteList(sortedSites);
+		const sorted = [...filtered].sort((site1: ISite, site2: ISite) => site1.name.localeCompare(site2.name));
+		setFilteredSites(sorted);
 	};
 
-	const handleAddRoles = (newRoles: ISiteRoles) => {
-		const oldRoles = state.roles.filter((role: ISiteRoles) => role.siteId !== newRoles.siteId);
+	const handleAddRoles = (newRoles: UserRoleAssignment) => {
+		const oldRoles = state.roles.filter((role) => role.siteId !== newRoles.siteId);
 		const updatedRoles = newRoles.roles.length > 0 ? [...oldRoles, newRoles] : oldRoles;
 		setState({ ...state, roles: updatedRoles });
 	};
 
 	const handleAddSiteRoles = (newRoles: number[]) => {
 		if (!site) return;
-		const oldRoles = state.roles.filter((role: ISiteRoles) => role.siteId !== site.id);
+		const oldRoles = state.roles.filter((role) => role.siteId !== site.id);
 		const newSiteRoles = { siteId: site.id, roles: newRoles };
 		const updatedRoles = newRoles.length > 0 ? [...oldRoles, newSiteRoles] : oldRoles;
 		setState({ ...state, roles: updatedRoles });
@@ -107,25 +128,42 @@ const UserCreate = (props: IUserCreateProps) => {
 
 	const toggleSuperAdmin = () => setState({ ...state, isSuperAdmin: !state.isSuperAdmin });
 
+	const handleSetPage = (pages: IPage | IPage[]) => {
+		const pagesArray = Array.isArray(pages) ? pages : [pages];
+		const pageIds = pagesArray.map((p) => p.id);
+		const siteId: "global" | number = isSiteView ? site!.id : "global";
+
+		const newEntry: UserPagePermissionEntry = { siteId, pageIds };
+
+		const currentPagePermissions = state.pagePermissions || [];
+		const existingIndex = currentPagePermissions.findIndex((entry) => entry.siteId === siteId);
+		const newPagePermissions: UserPagePermissionEntry[] =
+			existingIndex >= 0
+				? currentPagePermissions.map((entry, index) => (index === existingIndex ? newEntry : entry))
+				: [...currentPagePermissions, newEntry];
+
+		setState({ ...state, pagePermissions: newPagePermissions });
+		setSelectedPages(pagesArray);
+		toggleModal("pagePermissions");
+	};
+
 	const rightButtonProps = {
 		label: "Add User",
-		action: state.roles.length === 0 && !state.isSuperAdmin ? toggleAdviseModal : handleCreate,
+		action: state.roles.length === 0 && !state.isSuperAdmin ? () => toggleModal("advise") : handleCreate,
 		disabled: isSaving,
 	};
 
 	const name = state.name.trim() === "" ? "Name" : state.name;
 
-	const sitesID = state.roles.map((roleSite: ISiteRoles) => roleSite.siteId);
+	const sitesID = state.roles.map((roleSite) => roleSite.siteId);
 
-	const siteSelectedRoles = isSiteView
-		? state.roles.find((roleSite: ISiteRoles) => roleSite.siteId === site.id)
-		: undefined;
+	const siteSelectedRoles = isSiteView ? findRolesBySiteId(site.id) : undefined;
 
-	const rolesAll = state.roles.find((roleSite: ISiteRoles) => roleSite.siteId === "all");
+	const rolesAll = findRolesBySiteId("all");
 	const allDescription =
 		"The user will have access to all existing and future sites depending on the permissions assigned to the role.";
 
-	const rolesGlobal = state.roles.find((roleSite: ISiteRoles) => roleSite.siteId === "global");
+	const rolesGlobal = findRolesBySiteId("global");
 	const globalDescription = "Global data will be accessible to the user based on the permissions assigned to the role.";
 
 	const mainModalAction = {
@@ -133,7 +171,7 @@ const UserCreate = (props: IUserCreateProps) => {
 		onClick: handleCreate,
 	};
 
-	const secondaryModalAction = { title: "Cancel", onClick: toggleAdviseModal };
+	const secondaryModalAction = { title: "Cancel", onClick: () => toggleModal("advise") };
 
 	return (
 		<MainWrapper backLink={true} title="New User" rightButton={rightButtonProps}>
@@ -144,41 +182,43 @@ const UserCreate = (props: IUserCreateProps) => {
 				</S.NotificationWrapper>
 			)}
 			<S.Wrapper>
-				<S.SubTitle>User data</S.SubTitle>
-				<S.NameTitle>{name}</S.NameTitle>
-				<FieldsBehavior
-					title="Name"
-					name="name"
-					fieldType="TextField"
-					placeholder="Type a name"
-					mandatory={true}
-					value={state.name}
-					onChange={handleNameChange}
-					autoComplete="user-name"
-				/>
-				<FieldsBehavior
-					title="Email"
-					name="email"
-					fieldType="TextField"
-					placeholder="Type an email"
-					mandatory={true}
-					value={state.email}
-					onChange={handleEmailChange}
-					autoComplete="user-email"
-				/>
+				<S.FieldsWrapper hasBoder={isSiteView}>
+					<S.SubTitle>User data</S.SubTitle>
+					<S.NameTitle>{name}</S.NameTitle>
+					<FieldsBehavior
+						title="Name"
+						name="name"
+						fieldType="TextField"
+						placeholder="Type a name"
+						mandatory={true}
+						value={state.name}
+						onChange={handleNameChange}
+						autoComplete="user-name"
+					/>
+					<FieldsBehavior
+						title="Email"
+						name="email"
+						fieldType="TextField"
+						placeholder="Type an email"
+						mandatory={true}
+						value={state.email}
+						onChange={handleEmailChange}
+						autoComplete="user-email"
+					/>
+				</S.FieldsWrapper>
 				{isSiteView ? (
 					<>
 						<S.SettingsWrapper>
 							<S.HeadingWrapper>
 								<S.Heading>Roles Assigned</S.Heading>
 								{(!siteSelectedRoles || siteSelectedRoles.roles.length === 0) && (
-									<Button type="button" buttonStyle="text" onClick={toggleModal} icon="addCircle">
+									<Button type="button" buttonStyle="text" onClick={() => toggleModal("roles")} icon="addCircle">
 										Add Role
 									</Button>
 								)}
 							</S.HeadingWrapper>
 							<S.SettingContent>
-								<S.SettingText>You can add a one or more roles to this user.</S.SettingText>
+								<S.SettingText>You can add one or more roles to this user.</S.SettingText>
 							</S.SettingContent>
 						</S.SettingsWrapper>
 						<S.RoleList data-testid="user-role-list">
@@ -187,14 +227,22 @@ const UserCreate = (props: IUserCreateProps) => {
 								return role && <RoleItem key={role.name} role={role} isReadOnly={true} />;
 							})}
 							{siteSelectedRoles && siteSelectedRoles.roles.length > 0 && (
-								<Button type="button" buttonStyle="line" onClick={toggleModal}>
+								<Button type="button" buttonStyle="line" onClick={() => toggleModal("roles")}>
 									Manage user roles
 								</Button>
 							)}
 						</S.RoleList>
+						<SettingsSection
+							heading="Page permissions"
+							description="You can give access only to a specific page/s to this user."
+							actionLabel="Add Page"
+							onActionClick={() => toggleModal("pagePermissions")}
+							showAction={selectedPages.length === 0}
+						/>
+						<PagePermissionsList pages={selectedPages} onManageClick={() => toggleModal("pagePermissions")} />
 						<RolesModal
-							isOpen={isOpen}
-							toggleModal={toggleModal}
+							isOpen={isOpen("roles")}
+							toggleModal={() => toggleModal("roles")}
 							roles={roles}
 							addRoles={handleAddSiteRoles}
 							selectedRoles={siteSelectedRoles ? siteSelectedRoles.roles : []}
@@ -219,7 +267,7 @@ const UserCreate = (props: IUserCreateProps) => {
 								onChange={toggleSuperAdmin}
 								value={!state.isSuperAdmin}
 							/>
-							<S.HelpText>Show the diference between types & roles in our Documentation</S.HelpText>
+							<S.HelpText>Show the difference between types & roles in our Documentation</S.HelpText>
 						</S.OptionsWrapper>
 						{!state.isSuperAdmin && (
 							<S.MemberWrapper>
@@ -240,6 +288,18 @@ const UserCreate = (props: IUserCreateProps) => {
 										description={globalDescription}
 									/>
 								</S.GlobalPermissionsFieldWrapper>
+								{sitesID.includes("global") && (
+									<>
+										<SettingsSection
+											heading="Page permissions"
+											description="You can give access only to a specific page/s to this user."
+											actionLabel="Add Page"
+											onActionClick={() => toggleModal("pagePermissions")}
+											showAction={selectedPages.length === 0}
+										/>
+										<PagePermissionsList pages={selectedPages} onManageClick={() => toggleModal("pagePermissions")} />
+									</>
+								)}
 								<S.SettingsWrapper>
 									<S.Heading>Sites access</S.Heading>
 									<S.SettingContent>
@@ -270,9 +330,9 @@ const UserCreate = (props: IUserCreateProps) => {
 									/>
 								</S.SelectAllSitesFieldWrapper>
 								<S.SiteList data-testid="user-site-list">
-									{sitesList.length > 0 &&
-										sitesList.map((site: ISite) => {
-											const rolesSite = state.roles.find((roleSite: ISiteRoles) => roleSite.siteId === site.id);
+									{filteredSites.length > 0 &&
+										filteredSites.map((site: ISite) => {
+											const rolesSite = state.roles.find((roleSite) => roleSite.siteId === site.id);
 											return (
 												<SiteItem
 													disabled={!!rolesAll}
@@ -292,8 +352,8 @@ const UserCreate = (props: IUserCreateProps) => {
 				)}
 			</S.Wrapper>
 			<Modal
-				isOpen={isOpenAdvise}
-				hide={toggleAdviseModal}
+				isOpen={isOpen("advise")}
+				hide={() => toggleModal("advise")}
 				title="Create User?"
 				secondaryAction={secondaryModalAction}
 				mainAction={mainModalAction}
@@ -305,13 +365,31 @@ const UserCreate = (props: IUserCreateProps) => {
 					<strong>won&apos;t have access to anything or view any content</strong>.
 				</S.ModalContent>
 			</Modal>
+			<FloatingPanel
+				title="Page Permissions"
+				toggleModal={() => toggleModal("pagePermissions")}
+				isOpen={isOpen("pagePermissions")}
+			>
+				<S.PanelContent>
+					{isOpen("pagePermissions") && (
+						<PageFinder
+							onClick={handleSetPage}
+							isOpen={isOpen("pagePermissions")}
+							multiple
+							globalContent={!isSiteView}
+							hideSites
+							alwaysShowButton
+						/>
+					)}
+				</S.PanelContent>
+			</FloatingPanel>
 		</MainWrapper>
 	);
 };
 
 interface IDispatchProps {
 	setHistoryPush(path: string): void;
-	createUser(data: { name: string; email: string; roles: ISiteRoles[] }): Promise<boolean>;
+	createUser(data: { name: string; email: string; roles: UserRoleAssignment[] }): Promise<boolean>;
 	updateUser(id: number, data: IUser, isProfile: boolean): Promise<boolean>;
 }
 interface IProfileProps {
@@ -325,8 +403,9 @@ interface IProfileProps {
 interface IState {
 	name: string;
 	email: string;
-	roles: ISiteRoles[];
+	roles: UserRoleAssignment[];
 	isSuperAdmin: boolean;
+	pagePermissions: UserPagePermissionEntry[];
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/modules/Users/UserCreate/style.tsx

@@ -34,7 +34,6 @@ const Heading = styled.div`
 
 const SettingsWrapper = styled.div`
   position: relative;
-  border-top: 1px solid ${(p) => p.theme.color.uiLine};
   padding-top: ${(p) => p.theme.spacing.m};
 `;
 
@@ -52,6 +51,7 @@ const SelectAllSitesFieldWrapper = styled.div``;
 
 const GlobalPermissionsFieldWrapper = styled.div`
   padding-bottom: ${(p) => p.theme.spacing.m};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
 `;
 
 const SettingText = styled.div`
@@ -99,10 +99,21 @@ const RoleList = styled.div`
   }
 `;
 
+const PageList = styled.ul`
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  padding-top: ${(p) => p.theme.spacing.xs};
+
+  & button {
+    margin-top: ${(p) => p.theme.spacing.s};
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
 const MemberWrapper = styled.div``;
 
 const OptionsWrapper = styled.div`
   padding-bottom: ${(p) => p.theme.spacing.m};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
 `;
 
 const Label = styled.div`
@@ -121,6 +132,15 @@ const ModalContent = styled.div`
   padding: ${(p) => p.theme.spacing.m};
 `;
 
+const PanelContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
+const FieldsWrapper = styled.div<{ hasBoder: boolean }>`
+  border-bottom: ${(p) => (p.hasBoder ? `1px solid ${p.theme.color.uiLine}` : `none`)};
+`;
+
 export {
 	Wrapper,
 	NameTitle,
@@ -142,4 +162,7 @@ export {
 	Label,
 	HelpText,
 	ModalContent,
+	PanelContent,
+	PageList,
+	FieldsWrapper,
 };