@griddo/ax 11.15.9 → 11.16.0-rc.0

package/src/components/ContentItem/style.tsx

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+const ListItem = styled.li`
+  display: flex;
+  width: 100%;
+  padding: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  border: 1px solid ${(p) => p.theme.color.uiLine};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent}
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+`;
+
+const Header = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const Type = styled.div`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.colors.textLowEmphasis};
+`;
+
+const ContentDate = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textLowEmphasis};
+  margin-left: auto;
+`;
+
+const Content = styled.div`
+  width: 100%;
+`;
+
+const Slug = styled.span`
+  ${({ theme }) => theme.textStyle.uiXS};
+  color: ${({ theme }) => theme.colors.textMediumEmphasis};
+`;
+
+export { Content, ContentDate, Header, ListItem, Slug, Title, Type };

package/src/components/Fields/ImageField/index.tsx

@@ -134,7 +134,7 @@ const ImageField = (props: IImageFieldProps) => {
 						{imageElement}
 					</S.ImageContainer>
 				)}
-				{selectPosition && (
+				{selectPosition && !disabled && (
 					<S.PositionWrapper>
 						<S.PositionTitle>
 							<Icon name="grid" size="16" />
@@ -166,6 +166,7 @@ const ImageField = (props: IImageFieldProps) => {
 						fieldType="TextField"
 						value={value.alt || ""}
 						onChange={handleAltChange}
+						disabled={disabled}
 					/>
 				</S.FieldsWrapper>
 			)}

package/src/components/Fields/RadioField/index.tsx

@@ -1,9 +1,7 @@
-import React from "react";
-
 import * as S from "./style";
 
 const RadioField = (props: IRadioFieldProps): JSX.Element => {
-	const { name, title, value, checked, error, disabled, onChange } = props;
+	const { name, title, value, checked, error, disabled, tabIndex, onChange } = props;
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		if (onChange) {
@@ -23,6 +21,7 @@ const RadioField = (props: IRadioFieldProps): JSX.Element => {
 					disabled={disabled}
 					onChange={handleChange}
 					data-testid="radio-field-input"
+					tabIndex={tabIndex}
 				/>
 				<S.CheckMark checked={checked} error={error} />
 			</S.Label>
@@ -38,6 +37,7 @@ export interface IRadioFieldProps {
 	error?: boolean;
 	disabled?: boolean;
 	onChange?: (value: string) => void;
+	tabIndex?: number;
 }
 
 export default RadioField;

package/src/components/Fields/RadioField/style.tsx

@@ -4,12 +4,12 @@ export const Wrapper = styled.div``;
 
 export const Label = styled.label`
   ${(p) => p.theme.textStyle.fieldContent};
-  display: block;
   position: relative;
   padding-left: calc(${(p) => p.theme.spacing.s} + ${(p) => p.theme.spacing.xs});
   margin-bottom: ${(p) => p.theme.spacing.xs};
   cursor: pointer;
   user-select: none;
+  min-height: 16px;
 `;
 
 export const CheckMark = styled.span<{ checked: boolean | undefined; error: boolean | undefined }>`

package/src/components/FloatingNote/index.tsx

@@ -5,8 +5,19 @@ import * as S from "./style";
 const FloatingNote = (props: IFloatingNoteProps): JSX.Element => {
 	const { message, icon, className, btnText, onClick } = props;
 
+	const handleClick = () => {
+		if (!btnText && onClick) {
+			onClick();
+		}
+	};
+
 	return (
-		<S.Wrapper data-testid="floating-note-wrapper" className={className}>
+		<S.Wrapper
+			data-testid="floating-note-wrapper"
+			className={className}
+			onClick={handleClick}
+			interactive={!btnText && !!onClick}
+		>
 			{icon && (
 				<S.IconWrapper>
 					<Icon name={icon} size="16" />

package/src/components/FloatingNote/style.tsx

@@ -1,11 +1,12 @@
 import styled from "styled-components";
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ interactive: boolean }>`
   display: flex;
   background-color: ${(p) => p.theme.color.uiBackground03};
   padding: ${(p) => p.theme.spacing.s};
   border-radius: ${(p) => p.theme.radii.s};
   z-index: 98;
+  cursor: ${(p) => (p.interactive ? "pointer" : "default")};
 `;
 
 const Text = styled.div`

package/src/components/Modal/style.tsx

@@ -84,6 +84,17 @@ const ModalContent = styled.div<{ overflow: string | undefined }>`
   position: relative;
   flex-grow: 1;
   overflow: ${(p) => p.overflow};
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+    height: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(p) => p.theme.colors.iconNonActive};
+  }
 `;
 
 const Title = styled.div`

package/src/components/PageFinder/SelectionListItem/index.tsx

@@ -1,11 +1,12 @@
-import { CheckField } from "@ax/components";
+import { CheckField, Tooltip } from "@ax/components";
 import { getFormattedDateWithTimezone } from "@ax/helpers";
 import type { ICheck, IPage } from "@ax/types";
 
 import * as S from "./style";
 
 const SelectionListItem = (props: ISelectionListItemProps): JSX.Element => {
-	const { option, title, type, date, onClick, pageID, isSelected, onChange, multiple, slug } = props;
+	const { option, title, type, date, onClick, pageID, isSelected, onChange, multiple, slug, isCheckboxDisabled } =
+		props;
 
 	const handleClick = () => (multiple ? onChange({ value: option, isChecked: !isSelected }) : onClick(option));
 	const handleChange = (value: ICheck) => onChange({ value: option, isChecked: value.isChecked });
@@ -13,21 +14,29 @@ const SelectionListItem = (props: ISelectionListItemProps): JSX.Element => {
 	const pageType = type || "Page";
 
 	return (
-		<S.ListItem>
-			{multiple && (
-				<S.CheckWrapper>
-					<CheckField name="check" value={pageID} checked={isSelected} onChange={handleChange} />
-				</S.CheckWrapper>
-			)}
-			<S.Content onClick={handleClick} data-testid="selection-list-item">
-				<S.Header>
-					<S.Type>{pageType}</S.Type>
-					<S.Date>{getFormattedDateWithTimezone(date, "d MMM Y")}</S.Date>
-				</S.Header>
-				<S.Title>{title}</S.Title>
-				<S.Slug>{slug}</S.Slug>
-			</S.Content>
-		</S.ListItem>
+		<Tooltip content={isCheckboxDisabled ? "Already selected in another language version" : undefined} bottom>
+			<S.ListItem>
+				{multiple && (
+					<S.CheckWrapper>
+						<CheckField
+							name="check"
+							value={pageID}
+							checked={isSelected}
+							onChange={handleChange}
+							disabled={isCheckboxDisabled}
+						/>
+					</S.CheckWrapper>
+				)}
+				<S.Content onClick={handleClick} data-testid="selection-list-item">
+					<S.Header>
+						<S.Type>{pageType}</S.Type>
+						<S.Date>{getFormattedDateWithTimezone(date, "d MMM Y")}</S.Date>
+					</S.Header>
+					<S.Title>{title}</S.Title>
+					<S.Slug>{slug}</S.Slug>
+				</S.Content>
+			</S.ListItem>
+		</Tooltip>
 	);
 };
 
@@ -42,6 +51,7 @@ interface ISelectionListItemProps {
 	isSelected: boolean;
 	onChange: (item: { value: IPage; isChecked: boolean }) => void;
 	multiple?: boolean;
+	isCheckboxDisabled?: boolean;
 }
 
 export default SelectionListItem;

package/src/components/PageFinder/index.tsx

@@ -12,13 +12,28 @@ import SelectionListItem from "./SelectionListItem";
 import * as S from "./style";
 
 const PageFinder = (props: IPageFinderProps): JSX.Element => {
-	const { onClick, currentSiteID, isOpen, allSites, lang, globalLangs, multiple, hideSites, pages } = props;
+	const {
+		onClick,
+		currentSiteID,
+		isOpen,
+		allSites,
+		lang,
+		globalLangs,
+		multiple,
+		hideSites,
+		pages,
+		globalContent,
+		alwaysShowButton,
+		fromPageOnly = true,
+		defaultLang,
+		disableTranslations = false,
+	} = props;
 
 	const langOptions = globalLangs.map((lang) => ({ label: lang.label, value: lang.id.toString() }));
 
 	const initialState: IState = {
-		site: currentSiteID || allSites[0].id,
-		lang: lang.id,
+		site: globalContent ? null : currentSiteID || allSites[0].id,
+		lang: defaultLang || lang.id,
 		type: "all",
 		items: [],
 		page: 1,
@@ -32,12 +47,14 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 	const [showSelected, setShowSelected] = useState(false);
 	const [searchQuery, setSearchQuery] = useState<string>("");
 
-	const defultTypeOptions = [
-		{ label: "All content", value: "all" },
-		{ label: "Base templates", value: "basic" },
-		{ label: "List pages", value: "list" },
-		{ label: "Static pages", value: "static" },
-	];
+	const defultTypeOptions = !globalContent
+		? [
+				{ label: "All content", value: "all" },
+				{ label: "Base templates", value: "basic" },
+				{ label: "List pages", value: "list" },
+				{ label: "Static pages", value: "static" },
+			]
+		: [{ label: "All content", value: "all" }];
 
 	const [contentTypeOptions, setContentTypeOptions] = useState<{ label: string; value: string }[]>(defultTypeOptions);
 
@@ -133,10 +150,15 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 
 	const getAndSetContentTypes = async () => {
 		const { site, lang } = state;
-		const { data } = await structuredData.getContentTypes(site, lang);
-		const contentTypes = data.items
-			? data.items.map((type: IContentType) => ({ label: type.title, value: type.id }))
+		const { data }: { data: { items: IContentType[] } } = await structuredData.getData(null, site, lang);
+		let contentTypes = data.items
+			? data.items.map((type) => ({ label: type.title, value: type.id, fromPage: type.fromPage }))
 			: [];
+
+		if (fromPageOnly) {
+			contentTypes = contentTypes.filter((type) => type.fromPage === true);
+		}
+
 		changeContentTypeOptions(contentTypes);
 		changeState("type", "all");
 	};
@@ -178,21 +200,31 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 	};
 
 	const getPageList = (items: IPage[]) =>
-		items?.map((page: IPage) => (
-			<SelectionListItem
-				option={page}
-				key={page.id}
-				title={page.title}
-				type={getStructuredDataTitle(page.structuredData)}
-				date={page.modified}
-				onClick={onClick}
-				pageID={page.id}
-				isSelected={selectedPagesIds.includes(page.id)}
-				onChange={handleChange}
-				multiple={multiple}
-				slug={page.slug.replace(/^\//, "")}
-			/>
-		));
+		items?.map((page: IPage) => {
+			const hasTranslationSelected = page.pageLanguages?.some((lang) => selectedPagesIds.includes(lang.pageId));
+			const isPageSelected = selectedPagesIds.includes(page.id);
+			const isPageOrTranslationSelected = disableTranslations
+				? isPageSelected || hasTranslationSelected
+				: isPageSelected;
+			const isCheckboxDisabled = disableTranslations && isPageOrTranslationSelected && !isPageSelected;
+
+			return (
+				<SelectionListItem
+					option={page}
+					key={page.id}
+					title={page.title}
+					type={getStructuredDataTitle(page.structuredData)}
+					date={page.modified}
+					onClick={onClick}
+					pageID={page.id}
+					isSelected={isPageOrTranslationSelected}
+					onChange={handleChange}
+					multiple={multiple}
+					slug={page.slug.replace(/^\//, "")}
+					isCheckboxDisabled={isCheckboxDisabled}
+				/>
+			);
+		});
 
 	const showPagination = state.totalItems > itemsPerPage;
 
@@ -267,7 +299,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 					</S.PaginationWrapper>
 				</S.ListWrapper>
 			)}
-			{selectedPages.length > 0 && (
+			{(selectedPages.length > 0 || alwaysShowButton) && (
 				<S.ActionWrapper>
 					<Button type="button" onClick={handleButtonClick}>
 						Add pages
@@ -297,6 +329,11 @@ interface IPageFinderProps {
 	multiple?: boolean;
 	hideSites?: boolean;
 	pages?: number[];
+	globalContent?: boolean;
+	alwaysShowButton?: boolean;
+	fromPageOnly?: boolean;
+	defaultLang?: number;
+	disableTranslations?: boolean;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/PageFinder/style.tsx

@@ -5,7 +5,6 @@ const Wrapper = styled.div`
   position: relative;
   width: 100%;
   height: 100%;
-  padding-bottom: ${(p) => p.theme.spacing.xl};
   flex-direction: column;
 
   #react-select-7-option-3 {

package/src/components/RestrictionsModal/CurrentAccessList/index.tsx

@@ -0,0 +1,74 @@
+import { useSelector } from "react-redux";
+
+import { Button } from "@ax/components";
+import type { IRole, IRootState, IUser } from "@ax/types";
+
+import RoleItem from "../RolesList/RoleItem";
+import UserItem from "../UsersList/UserItem";
+
+import * as S from "./style";
+
+const CurrentAccessList = (props: ICurrentAccessListProps): JSX.Element => {
+	const { restrictionType, currentAccessGrants, onEdit, users: allUsers } = props;
+	const roles = useSelector((state: IRootState) => state.users.roles);
+
+	const isRoles = restrictionType === "roles";
+	const itemIds = isRoles ? currentAccessGrants?.roles || [] : currentAccessGrants?.users || [];
+
+	// Filter users to show only those selected
+	const selectedUsers = allUsers.filter((user) => itemIds.includes(user.id!));
+
+	const getTitle = () => {
+		return isRoles ? (
+			<>
+				Only these roles <strong>can edit</strong> this page
+			</>
+		) : (
+			<>
+				Only these users <strong>can edit</strong> this page
+			</>
+		);
+	};
+
+	return (
+		<S.Wrapper>
+			<S.Content>
+				<S.Text>{getTitle()}</S.Text>
+				<S.List>
+					{isRoles ? (
+						<>
+							{(roles as IRole[])
+								.filter((role) => itemIds.includes(role.id))
+								.map((role) => (
+									<RoleItem key={role.id} role={role} selection={false} />
+								))}
+						</>
+					) : (
+						<>
+							{selectedUsers.map((user) => (
+								<UserItem key={user.id} user={user} selection={false} />
+							))}
+						</>
+					)}
+				</S.List>
+			</S.Content>
+			<S.Actions>
+				<Button type="button" onClick={onEdit}>
+					MANAGE USER ACCESS
+				</Button>
+			</S.Actions>
+		</S.Wrapper>
+	);
+};
+
+interface ICurrentAccessListProps {
+	restrictionType: "users" | "roles";
+	currentAccessGrants?: {
+		users?: number[];
+		roles?: number[];
+	};
+	onEdit: () => void;
+	users: IUser[];
+}
+
+export default CurrentAccessList;

package/src/components/RestrictionsModal/CurrentAccessList/style.tsx

@@ -0,0 +1,155 @@
+import { Row } from "@ax/components/TableList/TableItem/style";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+`;
+
+const Text = styled.div`
+	${(p) => p.theme.textStyle.uiM};
+	margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const List = styled.div`
+	flex: 1;
+	overflow-y: auto;
+	min-height: 0;
+
+	::-webkit-scrollbar {
+		-webkit-appearance: none;
+		width: 4px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		border-radius: 4px;
+		background-color: ${(p) => p.theme.colors.iconNonActive};
+	}
+`;
+
+const Content = styled.div`
+	flex: 1;
+	overflow-y: auto;
+	min-height: 0;
+	padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} 0 ${p.theme.spacing.m}`};
+
+	::-webkit-scrollbar {
+		-webkit-appearance: none;
+		width: 4px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		border-radius: 4px;
+		background-color: ${(p) => p.theme.colors.iconNonActive};
+	}
+`;
+
+const Actions = styled.div`
+	display: flex;
+	justify-content: flex-end;
+	flex-shrink: 0;
+	padding: ${(p) => p.theme.spacing.m};
+`;
+
+const ItemRow = styled(Row)`
+	display: flex;
+	align-items: center;
+	padding: ${(p) => `0 ${p.theme.spacing.s}`};
+	margin-bottom: ${(p) => p.theme.spacing.xxs};
+	height: 61px;
+`;
+
+const AvatarWrapper = styled.div`
+	padding-left: ${(p) => p.theme.spacing.xs};
+	padding-right: ${(p) => p.theme.spacing.xs};
+`;
+
+const UserInfo = styled.div`
+	display: flex;
+	flex-flow: column nowrap;
+	flex-grow: 1;
+	min-width: 0;
+	padding-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const UserName = styled.div`
+	${(p) => p.theme.textStyle.uiM};
+	font-weight: 600;
+	color: ${(p) => p.theme.colors.textHighEmphasis};
+	width: 100%;
+	min-width: 0;
+	> * {
+		min-width: 0;
+		max-width: 100%;
+	}
+`;
+
+const Name = styled.div`
+	width: 100%;
+	${(p) => p.theme.textStyle.uiM};
+	font-weight: 600;
+	color: ${(p) => p.theme.colors.textHighEmphasis};
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	display: block;
+	min-width: 0;
+`;
+
+const UserEmail = styled.div`
+	${(p) => p.theme.textStyle.uiXS};
+	color: ${(p) => p.theme.colors.textMediumEmphasis};
+	width: 100%;
+	min-width: 0;
+	> * {
+		min-width: 0;
+		max-width: 100%;
+	}
+`;
+
+const Email = styled.div`
+	width: 100%;
+	${(p) => p.theme.textStyle.uiXS};
+	color: ${(p) => p.theme.colors.textMediumEmphasis};
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	display: block;
+	min-width: 0;
+`;
+
+const RoleContent = styled.div`
+	display: flex;
+	flex-flow: column nowrap;
+	flex-grow: 1;
+	min-width: 0;
+`;
+
+const RoleName = styled.div`
+	margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const RoleDescription = styled.div`
+	${(p) => p.theme.textStyle.uiXS};
+	color: ${(p) => p.theme.colors.textMediumEmphasis};
+`;
+
+export {
+	Wrapper,
+	Content,
+	Text,
+	List,
+	Actions,
+	ItemRow,
+	AvatarWrapper,
+	UserInfo,
+	UserName,
+	Name,
+	UserEmail,
+	Email,
+	RoleContent,
+	RoleName,
+	RoleDescription,
+};

package/src/components/RestrictionsModal/OptionsStep/index.tsx

@@ -0,0 +1,55 @@
+import { Button, SelectionComponent } from "@ax/components";
+
+import * as S from "./style";
+
+const OptionsStep = (props: IOptionsStepProps): JSX.Element => {
+	const { restrictionType, onRestrictionTypeChange, onCancel, onNext } = props;
+
+	return (
+		<S.Wrapper>
+			<S.Text>
+				By default, <strong>all users</strong> have access to the page. However, you can manage access by{" "}
+				<strong>granting permissions to specific users or assigning a specific role.</strong>
+			</S.Text>
+
+			<S.OptionsGroup>
+				<SelectionComponent
+					name="restrictionType"
+					label="By users"
+					value="users"
+					isSelected={restrictionType === "users"}
+					onToggle={onRestrictionTypeChange}
+					description="Only the selected users can edit the page."
+					multi={false}
+				/>
+				<SelectionComponent
+					name="restrictionType"
+					label="By roles"
+					value="roles"
+					isSelected={restrictionType === "roles"}
+					onToggle={onRestrictionTypeChange}
+					description="Only users with a specific roles can edit the page."
+					multi={false}
+				/>
+			</S.OptionsGroup>
+
+			<S.Actions>
+				<Button type="button" buttonStyle="text" onClick={onCancel}>
+					Cancel
+				</Button>
+				<Button type="button" onClick={onNext}>
+					Manage users access
+				</Button>
+			</S.Actions>
+		</S.Wrapper>
+	);
+};
+
+interface IOptionsStepProps {
+	restrictionType: "users" | "roles";
+	onRestrictionTypeChange: (value: string) => void;
+	onCancel: () => void;
+	onNext: () => void;
+}
+
+export default OptionsStep;

package/src/components/RestrictionsModal/OptionsStep/style.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
+`;
+
+const Text = styled.div`
+	${(p) => p.theme.textStyle.uiM};
+`;
+
+const OptionsGroup = styled.div`
+	display: flex;
+	flex-direction: column;
+	gap: ${(p) => p.theme.spacing.xs};
+	margin: ${(p) => `${p.theme.spacing.m} 0`};
+`;
+
+const Actions = styled.div`
+	display: flex;
+	gap: ${(p) => p.theme.spacing.s};
+	justify-content: flex-end;
+	margin-top: auto;
+`;
+
+export { Wrapper, Text, OptionsGroup, Actions };