From bbbd7047d33d9f6f223ff7d5c3a1f79892afcbb1 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Mon, 19 Feb 2024 15:43:57 +0530
Subject: [PATCH] fix: issue description empty state initial load in inbox and
 issue detail page (#3696)

* fix: updated description init loading and added loading confirmation alert in inbox issues, issue peek overview, and issue detail

* fix: updated the space issue in the editor and removed unwanted props in the description-input for issues
---
 .../editor/rich-text-editor/src/ui/index.tsx  |  2 +-
 web/components/issues/description-input.tsx   | 20 +++++------
 .../issue-detail/inbox/main-content.tsx       | 33 +++++++++++++++----
 .../issues/issue-detail/main-content.tsx      | 32 ++++++++++++++----
 .../issues/peek-overview/issue-detail.tsx     | 28 ++++++++++------
 5 files changed, 80 insertions(+), 35 deletions(-)

diff --git a/packages/editor/rich-text-editor/src/ui/index.tsx b/packages/editor/rich-text-editor/src/ui/index.tsx
index fe5752849..4bcb340fd 100644
--- a/packages/editor/rich-text-editor/src/ui/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/index.tsx
@@ -100,7 +100,7 @@ const RichTextEditor = ({
   });
 
   React.useEffect(() => {
-    if (editor && initialValue) editor.commands.setContent(initialValue);
+    if (editor && initialValue && editor.getHTML() != initialValue) editor.commands.setContent(initialValue);
   }, [editor, initialValue]);
 
   if (!editor) return null;
diff --git a/web/components/issues/description-input.tsx b/web/components/issues/description-input.tsx
index 86ef898c0..79634fa84 100644
--- a/web/components/issues/description-input.tsx
+++ b/web/components/issues/description-input.tsx
@@ -1,5 +1,4 @@
 import { FC, useState, useEffect } from "react";
-import { observer } from "mobx-react";
 // components
 import { Loader } from "@plane/ui";
 import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
@@ -14,19 +13,18 @@ import { TIssueOperations } from "./issue-detail";
 import useDebounce from "hooks/use-debounce";
 
 export type IssueDescriptionInputProps = {
-  disabled?: boolean;
-  value: string | undefined | null;
   workspaceSlug: string;
-  isSubmitting: "submitting" | "submitted" | "saved";
-  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
-  issueOperations: TIssueOperations;
   projectId: string;
   issueId: string;
-  initialValue?: string;
+  value: string | undefined;
+  initialValue: string | undefined;
+  disabled?: boolean;
+  issueOperations: TIssueOperations;
+  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
 };
 
-export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
-  const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId, initialValue } = props;
+export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = (props) => {
+  const { workspaceSlug, projectId, issueId, value, initialValue, disabled, issueOperations, setIsSubmitting } = props;
   // states
   const [descriptionHTML, setDescriptionHTML] = useState(value);
   // store hooks
@@ -78,7 +76,7 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
       uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
       deleteFile={fileService.getDeleteImageFunction(workspaceId)}
       restoreFile={fileService.getRestoreImageFunction(workspaceId)}
-      value={descriptionHTML === "" ? "<p></p>" : descriptionHTML}
+      value={descriptionHTML}
       initialValue={initialValue}
       dragDropEnabled
       customClassName="min-h-[150px] shadow-sm"
@@ -90,4 +88,4 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
       mentionHighlights={mentionHighlights}
     />
   );
-});
+};
diff --git a/web/components/issues/issue-detail/inbox/main-content.tsx b/web/components/issues/issue-detail/inbox/main-content.tsx
index a576f6034..d753be02f 100644
--- a/web/components/issues/issue-detail/inbox/main-content.tsx
+++ b/web/components/issues/issue-detail/inbox/main-content.tsx
@@ -1,7 +1,8 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
 import { useIssueDetail, useProjectState, useUser } from "hooks/store";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
 // components
 import { IssueUpdateStatus, TIssueOperations } from "components/issues";
 import { IssueTitleInput } from "../../title-input";
@@ -31,12 +32,31 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+  const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
 
-  const issue = getIssueById(issueId);
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 3000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert, setIsSubmitting]);
+
+  const issue = issueId ? getIssueById(issueId) : undefined;
   if (!issue) return <></>;
 
   const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
 
+  const issueDescription =
+    issue.description_html !== undefined || issue.description_html !== null
+      ? issue.description_html != ""
+        ? issue.description_html
+        : "<p></p>"
+      : undefined;
+
   return (
     <>
       <div className="rounded-lg space-y-4">
@@ -74,12 +94,11 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           workspaceSlug={workspaceSlug}
           projectId={issue.project_id}
           issueId={issue.id}
-          isSubmitting={isSubmitting}
-          setIsSubmitting={(value) => setIsSubmitting(value)}
-          issueOperations={issueOperations}
+          value={issueDescription}
+          initialValue={issueDescription}
           disabled={!is_editable}
-          value={issue.description_html}
-          initialValue={issue.description_html}
+          issueOperations={issueOperations}
+          setIsSubmitting={(value) => setIsSubmitting(value)}
         />
 
         {currentUser && (
diff --git a/web/components/issues/issue-detail/main-content.tsx b/web/components/issues/issue-detail/main-content.tsx
index 968b9faa5..719129d98 100644
--- a/web/components/issues/issue-detail/main-content.tsx
+++ b/web/components/issues/issue-detail/main-content.tsx
@@ -1,7 +1,8 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
 import { useIssueDetail, useProjectState, useUser } from "hooks/store";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
 // components
 import { IssueAttachmentRoot, IssueUpdateStatus } from "components/issues";
 import { IssueTitleInput } from "../title-input";
@@ -33,12 +34,31 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+  const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
 
-  const issue = getIssueById(issueId);
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert, setIsSubmitting]);
+
+  const issue = issueId ? getIssueById(issueId) : undefined;
   if (!issue) return <></>;
 
   const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
 
+  const issueDescription =
+    issue.description_html !== undefined || issue.description_html !== null
+      ? issue.description_html != ""
+        ? issue.description_html
+        : "<p></p>"
+      : undefined;
+
   return (
     <>
       <div className="rounded-lg space-y-4">
@@ -78,11 +98,11 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           workspaceSlug={workspaceSlug}
           projectId={issue.project_id}
           issueId={issue.id}
-          isSubmitting={isSubmitting}
-          setIsSubmitting={(value) => setIsSubmitting(value)}
-          issueOperations={issueOperations}
+          value={issueDescription}
+          initialValue={issueDescription}
           disabled={!is_editable}
-          value={issue.description_html}
+          issueOperations={issueOperations}
+          setIsSubmitting={(value) => setIsSubmitting(value)}
         />
 
         {currentUser && (
diff --git a/web/components/issues/peek-overview/issue-detail.tsx b/web/components/issues/peek-overview/issue-detail.tsx
index 0134d35ee..7f540874c 100644
--- a/web/components/issues/peek-overview/issue-detail.tsx
+++ b/web/components/issues/peek-overview/issue-detail.tsx
@@ -30,12 +30,6 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
   } = useIssueDetail();
   // hooks
   const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
-  // derived values
-  const issue = getIssueById(issueId);
-
-  if (!issue) return <></>;
-
-  const projectDetails = getProjectById(issue?.project_id);
 
   useEffect(() => {
     if (isSubmitting === "submitted") {
@@ -48,6 +42,18 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
     }
   }, [isSubmitting, setShowAlert, setIsSubmitting]);
 
+  const issue = issueId ? getIssueById(issueId) : undefined;
+  if (!issue) return <></>;
+
+  const projectDetails = getProjectById(issue?.project_id);
+
+  const issueDescription =
+    issue.description_html !== undefined || issue.description_html !== null
+      ? issue.description_html != ""
+        ? issue.description_html
+        : "<p></p>"
+      : undefined;
+
   return (
     <>
       <span className="text-base font-medium text-custom-text-400">
@@ -63,16 +69,18 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
         disabled={disabled}
         value={issue.name}
       />
+
       <IssueDescriptionInput
         workspaceSlug={workspaceSlug}
         projectId={issue.project_id}
         issueId={issue.id}
-        isSubmitting={isSubmitting}
-        setIsSubmitting={(value) => setIsSubmitting(value)}
-        issueOperations={issueOperations}
+        value={issueDescription}
+        initialValue={issueDescription}
         disabled={disabled}
-        value={issue.description_html}
+        issueOperations={issueOperations}
+        setIsSubmitting={(value) => setIsSubmitting(value)}
       />
+
       {currentUser && (
         <IssueReaction
           workspaceSlug={workspaceSlug}