refactor: page actions menu

apiserver/plane/app/serializers/page.py

@@ -54,6 +54,8 @@ def create(self, validated_data):
         labels = validated_data.pop("labels", None)
         project_id = self.context["project_id"]
         owned_by_id = self.context["owned_by_id"]
+        description = self.context["description"]
+        description_binary = self.context["description_binary"]
         description_html = self.context["description_html"]
 
         # Get the workspace id from the project
@@ -62,6 +64,8 @@ def create(self, validated_data):
         # Create the page
         page = Page.objects.create(
             **validated_data,
+            description=description,
+            description_binary=description_binary,
             description_html=description_html,
             owned_by_id=owned_by_id,
             workspace_id=project.workspace_id,

apiserver/plane/app/urls/page.py

@@ -8,6 +8,7 @@
     SubPagesEndpoint,
     PagesDescriptionViewSet,
     PageVersionEndpoint,
+    PageDuplicateEndpoint,
 )
 
 
@@ -78,4 +79,9 @@
         PageVersionEndpoint.as_view(),
         name="page-versions",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/duplicate/",
+        PageDuplicateEndpoint.as_view(),
+        name="page-duplicate",
+    ),
 ]

apiserver/plane/app/views/__init__.py

@@ -155,6 +155,7 @@
     PageLogEndpoint,
     SubPagesEndpoint,
     PagesDescriptionViewSet,
+    PageDuplicateEndpoint,
 )
 from .page.version import PageVersionEndpoint
 

apiserver/plane/app/views/page/base.py

@@ -121,6 +121,8 @@ def create(self, request, slug, project_id):
             context={
                 "project_id": project_id,
                 "owned_by_id": request.user.id,
+                "description": request.data.get("description", {}),
+                "description_binary": request.data.get("description_binary", None),
                 "description_html": request.data.get("description_html", "<p></p>"),
             },
         )
@@ -553,3 +555,33 @@ def partial_update(self, request, slug, project_id, pk):
             return Response({"message": "Updated successfully"})
         else:
             return Response({"error": "No binary data provided"})
+
+
+class PageDuplicateEndpoint(BaseAPIView):
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def post(self, request, slug, project_id, page_id):
+        page = Page.objects.filter(
+            pk=page_id, workspace__slug=slug, projects__id=project_id
+        ).values()
+        new_page_data = list(page)[0]
+        new_page_data.name = f"{new_page_data.name} (Copy)"
+
+        serializer = PageSerializer(
+            data=new_page_data,
+            context={
+                "project_id": project_id,
+                "owned_by_id": request.user.id,
+                "description": new_page_data.description,
+                "description_binary": new_page_data.description_binary,
+                "description_html": new_page_data.description_html,
+            },
+        )
+
+        if serializer.is_valid():
+            serializer.save()
+            # capture the page transaction
+            page_transaction.delay(request.data, None, serializer.data["id"])
+            page = Page.objects.get(pk=serializer.data["id"])
+            serializer = PageDetailSerializer(page)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

packages/editor/src/core/constants/document-collaborative-events.ts

@@ -3,4 +3,6 @@ export const DocumentCollaborativeEvents = {
   unlock: { client: "unlocked", server: "unlock" },
   archive: { client: "archived", server: "archive" },
   unarchive: { client: "unarchived", server: "unarchive" },
+  "make-public": { client: "made-public", server: "make-public" },
+  "make-private": { client: "made-private", server: "make-private" },
 } as const;

packages/ui/src/dropdowns/context-menu/item.tsx

@@ -36,19 +36,23 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
       onMouseEnter={handleActiveItem}
       disabled={item.disabled}
     >
-      {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
-      <div>
-        <h5>{item.title}</h5>
-        {item.description && (
-          <p
-            className={cn("text-custom-text-300 whitespace-pre-line", {
-              "text-custom-text-400": item.disabled,
-            })}
-          >
-            {item.description}
-          </p>
-        )}
-      </div>
+      {item.customContent ?? (
+        <>
+          {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+          <div>
+            <h5>{item.title}</h5>
+            {item.description && (
+              <p
+                className={cn("text-custom-text-300 whitespace-pre-line", {
+                  "text-custom-text-400": item.disabled,
+                })}
+              >
+                {item.description}
+              </p>
+            )}
+          </div>
+        </>
+      )}
     </button>
   );
 };

packages/ui/src/dropdowns/context-menu/root.tsx

@@ -11,7 +11,8 @@ import { usePlatformOS } from "../../hooks/use-platform-os";
 
 export type TContextMenuItem = {
   key: string;
-  title: string;
+  customContent?: React.ReactNode;
+  title?: string;
   description?: string;
   icon?: React.FC<any>;
   action: () => void;

packages/ui/src/dropdowns/custom-menu.tsx

@@ -54,7 +54,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     if (referenceElement) referenceElement.focus();
   };
   const closeDropdown = () => {
-    isOpen && onMenuClose && onMenuClose();
+    if (isOpen) onMenuClose?.();
     setIsOpen(false);
   };
 
@@ -216,7 +216,7 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
           )}
           onClick={(e) => {
             close();
-            onClick && onClick(e);
+            onClick?.(e);
           }}
           disabled={disabled}
         >

web/ce/components/pages/index.ts

@@ -1,2 +1,3 @@
 export * from "./editor";
+export * from "./modals";
 export * from "./extra-actions";

web/ce/components/pages/modals/index.ts

@@ -0,0 +1 @@
+export * from "./move-page-modal";

web/ce/components/pages/modals/move-page-modal.tsx

@@ -0,0 +1,10 @@
+// store types
+import { IPage } from "@/store/pages/page";
+
+export type TMovePageModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  page: IPage;
+};
+
+export const MovePageModal: React.FC<TMovePageModalProps> = () => null;

web/core/components/pages/dropdowns/actions.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import {
+  ArchiveRestoreIcon,
+  Copy,
+  ExternalLink,
+  FileOutput,
+  Globe2,
+  Link,
+  Lock,
+  LockKeyhole,
+  LockKeyholeOpen,
+  Trash2,
+} from "lucide-react";
+// plane editor
+import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+// plane ui
+import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
+// components
+import { DeletePageModal } from "@/components/pages";
+// constants
+import { EPageAccess } from "@/constants/page";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { usePageOperations } from "@/hooks/use-page-operations";
+// plane web components
+import { MovePageModal } from "@/plane-web/components/pages";
+// store types
+import { IPage } from "@/store/pages/page";
+
+export type TPageActions =
+  | "full-screen"
+  | "copy-markdown"
+  | "toggle-lock"
+  | "toggle-access"
+  | "open-in-new-tab"
+  | "copy-link"
+  | "make-a-copy"
+  | "archive-restore"
+  | "delete"
+  | "version-history"
+  | "export"
+  | "move";
+
+type Props = {
+  editorRef?: EditorRefApi | EditorReadOnlyRefApi | null;
+  extraOptions?: (TContextMenuItem & { key: TPageActions })[];
+  optionsOrder: TPageActions[];
+  page: IPage;
+  parentRef?: React.RefObject<HTMLElement>;
+};
+
+export const PageActions: React.FC<Props> = observer((props) => {
+  const { editorRef, extraOptions, optionsOrder, page, parentRef } = props;
+  // states
+  const [deletePageModal, setDeletePageModal] = useState(false);
+  const [movePageModal, setMovePageModal] = useState(false);
+  // page operations
+  const { pageOperations } = usePageOperations({
+    editorRef,
+    page,
+  });
+  // derived values
+  const {
+    access,
+    archived_at,
+    is_locked,
+    canCurrentUserArchivePage,
+    canCurrentUserChangeAccess,
+    canCurrentUserDeletePage,
+    canCurrentUserDuplicatePage,
+    canCurrentUserLockPage,
+    canCurrentUserMovePage,
+  } = page;
+  // menu items
+  const MENU_ITEMS: (TContextMenuItem & { key: TPageActions })[] = useMemo(
+    () => [
+      {
+        key: "toggle-lock",
+        action: pageOperations.toggleLock,
+        title: is_locked ? "Unlock" : "Lock",
+        icon: is_locked ? LockKeyholeOpen : LockKeyhole,
+        shouldRender: canCurrentUserLockPage,
+      },
+      {
+        key: "toggle-access",
+        action: pageOperations.toggleAccess,
+        title: access === EPageAccess.PUBLIC ? "Make private" : "Make public",
+        icon: access === EPageAccess.PUBLIC ? Lock : Globe2,
+        shouldRender: canCurrentUserChangeAccess && !archived_at,
+      },
+      {
+        key: "open-in-new-tab",
+        action: pageOperations.openInNewTab,
+        title: "Open in new tab",
+        icon: ExternalLink,
+        shouldRender: true,
+      },
+      {
+        key: "copy-link",
+        action: pageOperations.copyLink,
+        title: "Copy link",
+        icon: Link,
+        shouldRender: true,
+      },
+      {
+        key: "make-a-copy",
+        action: pageOperations.duplicate,
+        title: "Make a copy",
+        icon: Copy,
+        shouldRender: canCurrentUserDuplicatePage,
+      },
+      {
+        key: "archive-restore",
+        action: pageOperations.toggleArchive,
+        title: !!archived_at ? "Restore" : "Archive",
+        icon: !!archived_at ? ArchiveRestoreIcon : ArchiveIcon,
+        shouldRender: canCurrentUserArchivePage,
+      },
+      {
+        key: "delete",
+        action: () => setDeletePageModal(true),
+        title: "Delete",
+        icon: Trash2,
+        shouldRender: canCurrentUserDeletePage && !!archived_at,
+      },
+
+      {
+        key: "move",
+        action: () => setMovePageModal(true),
+        title: "Move",
+        icon: FileOutput,
+        shouldRender: canCurrentUserMovePage,
+      },
+    ],
+    [
+      access,
+      archived_at,
+      is_locked,
+      canCurrentUserArchivePage,
+      canCurrentUserChangeAccess,
+      canCurrentUserDeletePage,
+      canCurrentUserDuplicatePage,
+      canCurrentUserLockPage,
+      canCurrentUserMovePage,
+      pageOperations,
+    ]
+  );
+  if (extraOptions) {
+    MENU_ITEMS.push(...extraOptions);
+  }
+  // arrange options
+  const arrangedOptions = useMemo(
+    () =>
+      optionsOrder
+        .map((key) => MENU_ITEMS.find((item) => item.key === key))
+        .filter((item) => !!item) as (TContextMenuItem & { key: TPageActions })[],
+    [optionsOrder, MENU_ITEMS]
+  );
+
+  return (
+    <>
+      <MovePageModal isOpen={movePageModal} onClose={() => setMovePageModal(false)} page={page} />
+      <DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} pageId={page.id ?? ""} />
+      {parentRef && <ContextMenu parentRef={parentRef} items={arrangedOptions} />}
+      <CustomMenu placement="bottom-end" optionsClassName="max-h-[90vh]" ellipsis closeOnSelect>
+        {arrangedOptions.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                item.action?.();
+              }}
+              className={cn("flex items-center gap-2", item.className)}
+              disabled={item.disabled}
+            >
+              {item.customContent ?? (
+                <>
+                  {item.icon && <item.icon className="size-3" />}
+                  {item.title}
+                </>
+              )}
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});

web/core/components/pages/dropdowns/index.ts

@@ -1,2 +1,2 @@
+export * from "./actions";
 export * from "./edit-information-popover";
-export * from "./quick-actions";