[WEB-999] chore: inbox issue bug fixes and improvement (#4188)

* chore: duplicate inbox issue header improvement

* chore: snooze inbox issue header action improvement

* fix: project inbox exception error

* chore: inbox issue modal improvement

* chore: code refactor

* chore: Updated the inbox issue mutation

---------

Co-authored-by: guru_sainath <gurusainath007@gmail.com>

apiserver/plane/app/views/inbox/base.py

@@ -429,9 +429,13 @@ class InboxIssueViewSet(BaseViewSet):
                         if state is not None:
                             issue.state = state
                             issue.save()
-
                 inbox_issue = (
-                    InboxIssue.objects.select_related("issue")
+                    InboxIssue.objects.filter(
+                        inbox_id=inbox_id.id,
+                        issue_id=serializer.data["id"],
+                        project_id=project_id,
+                    )
+                    .select_related("issue")
                     .prefetch_related(
                         "issue__labels",
                         "issue__assignees",
@@ -459,12 +463,7 @@ class InboxIssueViewSet(BaseViewSet):
                                 output_field=ArrayField(UUIDField()),
                             ),
                         ),
-                    )
+                    ).first()
-                    .get(
-                        inbox_id=inbox_id.id,
-                        issue_id=serializer.data["id"],
-                        project_id=project_id,
-                    )
                 )
                 serializer = InboxIssueDetailSerializer(inbox_issue).data
                 return Response(serializer, status=status.HTTP_200_OK)

web/components/inbox/content/inbox-issue-header.tsx

@@ -60,11 +60,11 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
   const issue = inboxIssue?.issue;
   // derived values
   const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-  const canMarkAsDuplicate = isAllowed && inboxIssue?.status === -2;
+  const canMarkAsDuplicate = isAllowed && (inboxIssue?.status === 0 || inboxIssue?.status === -2);
   const canMarkAsAccepted = isAllowed && (inboxIssue?.status === 0 || inboxIssue?.status === -2);
-  const canMarkAsDeclined = isAllowed && inboxIssue?.status === -2;
+  const canMarkAsDeclined = isAllowed && (inboxIssue?.status === 0 || inboxIssue?.status === -2);
   const canDelete = isAllowed || inboxIssue?.created_by === currentUser?.id;
-  const isAcceptedOrDeclined = inboxIssue?.status ? [-1, 1].includes(inboxIssue.status) : undefined;
+  const isAcceptedOrDeclined = inboxIssue?.status ? [-1, 1, 2].includes(inboxIssue.status) : undefined;
 
   const currentInboxIssueId = inboxIssue?.issue?.id;
 

web/components/inbox/modals/create-edit-modal/create-root.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useRef, useState } from "react";
+import { FC, FormEvent, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { EditorRefApi } from "@plane/rich-text-editor";
@@ -59,7 +59,8 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
     [formData]
   );
 
-  const handleFormSubmit = async () => {
+  const handleFormSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
     const payload: Partial<TIssue> = {
       name: formData.name || "",
       description_html: formData.description_html || "<p></p>",
@@ -117,7 +118,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
 
   if (!workspaceSlug || !projectId || !workspaceId) return <></>;
   return (
-    <div className="relative space-y-4">
+    <form className="relative space-y-4" onSubmit={handleFormSubmit}>
       <InboxIssueTitle data={formData} handleData={handleFormData} />
       <InboxIssueDescription
         workspaceSlug={workspaceSlug}
@@ -137,11 +138,11 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
           <Button variant="neutral-primary" size="sm" type="button" onClick={handleModalClose}>
             Discard
           </Button>
-          <Button variant="primary" size="sm" type="button" loading={formSubmitting} onClick={handleFormSubmit}>
+          <Button variant="primary" size="sm" type="submit" loading={formSubmitting}>
             {formSubmitting ? "Adding Issue..." : "Add Issue"}
           </Button>
         </div>
       </div>
-    </div>
+    </form>
   );
 });

web/components/inbox/modals/create-edit-modal/issue-title.tsx

@@ -21,6 +21,8 @@ export const InboxIssueTitle: FC<TInboxIssueTitle> = observer((props) => {
         onChange={(e) => handleData("name", e.target.value)}
         placeholder="Title"
         className="w-full resize-none text-xl"
+        maxLength={255}
+        required
       />
     </div>
   );

web/components/issues/description-input.tsx

@@ -107,7 +107,7 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
             ) : (
               <RichTextReadOnlyEditor
                 initialValue={localIssueDescription.description_html ?? ""}
-                containerClassName="!p-0 !pt-2 text-custom-text-200"
+                containerClassName="!p-0 !pt-2 text-custom-text-200 min-h-[150px]"
               />
             )
           }

web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx

@@ -25,6 +25,11 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
   const { currentProjectDetails } = useProject();
   const { currentTab, handleCurrentTab } = useProjectInbox();
 
+  useEffect(() => {
+    if (navigationTab && currentTab != navigationTab)
+      handleCurrentTab(navigationTab === "open" ? EInboxIssueCurrentTab.OPEN : EInboxIssueCurrentTab.CLOSED);
+  }, [currentTab, navigationTab, handleCurrentTab]);
+
   // No access to inbox
   if (currentProjectDetails?.inbox_view === false)
     return (
@@ -39,11 +44,6 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
   // derived values
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Inbox` : "Plane - Inbox";
 
-  useEffect(() => {
-    if (navigationTab && currentTab != navigationTab)
-      handleCurrentTab(navigationTab === "open" ? EInboxIssueCurrentTab.OPEN : EInboxIssueCurrentTab.CLOSED);
-  }, [currentTab, navigationTab, handleCurrentTab]);
-
   if (!workspaceSlug || !projectId) return <></>;
 
   return (

web/store/inbox/inbox-issue.store.ts

@@ -97,23 +97,24 @@ export class InboxIssueStore implements IInboxIssueStore {
     const previousData: Partial<TInboxIssue> = {
       status: this.status,
       duplicate_to: this.duplicate_to,
+      duplicate_issue_detail: this.duplicate_issue_detail,
     };
-
     try {
       if (!this.issue.id) return;
-      const issueResponse = await this.inboxIssueService.update(this.workspaceSlug, this.projectId, this.issue.id, {
+      const inboxIssue = await this.inboxIssueService.update(this.workspaceSlug, this.projectId, this.issue.id, {
         status: inboxStatus,
         duplicate_to: issueId,
       });
       runInAction(() => {
-        this.status = issueResponse.status;
+        set(this, "status", inboxIssue?.status);
-        this.duplicate_to = issueResponse.duplicate_to;
+        set(this, "duplicate_to", inboxIssue?.duplicate_to);
-        this.duplicate_issue_detail = issueResponse.duplicate_issue_detail;
+        set(this, "duplicate_issue_detail", inboxIssue?.duplicate_issue_detail);
       });
     } catch {
       runInAction(() => {
         set(this, "status", previousData.status);
         set(this, "duplicate_to", previousData.duplicate_to);
+        set(this, "duplicate_issue_detail", previousData.duplicate_issue_detail);
       });
     }
   };
@@ -124,16 +125,15 @@ export class InboxIssueStore implements IInboxIssueStore {
       status: this.status,
       snoozed_till: this.snoozed_till,
     };
-
     try {
       if (!this.issue.id) return;
-      const issueResponse = await this.inboxIssueService.update(this.workspaceSlug, this.projectId, this.issue.id, {
+      const inboxIssue = await this.inboxIssueService.update(this.workspaceSlug, this.projectId, this.issue.id, {
         status: inboxStatus,
         snoozed_till: new Date(date),
       });
       runInAction(() => {
-        this.status = issueResponse?.status;
+        set(this, "status", inboxIssue?.status);
-        this.snoozed_till = issueResponse?.snoozed_till ? new Date(issueResponse.snoozed_till) : undefined;
+        set(this, "snoozed_till", inboxIssue?.snoozed_till);
       });
     } catch {
       runInAction(() => {

web/store/inbox/project-inbox.store.ts

@@ -355,6 +355,7 @@ export class ProjectInboxStore implements IProjectInboxStore {
       if (inboxIssue && issueId) {
         runInAction(() => {
           set(this.inboxIssues, [issueId], new InboxIssueStore(workspaceSlug, projectId, inboxIssue, this.store));
+          set(this, "loader", undefined);
         });
         // fetching reactions
         await this.store.issue.issueDetail.fetchReactions(workspaceSlug, projectId, issueId);
@@ -362,7 +363,6 @@ export class ProjectInboxStore implements IProjectInboxStore {
         await this.store.issue.issueDetail.fetchActivities(workspaceSlug, projectId, issueId);
         // fetching comments
         await this.store.issue.issueDetail.fetchComments(workspaceSlug, projectId, issueId);
-        this.loader = undefined;
       }
       return inboxIssue;
     } catch (error) {