refactor: page actions menu

apiserver/plane/app/serializers/page.py

@@ -63,6 +63,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
@@ -71,6 +73,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,
 )
 
 
@@ -111,4 +112,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

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

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

@@ -126,6 +126,10 @@ 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>"
                 ),
@@ -438,7 +442,6 @@ def destroy(self, request, slug, project_id, pk):
 
 
 class PageFavoriteViewSet(BaseViewSet):
-
     model = UserFavorite
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
@@ -465,7 +468,6 @@ def destroy(self, request, slug, project_id, pk):
 
 
 class PageLogEndpoint(BaseAPIView):
-
     serializer_class = PageLogSerializer
     model = PageLog
 
@@ -504,7 +506,6 @@ def delete(self, request, slug, project_id, page_id, transaction):
 
 
 class SubPagesEndpoint(BaseAPIView):
-
     @method_decorator(gzip_page)
     def get(self, request, slug, project_id, page_id):
         pages = (
@@ -522,7 +523,6 @@ def get(self, request, slug, project_id, page_id):
 
 
 class PagesDescriptionViewSet(BaseViewSet):
-
     @allow_permission(
         [
             ROLE.ADMIN,
@@ -629,3 +629,34 @@ 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):
+    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/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);
   };
 
@@ -209,7 +209,7 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
           )}
           onClick={(e) => {
             close();
-            onClick && onClick(e);
+            onClick?.(e);
           }}
           disabled={disabled}
         >

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx

@@ -13,9 +13,7 @@ import { BreadcrumbLink, Logo } from "@/components/common";
 // constants
 import { EPageAccess } from "@/constants/page";
 // hooks
-import { useEventTracker, useProject, useProjectPages, useUserPermissions } from "@/hooks/store";
-// plane web hooks
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useEventTracker, useProject, useProjectPages } from "@/hooks/store";
 
 export const PagesListHeader = observer(() => {
   // states
@@ -25,17 +23,10 @@ export const PagesListHeader = observer(() => {
   const { workspaceSlug } = useParams();
   const searchParams = useSearchParams();
   const pageType = searchParams.get("type");
-  // store hooks
-  const { allowPermissions } = useUserPermissions();
 
   const { currentProjectDetails, loader } = useProject();
-  const { createPage } = useProjectPages();
+  const { canCurrentUserCreatePage, createPage } = useProjectPages();
   const { setTrackElement } = useEventTracker();
-  // auth
-  const canUserCreatePage = allowPermissions(
-    [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-    EUserPermissionsLevel.PROJECT
-  );
   // handle page create
   const handleCreatePage = async () => {
     setIsCreatingPage(true);
@@ -88,7 +79,7 @@ export const PagesListHeader = observer(() => {
           </Breadcrumbs>
         </div>
       </Header.LeftItem>
-      {canUserCreatePage ? (
+      {canCurrentUserCreatePage ? (
         <Header.RightItem>
           <Button variant="primary" size="sm" onClick={handleCreatePage} loading={isCreatingPage}>
             {isCreatingPage ? "Adding" : "Add page"}

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;