mirror of
https://github.com/docmost/docmost.git
synced 2026-06-11 02:36:56 +08:00
feat(ee): page-level access/permissions (#1971)
* Add page_hierarchy table * feat(ee): page-level permissions * pagination * rename migration fixes * fix * tabs * fix theme * cleanup * sync * page permissions notification * other fixes * sharing disbled * fix column nodes * toggle error handling
This commit is contained in:
Philip Okugbe
GitHub
@@ -11,7 +11,7 @@ export default function OssDetails() {
|
||||
withTableBorder
|
||||
>
|
||||
<Table.Caption>
|
||||
To unlock enterprise features like AI, SSO, MFA, Resolve comments, contact sales@docmost.com.
|
||||
To unlock enterprise features like SSO, AI, Page-level permissions, SSO, MFA, Resolve comments, contact sales@docmost.com.
|
||||
</Table.Caption>
|
||||
<Table.Tbody>
|
||||
<Table.Tr>
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
import { Group, Menu, Text, UnstyledButton } from "@mantine/core";
|
||||
import {
|
||||
IconChevronDown,
|
||||
IconLock,
|
||||
IconShieldLock,
|
||||
IconCheck,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import classes from "./page-permission.module.css";
|
||||
|
||||
type AccessLevel = "open" | "restricted";
|
||||
|
||||
type GeneralAccessSelectProps = {
|
||||
value: AccessLevel;
|
||||
onChange: (value: AccessLevel) => void;
|
||||
disabled?: boolean;
|
||||
hasInheritedRestriction?: boolean;
|
||||
};
|
||||
|
||||
export function GeneralAccessSelect({
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
hasInheritedRestriction,
|
||||
}: GeneralAccessSelectProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const isDirectlyRestricted = value === "restricted";
|
||||
const showInheritedState = hasInheritedRestriction && !isDirectlyRestricted;
|
||||
|
||||
const currentLabel = showInheritedState
|
||||
? t("Restricted by parent")
|
||||
: isDirectlyRestricted
|
||||
? t("Restricted")
|
||||
: t("Open");
|
||||
|
||||
const currentDescription = showInheritedState
|
||||
? t("Inherits restrictions from ancestor page")
|
||||
: isDirectlyRestricted
|
||||
? t("Only people listed below can access this page")
|
||||
: t("Everyone in this space can access");
|
||||
|
||||
const CurrentIcon = showInheritedState
|
||||
? IconShieldLock
|
||||
: isDirectlyRestricted
|
||||
? IconLock
|
||||
: IconShieldLock;
|
||||
|
||||
const accessOptions = [
|
||||
{
|
||||
value: "open" as const,
|
||||
label: hasInheritedRestriction ? t("Restricted by parent") : t("Open"),
|
||||
description: hasInheritedRestriction
|
||||
? t("Use only inherited restrictions")
|
||||
: t("No additional restrictions on this page"),
|
||||
icon: IconShieldLock,
|
||||
},
|
||||
{
|
||||
value: "restricted" as const,
|
||||
label: t("Restricted"),
|
||||
description: hasInheritedRestriction
|
||||
? t("Add restrictions on top of inherited")
|
||||
: t("Only specific people can access"),
|
||||
icon: IconLock,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Menu withArrow disabled={disabled}>
|
||||
<Menu.Target>
|
||||
<UnstyledButton className={classes.generalAccessBox} disabled={disabled}>
|
||||
<div
|
||||
className={`${classes.generalAccessIcon} ${isDirectlyRestricted || showInheritedState ? classes.generalAccessIconRestricted : ""}`}
|
||||
>
|
||||
<CurrentIcon size={18} stroke={1.5} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<Group gap={4}>
|
||||
<Text size="sm" fw={500}>
|
||||
{currentLabel}
|
||||
</Text>
|
||||
{!disabled && <IconChevronDown size={14} />}
|
||||
</Group>
|
||||
<Text size="xs" c="dimmed">
|
||||
{currentDescription}
|
||||
</Text>
|
||||
</div>
|
||||
</UnstyledButton>
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
{accessOptions.map((option) => (
|
||||
<Menu.Item
|
||||
key={option.value}
|
||||
onClick={() => onChange(option.value)}
|
||||
leftSection={<option.icon size={16} stroke={1.5} />}
|
||||
rightSection={
|
||||
option.value === value ? <IconCheck size={16} /> : null
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<Text size="sm">{option.label}</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{option.description}
|
||||
</Text>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { Menu, Text, UnstyledButton, Group } from "@mantine/core";
|
||||
import { IconChevronDown, IconCheck } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar";
|
||||
import { AutoTooltipText } from "@/components/ui/auto-tooltip-text";
|
||||
import { IconGroupCircle } from "@/components/icons/icon-people-circle";
|
||||
import { userAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { formatMemberCount } from "@/lib";
|
||||
import {
|
||||
IPagePermissionMember,
|
||||
PagePermissionRole,
|
||||
} from "@/ee/page-permission/types/page-permission.types";
|
||||
import {
|
||||
pagePermissionRoleData,
|
||||
getPagePermissionRoleLabel,
|
||||
} from "@/ee/page-permission/types/page-permission-role-data";
|
||||
import classes from "./page-permission.module.css";
|
||||
|
||||
type PagePermissionItemProps = {
|
||||
member: IPagePermissionMember;
|
||||
onRoleChange: (memberId: string, type: "user" | "group", role: string) => void;
|
||||
onRemove: (memberId: string, type: "user" | "group") => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export function PagePermissionItem({
|
||||
member,
|
||||
onRoleChange,
|
||||
onRemove,
|
||||
disabled,
|
||||
}: PagePermissionItemProps) {
|
||||
const { t } = useTranslation();
|
||||
const currentUser = useAtomValue(userAtom);
|
||||
const isCurrentUser = member.type === "user" && member.id === currentUser?.id;
|
||||
const roleLabel = getPagePermissionRoleLabel(member.role);
|
||||
|
||||
return (
|
||||
<div className={classes.permissionItem}>
|
||||
<div className={classes.permissionItemInfo}>
|
||||
{member.type === "user" && (
|
||||
<CustomAvatar avatarUrl={member.avatarUrl} name={member.name} />
|
||||
)}
|
||||
{member.type === "group" && <IconGroupCircle />}
|
||||
|
||||
<div className={classes.permissionItemDetails}>
|
||||
<AutoTooltipText
|
||||
fz="sm"
|
||||
fw={500}
|
||||
tooltipLabel={isCurrentUser ? `${member.name} (${t("You")})` : member.name}
|
||||
>
|
||||
{member.name}
|
||||
{isCurrentUser && <Text span c="dimmed"> ({t("You")})</Text>}
|
||||
</AutoTooltipText>
|
||||
<AutoTooltipText fz="xs" c="dimmed">
|
||||
{member.type === "user" ? member.email : formatMemberCount(member.memberCount, t)}
|
||||
</AutoTooltipText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={classes.permissionItemRole}>
|
||||
{isCurrentUser || disabled ? (
|
||||
<Text size="sm" c="dimmed">
|
||||
{t(roleLabel)}
|
||||
</Text>
|
||||
) : (
|
||||
<Menu withArrow position="bottom-end">
|
||||
<Menu.Target>
|
||||
<UnstyledButton>
|
||||
<Group gap={4}>
|
||||
<Text size="sm">{t(roleLabel)}</Text>
|
||||
<IconChevronDown size={14} />
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
{pagePermissionRoleData.map((role) => (
|
||||
<Menu.Item
|
||||
key={role.value}
|
||||
onClick={() => onRoleChange(member.id, member.type, role.value)}
|
||||
rightSection={
|
||||
role.value === member.role ? <IconCheck size={16} /> : null
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<Text size="sm">{t(role.label)}</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t(role.description)}
|
||||
</Text>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
))}
|
||||
<Menu.Divider />
|
||||
<Menu.Item
|
||||
color="red"
|
||||
onClick={() => onRemove(member.id, member.type)}
|
||||
>
|
||||
{t("Remove access")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
import { Center, Group, Loader, ScrollArea, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { userAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { PagePermissionRole } from "@/ee/page-permission/types/page-permission.types";
|
||||
import {
|
||||
usePagePermissionsQuery,
|
||||
useRemovePagePermissionMutation,
|
||||
useUpdatePagePermissionRoleMutation,
|
||||
} from "@/ee/page-permission/queries/page-permission-query";
|
||||
import { PagePermissionItem } from "@/ee/page-permission";
|
||||
import classes from "./page-permission.module.css";
|
||||
|
||||
type PagePermissionListProps = {
|
||||
pageId: string;
|
||||
canManage: boolean;
|
||||
onRemoveAll?: () => void;
|
||||
};
|
||||
|
||||
export function PagePermissionList({
|
||||
pageId,
|
||||
canManage,
|
||||
onRemoveAll,
|
||||
}: PagePermissionListProps) {
|
||||
const { t } = useTranslation();
|
||||
const currentUser = useAtomValue(userAtom);
|
||||
const updateRoleMutation = useUpdatePagePermissionRoleMutation();
|
||||
const removeMutation = useRemovePagePermissionMutation();
|
||||
|
||||
const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =
|
||||
usePagePermissionsQuery(pageId);
|
||||
|
||||
const sentinelRef = useRef<HTMLDivElement>(null);
|
||||
const viewportRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const sentinel = sentinelRef.current;
|
||||
if (!sentinel) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
|
||||
fetchNextPage();
|
||||
}
|
||||
},
|
||||
{ root: viewportRef.current, threshold: 0.1 },
|
||||
);
|
||||
|
||||
observer.observe(sentinel);
|
||||
return () => observer.disconnect();
|
||||
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
|
||||
|
||||
const handleRoleChange = async (
|
||||
memberId: string,
|
||||
type: "user" | "group",
|
||||
newRole: string,
|
||||
) => {
|
||||
await updateRoleMutation.mutateAsync({
|
||||
pageId,
|
||||
role: newRole as PagePermissionRole,
|
||||
...(type === "user" ? { userId: memberId } : { groupId: memberId }),
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemove = (memberId: string, type: "user" | "group") => {
|
||||
modals.openConfirmModal({
|
||||
title: t("Remove access"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t(
|
||||
"Are you sure you want to remove this member's access to the page?",
|
||||
)}
|
||||
</Text>
|
||||
),
|
||||
centered: true,
|
||||
labels: { confirm: t("Remove"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: async () => {
|
||||
await removeMutation.mutateAsync({
|
||||
pageId,
|
||||
...(type === "user"
|
||||
? { userIds: [memberId] }
|
||||
: { groupIds: [memberId] }),
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveAll = () => {
|
||||
modals.openConfirmModal({
|
||||
title: t("Remove all access"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t(
|
||||
"Are you sure you want to remove all specific access? This will make the page open to everyone in the space.",
|
||||
)}
|
||||
</Text>
|
||||
),
|
||||
centered: true,
|
||||
labels: { confirm: t("Remove all"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => onRemoveAll?.(),
|
||||
});
|
||||
};
|
||||
|
||||
const members = data?.pages.flatMap((page) => page.items) ?? [];
|
||||
|
||||
const sortedMembers = [...members].sort((a, b) => {
|
||||
if (a.type === "user" && a.id === currentUser?.id) return -1;
|
||||
if (b.type === "user" && b.id === currentUser?.id) return 1;
|
||||
if (a.type === "group" && b.type === "user") return -1;
|
||||
if (a.type === "user" && b.type === "group") return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Center py="md">
|
||||
<Loader size="sm" />
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
if (members.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Group justify="space-between" align="center">
|
||||
<Text size="sm" fw={500}>
|
||||
{t("People with access")}
|
||||
</Text>
|
||||
{canManage && members.length > 0 && (
|
||||
<Text className={classes.removeAllLink} onClick={handleRemoveAll}>
|
||||
{t("Remove all")}
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
<ScrollArea mah={250} viewportRef={viewportRef}>
|
||||
{sortedMembers.map((member) => (
|
||||
<PagePermissionItem
|
||||
key={`${member.type}-${member.id}`}
|
||||
member={member}
|
||||
onRoleChange={handleRoleChange}
|
||||
onRemove={handleRemove}
|
||||
disabled={!canManage}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div ref={sentinelRef} style={{ height: 1 }} />
|
||||
|
||||
{isFetchingNextPage && (
|
||||
<Center py="xs">
|
||||
<Loader size="xs" />
|
||||
</Center>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
} from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { IconArrowRight, IconLock, IconShieldLock } from "@tabler/icons-react";
|
||||
import { MultiMemberSelect } from "@/features/space/components/multi-member-select";
|
||||
import {
|
||||
IPageRestrictionInfo,
|
||||
PagePermissionRole,
|
||||
} from "@/ee/page-permission/types/page-permission.types";
|
||||
import {
|
||||
useAddPagePermissionMutation,
|
||||
useRestrictPageMutation,
|
||||
useUnrestrictPageMutation,
|
||||
} from "@/ee/page-permission/queries/page-permission-query";
|
||||
import { pagePermissionRoleData } from "@/ee/page-permission/types/page-permission-role-data";
|
||||
import { GeneralAccessSelect } from "@/ee/page-permission";
|
||||
import { PagePermissionList } from "@/ee/page-permission";
|
||||
import classes from "./page-permission.module.css";
|
||||
import { buildPageUrl } from "@/features/page/page.utils";
|
||||
|
||||
type PagePermissionTabProps = {
|
||||
pageId: string;
|
||||
restrictionInfo: IPageRestrictionInfo;
|
||||
};
|
||||
|
||||
export function PagePermissionTab({
|
||||
pageId,
|
||||
restrictionInfo,
|
||||
}: PagePermissionTabProps) {
|
||||
const { t } = useTranslation();
|
||||
const { spaceSlug } = useParams();
|
||||
const [memberIds, setMemberIds] = useState<string[]>([]);
|
||||
const [role, setRole] = useState<string>(PagePermissionRole.WRITER);
|
||||
|
||||
const restrictMutation = useRestrictPageMutation();
|
||||
const unrestrictMutation = useUnrestrictPageMutation();
|
||||
const addPermissionMutation = useAddPagePermissionMutation();
|
||||
|
||||
const hasInheritedRestriction = restrictionInfo.hasInheritedRestriction;
|
||||
const hasDirectRestriction = restrictionInfo.hasDirectRestriction;
|
||||
const canManage = restrictionInfo.userAccess.canManage;
|
||||
|
||||
const handleDirectAccessChange = async (value: "open" | "restricted") => {
|
||||
if (value === "restricted" && !hasDirectRestriction) {
|
||||
await restrictMutation.mutateAsync(pageId);
|
||||
} else if (value === "open" && hasDirectRestriction) {
|
||||
await unrestrictMutation.mutateAsync(pageId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddMembers = async () => {
|
||||
if (memberIds.length === 0) return;
|
||||
|
||||
const userIds = memberIds
|
||||
.filter((id) => id.startsWith("user-"))
|
||||
.map((id) => id.replace("user-", ""));
|
||||
|
||||
const groupIds = memberIds
|
||||
.filter((id) => id.startsWith("group-"))
|
||||
.map((id) => id.replace("group-", ""));
|
||||
|
||||
await addPermissionMutation.mutateAsync({
|
||||
pageId,
|
||||
role: role as PagePermissionRole,
|
||||
...(userIds.length > 0 && { userIds }),
|
||||
...(groupIds.length > 0 && { groupIds }),
|
||||
});
|
||||
|
||||
setMemberIds([]);
|
||||
};
|
||||
|
||||
const handleRemoveAll = async () => {
|
||||
await unrestrictMutation.mutateAsync(pageId);
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack gap="md">
|
||||
{hasInheritedRestriction && (
|
||||
<Paper className={classes.inheritedSection} p="sm" radius="sm">
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
<ThemeIcon
|
||||
size="lg"
|
||||
radius="sm"
|
||||
variant="light"
|
||||
color="orange"
|
||||
>
|
||||
<IconShieldLock size={18} stroke={1.5} />
|
||||
</ThemeIcon>
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Text size="sm" fw={500}>
|
||||
{t("Inherited restriction")}
|
||||
</Text>
|
||||
<Group gap={4}>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Access limited by")}
|
||||
</Text>
|
||||
{restrictionInfo.inheritedFrom && (
|
||||
<Link
|
||||
to={buildPageUrl(
|
||||
spaceSlug,
|
||||
restrictionInfo.inheritedFrom.slugId,
|
||||
restrictionInfo.inheritedFrom.title,
|
||||
)}
|
||||
style={{ textDecoration: "none" }}
|
||||
>
|
||||
<Group gap={2}>
|
||||
<Text size="xs" fw={500} c="blue">
|
||||
{restrictionInfo.inheritedFrom.title || t("Untitled")}
|
||||
</Text>
|
||||
<IconArrowRight size={12} color="var(--mantine-color-blue-6)" />
|
||||
</Group>
|
||||
</Link>
|
||||
)}
|
||||
</Group>
|
||||
</Box>
|
||||
</Group>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
<Box>
|
||||
<GeneralAccessSelect
|
||||
value={hasDirectRestriction ? "restricted" : "open"}
|
||||
onChange={handleDirectAccessChange}
|
||||
disabled={!canManage}
|
||||
hasInheritedRestriction={hasInheritedRestriction}
|
||||
/>
|
||||
{!hasDirectRestriction && !hasInheritedRestriction && (
|
||||
<Text size="xs" c="dimmed" mt={4}>
|
||||
{t("Restrict access to control who can view and edit this page")}
|
||||
</Text>
|
||||
)}
|
||||
{!hasDirectRestriction && hasInheritedRestriction && (
|
||||
<Text size="xs" c="dimmed" mt={4}>
|
||||
{t("Add additional restrictions specific to this page")}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{hasDirectRestriction && (
|
||||
<>
|
||||
<Divider />
|
||||
|
||||
{canManage && (
|
||||
<Group gap="xs" align="flex-end">
|
||||
<Box style={{ flex: 1 }}>
|
||||
<MultiMemberSelect value={memberIds} onChange={setMemberIds} />
|
||||
</Box>
|
||||
<Select
|
||||
data={pagePermissionRoleData.map((r) => ({
|
||||
label: t(r.label),
|
||||
value: r.value,
|
||||
}))}
|
||||
value={role}
|
||||
onChange={(value) => value && setRole(value)}
|
||||
allowDeselect={false}
|
||||
variant="filled"
|
||||
w={120}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleAddMembers}
|
||||
disabled={memberIds.length === 0}
|
||||
loading={addPermissionMutation.isPending}
|
||||
>
|
||||
{t("Add")}
|
||||
</Button>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
<PagePermissionList
|
||||
pageId={pageId}
|
||||
canManage={canManage}
|
||||
onRemoveAll={handleRemoveAll}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
.generalAccessBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--mantine-spacing-sm);
|
||||
padding: var(--mantine-spacing-xs) 0;
|
||||
}
|
||||
|
||||
.generalAccessIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
|
||||
@mixin light {
|
||||
background-color: var(--mantine-color-gray-1);
|
||||
}
|
||||
@mixin dark {
|
||||
background-color: var(--mantine-color-dark-5);
|
||||
}
|
||||
}
|
||||
|
||||
.generalAccessIconRestricted {
|
||||
@mixin light {
|
||||
background-color: var(--mantine-color-red-0);
|
||||
color: var(--mantine-color-red-6);
|
||||
}
|
||||
@mixin dark {
|
||||
background-color: rgba(250, 82, 82, 0.1);
|
||||
color: var(--mantine-color-red-5);
|
||||
}
|
||||
}
|
||||
|
||||
.permissionItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--mantine-spacing-xs) 0;
|
||||
gap: var(--mantine-spacing-sm);
|
||||
}
|
||||
|
||||
.permissionItemInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--mantine-spacing-sm);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.permissionItemDetails {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.permissionItemRole {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatarStack {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatarStackItem {
|
||||
margin-left: -8px;
|
||||
border: 2px solid var(--mantine-color-body);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatarStackItem:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.specificAccessHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--mantine-spacing-xs);
|
||||
margin-top: var(--mantine-spacing-md);
|
||||
margin-bottom: var(--mantine-spacing-xs);
|
||||
}
|
||||
|
||||
.removeAllLink {
|
||||
cursor: pointer;
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
|
||||
@mixin light {
|
||||
color: var(--mantine-color-gray-6);
|
||||
}
|
||||
@mixin dark {
|
||||
color: var(--mantine-color-dark-2);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.inheritedInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--mantine-spacing-xs);
|
||||
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
margin-bottom: var(--mantine-spacing-sm);
|
||||
|
||||
@mixin light {
|
||||
background-color: var(--mantine-color-gray-0);
|
||||
}
|
||||
@mixin dark {
|
||||
background-color: var(--mantine-color-dark-6);
|
||||
}
|
||||
}
|
||||
|
||||
.inheritedSection {
|
||||
@mixin light {
|
||||
background-color: var(--mantine-color-orange-0);
|
||||
border: 1px solid var(--mantine-color-orange-2);
|
||||
}
|
||||
@mixin dark {
|
||||
background-color: rgba(255, 146, 43, 0.08);
|
||||
border: 1px solid rgba(255, 146, 43, 0.2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Indicator,
|
||||
Loader,
|
||||
Modal,
|
||||
Stack,
|
||||
Tabs,
|
||||
Text,
|
||||
Center,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { IconWorld, IconLock } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { extractPageSlugId } from "@/lib";
|
||||
import { usePageQuery } from "@/features/page/queries/page-query";
|
||||
import { usePageRestrictionInfoQuery } from "@/ee/page-permission/queries/page-permission-query";
|
||||
import { PagePermissionTab } from "@/ee/page-permission";
|
||||
import { PublishTab } from "./publish-tab";
|
||||
import { useShareForPageQuery } from "@/features/share/queries/share-query";
|
||||
import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
|
||||
import { useAtom } from "jotai";
|
||||
import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { useSpaceQuery } from "@/features/space/queries/space-query";
|
||||
|
||||
type PageShareModalProps = {
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
export function PageShareModal({ readOnly }: PageShareModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const { pageSlug, spaceSlug } = useParams();
|
||||
const pageSlugId = extractPageSlugId(pageSlug);
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const isCloudEE = useIsCloudEE();
|
||||
const [activeTab, setActiveTab] = useState<string | null>(
|
||||
isCloudEE ? "access" : "publish",
|
||||
);
|
||||
|
||||
const [workspace] = useAtom(workspaceAtom);
|
||||
const { data: space } = useSpaceQuery(spaceSlug);
|
||||
const workspaceSharingDisabled = workspace?.settings?.sharing?.disabled === true;
|
||||
const spaceSharingDisabled = space?.settings?.sharing?.disabled === true;
|
||||
|
||||
const { data: page } = usePageQuery({ pageId: pageSlugId });
|
||||
const pageId = page?.id;
|
||||
const isRestricted = page?.permissions?.hasRestriction ?? false;
|
||||
|
||||
const { data: share } = useShareForPageQuery(pageId);
|
||||
const isPubliclyShared = !!share;
|
||||
|
||||
const { data: restrictionInfo, isLoading: restrictionLoading } =
|
||||
usePageRestrictionInfoQuery(opened && isCloudEE ? pageId : undefined);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
style={{ border: "none" }}
|
||||
size="compact-sm"
|
||||
leftSection={
|
||||
isRestricted ? (
|
||||
<Indicator color="red" offset={5} withBorder>
|
||||
<IconLock size={20} stroke={1.5} />
|
||||
</Indicator>
|
||||
) : isPubliclyShared ? (
|
||||
<Indicator color="green" offset={5} withBorder>
|
||||
<IconWorld size={20} stroke={1.5} />
|
||||
</Indicator>
|
||||
) : null
|
||||
}
|
||||
variant="default"
|
||||
onClick={open}
|
||||
>
|
||||
{t("Share")}
|
||||
</Button>
|
||||
|
||||
<Modal opened={opened} onClose={close} title={t("Share")} size={600}>
|
||||
<Tabs value={activeTab} color="dark" onChange={setActiveTab}>
|
||||
<Tabs.List mb="md">
|
||||
<Tabs.Tab value="access">{t("Access")}</Tabs.Tab>
|
||||
<Tabs.Tab
|
||||
value="publish"
|
||||
rightSection={
|
||||
isPubliclyShared ? (
|
||||
<Indicator color="green" size={8} processing />
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{t("Publish")}
|
||||
</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Panel value="access">
|
||||
{!isCloudEE ? (
|
||||
<Stack align="center" py="md">
|
||||
<IconLock size={20} stroke={1.5} />
|
||||
<Text size="sm" ta="center" fw={500}>
|
||||
{t("Page permissions")}
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" ta="center">
|
||||
{t(
|
||||
"Control who can view and edit individual pages. Available with an enterprise license.",
|
||||
)}
|
||||
</Text>
|
||||
</Stack>
|
||||
) : restrictionLoading || !pageId || !restrictionInfo ? (
|
||||
<Center py="xl">
|
||||
<Loader size="sm" />
|
||||
</Center>
|
||||
) : (
|
||||
<PagePermissionTab
|
||||
pageId={pageId}
|
||||
restrictionInfo={restrictionInfo}
|
||||
/>
|
||||
)}
|
||||
</Tabs.Panel>
|
||||
|
||||
<Tabs.Panel value="publish">
|
||||
<PublishTab
|
||||
pageId={pageId}
|
||||
readOnly={readOnly}
|
||||
isRestricted={isRestricted}
|
||||
workspaceSharingDisabled={workspaceSharingDisabled}
|
||||
spaceSharingDisabled={spaceSharingDisabled}
|
||||
/>
|
||||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,254 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
ActionIcon,
|
||||
Anchor,
|
||||
Button,
|
||||
Group,
|
||||
Stack,
|
||||
Switch,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { IconExternalLink, IconLock } from "@tabler/icons-react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { getPageIcon } from "@/lib";
|
||||
import CopyTextButton from "@/components/common/copy";
|
||||
import { getAppUrl, isCloud } from "@/lib/config";
|
||||
import { buildPageUrl } from "@/features/page/page.utils";
|
||||
import {
|
||||
useCreateShareMutation,
|
||||
useDeleteShareMutation,
|
||||
useShareForPageQuery,
|
||||
useUpdateShareMutation,
|
||||
} from "@/features/share/queries/share-query";
|
||||
import useTrial from "@/ee/hooks/use-trial";
|
||||
|
||||
type PublishTabProps = {
|
||||
pageId: string;
|
||||
readOnly?: boolean;
|
||||
isRestricted?: boolean;
|
||||
workspaceSharingDisabled?: boolean;
|
||||
spaceSharingDisabled?: boolean;
|
||||
};
|
||||
|
||||
export function PublishTab({ pageId, readOnly, isRestricted, workspaceSharingDisabled, spaceSharingDisabled }: PublishTabProps) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const { pageSlug, spaceSlug } = useParams();
|
||||
const { isTrial } = useTrial();
|
||||
|
||||
const { data: share } = useShareForPageQuery(pageId);
|
||||
const createShareMutation = useCreateShareMutation();
|
||||
const updateShareMutation = useUpdateShareMutation();
|
||||
const deleteShareMutation = useDeleteShareMutation();
|
||||
|
||||
const pageIsShared = share && share.level === 0;
|
||||
const isDescendantShared = share && share.level > 0;
|
||||
|
||||
const publicLink = `${getAppUrl()}/share/${share?.key}/p/${pageSlug}`;
|
||||
|
||||
const [isPagePublic, setIsPagePublic] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsPagePublic(!!share);
|
||||
}, [share, pageId]);
|
||||
|
||||
const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = event.currentTarget.checked;
|
||||
|
||||
if (value) {
|
||||
createShareMutation.mutateAsync({
|
||||
pageId: pageId,
|
||||
includeSubPages: true,
|
||||
searchIndexing: false,
|
||||
});
|
||||
setIsPagePublic(value);
|
||||
} else {
|
||||
if (share && share.id) {
|
||||
deleteShareMutation.mutateAsync(share.id);
|
||||
setIsPagePublic(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubPagesChange = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>,
|
||||
) => {
|
||||
const value = event.currentTarget.checked;
|
||||
updateShareMutation.mutateAsync({
|
||||
shareId: share.id,
|
||||
includeSubPages: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleIndexSearchChange = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>,
|
||||
) => {
|
||||
const value = event.currentTarget.checked;
|
||||
updateShareMutation.mutateAsync({
|
||||
shareId: share.id,
|
||||
searchIndexing: value,
|
||||
});
|
||||
};
|
||||
|
||||
const shareLink = useMemo(
|
||||
() => (
|
||||
<Group my="sm" gap={4} wrap="nowrap">
|
||||
<TextInput
|
||||
variant="filled"
|
||||
value={publicLink}
|
||||
readOnly
|
||||
rightSection={<CopyTextButton text={publicLink} />}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<ActionIcon
|
||||
component="a"
|
||||
variant="default"
|
||||
target="_blank"
|
||||
href={publicLink}
|
||||
size="sm"
|
||||
>
|
||||
<IconExternalLink size={16} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
),
|
||||
[publicLink],
|
||||
);
|
||||
|
||||
if (isCloud() && isTrial) {
|
||||
return (
|
||||
<Stack align="center" py="md">
|
||||
<IconLock size={20} stroke={1.5} />
|
||||
<Text size="sm" ta="center" fw={500}>
|
||||
{t("Upgrade to share pages")}
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" ta="center">
|
||||
{t(
|
||||
"Page sharing is available on paid plans. Upgrade to share your pages publicly.",
|
||||
)}
|
||||
</Text>
|
||||
<Button size="xs" onClick={() => navigate("/settings/billing")}>
|
||||
{t("Upgrade Plan")}
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
if (workspaceSharingDisabled || spaceSharingDisabled) {
|
||||
return (
|
||||
<Stack align="center" py="md">
|
||||
<IconLock size={20} stroke={1.5} />
|
||||
<Text size="sm" ta="center" fw={500}>
|
||||
{t("Public sharing is disabled")}
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" ta="center">
|
||||
{workspaceSharingDisabled
|
||||
? t("Public sharing has been disabled at the workspace level.")
|
||||
: t("Public sharing has been disabled for this space.")}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
if (isRestricted) {
|
||||
return (
|
||||
<Stack align="center" py="md">
|
||||
<IconLock size={20} stroke={1.5} />
|
||||
<Text size="sm" ta="center" fw={500}>
|
||||
{t("Restricted page")}
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" ta="center">
|
||||
{t("Restricted pages cannot be shared publicly.")}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
if (isDescendantShared) {
|
||||
return (
|
||||
<Stack gap="sm">
|
||||
<Text size="sm">{t("Inherits public sharing from")}</Text>
|
||||
<Anchor
|
||||
size="sm"
|
||||
underline="never"
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
color: "var(--mantine-color-text)",
|
||||
}}
|
||||
component={Link}
|
||||
to={buildPageUrl(
|
||||
spaceSlug,
|
||||
share.sharedPage.slugId,
|
||||
share.sharedPage.title,
|
||||
)}
|
||||
>
|
||||
<Group gap="4" wrap="nowrap">
|
||||
{getPageIcon(share.sharedPage.icon)}
|
||||
<Text fz="sm" fw={500} lineClamp={1}>
|
||||
{share.sharedPage.title || t("untitled")}
|
||||
</Text>
|
||||
</Group>
|
||||
</Anchor>
|
||||
{shareLink}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack gap="sm">
|
||||
<Group justify="space-between" wrap="nowrap" gap="xl">
|
||||
<div>
|
||||
<Text size="sm">
|
||||
{isPagePublic ? t("Shared to web") : t("Share to web")}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{isPagePublic
|
||||
? t("Anyone with the link can view this page")
|
||||
: t("Make this page publicly accessible")}
|
||||
</Text>
|
||||
</div>
|
||||
<Switch
|
||||
onChange={handleChange}
|
||||
checked={isPagePublic}
|
||||
disabled={readOnly}
|
||||
size="xs"
|
||||
/>
|
||||
</Group>
|
||||
|
||||
{pageIsShared && (
|
||||
<>
|
||||
{shareLink}
|
||||
<Group justify="space-between" wrap="nowrap" gap="xl">
|
||||
<div>
|
||||
<Text size="sm">{t("Include sub-pages")}</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Make sub-pages public too")}
|
||||
</Text>
|
||||
</div>
|
||||
<Switch
|
||||
onChange={handleSubPagesChange}
|
||||
checked={share.includeSubPages}
|
||||
size="xs"
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</Group>
|
||||
<Group justify="space-between" wrap="nowrap" gap="xl">
|
||||
<div>
|
||||
<Text size="sm">{t("Search engine indexing")}</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Allow search engines to index page")}
|
||||
</Text>
|
||||
</div>
|
||||
<Switch
|
||||
onChange={handleIndexSearchChange}
|
||||
checked={share.searchIndexing}
|
||||
size="xs"
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</Group>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { useSpaceAbility } from "@/features/space/permissions/use-space-ability";
|
||||
import {
|
||||
SpaceCaslAction,
|
||||
SpaceCaslSubject,
|
||||
} from "@/features/space/permissions/permissions.type";
|
||||
import { usePageRestrictionInfoQuery } from "@/ee/page-permission/queries/page-permission-query";
|
||||
|
||||
export function usePagePermission(pageId: string, spaceRules: any) {
|
||||
const spaceAbility = useSpaceAbility(spaceRules);
|
||||
const { data: restrictionInfo, isLoading } =
|
||||
usePageRestrictionInfoQuery(pageId);
|
||||
|
||||
if (isLoading || !restrictionInfo) {
|
||||
return { canEdit: false, restrictionInfo: undefined };
|
||||
}
|
||||
|
||||
const hasRestriction =
|
||||
restrictionInfo.hasDirectRestriction ||
|
||||
restrictionInfo.hasInheritedRestriction;
|
||||
|
||||
const canEdit = hasRestriction
|
||||
? (restrictionInfo.userAccess?.canEdit ?? false)
|
||||
: spaceAbility.can(SpaceCaslAction.Manage, SpaceCaslSubject.Page);
|
||||
|
||||
return { canEdit, restrictionInfo };
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export * from "./components/page-share-modal";
|
||||
export * from "./components/page-permission-tab";
|
||||
export * from "./components/publish-tab";
|
||||
export * from "./components/page-permission-list";
|
||||
export * from "./components/page-permission-item";
|
||||
export * from "./components/general-access-select";
|
||||
export * from "./hooks/use-page-permission";
|
||||
export * from "./queries/page-permission-query";
|
||||
export * from "./services/page-permission-service";
|
||||
export * from "./types/page-permission.types";
|
||||
export * from "./types/page-permission-role-data";
|
||||
@@ -0,0 +1,175 @@
|
||||
import {
|
||||
keepPreviousData,
|
||||
useInfiniteQuery,
|
||||
useMutation,
|
||||
useQuery,
|
||||
useQueryClient,
|
||||
UseQueryResult,
|
||||
} from "@tanstack/react-query";
|
||||
import {
|
||||
IAddPagePermission,
|
||||
IPageRestrictionInfo,
|
||||
IRemovePagePermission,
|
||||
IUpdatePagePermissionRole,
|
||||
} from "@/ee/page-permission/types/page-permission.types";
|
||||
import {
|
||||
addPagePermission,
|
||||
getPagePermissions,
|
||||
getPageRestrictionInfo,
|
||||
removePagePermission,
|
||||
restrictPage,
|
||||
unrestrictPage,
|
||||
updatePagePermissionRole,
|
||||
} from "@/ee/page-permission/services/page-permission-service";
|
||||
import { IPage } from "@/features/page/types/page.types";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export function usePageRestrictionInfoQuery(
|
||||
pageId: string | undefined,
|
||||
): UseQueryResult<IPageRestrictionInfo, Error> {
|
||||
return useQuery({
|
||||
queryKey: ["page-restriction-info", pageId],
|
||||
queryFn: () => getPageRestrictionInfo(pageId),
|
||||
enabled: !!pageId,
|
||||
});
|
||||
}
|
||||
|
||||
export function usePagePermissionsQuery(pageId: string) {
|
||||
return useInfiniteQuery({
|
||||
queryKey: ["page-permissions", pageId],
|
||||
queryFn: ({ pageParam }) => getPagePermissions(pageId, pageParam),
|
||||
enabled: !!pageId,
|
||||
//gcTime: 5000,
|
||||
placeholderData: keepPreviousData,
|
||||
initialPageParam: undefined as string | undefined,
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
function updatePageRestrictionCache(
|
||||
queryClient: ReturnType<typeof useQueryClient>,
|
||||
pageId: string,
|
||||
hasRestriction: boolean,
|
||||
) {
|
||||
queryClient.setQueriesData<IPage>(
|
||||
{ queryKey: ["pages"] },
|
||||
(old) => {
|
||||
if (old?.id === pageId) {
|
||||
return {
|
||||
...old,
|
||||
permissions: { ...old.permissions, hasRestriction },
|
||||
};
|
||||
}
|
||||
return old;
|
||||
},
|
||||
);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["page-restriction-info", pageId],
|
||||
});
|
||||
queryClient.removeQueries({
|
||||
queryKey: ["page-permissions", pageId],
|
||||
});
|
||||
}
|
||||
|
||||
export function useRestrictPageMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<void, Error, string>({
|
||||
mutationFn: (pageId) => restrictPage(pageId),
|
||||
onSuccess: (_, pageId) => {
|
||||
updatePageRestrictionCache(queryClient, pageId, true);
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to restrict page"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUnrestrictPageMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<void, Error, string>({
|
||||
mutationFn: (pageId) => unrestrictPage(pageId),
|
||||
onSuccess: (_, pageId) => {
|
||||
updatePageRestrictionCache(queryClient, pageId, false);
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to remove page restriction"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useAddPagePermissionMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<void, Error, IAddPagePermission>({
|
||||
mutationFn: (data) => addPagePermission(data),
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["page-permissions", variables.pageId],
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to add permission"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useRemovePagePermissionMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<void, Error, IRemovePagePermission>({
|
||||
mutationFn: (data) => removePagePermission(data),
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["page-permissions", variables.pageId],
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to remove permission"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdatePagePermissionRoleMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<void, Error, IUpdatePagePermissionRole>({
|
||||
mutationFn: (data) => updatePagePermissionRole(data),
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.refetchQueries({
|
||||
queryKey: ["page-permissions", variables.pageId],
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to update permission"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import api from "@/lib/api-client";
|
||||
import { IPagination } from "@/lib/types";
|
||||
import {
|
||||
IAddPagePermission,
|
||||
IPagePermissionMember,
|
||||
IPageRestrictionInfo,
|
||||
IRemovePagePermission,
|
||||
IUpdatePagePermissionRole,
|
||||
} from "@/ee/page-permission/types/page-permission.types";
|
||||
|
||||
export async function restrictPage(pageId: string): Promise<void> {
|
||||
await api.post("/pages/restrict", { pageId });
|
||||
}
|
||||
|
||||
export async function addPagePermission(
|
||||
data: IAddPagePermission,
|
||||
): Promise<void> {
|
||||
await api.post("/pages/add-permission", data);
|
||||
}
|
||||
|
||||
export async function removePagePermission(
|
||||
data: IRemovePagePermission,
|
||||
): Promise<void> {
|
||||
await api.post("/pages/remove-permission", data);
|
||||
}
|
||||
|
||||
export async function updatePagePermissionRole(
|
||||
data: IUpdatePagePermissionRole,
|
||||
): Promise<void> {
|
||||
await api.post("/pages/update-permission", data);
|
||||
}
|
||||
|
||||
export async function unrestrictPage(pageId: string): Promise<void> {
|
||||
await api.post("/pages/remove-restriction", { pageId });
|
||||
}
|
||||
|
||||
export async function getPagePermissions(
|
||||
pageId: string,
|
||||
cursor?: string,
|
||||
): Promise<IPagination<IPagePermissionMember>> {
|
||||
const req = await api.post<IPagination<IPagePermissionMember>>(
|
||||
"/pages/permissions",
|
||||
{ pageId, ...(cursor && { cursor }) },
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getPageRestrictionInfo(
|
||||
pageId: string,
|
||||
): Promise<IPageRestrictionInfo> {
|
||||
const req = await api.post<IPageRestrictionInfo>("/pages/permission-info", {
|
||||
pageId,
|
||||
});
|
||||
return req.data;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { IRoleData } from "@/lib/types";
|
||||
import { PagePermissionRole } from "./page-permission.types";
|
||||
|
||||
export const pagePermissionRoleData: IRoleData[] = [
|
||||
{
|
||||
label: "Can edit",
|
||||
value: PagePermissionRole.WRITER,
|
||||
description: "Can edit page and manage access",
|
||||
},
|
||||
{
|
||||
label: "Can view",
|
||||
value: PagePermissionRole.READER,
|
||||
description: "Can only view page",
|
||||
},
|
||||
];
|
||||
|
||||
export function getPagePermissionRoleLabel(value: string): string | undefined {
|
||||
const role = pagePermissionRoleData.find((item) => item.value === value);
|
||||
return role ? role.label : undefined;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
export enum PagePermissionRole {
|
||||
READER = "reader",
|
||||
WRITER = "writer",
|
||||
}
|
||||
|
||||
export type IAddPagePermission = {
|
||||
pageId: string;
|
||||
role: PagePermissionRole;
|
||||
userIds?: string[];
|
||||
groupIds?: string[];
|
||||
};
|
||||
|
||||
export type IRemovePagePermission = {
|
||||
pageId: string;
|
||||
userIds?: string[];
|
||||
groupIds?: string[];
|
||||
};
|
||||
|
||||
export type IUpdatePagePermissionRole = {
|
||||
pageId: string;
|
||||
role: PagePermissionRole;
|
||||
userId?: string;
|
||||
groupId?: string;
|
||||
};
|
||||
|
||||
export type IPageRestrictionInfo = {
|
||||
restrictionId?: string;
|
||||
hasDirectRestriction: boolean;
|
||||
hasInheritedRestriction: boolean;
|
||||
inheritedFrom?: {
|
||||
id: string;
|
||||
slugId: string;
|
||||
title: string;
|
||||
};
|
||||
userAccess: {
|
||||
canView: boolean;
|
||||
canEdit: boolean;
|
||||
canManage: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
type IPagePermissionBase = {
|
||||
id: string;
|
||||
name: string;
|
||||
role: string;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
export type IPagePermissionUser = IPagePermissionBase & {
|
||||
type: "user";
|
||||
email: string;
|
||||
avatarUrl: string | null;
|
||||
};
|
||||
|
||||
export type IPagePermissionGroup = IPagePermissionBase & {
|
||||
type: "group";
|
||||
memberCount: number;
|
||||
isDefault: boolean;
|
||||
};
|
||||
|
||||
export type IPagePermissionMember = IPagePermissionUser | IPagePermissionGroup;
|
||||
Reference in New Issue
Block a user