From d1978be7786569d05de530e9d19447830082f388 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 30 Apr 2024 19:39:50 +0530
Subject: [PATCH] [WEB-1100] fix: bug fixes and enhancement (#4318)

* fix: inbox issue description

* chore: outline heading removed from page toc

* chore: label setting page ui improvement

* fix: update issue modal description resetting

* chore: project page head title improvement
---
 web/components/inbox/content/issue-root.tsx   |  6 ++--
 web/components/inbox/content/root.tsx         |  6 ++--
 web/components/issues/issue-modal/modal.tsx   |  2 +-
 .../labels/label-block/label-item-block.tsx   |  2 +-
 .../pages/editor/summary/content-browser.tsx  |  1 -
 .../projects/[projectId]/pages/index.tsx      | 28 ++++++++++++-------
 6 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/web/components/inbox/content/issue-root.tsx b/web/components/inbox/content/issue-root.tsx
index 545e96677b..d0f682447f 100644
--- a/web/components/inbox/content/issue-root.tsx
+++ b/web/components/inbox/content/issue-root.tsx
@@ -26,13 +26,11 @@ type Props = {
   isEditable: boolean;
   isSubmitting: "submitting" | "submitted" | "saved";
   setIsSubmitting: Dispatch<SetStateAction<"submitting" | "submitted" | "saved">>;
-  swrIssueDescription: string | undefined;
 };
 
 export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   const router = useRouter();
-  const { workspaceSlug, projectId, inboxIssue, isEditable, isSubmitting, setIsSubmitting, swrIssueDescription } =
-    props;
+  const { workspaceSlug, projectId, inboxIssue, isEditable, isSubmitting, setIsSubmitting } = props;
   // hooks
   const { currentUser } = useUser();
   const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
@@ -137,7 +135,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
             workspaceSlug={workspaceSlug}
             projectId={issue.project_id}
             issueId={issue.id}
-            swrIssueDescription={swrIssueDescription}
+            swrIssueDescription={null}
             initialValue={issue.description_html ?? "<p></p>"}
             disabled={!isEditable}
             issueOperations={issueOperations}
diff --git a/web/components/inbox/content/root.tsx b/web/components/inbox/content/root.tsx
index 1ffe35a464..719b1c19f1 100644
--- a/web/components/inbox/content/root.tsx
+++ b/web/components/inbox/content/root.tsx
@@ -24,14 +24,13 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
     membership: { currentProjectRole },
   } = useUser();
 
-  const { data: swrIssueDetails } = useSWR(
+  useSWR(
     workspaceSlug && projectId && inboxIssueId
       ? `PROJECT_INBOX_ISSUE_DETAIL_${workspaceSlug}_${projectId}_${inboxIssueId}`
       : null,
     workspaceSlug && projectId && inboxIssueId
       ? () => fetchInboxIssueById(workspaceSlug, projectId, inboxIssueId)
-      : null,
-    { revalidateOnFocus: true }
+      : null
   );
 
   const isEditable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -61,7 +60,6 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
             isEditable={isEditable && !isIssueDisabled}
             isSubmitting={isSubmitting}
             setIsSubmitting={setIsSubmitting}
-            swrIssueDescription={swrIssueDetails?.issue.description_html}
           />
         </div>
       </div>
diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
index fc4d7f016a..0757d06c7c 100644
--- a/web/components/issues/issue-modal/modal.tsx
+++ b/web/components/issues/issue-modal/modal.tsx
@@ -111,7 +111,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
 
     // clearing up the description state when we leave the component
     return () => setDescription(undefined);
-  }, [data, projectId, workspaceProjectIds, isOpen, activeProjectId]);
+  }, [data, projectId, isOpen, activeProjectId]);
 
   const addIssueToCycle = async (issue: TIssue, cycleId: string) => {
     if (!workspaceSlug || !activeProjectId) return;
diff --git a/web/components/labels/label-block/label-item-block.tsx b/web/components/labels/label-block/label-item-block.tsx
index e3236c91d2..b3d41abccd 100644
--- a/web/components/labels/label-block/label-item-block.tsx
+++ b/web/components/labels/label-block/label-item-block.tsx
@@ -52,7 +52,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
             : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
         } ${isLabelGroup && "-top-0.5"}`}
       >
-        <CustomMenu ellipsis buttonClassName="h-4 w-4 leading-4 text-custom-sidebar-text-400">
+        <CustomMenu ellipsis>
           {customMenuItems.map(
             ({ isVisible, onClick, CustomIcon, text, key }) =>
               isVisible && (
diff --git a/web/components/pages/editor/summary/content-browser.tsx b/web/components/pages/editor/summary/content-browser.tsx
index c5519eb185..00fd06a667 100644
--- a/web/components/pages/editor/summary/content-browser.tsx
+++ b/web/components/pages/editor/summary/content-browser.tsx
@@ -26,7 +26,6 @@ export const PageContentBrowser: React.FC<Props> = (props) => {
 
   return (
     <div className="h-full flex flex-col overflow-hidden">
-      <h2 className="font-medium">Outline</h2>
       <div className="h-full flex flex-col items-start gap-y-2 overflow-y-auto mt-2">
         {markings.length !== 0 ? (
           markings.map((marking) => {
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index b8e1acfc91..5ba25986d2 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -4,10 +4,11 @@ import { useRouter } from "next/router";
 // types
 import { TPageNavigationTabs } from "@plane/types";
 // components
+import { PageHead } from "@/components/core";
 import { PagesHeader } from "@/components/headers";
 import { PagesListRoot, PagesListView } from "@/components/pages";
 // hooks
-import { useApplication } from "@/hooks/store";
+import { useApplication, useProject } from "@/hooks/store";
 // layouts
 import { AppLayout } from "@/layouts/app-layout";
 // lib
@@ -21,6 +22,10 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
   const {
     router: { workspaceSlug, projectId },
   } = useApplication();
+  const { getProjectById } = useProject();
+  // derived values
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name ? `${project?.name} - Pages` : undefined;
 
   const currentPageType = (): TPageNavigationTabs => {
     const pageType = type?.toString();
@@ -31,17 +36,20 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
 
   if (!workspaceSlug || !projectId) return <></>;
   return (
-    <PagesListView
-      workspaceSlug={workspaceSlug.toString()}
-      projectId={projectId.toString()}
-      pageType={currentPageType()}
-    >
-      <PagesListRoot
-        pageType={currentPageType()}
+    <>
+      <PageHead title={pageTitle} />
+      <PagesListView
         workspaceSlug={workspaceSlug.toString()}
         projectId={projectId.toString()}
-      />
-    </PagesListView>
+        pageType={currentPageType()}
+      >
+        <PagesListRoot
+          pageType={currentPageType()}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+        />
+      </PagesListView>
+    </>
   );
 });