[WEB-927, WEB-928] fix: inbox issue bug fixes and improvement (#4160)

* chore: inbox duplicate issue modal improvement * chore: handled tab navigation in inbox issues and handled cross project inbox issues * chore: fetch inbox issue activity once the issue is updated in inbox issue * chore: disable duplicate inbox issue actions * chore: duplicate issue mutation in the inbox issue * chore: inbox create modal sidebar tab change updated * chore: multiple date selection in the inbox issue filters * chore: code refactor * chore: removed project dependancy on the inbox store structure --------- Co-authored-by: Anmol Singh Bhatia <[email protected]>
makeplane · Apr 10, 2024 · f45c2d1 · f45c2d1
1 parent d0cb00f
commit f45c2d1
Show file tree

Hide file tree

Showing 15 changed files with 96 additions and 108 deletions.
diff --git a/web/components/inbox/content/issue-properties.tsx b/web/components/inbox/content/issue-properties.tsx
@@ -17,12 +17,12 @@ type Props = {
   projectId: string;
   issue: Partial<TIssue>;
   issueOperations: TIssueOperations;
-  is_editable: boolean;
+  isEditable: boolean;
   duplicateIssueDetails: TInboxDuplicateIssueDetails | undefined;
 };
 
 export const InboxIssueProperties: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issue, issueOperations, is_editable, duplicateIssueDetails } = props;
+  const { workspaceSlug, projectId, issue, issueOperations, isEditable, duplicateIssueDetails } = props;
 
   const router = useRouter();
   // store hooks
@@ -35,7 +35,7 @@ export const InboxIssueProperties: React.FC<Props> = observer((props) => {
     <div className="flex h-min w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
       <div className="h-min w-full overflow-y-auto px-5">
         <h5 className="text-sm font-medium my-4">Properties</h5>
-        <div className={`divide-y-2 divide-custom-border-200 ${!is_editable ? "opacity-60" : ""}`}>
+        <div className={`divide-y-2 divide-custom-border-200 ${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
             {/* State */}
             <div className="flex items-center gap-2 h-8">
@@ -50,7 +50,7 @@ export const InboxIssueProperties: React.FC<Props> = observer((props) => {
                     issue?.id && issueOperations.update(workspaceSlug, projectId, issue?.id, { state_id: val })
                   }
                   projectId={projectId?.toString() ?? ""}
-                  disabled={!is_editable}
+                  disabled={!isEditable}
                   buttonVariant="transparent-with-text"
                   className="w-3/5 flex-grow group"
                   buttonContainerClassName="w-full text-left"
@@ -71,7 +71,7 @@ export const InboxIssueProperties: React.FC<Props> = observer((props) => {
                 onChange={(val) =>
                   issue?.id && issueOperations.update(workspaceSlug, projectId, issue?.id, { assignee_ids: val })
                 }
-                disabled={!is_editable}
+                disabled={!isEditable}
                 projectId={projectId?.toString() ?? ""}
                 placeholder="Add assignees"
                 multiple
@@ -99,7 +99,7 @@ export const InboxIssueProperties: React.FC<Props> = observer((props) => {
                 onChange={(val) =>
                   issue?.id && issueOperations.update(workspaceSlug, projectId, issue?.id, { priority: val })
                 }
-                disabled={!is_editable}
+                disabled={!isEditable}
                 buttonVariant="border-with-text"
                 className="w-3/5 flex-grow rounded px-2 hover:bg-custom-background-80"
                 buttonContainerClassName="w-full text-left"
@@ -108,7 +108,7 @@ export const InboxIssueProperties: React.FC<Props> = observer((props) => {
             </div>
           </div>
         </div>
-        <div className={`divide-y-2 divide-custom-border-200 mt-3 ${!is_editable ? "opacity-60" : ""}`}>
+        <div className={`divide-y-2 divide-custom-border-200 mt-3 ${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
             {/* Due Date */}
             <div className="flex items-center gap-2 h-8">
@@ -126,7 +126,7 @@ export const InboxIssueProperties: React.FC<Props> = observer((props) => {
                   })
                 }
                 minDate={minDate ?? undefined}
-                disabled={!is_editable}
+                disabled={!isEditable}
                 buttonVariant="transparent-with-text"
                 className="w-3/5 flex-grow group"
                 buttonContainerClassName="w-full text-left"
@@ -147,7 +147,7 @@ export const InboxIssueProperties: React.FC<Props> = observer((props) => {
                     workspaceSlug={workspaceSlug}
                     projectId={projectId}
                     issueId={issue?.id}
-                    disabled={!is_editable}
+                    disabled={!isEditable}
                     isInboxIssue
                     onLabelUpdate={(val: string[]) =>
                       issue?.id && issueOperations.update(workspaceSlug, projectId, issue?.id, { label_ids: val })

diff --git a/web/components/inbox/content/issue-root.tsx b/web/components/inbox/content/issue-root.tsx
@@ -22,14 +22,14 @@ type Props = {
   workspaceSlug: string;
   projectId: string;
   inboxIssue: IInboxIssueStore;
-  is_editable: boolean;
+  isEditable: boolean;
   isSubmitting: "submitting" | "submitted" | "saved";
   setIsSubmitting: Dispatch<SetStateAction<"submitting" | "submitted" | "saved">>;
 };
 
 export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   const router = useRouter();
-  const { workspaceSlug, projectId, inboxIssue, is_editable, isSubmitting, setIsSubmitting } = props;
+  const { workspaceSlug, projectId, inboxIssue, isEditable, isSubmitting, setIsSubmitting } = props;
   // hooks
   const { currentUser } = useUser();
   const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
@@ -126,7 +126,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           isSubmitting={isSubmitting}
           setIsSubmitting={(value) => setIsSubmitting(value)}
           issueOperations={issueOperations}
-          disabled={!is_editable}
+          disabled={!isEditable}
           value={issue.name}
         />
 
@@ -136,7 +136,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           issueId={issue.id}
           value={issueDescription}
           initialValue={issueDescription}
-          disabled={!is_editable}
+          disabled={!isEditable}
           issueOperations={issueOperations}
           setIsSubmitting={(value) => setIsSubmitting(value)}
         />
@@ -156,7 +156,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
         projectId={projectId}
         issue={issue}
         issueOperations={issueOperations}
-        is_editable={is_editable}
+        isEditable={isEditable}
         duplicateIssueDetails={inboxIssue?.duplicate_issue_detail}
       />
 

diff --git a/web/components/inbox/content/root.tsx b/web/components/inbox/content/root.tsx
@@ -32,11 +32,11 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
     { revalidateOnFocus: false }
   );
 
-  const is_editable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const isEditable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
   if (!inboxIssue) return <></>;
 
-  const isIssueAcceptedOrDeclined = [-1, 1].includes(inboxIssue.status);
+  const isIssueDisabled = [-1, 1, 2].includes(inboxIssue.status);
 
   return (
     <>
@@ -54,7 +54,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
             workspaceSlug={workspaceSlug}
             projectId={projectId}
             inboxIssue={inboxIssue}
-            is_editable={is_editable && !isIssueAcceptedOrDeclined}
+            isEditable={isEditable && !isIssueDisabled}
             isSubmitting={isSubmitting}
             setIsSubmitting={setIsSubmitting}
           />

diff --git a/web/components/inbox/inbox-filter/filters/date.tsx b/web/components/inbox/inbox-filter/filters/date.tsx
@@ -38,12 +38,6 @@ export const FilterDate: FC<Props> = observer((props) => {
 
   const handleFilterValue = (value: string): string[] => (filterValue?.includes(value) ? [] : uniq(concat(value)));
 
-  const handleCustomFilterValue = (value: string[]): string[] => {
-    const finalOptions: string[] = [...filterValue];
-    value.forEach((v) => (finalOptions?.includes(v) ? [] : finalOptions.push(v)));
-    return uniq(finalOptions);
-  };
-
   const isCustomDateSelected = () => {
     const isValidDateSelected = filterValue?.filter((f) => isDate(f.split(";")[0])) || [];
     return isValidDateSelected.length > 0 ? true : false;
@@ -64,7 +58,7 @@ export const FilterDate: FC<Props> = observer((props) => {
         <DateFilterModal
           handleClose={() => setIsDateFilterModalOpen(false)}
           isOpen={isDateFilterModalOpen}
-          onSelect={(val) => handleInboxIssueFilters(filterKey, handleCustomFilterValue(val))}
+          onSelect={(val) => handleInboxIssueFilters(filterKey, val)}
           title="Created date"
         />
       )}

diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
@@ -52,7 +52,7 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
   const workspaceStore = useWorkspace();
   const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string;
   // store hooks
-  const { createInboxIssue } = useProjectInbox();
+  const { createInboxIssue, handleCurrentTab } = useProjectInbox();
   const {
     config: { envConfig },
   } = useApplication();
@@ -79,7 +79,8 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
     await createInboxIssue(workspaceSlug.toString(), projectId.toString(), formData)
       .then((res) => {
         if (!createMore) {
-          router.push(`/${workspaceSlug}/projects/${projectId}/inbox/?inboxIssueId=${res?.issue?.id}`);
+          router.push(`/${workspaceSlug}/projects/${projectId}/inbox/?currentTab=open&inboxIssueId=${res?.issue?.id}`);
+          handleCurrentTab("open");
           handleClose();
         } else {
           reset(defaultValues);

diff --git a/web/components/inbox/modals/select-duplicate.tsx b/web/components/inbox/modals/select-duplicate.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { Search } from "lucide-react";
@@ -7,7 +7,7 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 // icons
 // components
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 import { EmptyState } from "@/components/empty-state";
 // services
 // constants
@@ -29,7 +29,6 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
   const { isOpen, onClose, onSubmit, value } = props;
 
   const [query, setQuery] = useState("");
-  const [selectedItem, setSelectedItem] = useState<string>("");
 
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -48,18 +47,11 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
       : null
   );
 
-  useEffect(() => {
-    if (!value) {
-      setSelectedItem("");
-      return;
-    } else setSelectedItem(value);
-  }, [value]);
-
   const handleClose = () => {
     onClose();
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = (selectedItem: string) => {
     if (!selectedItem || selectedItem.length === 0)
       return setToast({
         title: "Error",
@@ -99,12 +91,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                 leaveTo="opacity-0 scale-95"
               >
                 <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
-                  <Combobox
-                    value={selectedItem}
-                    onChange={(value) => {
-                      setSelectedItem(value);
-                    }}
-                  >
+                  <Combobox value={value} onChange={handleSubmit}>
                     <div className="relative m-1">
                       <Search
                         className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
@@ -175,17 +162,6 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                       )}
                     </Combobox.Options>
                   </Combobox>
-
-                  {filteredIssues.length > 0 && (
-                    <div className="flex items-center justify-end gap-2 p-3">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                        Cancel
-                      </Button>
-                      <Button variant="primary" size="sm" onClick={handleSubmit}>
-                        Mark as original
-                      </Button>
-                    </div>
-                  )}
                 </Dialog.Panel>
               </Transition.Child>
             </div>

diff --git a/web/components/inbox/sidebar/inbox-list-item.tsx b/web/components/inbox/sidebar/inbox-list-item.tsx
@@ -9,7 +9,7 @@ import { InboxIssueStatus } from "@/components/inbox";
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
-import { useLabel } from "@/hooks/store";
+import { useLabel, useProjectInbox } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // store
 import { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
@@ -27,6 +27,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
   const router = useRouter();
   const { inboxIssueId } = router.query;
   // store
+  const { currentTab } = useProjectInbox();
   const { projectLabels } = useLabel();
   const { isMobile } = usePlatformOS();
   const issue = inboxIssue.issue;
@@ -54,7 +55,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
       <Link
         id={`inbox-issue-list-item-${issue.id}`}
         key={`${projectId}_${issue.id}`}
-        href={`/${workspaceSlug}/projects/${projectId}/inbox?inboxIssueId=${issue.id}`}
+        href={`/${workspaceSlug}/projects/${projectId}/inbox?currentTab=${currentTab}&inboxIssueId=${issue.id}`}
         onClick={(e) => handleIssueRedirection(e, issue.id)}
       >
         <div

diff --git a/web/components/inbox/sidebar/root.tsx b/web/components/inbox/sidebar/root.tsx
@@ -75,7 +75,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
               )}
               onClick={() => {
                 if (currentTab != option?.key) handleCurrentTab(option?.key);
-                router.push(`/${workspaceSlug}/projects/${projectId}/inbox`);
+                router.push(`/${workspaceSlug}/projects/${projectId}/inbox?currentTab=${option?.key}`);
               }}
             >
               <div>{option?.label}</div>

diff --git a/web/components/issues/issue-detail/main-content.tsx b/web/components/issues/issue-detail/main-content.tsx
@@ -21,11 +21,11 @@ type Props = {
   projectId: string;
   issueId: string;
   issueOperations: TIssueOperations;
-  is_editable: boolean;
+  isEditable: boolean;
 };
 
 export const IssueMainContent: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, issueOperations, is_editable } = props;
+  const { workspaceSlug, projectId, issueId, issueOperations, isEditable } = props;
   // states
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   // hooks
@@ -90,7 +90,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           isSubmitting={isSubmitting}
           setIsSubmitting={(value) => setIsSubmitting(value)}
           issueOperations={issueOperations}
-          disabled={!is_editable}
+          disabled={!isEditable}
           value={issue.name}
         />
 
@@ -100,7 +100,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           issueId={issue.id}
           value={issueDescription}
           initialValue={issueDescription}
-          disabled={!is_editable}
+          disabled={!isEditable}
           issueOperations={issueOperations}
           setIsSubmitting={(value) => setIsSubmitting(value)}
         />
@@ -120,7 +120,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
             projectId={projectId}
             parentIssueId={issueId}
             currentUser={currentUser}
-            disabled={!is_editable}
+            disabled={!isEditable}
           />
         )}
       </div>
@@ -129,10 +129,10 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
         workspaceSlug={workspaceSlug}
         projectId={projectId}
         issueId={issueId}
-        disabled={!is_editable}
+        disabled={!isEditable}
       />
 
-      <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={!is_editable} />
+      <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={!isEditable} />
     </>
   );
 });
diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx
@@ -340,7 +340,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
   // issue details
   const issue = getIssueById(issueId);
   // checking if issue is editable, based on user role
-  const is_editable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const isEditable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
   return (
     <>
@@ -362,7 +362,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
               projectId={projectId}
               issueId={issueId}
               issueOperations={issueOperations}
-              is_editable={!is_archived && is_editable}
+              isEditable={!is_archived && isEditable}
             />
           </div>
           <div
@@ -375,7 +375,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
               issueId={issueId}
               issueOperations={issueOperations}
               is_archived={is_archived}
-              is_editable={!is_archived && is_editable}
+              isEditable={!is_archived && isEditable}
             />
           </div>
         </div>