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
2026-05-17 06:44:05 +08:00 · 2026-02-26 19:49:10 +00:00
parent 22f33bab7c
commit 59e945562d
75 changed files with 4235 additions and 363 deletions
@@ -17,11 +17,6 @@ import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
 import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
 import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
-import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
-import {
-  SpaceCaslAction,
-  SpaceCaslSubject,
-} from "@/features/space/permissions/permissions.type.ts";

 function CommentListWithTabs() {
  const { t } = useTranslation();
@@ -38,14 +33,7 @@ function CommentListWithTabs() {
  const isCloudEE = useIsCloudEE();
  const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);

-  const spaceRules = space?.membership?.permissions;
-  const spaceAbility = useSpaceAbility(spaceRules);
-
-
-  const canComment: boolean = spaceAbility.can(
-    SpaceCaslAction.Manage,
-    SpaceCaslSubject.Page
-  );
+  const canComment = page?.permissions?.canEdit ?? false;

  // Separate active and resolved comments
  const { activeComments, resolvedComments } = useMemo(() => {
@@ -54,14 +42,14 @@ function CommentListWithTabs() {
    }

    const parentComments = comments.items.filter(
-      (comment: IComment) => comment.parentCommentId === null
+      (comment: IComment) => comment.parentCommentId === null,
    );

    const active = parentComments.filter(
-      (comment: IComment) => !comment.resolvedAt
+      (comment: IComment) => !comment.resolvedAt,
    );
    const resolved = parentComments.filter(
-      (comment: IComment) => comment.resolvedAt
+      (comment: IComment) => comment.resolvedAt,
    );

    return { activeComments: active, resolvedComments: resolved };
@@ -89,7 +77,7 @@ function CommentListWithTabs() {
        setIsLoading(false);
      }
    },
-    [createCommentMutation, page?.id]
+    [createCommentMutation, page?.id],
  );

  const renderComments = useCallback(
@@ -131,7 +119,7 @@ function CommentListWithTabs() {
        )}
      </Paper>
    ),
-    [comments, handleAddReply, isLoading, space?.membership?.role]
+    [comments, handleAddReply, isLoading, space?.membership?.role],
  );

  if (isCommentsLoading) {
@@ -199,7 +187,14 @@ function CommentListWithTabs() {
  }

  return (
-    <div style={{ height: "85vh", display: "flex", flexDirection: "column", marginTop: '-15px' }}>
+    <div
+      style={{
+        height: "85vh",
+        display: "flex",
+        flexDirection: "column",
+        marginTop: "-15px",
+      }}
+    >
      <Tabs defaultValue="open" variant="default" style={{ flex: "0 0 auto" }}>
        <Tabs.List justify="center">
          <Tabs.Tab
@@ -273,9 +268,9 @@ const ChildComments = ({
  const getChildComments = useCallback(
    (parentId: string) =>
      comments.items.filter(
-        (comment: IComment) => comment.parentCommentId === parentId
+        (comment: IComment) => comment.parentCommentId === parentId,
      ),
-    [comments.items]
+    [comments.items],
  );

  return (
@@ -171,11 +171,14 @@ export function TitleEditor({
  }, [pageId]);

  useEffect(() => {
-    // honor user default page edit mode preference
-    if (userPageEditMode && titleEditor && editable) {
-      if (userPageEditMode === PageEditMode.Edit) {
-        titleEditor.setEditable(true);
-      } else if (userPageEditMode === PageEditMode.Read) {
+    if (titleEditor) {
+      if (userPageEditMode && editable) {
+        if (userPageEditMode === PageEditMode.Edit) {
+          titleEditor.setEditable(true);
+        } else if (userPageEditMode === PageEditMode.Read) {
+          titleEditor.setEditable(false);
+        }
+      } else {
        titleEditor.setEditable(false);
      }
    }
@@ -46,6 +46,10 @@ export function NotificationItem({
        return t("resolved a comment");
      case "page.user_mention":
        return t("mentioned you on a page");
+      case "page.permission_granted":
+        return notification.data?.role === "writer"
+          ? t("gave you edit access to a page")
+          : t("gave you view access to a page");
      default:
        return "";
    }
@@ -2,7 +2,8 @@ export type NotificationType =
  | "comment.user_mention"
  | "comment.created"
  | "comment.resolved"
-  | "page.user_mention";
+  | "page.user_mention"
+  | "page.permission_granted";

 export type INotification = {
  id: string;
@@ -39,7 +39,7 @@ import { formattedDate } from "@/lib/time.ts";
 import { PageStateSegmentedControl } from "@/features/user/components/page-state-pref.tsx";
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
-import ShareModal from "@/features/share/components/share-modal.tsx";
+import { PageShareModal } from "@/ee/page-permission";

 interface PageHeaderMenuProps {
  readOnly?: boolean;
@@ -75,7 +75,7 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {

      {!readOnly && <PageStateSegmentedControl size="xs" />}

-      <ShareModal readOnly={readOnly} />
+      <PageShareModal readOnly={readOnly} />

      <Tooltip label={t("Comments")} openDelay={250} withArrow>
        <ActionIcon
@@ -53,11 +53,7 @@ import {
 import { IPage, SidebarPagesParams } from "@/features/page/types/page.types.ts";
 import { queryClient } from "@/main.tsx";
 import { OpenMap } from "react-arborist/dist/main/state/open-slice";
-import {
-  useDisclosure,
-  useElementSize,
-  useMergedRef,
-} from "@mantine/hooks";
+import { useDisclosure, useElementSize, useMergedRef } from "@mantine/hooks";
 import { useClipboard } from "@/hooks/use-clipboard";
 import { dfs } from "react-arborist/dist/module/utils";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
@@ -244,9 +240,19 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
      {isRootReady && rootElement.current && (
        <Tree
          data={filteredData}
-          disableDrag={readOnly}
-          disableDrop={readOnly}
-          disableEdit={readOnly}
+          disableDrag={
+            readOnly
+              ? true
+              : (data) => {
+                  return data.canEdit === false;
+                }
+          }
+          disableDrop={
+            readOnly
+              ? true
+              : ({ parentNode }) => parentNode?.data?.canEdit === false
+          }
+          disableEdit={readOnly ? true : (data) => data.canEdit === false}
          {...controllers}
          width={width}
          height={rootElement.current.clientHeight}
@@ -417,7 +423,9 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
                <IconFileDescription size="18" />
              )
            }
-            readOnly={tree.props.disableEdit as boolean}
+            readOnly={
+              tree.props.disableEdit === true || node.data.canEdit === false
+            }
            removeEmojiAction={handleRemoveEmoji}
          />
        </div>
@@ -427,7 +435,7 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
        <div className={classes.actions}>
          <NodeMenu node={node} treeApi={tree} spaceId={node.data.spaceId} />

-          {!tree.props.disableEdit && (
+          {tree.props.disableEdit !== true && node.data.canEdit !== false && (
            <CreateNode
              node={node}
              treeApi={tree}
@@ -532,6 +540,7 @@ function NodeMenu({ node, treeApi, spaceId }: NodeMenuProps) {
        parentPageId: duplicatedPage.parentPageId,
        icon: duplicatedPage.icon,
        hasChildren: duplicatedPage.hasChildren,
+        canEdit: true,
        children: [],
      };

@@ -610,55 +619,56 @@ function NodeMenu({ node, treeApi, spaceId }: NodeMenuProps) {
            {t("Export page")}
          </Menu.Item>

-          {!(treeApi.props.disableEdit as boolean) && (
-            <>
-              <Menu.Item
-                leftSection={<IconCopy size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  handleDuplicatePage();
-                }}
-              >
-                {t("Duplicate")}
-              </Menu.Item>
+          {treeApi.props.disableEdit !== true &&
+            node.data.canEdit !== false && (
+              <>
+                <Menu.Item
+                  leftSection={<IconCopy size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleDuplicatePage();
+                  }}
+                >
+                  {t("Duplicate")}
+                </Menu.Item>

-              <Menu.Item
-                leftSection={<IconArrowRight size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  openMovePageModal();
-                }}
-              >
-                {t("Move")}
-              </Menu.Item>
+                <Menu.Item
+                  leftSection={<IconArrowRight size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openMovePageModal();
+                  }}
+                >
+                  {t("Move")}
+                </Menu.Item>

-              <Menu.Item
-                leftSection={<IconCopy size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  openCopyPageModal();
-                }}
-              >
-                {t("Copy to space")}
-              </Menu.Item>
+                <Menu.Item
+                  leftSection={<IconCopy size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openCopyPageModal();
+                  }}
+                >
+                  {t("Copy to space")}
+                </Menu.Item>

-              <Menu.Divider />
-              <Menu.Item
-                c="red"
-                leftSection={<IconTrash size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  openDeleteModal({ onConfirm: () => treeApi?.delete(node) });
-                }}
-              >
-                {t("Move to trash")}
-              </Menu.Item>
-            </>
-          )}
+                <Menu.Divider />
+                <Menu.Item
+                  c="red"
+                  leftSection={<IconTrash size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openDeleteModal({ onConfirm: () => treeApi?.delete(node) });
+                  }}
+                >
+                  {t("Move to trash")}
+                </Menu.Item>
+              </>
+            )}
        </Menu.Dropdown>
      </Menu>

@@ -7,5 +7,6 @@ export type SpaceTreeNode = {
  spaceId: string;
  parentPageId: string;
  hasChildren: boolean;
+  canEdit?: boolean;
  children: SpaceTreeNode[];
 };
@@ -24,6 +24,7 @@ export function buildTree(pages: IPage[]): SpaceTreeNode[] {
      hasChildren: page.hasChildren,
      spaceId: page.spaceId,
      parentPageId: page.parentPageId,
+      canEdit: page.canEdit ?? page.permissions?.canEdit,
      children: [],
    };
  });
@@ -18,10 +18,15 @@ export interface IPage {
  deletedAt: Date;
  position: string;
  hasChildren: boolean;
+  canEdit?: boolean;
  creator: ICreator;
  lastUpdatedBy: ILastUpdatedBy;
  deletedBy: IDeletedBy;
  space: Partial<ISpace>;
+  permissions?: {
+    canEdit: boolean;
+    hasRestriction: boolean;
+  };
 }

 interface ICreator {
@@ -69,19 +69,20 @@ export default function ShareModal({ readOnly }: ShareModalProps) {

  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.currentTarget.checked;
+    setIsPagePublic(value);

-    if (value) {
-      createShareMutation.mutateAsync({
-        pageId: pageId,
-        includeSubPages: true,
-        searchIndexing: false,
-      });
-      setIsPagePublic(value);
-    } else {
-      if (share && share.id) {
-        deleteShareMutation.mutateAsync(share.id);
-        setIsPagePublic(value);
+    try {
+      if (value) {
+        await createShareMutation.mutateAsync({
+          pageId: pageId,
+          includeSubPages: true,
+          searchIndexing: false,
+        });
+      } else if (share && share.id) {
+        await deleteShareMutation.mutateAsync(share.id);
      }
+    } catch {
+      setIsPagePublic(!value);
    }
  };

@@ -89,20 +90,28 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const value = event.currentTarget.checked;
-    updateShareMutation.mutateAsync({
-      shareId: share.id,
-      includeSubPages: value,
-    });
+    try {
+      await updateShareMutation.mutateAsync({
+        shareId: share.id,
+        includeSubPages: value,
+      });
+    } catch {
+      // query invalidation will revert the UI
+    }
  };

  const handleIndexSearchChange = async (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const value = event.currentTarget.checked;
-    updateShareMutation.mutateAsync({
-      shareId: share.id,
-      searchIndexing: value,
-    });
+    try {
+      await updateShareMutation.mutateAsync({
+        shareId: share.id,
+        searchIndexing: value,
+      });
+    } catch {
+      // query invalidation will revert the UI
+    }
  };

  const shareLink = useMemo(
@@ -90,7 +90,10 @@ export function useCreateShareMutation() {
      });
    },
    onError: (error) => {
-      notifications.show({ message: t("Failed to share page"), color: "red" });
+      notifications.show({
+        message: error?.["response"]?.data?.message || t("Failed to share page"),
+        color: "red",
+      });
    },
  });
 }
@@ -9,6 +9,7 @@ import { IconGroupCircle } from "@/components/icons/icon-people-circle.tsx";
 import { useTranslation } from "react-i18next";

 interface MultiMemberSelectProps {
+  value?: string[];
  onChange: (value: string[]) => void;
 }

@@ -33,7 +34,7 @@ const renderMultiSelectOption: MultiSelectProps["renderOption"] = ({
  </Group>
 );

-export function MultiMemberSelect({ onChange }: MultiMemberSelectProps) {
+export function MultiMemberSelect({ value, onChange }: MultiMemberSelectProps) {
  const { t } = useTranslation();
  const [searchValue, setSearchValue] = useState("");
  const [debouncedQuery] = useDebouncedValue(searchValue, 500);
@@ -85,6 +86,7 @@ export function MultiMemberSelect({ onChange }: MultiMemberSelectProps) {
  return (
    <MultiSelect
      data={data}
+      value={value}
      renderOption={renderMultiSelectOption}
      hidePickedOptions
      maxDropdownHeight={300}
@@ -51,7 +51,7 @@ export default function SpaceSettingsModal({
          </Modal.Header>
          <Modal.Body>
            <div style={{ height: rem(600) }}>
-              <Tabs defaultValue="members">
+              <Tabs color="dark" defaultValue="members">
                <Tabs.List>
                  <Tabs.Tab fw={500} value="general">
                    {t("Settings")}
@@ -63,7 +63,7 @@ export default function SpaceSettingsModal({

                <Tabs.Panel value="general">
                  <ScrollArea h={580} scrollbarSize={5} pr={8}>
-                    <div style={{ paddingBottom: "100px"}}>
+                    <div style={{ paddingBottom: "100px" }}>
                      <SpaceDetails
                        spaceId={space?.id}
                        readOnly={spaceAbility.cannot(
@@ -72,7 +72,6 @@ export default function SpaceSettingsModal({
                        )}
                      />
                    </div>
-
                  </ScrollArea>
                </Tabs.Panel>

@@ -40,12 +40,17 @@ export function PageStateSegmentedControl({
  const [value, setValue] = useState(pageEditMode);

  const handleChange = useCallback(
-    async (value: string) => {
-      const updatedUser = await updateUser({ pageEditMode: value });
-      setValue(value);
-      setUser(updatedUser);
+    async (newValue: string) => {
+      const prevValue = value;
+      setValue(newValue);
+      try {
+        const updatedUser = await updateUser({ pageEditMode: newValue });
+        setUser(updatedUser);
+      } catch {
+        setValue(prevValue);
+      }
    },
-    [user, setUser],
+    [value, setUser],
  );

  useEffect(() => {
@@ -39,9 +39,13 @@ export function PageWidthToggle({ size, label }: PageWidthToggleProps) {

  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.currentTarget.checked;
-    const updatedUser = await updateUser({ fullPageWidth: value });
    setChecked(value);
-    setUser(updatedUser);
+    try {
+      const updatedUser = await updateUser({ fullPageWidth: value });
+      setUser(updatedUser);
+    } catch {
+      setChecked(!value);
+    }
  };

  return (