[WEB-1019] chore: error state for unauthorized pages (#4219)

* chore: private page access

* chore: add error state for private pages

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

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

@@ -169,6 +169,12 @@ class PageViewSet(BaseViewSet):
 
     def retrieve(self, request, slug, project_id, pk=None):
         page = self.get_queryset().filter(pk=pk).first()
+        if page is None:
+            return Response(
+                {"error": "Page not found"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+        else:
             return Response(
                 PageDetailSerializer(page).data, status=status.HTTP_200_OK
             )

web/components/pages/dropdowns/quick-actions.tsx

@@ -20,7 +20,17 @@ export const PageQuickActions: React.FC<Props> = observer((props) => {
   // states
   const [deletePageModal, setDeletePageModal] = useState(false);
   // store hooks
-  const { access, archive, archived_at, makePublic, makePrivate, restore } = usePage(pageId);
+  const {
+    access,
+    archive,
+    archived_at,
+    makePublic,
+    makePrivate,
+    restore,
+    canCurrentUserArchivePage,
+    canCurrentUserChangeAccess,
+    canCurrentUserDeletePage,
+  } = usePage(pageId);
 
   const pageLink = `${workspaceSlug}/projects/${projectId}/pages/${pageId}`;
   const handleCopyText = () =>
@@ -31,8 +41,53 @@ export const PageQuickActions: React.FC<Props> = observer((props) => {
         message: "Page link copied to clipboard.",
       });
     });
+
   const handleOpenInNewTab = () => window.open(`/${pageLink}`, "_blank");
 
+  const MENU_ITEMS: {
+    key: string;
+    action: () => void;
+    label: string;
+    icon: React.FC<any>;
+    shouldRender: boolean;
+  }[] = [
+    {
+      key: "copy-link",
+      action: handleCopyText,
+      label: "Copy link",
+      icon: Link,
+      shouldRender: true,
+    },
+    {
+      key: "open-new-tab",
+      action: handleOpenInNewTab,
+      label: "Open in new tab",
+      icon: ExternalLink,
+      shouldRender: true,
+    },
+    {
+      key: "archive-restore",
+      action: archived_at ? restore : archive,
+      label: archived_at ? "Restore" : "Archive",
+      icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
+      shouldRender: canCurrentUserArchivePage,
+    },
+    {
+      key: "make-public-private",
+      action: access === 0 ? makePrivate : makePublic,
+      label: access === 0 ? "Make private" : "Make public",
+      icon: access === 0 ? Lock : UsersRound,
+      shouldRender: canCurrentUserChangeAccess && !archived_at,
+    },
+    {
+      key: "delete",
+      action: () => setDeletePageModal(true),
+      label: "Delete",
+      icon: Trash2,
+      shouldRender: canCurrentUserDeletePage && !!archived_at,
+    },
+  ];
+
   return (
     <>
       <DeletePageModal
@@ -42,89 +97,23 @@ export const PageQuickActions: React.FC<Props> = observer((props) => {
         projectId={projectId}
       />
       <CustomMenu placement="bottom-end" ellipsis closeOnSelect>
+        {MENU_ITEMS.map((item) => {
+          if (!item.shouldRender) return null;
+          return (
             <CustomMenu.MenuItem
+              key={item.key}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
-            handleCopyText();
+                item.action();
               }}
+              className="flex items-center gap-2"
             >
-          <span className="flex items-center gap-2">
-            <Link className="h-3 w-3" />
-            Copy link
-          </span>
+              <item.icon className="h-3 w-3" />
+              {item.label}
             </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            handleOpenInNewTab();
-          }}
-        >
-          <span className="flex items-center gap-2">
-            <ExternalLink className="h-3 w-3" />
-            Open in new tab
-          </span>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (archived_at) restore();
-            else archive();
-          }}
-        >
-          <span className="flex items-center gap-2">
-            {archived_at ? (
-              <>
-                <ArchiveRestoreIcon className="h-3 w-3" />
-                Restore
-              </>
-            ) : (
-              <>
-                <ArchiveIcon className="h-3 w-3" />
-                Archive
-              </>
-            )}
-          </span>
-        </CustomMenu.MenuItem>
-        {!archived_at && (
-          <CustomMenu.MenuItem
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              access === 0 ? makePrivate() : makePublic();
-            }}
-          >
-            <span className="flex items-center gap-2">
-              {access === 0 ? (
-                <>
-                  <Lock className="h-3 w-3" />
-                  Make private
-                </>
-              ) : (
-                <>
-                  <UsersRound className="h-3 w-3" />
-                  Make public
-                </>
-              )}
-            </span>
-          </CustomMenu.MenuItem>
-        )}
-        {archived_at && (
-          <CustomMenu.MenuItem
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              setDeletePageModal(true);
-            }}
-          >
-            <span className="flex items-center gap-2">
-              <Trash2 className="h-3 w-3" />
-              Delete
-            </span>
-          </CustomMenu.MenuItem>
-        )}
+          );
+        })}
       </CustomMenu>
     </>
   );

web/components/pages/editor/header/options-dropdown.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { Clipboard, Copy, Link, Lock } from "lucide-react";
+import { ArchiveRestoreIcon, Clipboard, Copy, Link, Lock, LockOpen } from "lucide-react";
 // document editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/document-editor";
 // ui
@@ -21,6 +21,9 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const { editorRef, handleDuplicatePage, pageStore } = props;
   // store values
   const {
+    archived_at,
+    is_locked,
+    id,
     archive,
     lock,
     unlock,
@@ -99,7 +102,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     {
       key: "copy-page-link",
       action: () => {
-        copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/pages/${pageStore.id}`).then(() =>
+        copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/pages/${id}`).then(() =>
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Successful!",
@@ -119,32 +122,18 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
       shouldRender: canCurrentUserDuplicatePage,
     },
     {
-      key: "lock-page",
-      action: handleLockPage,
-      label: "Lock page",
-      icon: Lock,
-      shouldRender: !pageStore.is_locked && canCurrentUserLockPage,
+      key: "lock-unlock-page",
+      action: is_locked ? handleUnlockPage : handleLockPage,
+      label: is_locked ? "Unlock page" : "Lock page",
+      icon: is_locked ? LockOpen : Lock,
+      shouldRender: canCurrentUserLockPage,
     },
     {
-      key: "unlock-page",
-      action: handleUnlockPage,
-      label: "Unlock page",
-      icon: Lock,
-      shouldRender: pageStore.is_locked && canCurrentUserLockPage,
-    },
-    {
-      key: "archive-page",
-      action: handleArchivePage,
-      label: "Archive page",
-      icon: ArchiveIcon,
-      shouldRender: !pageStore.archived_at && canCurrentUserArchivePage,
-    },
-    {
-      key: "restore-page",
-      action: handleRestorePage,
-      label: "Restore page",
-      icon: ArchiveIcon,
-      shouldRender: !!pageStore.archived_at && canCurrentUserArchivePage,
+      key: "archive-restore-page",
+      action: archived_at ? handleRestorePage : handleArchivePage,
+      label: archived_at ? "Restore page" : "Archive page",
+      icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
+      shouldRender: canCurrentUserArchivePage,
     },
   ];
 
@@ -166,7 +155,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
         return (
           <CustomMenu.MenuItem key={item.key} onClick={item.action} className="flex items-center gap-2">
             <item.icon className="h-3 w-3" />
-            <div className="text-custom-text-300">{item.label}</div>
+            {item.label}
           </CustomMenu.MenuItem>
         );
       })}

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -1,5 +1,6 @@
 import { ReactElement, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import useSWR from "swr";
@@ -8,12 +9,14 @@ import { EditorRefApi, useEditorMarkings } from "@plane/document-editor";
 // types
 import { TPage } from "@plane/types";
 // ui
-import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+import { Spinner, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core";
 import { PageDetailsHeader } from "@/components/headers";
 import { IssuePeekOverview } from "@/components/issues";
 import { PageEditorBody, PageEditorHeaderRoot } from "@/components/pages";
+// helpers
+import { cn } from "@/helpers/common.helper";
 // hooks
 import { usePage, useProjectPages } from "@/hooks/store";
 // layouts
@@ -46,15 +49,16 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
   });
 
   // fetching page details
-  const { data: swrPageDetails, isValidating } = useSWR(
-    pageId ? `PAGE_DETAILS_${pageId}` : null,
-    pageId ? () => getPageById(pageId.toString()) : null,
-    {
+  const {
+    data: swrPageDetails,
+    isValidating,
+    error: pageDetailsError,
+  } = useSWR(pageId ? `PAGE_DETAILS_${pageId}` : null, pageId ? () => getPageById(pageId.toString()) : null, {
     revalidateIfStale: false,
     revalidateOnFocus: true,
     revalidateOnReconnect: true,
-    }
-  );
+  });
+
   useEffect(
     () => () => {
       if (pageStore.cleanup) pageStore.cleanup();
@@ -62,17 +66,29 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
     [pageStore]
   );
 
-  const handleEditorReady = (value: boolean) => setEditorReady(value);
-
-  const handleReadOnlyEditorReady = () => setReadOnlyEditorReady(true);
-
-  if (!pageStore || !pageStore.id)
+  if ((!pageStore || !pageStore.id) && !pageDetailsError)
     return (
       <div className="h-full w-full grid place-items-center">
         <Spinner />
       </div>
     );
 
+  if (pageDetailsError)
+    return (
+      <div className="h-full w-full flex flex-col items-center justify-center">
+        <h3 className="text-lg font-semibold text-center">Page not found</h3>
+        <p className="text-sm text-custom-text-200 text-center mt-3">
+          The page you are trying to access doesn{"'"}t exist or you don{"'"}t have permission to view it.
+        </p>
+        <Link
+          href={`/${workspaceSlug}/projects/${projectId}/pages`}
+          className={cn(getButtonStyling("neutral-primary", "md"), "mt-5")}
+        >
+          View other Pages
+        </Link>
+      </div>
+    );
+
   // we need to get the values of title and description from the page store but we don't have to subscribe to those values
   const pageTitle = pageStore?.name;
 
@@ -132,9 +148,9 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
             swrPageDetails={swrPageDetails}
             control={control}
             editorRef={editorRef}
-            handleEditorReady={handleEditorReady}
+            handleEditorReady={(val) => setEditorReady(val)}
             readOnlyEditorRef={readOnlyEditorRef}
-            handleReadOnlyEditorReady={handleReadOnlyEditorReady}
+            handleReadOnlyEditorReady={() => setReadOnlyEditorReady(true)}
             handleSubmit={() => handleSubmit(handleUpdatePage)()}
             markings={markings}
             pageStore={pageStore}

web/store/pages/page.store.ts

@@ -21,6 +21,7 @@ export interface IPageStore extends TPage {
   canCurrentUserEditPage: boolean; // it will give the user permission to read the page or write the page
   canCurrentUserDuplicatePage: boolean;
   canCurrentUserLockPage: boolean;
+  canCurrentUserChangeAccess: boolean;
   canCurrentUserArchivePage: boolean;
   canCurrentUserDeletePage: boolean;
   isContentEditable: boolean;
@@ -72,7 +73,10 @@ export class PageStore implements IPageStore {
   // service
   pageService: PageService;
 
-  constructor(private store: RootStore, page: TPage) {
+  constructor(
+    private store: RootStore,
+    page: TPage
+  ) {
     this.id = page?.id || undefined;
     this.name = page?.name || undefined;
     this.description_html = page?.description_html || undefined;
@@ -122,6 +126,7 @@ export class PageStore implements IPageStore {
       canCurrentUserEditPage: computed,
       canCurrentUserDuplicatePage: computed,
       canCurrentUserLockPage: computed,
+      canCurrentUserChangeAccess: computed,
       canCurrentUserArchivePage: computed,
       canCurrentUserDeletePage: computed,
       isContentEditable: computed,
@@ -245,12 +250,19 @@ export class PageStore implements IPageStore {
     return this.isCurrentUserOwner || (!!currentUserProjectRole && currentUserProjectRole >= EUserProjectRoles.MEMBER);
   }
 
+  /**
+   * @description returns true if the current logged in user can change the access of the page
+   */
+  get canCurrentUserChangeAccess() {
+    return this.isCurrentUserOwner;
+  }
+
   /**
    * @description returns true if the current logged in user can archive the page
    */
   get canCurrentUserArchivePage() {
     const currentUserProjectRole = this.store.user.membership.currentProjectRole;
-    return this.isCurrentUserOwner || (!!currentUserProjectRole && currentUserProjectRole >= EUserProjectRoles.MEMBER);
+    return this.isCurrentUserOwner || currentUserProjectRole === EUserProjectRoles.ADMIN;
   }
 
   /**
@@ -315,13 +327,14 @@ export class PageStore implements IPageStore {
             set(this, key, currentPageResponse?.[currentPageKey] || undefined);
           });
         });
-    } catch {
+    } catch (error) {
       runInAction(() => {
         Object.keys(pageData).forEach((key) => {
           const currentPageKey = key as keyof TPage;
           set(this, key, currentPage?.[currentPageKey] || undefined);
         });
       });
+      throw error;
     }
   };
 
@@ -349,10 +362,11 @@ export class PageStore implements IPageStore {
           ...updatedProps,
         },
       });
-    } catch {
+    } catch (error) {
       runInAction(() => {
         this.view_props = currentViewProps;
       });
+      throw error;
     }
   };
 
@@ -366,13 +380,16 @@ export class PageStore implements IPageStore {
     const pageAccess = this.access;
     runInAction(() => (this.access = EPageAccess.PUBLIC));
 
-    await this.pageService
-      .update(workspaceSlug, projectId, this.id, {
+    try {
+      await this.pageService.update(workspaceSlug, projectId, this.id, {
         access: EPageAccess.PUBLIC,
-      })
-      .catch(() => {
-        runInAction(() => (this.access = pageAccess));
       });
+    } catch (error) {
+      runInAction(() => {
+        this.access = pageAccess;
+      });
+      throw error;
+    }
   };
 
   /**
@@ -385,13 +402,16 @@ export class PageStore implements IPageStore {
     const pageAccess = this.access;
     runInAction(() => (this.access = EPageAccess.PRIVATE));
 
-    await this.pageService
-      .update(workspaceSlug, projectId, this.id, {
+    try {
+      await this.pageService.update(workspaceSlug, projectId, this.id, {
         access: EPageAccess.PRIVATE,
-      })
-      .catch(() => {
-        runInAction(() => (this.access = pageAccess));
       });
+    } catch (error) {
+      runInAction(() => {
+        this.access = pageAccess;
+      });
+      throw error;
+    }
   };
 
   /**
@@ -404,36 +424,11 @@ export class PageStore implements IPageStore {
     const pageIsLocked = this.is_locked;
     runInAction(() => (this.is_locked = true));
 
-    await this.pageService.lock(workspaceSlug, projectId, this.id).catch(() => {
-      runInAction(() => (this.is_locked = pageIsLocked));
-    });
-  };
-
-  /**
-   * @description archive the page
-   */
-  archive = async () => {
-    const { workspaceSlug, projectId } = this.store.app.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-
-    await this.pageService.archive(workspaceSlug, projectId, this.id).then((res) => {
+    await this.pageService.lock(workspaceSlug, projectId, this.id).catch((error) => {
       runInAction(() => {
-        this.archived_at = res.archived_at;
-      });
-    });
-  };
-
-  /**
-   * @description restore the page
-   */
-  restore = async () => {
-    const { workspaceSlug, projectId } = this.store.app.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-
-    await this.pageService.restore(workspaceSlug, projectId, this.id).then(() => {
-      runInAction(() => {
-        this.archived_at = null;
+        this.is_locked = pageIsLocked;
       });
+      throw error;
     });
   };
 
@@ -447,9 +442,46 @@ export class PageStore implements IPageStore {
     const pageIsLocked = this.is_locked;
     runInAction(() => (this.is_locked = false));
 
-    await this.pageService.unlock(workspaceSlug, projectId, this.id).catch(() => {
-      runInAction(() => (this.is_locked = pageIsLocked));
+    await this.pageService.unlock(workspaceSlug, projectId, this.id).catch((error) => {
+      runInAction(() => {
+        this.is_locked = pageIsLocked;
       });
+      throw error;
+    });
+  };
+
+  /**
+   * @description archive the page
+   */
+  archive = async () => {
+    const { workspaceSlug, projectId } = this.store.app.router;
+    if (!workspaceSlug || !projectId || !this.id) return undefined;
+
+    try {
+      const response = await this.pageService.archive(workspaceSlug, projectId, this.id);
+      runInAction(() => {
+        this.archived_at = response.archived_at;
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * @description restore the page
+   */
+  restore = async () => {
+    const { workspaceSlug, projectId } = this.store.app.router;
+    if (!workspaceSlug || !projectId || !this.id) return undefined;
+
+    try {
+      await this.pageService.restore(workspaceSlug, projectId, this.id);
+      runInAction(() => {
+        this.archived_at = null;
+      });
+    } catch (error) {
+      throw error;
+    }
   };
 
   /**
@@ -464,8 +496,11 @@ export class PageStore implements IPageStore {
       this.is_favorite = true;
     });
 
-    await this.pageService.addToFavorites(workspaceSlug, projectId, this.id).catch(() => {
-      runInAction(() => (this.is_favorite = pageIsFavorite));
+    await this.pageService.addToFavorites(workspaceSlug, projectId, this.id).catch((error) => {
+      runInAction(() => {
+        this.is_favorite = pageIsFavorite;
+      });
+      throw error;
     });
   };
 
@@ -481,8 +516,11 @@ export class PageStore implements IPageStore {
       this.is_favorite = false;
     });
 
-    await this.pageService.removeFromFavorites(workspaceSlug, projectId, this.id).catch(() => {
-      runInAction(() => (this.is_favorite = pageIsFavorite));
+    await this.pageService.removeFromFavorites(workspaceSlug, projectId, this.id).catch((error) => {
+      runInAction(() => {
+        this.is_favorite = pageIsFavorite;
+      });
+      throw error;
     });
   };
 }

web/store/pages/project-page.store.ts

@@ -148,7 +148,7 @@ export class ProjectPageStore implements IProjectPageStore {
       });
 
       return pages;
-    } catch {
+    } catch (error) {
       runInAction(() => {
         this.loader = undefined;
         this.error = {
@@ -156,6 +156,7 @@ export class ProjectPageStore implements IProjectPageStore {
           description: "Failed to fetch the pages, Please try again later.",
         };
       });
+      throw error;
     }
   };
 
@@ -181,7 +182,7 @@ export class ProjectPageStore implements IProjectPageStore {
       });
 
       return page;
-    } catch {
+    } catch (error) {
       runInAction(() => {
         this.loader = undefined;
         this.error = {
@@ -189,6 +190,7 @@ export class ProjectPageStore implements IProjectPageStore {
           description: "Failed to fetch the page, Please try again later.",
         };
       });
+      throw error;
     }
   };
 
@@ -213,7 +215,7 @@ export class ProjectPageStore implements IProjectPageStore {
       });
 
       return page;
-    } catch {
+    } catch (error) {
       runInAction(() => {
         this.loader = undefined;
         this.error = {
@@ -221,6 +223,7 @@ export class ProjectPageStore implements IProjectPageStore {
           description: "Failed to create a page, Please try again later.",
         };
       });
+      throw error;
     }
   };
 
@@ -235,7 +238,7 @@ export class ProjectPageStore implements IProjectPageStore {
 
       await this.service.remove(workspaceSlug, projectId, pageId);
       runInAction(() => unset(this.data, [pageId]));
-    } catch {
+    } catch (error) {
       runInAction(() => {
         this.loader = undefined;
         this.error = {
@@ -243,6 +246,7 @@ export class ProjectPageStore implements IProjectPageStore {
           description: "Failed to delete a page, Please try again later.",
         };
       });
+      throw error;
     }
   };
 }

yarn.lock

@@ -2747,7 +2747,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.42":
+"@types/react@*", "@types/react@18.2.42", "@types/react@^18.2.42":
   version "18.2.42"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7"
   integrity sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==