chore: Removing 'description_html' from Issue List (#3623)

* chore: removed issue description from issue list

* fix: issue description handling on peekoverview

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

web/components/issues/description-form.tsx

@@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 import useReloadConfirmations from "hooks/use-reload-confirmation";
 import debounce from "lodash/debounce";
 // components
-import { TextArea } from "@plane/ui";
+import { Loader, TextArea } from "@plane/ui";
 import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
 // types
 import { TIssue } from "@plane/types";
@@ -12,6 +12,8 @@ import { TIssueOperations } from "./issue-detail";
 // services
 import { FileService } from "services/file.service";
 import { useMention, useWorkspace } from "hooks/store";
+import { observer } from "mobx-react";
+import { isNil } from "lodash";
 
 export interface IssueDescriptionFormValues {
   name: string;
@@ -36,7 +38,7 @@ export interface IssueDetailsProps {
 
 const fileService = new FileService();
 
-export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
+export const IssueDescriptionForm: FC<IssueDetailsProps> = observer((props) => {
   const { workspaceSlug, projectId, issueId, issue, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
   const workspaceStore = useWorkspace();
   const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string;
@@ -71,12 +73,20 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
   // editor rerendering on every save
   useEffect(() => {
     if (issue.id) {
-      setLocalIssueDescription({ id: issue.id, description_html: issue.description_html });
       setLocalTitleValue(issue.name);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [issue.id]); // TODO: verify the exhaustive-deps warning
 
+  useEffect(() => {
+    if (issue.description_html) {
+      setLocalIssueDescription((state) => {
+        if (!isNil(state.description_html)) return state;
+        return { id: issue.id, description_html: issue.description_html };
+      });
+    }
+  }, [issue.description_html]);
+
   const handleDescriptionFormSubmit = useCallback(
     async (formData: Partial<TIssue>) => {
       if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
@@ -167,42 +177,48 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
       </div>
       <span>{errors.name ? errors.name.message : null}</span>
       <div className="relative">
-        <Controller
-          name="description_html"
-          control={control}
-          render={({ field: { onChange } }) =>
-            !disabled ? (
-              <RichTextEditor
-                cancelUploadImage={fileService.cancelUpload}
-                uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-                deleteFile={fileService.getDeleteImageFunction(workspaceId)}
-                restoreFile={fileService.getRestoreImageFunction(workspaceId)}
-                value={localIssueDescription.description_html}
-                rerenderOnPropsChange={localIssueDescription}
-                setShouldShowAlert={setShowAlert}
-                setIsSubmitting={setIsSubmitting}
-                dragDropEnabled
-                customClassName="min-h-[150px] shadow-sm"
-                onChange={(description: Object, description_html: string) => {
-                  setShowAlert(true);
-                  setIsSubmitting("submitting");
-                  onChange(description_html);
-                  debouncedFormSave();
-                }}
-                mentionSuggestions={mentionSuggestions}
-                mentionHighlights={mentionHighlights}
-              />
-            ) : (
-              <RichReadOnlyEditor
-                value={localIssueDescription.description_html}
-                customClassName="!p-0 !pt-2 text-custom-text-200"
-                noBorder={disabled}
-                mentionHighlights={mentionHighlights}
-              />
-            )
-          }
-        />
+        {issue.description_html ? (
+          <Controller
+            name="description_html"
+            control={control}
+            render={({ field: { onChange } }) =>
+              !disabled ? (
+                <RichTextEditor
+                  cancelUploadImage={fileService.cancelUpload}
+                  uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+                  deleteFile={fileService.getDeleteImageFunction(workspaceId)}
+                  restoreFile={fileService.getRestoreImageFunction(workspaceId)}
+                  value={localIssueDescription.description_html}
+                  rerenderOnPropsChange={localIssueDescription}
+                  setShouldShowAlert={setShowAlert}
+                  setIsSubmitting={setIsSubmitting}
+                  dragDropEnabled
+                  customClassName="min-h-[150px] shadow-sm"
+                  onChange={(description: Object, description_html: string) => {
+                    setShowAlert(true);
+                    setIsSubmitting("submitting");
+                    onChange(description_html);
+                    debouncedFormSave();
+                  }}
+                  mentionSuggestions={mentionSuggestions}
+                  mentionHighlights={mentionHighlights}
+                />
+              ) : (
+                <RichReadOnlyEditor
+                  value={localIssueDescription.description_html}
+                  customClassName="!p-0 !pt-2 text-custom-text-200"
+                  noBorder={disabled}
+                  mentionHighlights={mentionHighlights}
+                />
+              )
+            }
+          />
+        ) : (
+          <Loader>
+            <Loader.Item height="150px" />
+          </Loader>
+        )}
       </div>
     </div>
   );
-};
+});

web/components/issues/peek-overview/issue-detail.tsx

@@ -4,6 +4,7 @@ import { useIssueDetail, useProject, useUser } from "hooks/store";
 // components
 import { IssueDescriptionForm, TIssueOperations } from "components/issues";
 import { IssueReaction } from "../issue-detail/reactions";
+import { observer } from "mobx-react";
 
 interface IPeekOverviewIssueDetails {
   workspaceSlug: string;
@@ -15,7 +16,7 @@ interface IPeekOverviewIssueDetails {
   setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
 }
 
-export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) => {
+export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer((props) => {
   const { workspaceSlug, projectId, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
   // store hooks
   const { getProjectById } = useProject();
@@ -23,6 +24,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+
   // derived values
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
@@ -53,4 +55,4 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
       )}
     </>
   );
-};
+});