fix: updated issue title and description components (#3687)

* fix: issue description fixes * chore: description html in the archive issue * chore: changed retrieve viewset * chore: implemented new issue title description components in inbox, issue-detail and fixed issue in archived store * chore: removed consoles and empty description update in issue detail * fix: draft issue empty state image --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
2024-02-16 20:07:04 +05:30 · 2024-02-16 20:07:04 +05:30 · a94c607031
commit a94c607031
parent 665a07f15a
14 changed files with 289 additions and 88 deletions
--- a/apiserver/plane/app/views/issue.py
+++ b/apiserver/plane/app/views/issue.py
@ -1209,13 +1209,13 @@ class IssueArchiveViewSet(BaseViewSet):
        return Response(issues, status=status.HTTP_200_OK)

    def retrieve(self, request, slug, project_id, pk=None):
-        issue = Issue.objects.get(
-            workspace__slug=slug,
-            project_id=project_id,
-            archived_at__isnull=False,
-            pk=pk,
+        issue = self.get_queryset().filter(pk=pk).first()
+        return Response(
+            IssueDetailSerializer(
+                issue, fields=self.fields, expand=self.expand
+            ).data,
+            status=status.HTTP_200_OK,
        )
-        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)

    def unarchive(self, request, slug, project_id, pk=None):
        issue = Issue.objects.get(
--- a/web/components/issues/description-input.tsx
+++ b/web/components/issues/description-input.tsx
@ -0,0 +1,95 @@
+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";
+// store hooks
+import { useMention, useWorkspace } from "hooks/store";
+// services
+import { FileService } from "services/file.service";
+const fileService = new FileService();
+// types
+import { TIssueOperations } from "./issue-detail";
+// hooks
+import useDebounce from "hooks/use-debounce";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
+
+export type IssueDescriptionInputProps = {
+  disabled?: boolean;
+  value: string | undefined | null;
+  workspaceSlug: string;
+  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
+  issueOperations: TIssueOperations;
+  projectId: string;
+  issueId: string;
+};
+
+export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
+  const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props;
+  // states
+  const [descriptionHTML, setDescriptionHTML] = useState(value);
+  // store hooks
+  const { mentionHighlights, mentionSuggestions } = useMention();
+  const workspaceStore = useWorkspace();
+  // hooks
+  const { setShowAlert } = useReloadConfirmations();
+  const debouncedValue = useDebounce(descriptionHTML, 1500);
+  // computed values
+  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string;
+
+  useEffect(() => {
+    setDescriptionHTML(value);
+  }, [value]);
+
+  useEffect(() => {
+    if (debouncedValue || debouncedValue === "") {
+      issueOperations
+        .update(workspaceSlug, projectId, issueId, { description_html: debouncedValue }, false)
+        .finally(() => {
+          setIsSubmitting("saved");
+        });
+    }
+    // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValue]);
+
+  if (!descriptionHTML && descriptionHTML !== "") {
+    return (
+      <Loader>
+        <Loader.Item height="150px" />
+      </Loader>
+    );
+  }
+
+  if (disabled) {
+    return (
+      <RichReadOnlyEditor
+        value={descriptionHTML}
+        customClassName="!p-0 !pt-2 text-custom-text-200"
+        noBorder={disabled}
+        mentionHighlights={mentionHighlights}
+      />
+    );
+  }
+
+  return (
+    <RichTextEditor
+      cancelUploadImage={fileService.cancelUpload}
+      uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+      deleteFile={fileService.getDeleteImageFunction(workspaceId)}
+      restoreFile={fileService.getRestoreImageFunction(workspaceId)}
+      value={descriptionHTML}
+      setShouldShowAlert={setShowAlert}
+      setIsSubmitting={setIsSubmitting}
+      dragDropEnabled
+      customClassName="min-h-[150px] shadow-sm"
+      onChange={(description: Object, description_html: string) => {
+        setShowAlert(true);
+        setIsSubmitting("submitting");
+        setDescriptionHTML(description_html);
+      }}
+      mentionSuggestions={mentionSuggestions}
+      mentionHighlights={mentionHighlights}
+    />
+  );
+});
--- a/web/components/issues/issue-detail/inbox/main-content.tsx
+++ b/web/components/issues/issue-detail/inbox/main-content.tsx
@ -3,7 +3,9 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { useIssueDetail, useProjectState, useUser } from "hooks/store";
 // components
-import { IssueDescriptionForm, IssueUpdateStatus, TIssueOperations } from "components/issues";
+import { IssueUpdateStatus, TIssueOperations } from "components/issues";
+import { IssueTitleInput } from "../../title-input";
+import { IssueDescriptionInput } from "../../description-input";
 import { IssueReaction } from "../reactions";
 import { IssueActivity } from "../issue-activity";
 import { InboxIssueStatus } from "../../../inbox/inbox-issue-status";
@ -57,15 +59,24 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
          <IssueUpdateStatus isSubmitting={isSubmitting} issueDetail={issue} />
        </div>

-        <IssueDescriptionForm
+        <IssueTitleInput
          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issueId}
+          projectId={issue.project_id}
+          issueId={issue.id}
          setIsSubmitting={(value) => setIsSubmitting(value)}
-          isSubmitting={isSubmitting}
-          issue={issue}
          issueOperations={issueOperations}
          disabled={!is_editable}
+          value={issue.name}
+        />
+
+        <IssueDescriptionInput
+          workspaceSlug={workspaceSlug}
+          projectId={issue.project_id}
+          issueId={issue.id}
+          setIsSubmitting={(value) => setIsSubmitting(value)}
+          issueOperations={issueOperations}
+          disabled={!is_editable}
+          value={issue.description_html}
        />

        {currentUser && (
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
@ -81,7 +81,6 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
            render={({ field: { value, onChange } }) => (
              <LiteTextEditorWithRef
                onEnterKeyPress={(e) => {
-                  console.log("yo");
                  handleSubmit(onSubmit)(e);
                }}
                cancelUploadImage={fileService.cancelUpload}
--- a/web/components/issues/issue-detail/main-content.tsx
+++ b/web/components/issues/issue-detail/main-content.tsx
@ -3,7 +3,9 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { useIssueDetail, useProjectState, useUser } from "hooks/store";
 // components
-import { IssueDescriptionForm, IssueAttachmentRoot, IssueUpdateStatus } from "components/issues";
+import { IssueAttachmentRoot, IssueUpdateStatus } from "components/issues";
+import { IssueTitleInput } from "../title-input";
+import { IssueDescriptionInput } from "../description-input";
 import { IssueParentDetail } from "./parent";
 import { IssueReaction } from "./reactions";
 import { SubIssuesRoot } from "../sub-issues";
@ -61,15 +63,24 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
          <IssueUpdateStatus isSubmitting={isSubmitting} issueDetail={issue} />
        </div>

-        <IssueDescriptionForm
+        <IssueTitleInput
          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issueId}
+          projectId={issue.project_id}
+          issueId={issue.id}
          setIsSubmitting={(value) => setIsSubmitting(value)}
-          isSubmitting={isSubmitting}
-          issue={issue}
          issueOperations={issueOperations}
          disabled={!is_editable}
+          value={issue.name}
+        />
+
+        <IssueDescriptionInput
+          workspaceSlug={workspaceSlug}
+          projectId={issue.project_id}
+          issueId={issue.id}
+          setIsSubmitting={(value) => setIsSubmitting(value)}
+          issueOperations={issueOperations}
+          disabled={!is_editable}
+          value={issue.description_html}
        />

        {currentUser && (
--- a/web/components/issues/issue-layouts/empty-states/draft-issues.tsx
+++ b/web/components/issues/issue-layouts/empty-states/draft-issues.tsx
@ -42,7 +42,7 @@ export const ProjectDraftEmptyState: React.FC = observer(() => {

  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
  const currentLayoutEmptyStateImagePath = getEmptyStateImagePath("empty-filters", activeLayout ?? "list", isLightMode);
-  const EmptyStateImagePath = getEmptyStateImagePath("draft", "empty-issues", isLightMode);
+  const EmptyStateImagePath = getEmptyStateImagePath("draft", "draft-issues-empty", isLightMode);

  const issueFilterCount = size(
    Object.fromEntries(
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@ -50,9 +50,8 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
  return (
    <div
      className={cn("min-h-12 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
-        "border border-custom-primary-70 hover:border-custom-primary-70":
-              peekIssue && peekIssue.issueId === issue.id,
-            "last:border-b-transparent": peekIssue?.issueId !== issue.id
+        "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
+        "last:border-b-transparent": peekIssue?.issueId !== issue.id,
      })}
    >
      {displayProperties && displayProperties?.key && (
--- a/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@ -54,7 +54,7 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
          <div className="relative h-full w-full overflow-auto">
            <ArchivedIssueListLayout />
          </div>
-          <IssuePeekOverview is_archived />
+          <IssuePeekOverview is_archived={true} />
        </Fragment>
      )}
    </div>
--- a/web/components/issues/peek-overview/issue-detail.tsx
+++ b/web/components/issues/peek-overview/issue-detail.tsx
@ -1,10 +1,15 @@
-import { FC } from "react";
-// hooks
-import { useIssueDetail, useProject, useUser } from "hooks/store";
-// components
-import { IssueDescriptionForm, TIssueOperations } from "components/issues";
-import { IssueReaction } from "../issue-detail/reactions";
+import { FC, useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
+// store hooks
+import { useIssueDetail, useProject, useUser } from "hooks/store";
+// hooks
+import useReloadConfirmations from "hooks/use-reload-confirmation";
+// components
+import { TIssueOperations } from "components/issues";
+import { IssueReaction } from "../issue-detail/reactions";
+import { IssueTitleInput } from "../title-input";
+import { IssueDescriptionInput } from "../description-input";
+import { debounce } from "lodash";

 interface IPeekOverviewIssueDetails {
  workspaceSlug: string;
@ -17,17 +22,18 @@ interface IPeekOverviewIssueDetails {
 }

 export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
+  const { workspaceSlug, issueId, issueOperations, disabled, setIsSubmitting } = props;
  // store hooks
  const { getProjectById } = useProject();
  const { currentUser } = useUser();
  const {
    issue: { getIssueById },
  } = useIssueDetail();
-
  // derived values
  const issue = getIssueById(issueId);
+
  if (!issue) return <></>;
+
  const projectDetails = getProjectById(issue?.project_id);

  return (
@ -35,20 +41,28 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
      <span className="text-base font-medium text-custom-text-400">
        {projectDetails?.identifier}-{issue?.sequence_id}
      </span>
-      <IssueDescriptionForm
+      <IssueTitleInput
        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        issueId={issueId}
+        projectId={issue.project_id}
+        issueId={issue.id}
        setIsSubmitting={(value) => setIsSubmitting(value)}
-        isSubmitting={isSubmitting}
-        issue={issue}
        issueOperations={issueOperations}
        disabled={disabled}
+        value={issue.name}
+      />
+      <IssueDescriptionInput
+        workspaceSlug={workspaceSlug}
+        projectId={issue.project_id}
+        issueId={issue.id}
+        setIsSubmitting={(value) => setIsSubmitting(value)}
+        issueOperations={issueOperations}
+        disabled={disabled}
+        value={issue.description_html}
      />
      {currentUser && (
        <IssueReaction
          workspaceSlug={workspaceSlug}
-          projectId={projectId}
+          projectId={issue.project_id}
          issueId={issueId}
          currentUser={currentUser}
        />
--- a/web/components/issues/peek-overview/root.tsx
+++ b/web/components/issues/peek-overview/root.tsx
@ -69,20 +69,11 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
  // state
  const [loader, setLoader] = useState(false);

-  useEffect(() => {
-    if (peekIssue) {
-      setLoader(true);
-      fetchIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId).finally(() => {
-        setLoader(false);
-      });
-    }
-  }, [peekIssue, fetchIssue]);
-
  const issueOperations: TIssuePeekOperations = useMemo(
    () => ({
      fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
        try {
-          await fetchIssue(workspaceSlug, projectId, issueId);
+          await fetchIssue(workspaceSlug, projectId, issueId, is_archived);
        } catch (error) {
          console.error("Error fetching the parent issue");
        }
@ -324,9 +315,20 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
      removeModulesFromIssue,
      setToastAlert,
      onIssueUpdate,
+      captureIssueEvent,
+      router.asPath,
    ]
  );

+  useEffect(() => {
+    if (peekIssue) {
+      setLoader(true);
+      issueOperations.fetch(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId).finally(() => {
+        setLoader(false);
+      });
+    }
+  }, [peekIssue, issueOperations]);
+
  if (!peekIssue?.workspaceSlug || !peekIssue?.projectId || !peekIssue?.issueId) return <></>;

  const issue = getIssueById(peekIssue.issueId) || undefined;
--- a/web/components/issues/title-input.tsx
+++ b/web/components/issues/title-input.tsx
@ -0,0 +1,70 @@
+import { FC, useState, useEffect, useCallback } from "react";
+import { observer } from "mobx-react";
+// components
+import { TextArea } from "@plane/ui";
+// types
+import { TIssueOperations } from "./issue-detail";
+// hooks
+import useDebounce from "hooks/use-debounce";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
+
+export type IssueTitleInputProps = {
+  disabled?: boolean;
+  value: string | undefined | null;
+  workspaceSlug: string;
+  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
+  issueOperations: TIssueOperations;
+  projectId: string;
+  issueId: string;
+};
+
+export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
+  const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props;
+  // states
+  const [title, setTitle] = useState("");
+  // hooks
+  const { setShowAlert } = useReloadConfirmations();
+  const debouncedValue = useDebounce(title, 1500);
+
+  useEffect(() => {
+    if (value) setTitle(value);
+  }, [value]);
+
+  useEffect(() => {
+    if (debouncedValue) {
+      issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }, false).finally(() => {
+        setIsSubmitting("saved");
+      });
+    }
+    // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValue]);
+
+  const handleTitleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setShowAlert(true);
+      setIsSubmitting("submitting");
+      setTitle(e.target.value);
+    },
+    [setIsSubmitting, setShowAlert]
+  );
+
+  return (
+    <div className="relative">
+      <TextArea
+        className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
+          title?.length === 0 ? "!ring-red-400" : ""
+        }`}
+        disabled={disabled}
+        value={title}
+        onChange={handleTitleChange}
+        maxLength={255}
+        placeholder="Issue title"
+      />
+      <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200">
+        <span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
+        /255
+      </div>
+    </div>
+  );
+});
--- a/web/components/pages/create-update-page-modal.tsx
+++ b/web/components/pages/create-update-page-modal.tsx
@ -68,7 +68,6 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
            state: "SUCCESS",
          },
        });
-        console.log("Page updated successfully", pageStore);
      } else {
        await createProjectPage(formData);
      }
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@ -79,7 +79,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
    return updateProject(workspaceSlug.toString(), project.id, payload)
      .then((res) => {
        const changed_properties = Object.keys(dirtyFields);
-        console.log(dirtyFields);
+
        captureProjectEvent({
          eventName: PROJECT_UPDATED,
          payload: {
--- a/web/layouts/settings-layout/profile/preferences/layout.tsx
+++ b/web/layouts/settings-layout/profile/preferences/layout.tsx
@ -20,12 +20,11 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
  const { theme: themeStore } = useApplication();

  const showMenuItem = () => {
-    const item = router.asPath.split('/');
+    const item = router.asPath.split("/");
    let splittedItem = item[item.length - 1];
    splittedItem = splittedItem.replace(splittedItem[0], splittedItem[0].toUpperCase());
-    console.log(splittedItem);
    return splittedItem;
-  }
+  };

  const profilePreferenceLinks: Array<{
    label: string;
@ -42,7 +41,8 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
  ];

  return (
-    <ProfileSettingsLayout header={
+    <ProfileSettingsLayout
+      header={
        <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
          <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
          <CustomMenu
@ -59,15 +59,16 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
          >
            <></>
            {profilePreferenceLinks.map((link) => (
-            <CustomMenu.MenuItem
-              className="flex items-center gap-2"
-            >
-              <Link key={link.href} href={link.href} className="text-custom-text-300 w-full">{link.label}</Link>
+              <CustomMenu.MenuItem className="flex items-center gap-2">
+                <Link key={link.href} href={link.href} className="text-custom-text-300 w-full">
+                  {link.label}
+                </Link>
              </CustomMenu.MenuItem>
            ))}
          </CustomMenu>
        </div>
-    }>
+      }
+    >
      <div className="relative flex h-screen w-full overflow-hidden">
        <ProfilePreferenceSettingsSidebar />
        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">