Improvement: High Performance MobX Integration for Pages ✈︎ (#3397)

* fix: removed parameters `workspace`, `project` & `id` from the patch calls

* feat: modified components to work with new pages hooks

* feat: modified stores

* feat: modified initial component

* feat: component implementation changes

* feat: store implementation

* refactor pages store

* feat: updated page store to perform async operations faster

* fix: added types for archive and restore pages

* feat: implemented archive and restore pages

* fix: page creating twice when form submit

* feat: updated create-page-modal

* feat: updated page form and delete page modal

* fix: create page modal not updating isSubmitted prop

* feat: list items and list view refactored for pages

* feat: refactored project-page-store for inserting computed pagesids

* chore: renamed project pages hook

* feat: added favourite pages implementation

* fix: implemented store for archived pages

* fix: project page store for recent pages

* fix: issue suggestions breaking pages

* fix: issue embeds and suggestions breaking

* feat: implemented page store and project page store in page editor

* chore: lock file changes

* fix: modified page details header to catch mobx updates instead of swr calls

* fix: modified usePage hook to fetch page details when reloaded directly on page

* fix: fixed deleting pages

* fix: removed render on props changed

* feat: implemented page store inside page details

* fix: role change in pages archives

* fix: rerending of pages on tab change

* fix: reimplementation of peek overview inside pages

* chore: typo fixes

* fix: issue suggestion widget selecting wrong issues on click

* feat: added labels in pages

* fix: deepsource errors fixed

* fix: build errors

* fix: review comments

* fix: removed swr hooks from the `usePage` store hook and refactored `issueEmbed` hook

* fix: resolved reviewed comments

---------

Co-authored-by: Rahul R <[email protected]>

Author: 2 people

apiserver/plane/app/views/page.py

@@ -1,36 +1,25 @@
 # Python imports
-from datetime import timedelta, date, datetime
+from datetime import date, datetime, timedelta
 
 # Django imports
 from django.db import connection
 from django.db.models import Exists, OuterRef, Q
 from django.utils import timezone
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
-
 # Third party imports
 from rest_framework import status
 from rest_framework.response import Response
 
-# Module imports
-from .base import BaseViewSet, BaseAPIView
 from plane.app.permissions import ProjectEntityPermission
-from plane.db.models import (
-    Page,
-    PageFavorite,
-    Issue,
-    IssueAssignee,
-    IssueActivity,
-    PageLog,
-    ProjectMember,
-)
-from plane.app.serializers import (
-    PageSerializer,
-    PageFavoriteSerializer,
-    PageLogSerializer,
-    IssueLiteSerializer,
-    SubPageSerializer,
-)
+from plane.app.serializers import (IssueLiteSerializer, PageFavoriteSerializer,
+                                   PageLogSerializer, PageSerializer,
+                                   SubPageSerializer)
+from plane.db.models import (Issue, IssueActivity, IssueAssignee, Page,
+                             PageFavorite, PageLog, ProjectMember)
+
+# Module imports
+from .base import BaseAPIView, BaseViewSet
 
 
 def unarchive_archive_page_and_descendants(page_id, archived_at):
@@ -175,7 +164,7 @@ def archive(self, request, slug, project_id, page_id):
                 project_id=project_id,
                 member=request.user,
                 is_active=True,
-                role__gt=20,
+                role__gte=20,
             ).exists()
             or request.user.id != page.owned_by_id
         ):

packages/editor/document-editor/package.json

@@ -32,6 +32,7 @@
     "@plane/editor-core": "*",
     "@plane/editor-extensions": "*",
     "@plane/ui": "*",
+    "@tippyjs/react": "^4.2.6",
     "@tiptap/core": "^2.1.13",
     "@tiptap/extension-placeholder": "^2.1.13",
     "@tiptap/pm": "^2.1.13",

packages/editor/document-editor/src/ui/components/page-renderer.tsx

@@ -18,7 +18,7 @@ import {
 
 type IPageRenderer = {
   documentDetails: DocumentDetails;
-  updatePageTitle: (title: string) => Promise<void>;
+  updatePageTitle: (title: string) => void;
   editor: Editor;
   onActionCompleteHandler: (action: {
     title: string;
@@ -30,18 +30,6 @@ type IPageRenderer = {
   readonly: boolean;
 };
 
-const debounce = (func: (...args: any[]) => void, wait: number) => {
-  let timeout: NodeJS.Timeout | null = null;
-  return function executedFunction(...args: any[]) {
-    const later = () => {
-      if (timeout) clearTimeout(timeout);
-      func(...args);
-    };
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-};
-
 export const PageRenderer = (props: IPageRenderer) => {
   const { documentDetails, editor, editorClassNames, editorContentCustomClassNames, updatePageTitle, readonly } = props;
 
@@ -64,11 +52,9 @@ export const PageRenderer = (props: IPageRenderer) => {
 
   const { getFloatingProps } = useInteractions([dismiss]);
 
-  const debouncedUpdatePageTitle = debounce(updatePageTitle, 300);
-
   const handlePageTitleChange = (title: string) => {
     setPagetitle(title);
-    debouncedUpdatePageTitle(title);
+    updatePageTitle(title);
   };
 
   const [cleanup, setcleanup] = useState(() => () => {});

packages/editor/document-editor/src/ui/extensions/index.tsx

@@ -26,7 +26,7 @@ export const DocumentEditorExtensions = (
           .focus()
           .insertContentAt(
             range,
-            "<p class='text-sm bg-gray-300 w-fit pl-3 pr-3 pt-1 pb-1 rounded shadow-sm'>#issue_</p>"
+            "<p class='text-sm bg-gray-300 w-fit pl-3 pr-3 pt-1 pb-1 rounded shadow-sm'>#issue_</p>\n"
           )
           .run();
       },

packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/index.tsx

@@ -24,7 +24,7 @@ export const IssueSuggestions = (suggestions: any[]) => {
       title: suggestion.name,
       priority: suggestion.priority.toString(),
       identifier: `${suggestion.project_detail.identifier}-${suggestion.sequence_id}`,
-      state: suggestion.state_detail.name,
+      state: suggestion.state_detail && suggestion.state_detail.name ? suggestion.state_detail.name : "Todo",
       command: ({ editor, range }) => {
         editor
           .chain()

packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-extension.tsx

@@ -9,6 +9,8 @@ export const IssueEmbedSuggestions = Extension.create({
   addOptions() {
     return {
       suggestion: {
+        char: "#issue_",
+        allowSpaces: true,
         command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
           props.command({ editor, range });
         },
@@ -18,11 +20,8 @@ export const IssueEmbedSuggestions = Extension.create({
   addProseMirrorPlugins() {
     return [
       Suggestion({
-        char: "#issue_",
         pluginKey: new PluginKey("issue-embed-suggestions"),
         editor: this.editor,
-        allowSpaces: true,
-
         ...this.options.suggestion,
       }),
     ];

packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx

@@ -53,7 +53,7 @@ const IssueSuggestionList = ({
   const commandListContainer = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    let newDisplayedItems: { [key: string]: IssueSuggestionProps[] } = {};
+    const newDisplayedItems: { [key: string]: IssueSuggestionProps[] } = {};
     let totalLength = 0;
     sections.forEach((section) => {
       newDisplayedItems[section] = items.filter((item) => item.state === section).slice(0, 5);
@@ -65,8 +65,8 @@ const IssueSuggestionList = ({
   }, [items]);
 
   const selectItem = useCallback(
-    (index: number) => {
-      const item = displayedItems[currentSection][index];
+    (section: string, index: number) => {
+      const item = displayedItems[section][index];
       if (item) {
         command(item);
       }
@@ -87,6 +87,7 @@ const IssueSuggestionList = ({
           setSelectedIndex(
             (selectedIndex + displayedItems[currentSection].length - 1) % displayedItems[currentSection].length
           );
+          e.stopPropagation();
           return true;
         }
         if (e.key === "ArrowDown") {
@@ -101,17 +102,20 @@ const IssueSuggestionList = ({
               [currentSection]: [...prevItems[currentSection], ...nextItems],
             }));
           }
+          e.stopPropagation();
           return true;
         }
         if (e.key === "Enter") {
-          selectItem(selectedIndex);
+          selectItem(currentSection, selectedIndex);
+          e.stopPropagation();
           return true;
         }
         if (e.key === "Tab") {
           const currentSectionIndex = sections.indexOf(currentSection);
           const nextSectionIndex = (currentSectionIndex + 1) % sections.length;
           setCurrentSection(sections[nextSectionIndex]);
           setSelectedIndex(0);
+          e.stopPropagation();
           return true;
         }
         return false;
@@ -172,7 +176,7 @@ const IssueSuggestionList = ({
                       }
                     )}
                     key={item.identifier}
-                    onClick={() => selectItem(index)}
+                    onClick={() => selectItem(section, index)}
                   >
                     <h5 className="whitespace-nowrap text-xs text-custom-text-300">{item.identifier}</h5>
                     <PriorityIcon priority={item.priority} />
@@ -195,7 +199,7 @@ export const IssueListRenderer = () => {
   let popup: any | null = null;
 
   return {
-    onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+    onStart: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
       component = new ReactRenderer(IssueSuggestionList, {
         props,
         // @ts-ignore
@@ -210,10 +214,10 @@ export const IssueListRenderer = () => {
         showOnCreate: true,
         interactive: true,
         trigger: "manual",
-        placement: "right",
+        placement: "bottom-start",
       });
     },
-    onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+    onUpdate: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
       component?.updateProps(props);
 
       popup &&

packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx

@@ -15,8 +15,7 @@ export const IssueWidgetCard = (props) => {
         setIssueDetails(issue);
         setLoading(0);
       })
-      .catch((error) => {
-        console.log(error);
+      .catch(() => {
         setLoading(-1);
       });
   }, []);
@@ -30,7 +29,9 @@ export const IssueWidgetCard = (props) => {
       {loading == 0 ? (
         <div
           onClick={completeIssueEmbedAction}
-          className="w-full cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 p-3 shadow-custom-shadow-2xs"
+          className={`${
+            props.selected ? "border-custom-primary-200 border-[2px]" : ""
+          } w-full cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 p-3 shadow-custom-shadow-2xs`}
         >
           <h5 className="text-xs text-custom-text-300">
             {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}

packages/editor/document-editor/src/ui/index.tsx

@@ -16,7 +16,7 @@ interface IDocumentEditor {
   // document info
   documentDetails: DocumentDetails;
   value: string;
-  rerenderOnPropsChange: {
+  rerenderOnPropsChange?: {
     id: string;
     description_html: string;
   };
@@ -39,7 +39,7 @@ interface IDocumentEditor {
   setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
   setShouldShowAlert?: (showAlert: boolean) => void;
   forwardedRef?: any;
-  updatePageTitle: (title: string) => Promise<void>;
+  updatePageTitle: (title: string) => void;
   debouncedUpdatesEnabled?: boolean;
   isSubmitting: "submitting" | "submitted" | "saved";
 

web/components/headers/page-details.tsx

@@ -1,23 +1,17 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
 import { FileText, Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject } from "hooks/store";
-// services
-import { PageService } from "services/page.service";
+import { useApplication, usePage, useProject } from "hooks/store";
 // ui
 import { Breadcrumbs, Button } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
-// fetch-keys
-import { PAGE_DETAILS } from "constants/fetch-keys";
 
 export interface IPagesHeaderProps {
   showButton?: boolean;
 }
-const pageService = new PageService();
 
 export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
   const { showButton = false } = props;
@@ -28,12 +22,7 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
   const { commandPalette: commandPaletteStore } = useApplication();
   const { currentProjectDetails } = useProject();
 
-  const { data: pageDetails } = useSWR(
-    workspaceSlug && currentProjectDetails?.id && pageId ? PAGE_DETAILS(pageId as string) : null,
-    workspaceSlug && currentProjectDetails?.id
-      ? () => pageService.getPageDetails(workspaceSlug as string, currentProjectDetails.id, pageId as string)
-      : null
-  );
+  const pageDetails = usePage(pageId as string);
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">