[WEB-2577] improvement: use common create/update issue modal for accepting intake issues for consistency (#5830)

* [WEB-2577] improvement: use common create/update issue modal for accepting intake issues for consistency * fix: lint errors. * chore: minor UX copy fix. * chore: minor indentation fix.
2024-10-15 13:11:14 +05:30 · 2024-10-15 13:11:14 +05:30 · 662b99da92
commit 662b99da92
parent fa25a816a7
18 changed files with 95 additions and 264 deletions
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
@ -8,7 +8,7 @@ import { RefreshCcw } from "lucide-react";
 import { Breadcrumbs, Button, Intake, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
-import { InboxIssueCreateEditModalRoot } from "@/components/inbox";
+import { InboxIssueCreateModalRoot } from "@/components/inbox";
 // hooks
 import { useProject, useProjectInbox, useUserPermissions } from "@/hooks/store";
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
@ -69,12 +69,11 @@ export const ProjectInboxHeader: FC = observer(() => {
      <Header.RightItem>
        {currentProjectDetails?.inbox_view && workspaceSlug && projectId && isAuthorized ? (
          <div className="flex items-center gap-2">
-            <InboxIssueCreateEditModalRoot
+            <InboxIssueCreateModalRoot
              workspaceSlug={workspaceSlug.toString()}
              projectId={projectId.toString()}
              modalState={createIssueModal}
              handleModalClose={() => setCreateIssueModal(false)}
-              issue={undefined}
            />

            <Button variant="primary" size="sm" onClick={() => setCreateIssueModal(true)}>
--- a/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/web/core/components/inbox/content/inbox-issue-header.tsx
@ -21,12 +21,11 @@ import {
  DeclineIssueModal,
  DeleteInboxIssueModal,
  InboxIssueActionsMobileHeader,
-  InboxIssueCreateEditModalRoot,
  InboxIssueSnoozeModal,
  InboxIssueStatus,
  SelectDuplicateInboxIssueModal,
 } from "@/components/inbox";
-import { IssueUpdateStatus } from "@/components/issues";
+import { CreateUpdateIssueModal, IssueUpdateStatus } from "@/components/issues";
 // helpers
 import { findHowManyDaysLeft } from "@/helpers/date-time.helper";
 import { EInboxIssueStatus } from "@/helpers/inbox.helper";
@ -70,6 +69,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
  const { currentTab, deleteInboxIssue, filteredInboxIssueIds } = useProjectInbox();
  const { data: currentUser } = useUser();
  const { allowPermissions } = useUserPermissions();
+  const { currentProjectDetails } = useProject();

  const router = useAppRouter();
  const { getProjectById } = useProject();
@ -234,16 +234,19 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
          value={inboxIssue?.duplicate_to}
          onSubmit={handleInboxIssueDuplicate}
        />
-
-        <InboxIssueCreateEditModalRoot
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-          modalState={acceptIssueModal}
-          handleModalClose={() => setAcceptIssueModal(false)}
-          issue={inboxIssue?.issue}
-          onSubmit={handleInboxIssueAccept}
+        <CreateUpdateIssueModal
+          data={inboxIssue?.issue}
+          isOpen={acceptIssueModal}
+          onClose={() => setAcceptIssueModal(false)}
+          beforeFormSubmit={handleInboxIssueAccept}
+          withDraftIssueWrapper={false}
+          fetchIssueDetails={false}
+          modalTitle={`Move ${currentProjectDetails?.identifier}-${issue?.sequence_id} to project issues`}
+          primaryButtonText={{
+            default: "Add to project",
+            loading: "Adding",
+          }}
        />
-
        <DeclineIssueModal
          data={inboxIssue?.issue || {}}
          isOpen={declineIssueModal}
--- a/web/core/components/inbox/modals/create-edit-modal/edit-root.tsx
+++ b/web/core/components/inbox/modals/create-edit-modal/edit-root.tsx
@ -1,177 +0,0 @@
-"use client";
-
-import { FC, useCallback, useEffect, useRef, useState } from "react";
-import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
-// editor
-import { EditorRefApi } from "@plane/editor";
-// types
-import { TIssue } from "@plane/types";
-// ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import {
-  InboxIssueTitle,
-  InboxIssueDescription,
-  InboxIssueProperties,
-} from "@/components/inbox/modals/create-edit-modal";
-// constants
-import { ISSUE_UPDATED } from "@/constants/event-tracker";
-// helpers
-import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
-// hooks
-import { useEventTracker, useInboxIssues, useProject, useWorkspace } from "@/hooks/store";
-
-type TInboxIssueEditRoot = {
-  workspaceSlug: string;
-  projectId: string;
-  issueId: string;
-  issue: Partial<TIssue>;
-  handleModalClose: () => void;
-  onSubmit?: () => void;
-};
-
-export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, issue, handleModalClose, onSubmit } = props;
-  const pathname = usePathname();
-  // refs
-  const descriptionEditorRef = useRef<EditorRefApi>(null);
-  const submitBtnRef = useRef<HTMLButtonElement | null>(null);
-  // store hooks
-  const { captureIssueEvent } = useEventTracker();
-  const { currentProjectDetails } = useProject();
-  const { updateProjectIssue } = useInboxIssues(issueId);
-  const { getWorkspaceBySlug } = useWorkspace();
-  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id;
-  // states
-  const [formSubmitting, setFormSubmitting] = useState(false);
-  const [formData, setFormData] = useState<Partial<TIssue> | undefined>(undefined);
-  const handleFormData = useCallback(
-    <T extends keyof Partial<TIssue>>(issueKey: T, issueValue: Partial<TIssue>[T]) => {
-      setFormData({
-        ...formData,
-        [issueKey]: issueValue,
-      });
-    },
-    [formData]
-  );
-
-  useEffect(() => {
-    if (formData?.id != issue?.id)
-      setFormData({
-        id: issue?.id || undefined,
-        name: issue?.name ?? "",
-        description_html: issue?.description_html ?? "<p></p>",
-        priority: issue?.priority ?? "none",
-        state_id: issue?.state_id ?? "",
-        label_ids: issue?.label_ids ?? [],
-        assignee_ids: issue?.assignee_ids ?? [],
-        start_date: renderFormattedPayloadDate(issue?.start_date) ?? "",
-        target_date: renderFormattedPayloadDate(issue?.target_date) ?? "",
-      });
-  }, [issue, formData]);
-
-  const handleFormSubmit = async () => {
-    const payload: Partial<TIssue> = {
-      name: formData?.name || "",
-      description_html: formData?.description_html || "<p></p>",
-      priority: formData?.priority || "none",
-      state_id: formData?.state_id || "",
-      label_ids: formData?.label_ids || [],
-      assignee_ids: formData?.assignee_ids || [],
-      start_date: formData?.start_date || undefined,
-      target_date: formData?.target_date || undefined,
-      cycle_id: formData?.cycle_id || "",
-      module_ids: formData?.module_ids || [],
-      estimate_point: formData?.estimate_point || undefined,
-      parent_id: formData?.parent_id || null,
-    };
-    setFormSubmitting(true);
-
-    onSubmit && (await onSubmit());
-    await updateProjectIssue(payload)
-      .then(async () => {
-        captureIssueEvent({
-          eventName: ISSUE_UPDATED,
-          payload: {
-            ...formData,
-            state: "SUCCESS",
-            element: "Inbox page",
-          },
-          path: pathname,
-        });
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: `Success!`,
-          message: "Issue created successfully.",
-        });
-        descriptionEditorRef?.current?.clearEditor();
-        handleModalClose();
-      })
-      .catch((error) => {
-        console.error(error);
-        captureIssueEvent({
-          eventName: ISSUE_UPDATED,
-          payload: {
-            ...formData,
-            state: "FAILED",
-            element: "Inbox page",
-          },
-          path: pathname,
-        });
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: `Error!`,
-          message: "Some error occurred. Please try again.",
-        });
-      });
-    setFormSubmitting(false);
-  };
-
-  const isTitleLengthMoreThan255Character = formData?.name ? formData.name.length > 255 : false;
-
-  if (!workspaceSlug || !projectId || !workspaceId || !formData) return <></>;
-  return (
-    <>
-      <div className="space-y-5 p-5">
-        <h3 className="text-xl font-medium text-custom-text-200">
-          Move {currentProjectDetails?.identifier}-{issue?.sequence_id} to project issues
-        </h3>
-        <div className="space-y-3">
-          <InboxIssueTitle
-            data={formData}
-            handleData={handleFormData}
-            isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
-          />
-          <InboxIssueDescription
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            workspaceId={workspaceId}
-            data={formData}
-            handleData={handleFormData}
-            editorRef={descriptionEditorRef}
-            containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
-            onEnterKeyPress={() => submitBtnRef?.current?.click()}
-          />
-          <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} isVisible />
-        </div>
-      </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
-        <Button variant="neutral-primary" size="sm" type="button" onClick={handleModalClose}>
-          Cancel
-        </Button>
-        <Button
-          variant="primary"
-          size="sm"
-          type="button"
-          ref={submitBtnRef}
-          loading={formSubmitting}
-          disabled={isTitleLengthMoreThan255Character}
-          onClick={handleFormSubmit}
-        >
-          {formSubmitting ? "Adding" : "Add to project"}
-        </Button>
-      </div>
-    </>
-  );
-});
--- a/web/core/components/inbox/modals/create-edit-modal/modal.tsx
+++ b/web/core/components/inbox/modals/create-edit-modal/modal.tsx
@ -1,42 +0,0 @@
-import { FC } from "react";
-// types
-import { TIssue } from "@plane/types";
-// ui
-import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
-// components
-import { InboxIssueCreateRoot, InboxIssueEditRoot } from "@/components/inbox/modals/create-edit-modal";
-
-type TInboxIssueCreateEditModalRoot = {
-  workspaceSlug: string;
-  projectId: string;
-  modalState: boolean;
-  handleModalClose: () => void;
-  issue: Partial<TIssue> | undefined;
-  onSubmit?: () => void;
-};
-
-export const InboxIssueCreateEditModalRoot: FC<TInboxIssueCreateEditModalRoot> = (props) => {
-  const { workspaceSlug, projectId, modalState, handleModalClose, issue, onSubmit } = props;
-
-  return (
-    <ModalCore
-      isOpen={modalState}
-      handleClose={handleModalClose}
-      position={EModalPosition.TOP}
-      width={EModalWidth.XXXXL}
-    >
-      {issue && issue?.id ? (
-        <InboxIssueEditRoot
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issue.id}
-          issue={issue}
-          handleModalClose={handleModalClose}
-          onSubmit={onSubmit}
-        />
-      ) : (
-        <InboxIssueCreateRoot workspaceSlug={workspaceSlug} projectId={projectId} handleModalClose={handleModalClose} />
-      )}
-    </ModalCore>
-  );
-};
--- a/web/core/components/inbox/modals/create-edit-modal/create-root.tsx
+++ b/web/core/components/inbox/modals/create-edit-modal/create-root.tsx
@ -9,11 +9,7 @@ import { EditorRefApi } from "@plane/editor";
 import { TIssue } from "@plane/types";
 import { Button, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import {
-  InboxIssueTitle,
-  InboxIssueDescription,
-  InboxIssueProperties,
-} from "@/components/inbox/modals/create-edit-modal";
+import { InboxIssueTitle, InboxIssueDescription, InboxIssueProperties } from "@/components/inbox/modals/create-modal";
 // constants
 import { ISSUE_CREATED } from "@/constants/event-tracker";
 import { ETabIndices } from "@/constants/tab-indices";
@ -201,7 +197,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
          role="button"
          tabIndex={getIndex("create_more")}
        >
-          <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
+          <ToggleSwitch value={createMore} onChange={() => { }} size="sm" />
          <span className="text-xs">Create more</span>
        </div>
        <div className="flex items-center gap-3">
--- a/web/core/components/inbox/modals/create-edit-modal/index.ts
+++ b/web/core/components/inbox/modals/create-edit-modal/index.ts
@ -1,6 +1,5 @@
 export * from "./modal";
 export * from "./create-root";
-export * from "./edit-root";
 export * from "./issue-title";
 export * from "./issue-description";
 export * from "./issue-properties";
--- a/web/core/components/inbox/modals/create-edit-modal/issue-description.tsx
+++ b/web/core/components/inbox/modals/create-edit-modal/issue-description.tsx
--- a/web/core/components/inbox/modals/create-edit-modal/issue-properties.tsx
+++ b/web/core/components/inbox/modals/create-edit-modal/issue-properties.tsx
@ -91,7 +91,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
      {/* labels */}
      <div className="h-7">
        <IssueLabelSelect
-          setIsOpen={() => {}}
+          setIsOpen={() => { }}
          value={data?.label_ids || []}
          onChange={(labelIds) => handleData("label_ids", labelIds)}
          projectId={projectId}
--- a/web/core/components/inbox/modals/create-edit-modal/issue-title.tsx
+++ b/web/core/components/inbox/modals/create-edit-modal/issue-title.tsx
--- a/web/core/components/inbox/modals/create-modal/modal.tsx
+++ b/web/core/components/inbox/modals/create-modal/modal.tsx
@ -0,0 +1,27 @@
+import { FC } from "react";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// components
+import { InboxIssueCreateRoot } from "@/components/inbox/modals/create-modal";
+
+type TInboxIssueCreateModalRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  modalState: boolean;
+  handleModalClose: () => void;
+};
+
+export const InboxIssueCreateModalRoot: FC<TInboxIssueCreateModalRoot> = (props) => {
+  const { workspaceSlug, projectId, modalState, handleModalClose } = props;
+
+  return (
+    <ModalCore
+      isOpen={modalState}
+      handleClose={handleModalClose}
+      position={EModalPosition.TOP}
+      width={EModalWidth.XXXXL}
+    >
+      <InboxIssueCreateRoot workspaceSlug={workspaceSlug} projectId={projectId} handleModalClose={handleModalClose} />
+    </ModalCore>
+  );
+};
--- a/web/core/components/inbox/modals/index.ts
+++ b/web/core/components/inbox/modals/index.ts
@ -1,4 +1,4 @@
-export * from "./create-edit-modal";
+export * from "./create-modal";
 export * from "./decline-issue-modal";
 export * from "./delete-issue-modal";
 export * from "./select-duplicate";
--- a/web/core/components/issues/issue-modal/base.tsx
+++ b/web/core/components/issues/issue-modal/base.tsx
@ -28,12 +28,15 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
    data,
    isOpen,
    onClose,
+    beforeFormSubmit,
    onSubmit,
    withDraftIssueWrapper = true,
    storeType: issueStoreFromProps,
    isDraft = false,
    fetchIssueDetails = true,
    moveToIssue = false,
+    modalTitle,
+    primaryButtonText,
  } = props;
  const issueStoreType = useIssueStoreType();

@ -198,6 +201,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
      if (response.id && response.project_id) {
        await handleCreateUpdatePropertyValues({
          issueId: response.id,
+          issueTypeId: response.type_id,
          projectId: response.project_id,
          workspaceSlug: workspaceSlug.toString(),
        });
@ -250,6 +254,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
      // add other property values
      await handleCreateUpdatePropertyValues({
        issueId: data.id,
+        issueTypeId: payload.type_id,
        projectId: payload.project_id,
        workspaceSlug: workspaceSlug.toString(),
      });
@ -288,6 +293,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
    let response: TIssue | undefined = undefined;

    try {
+      if (beforeFormSubmit) await beforeFormSubmit();
      if (!data?.id) response = await handleCreateIssue(payload, is_draft_issue);
      else response = await handleUpdateIssue(payload);
    } catch (error) {
@ -348,6 +354,8 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
          projectId={activeProjectId}
          isDraft={isDraft}
          moveToIssue={moveToIssue}
+          modalTitle={modalTitle}
+          primaryButtonText={primaryButtonText}
        />
      )}
    </ModalCore>
--- a/web/core/components/issues/issue-modal/context/issue-modal.tsx
+++ b/web/core/components/issues/issue-modal/context/issue-modal.tsx
@ -21,6 +21,7 @@ export type TCreateUpdatePropertyValuesProps = {
  issueId: string;
  projectId: string;
  workspaceSlug: string;
+  issueTypeId: string | null | undefined;
 };

 export type TIssueModalContext = {
--- a/web/core/components/issues/issue-modal/draft-issue-layout.tsx
+++ b/web/core/components/issues/issue-modal/draft-issue-layout.tsx
@ -31,6 +31,11 @@ export interface DraftIssueProps {
  projectId: string;
  isDraft: boolean;
  moveToIssue?: boolean;
+  modalTitle?: string;
+  primaryButtonText?: {
+    default: string;
+    loading: string;
+  };
 }

 export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
@ -47,6 +52,8 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
    onCreateMoreToggleChange,
    isDraft,
    moveToIssue = false,
+    modalTitle,
+    primaryButtonText,
  } = props;
  // states
  const [issueDiscardModal, setIssueDiscardModal] = useState(false);
@ -132,6 +139,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
    if (response && handleCreateUpdatePropertyValues) {
      handleCreateUpdatePropertyValues({
        issueId: response.id,
+        issueTypeId: response.type_id,
        projectId,
        workspaceSlug: workspaceSlug?.toString(),
      });
@ -162,6 +170,8 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
        projectId={projectId}
        isDraft={isDraft}
        moveToIssue={moveToIssue}
+        modalTitle={modalTitle}
+        primaryButtonText={primaryButtonText}
      />
    </>
  );
--- a/web/core/components/issues/issue-modal/form.tsx
+++ b/web/core/components/issues/issue-modal/form.tsx
@ -61,6 +61,11 @@ export interface IssueFormProps {
  projectId: string;
  isDraft: boolean;
  moveToIssue?: boolean;
+  modalTitle?: string;
+  primaryButtonText?: {
+    default: string;
+    loading: string;
+  };
 }

 export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
@ -76,6 +81,11 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
    onCreateMoreToggleChange,
    isDraft,
    moveToIssue,
+    modalTitle = `${data?.id ? "Update" : isDraft ? "Create a draft" : "Create new issue"}`,
+    primaryButtonText = {
+      default: `${data?.id ? "Update" : isDraft ? "Save to Drafts" : "Save"}`,
+      loading: `${data?.id ? "Updating" : "Saving"}`,
+    },
  } = props;

  // states
@ -189,6 +199,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
        project_id: getValues<"project_id">("project_id"),
        id: data.id,
        description_html: formData.description_html ?? "<p></p>",
+        type_id: getValues<"type_id">("type_id"),
      };

    // this condition helps to move the issues from draft to project issues
@ -271,9 +282,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
      )}
      <form onSubmit={handleSubmit((data) => handleFormSubmit(data))}>
        <div className="p-5">
-          <h3 className="text-xl font-medium text-custom-text-200 pb-2">
-            {data?.id ? "Update" : isDraft ? "Create a draft" : "Create new issue"}
-          </h3>
+          <h3 className="text-xl font-medium text-custom-text-200 pb-2">{modalTitle}</h3>
          {/* Disable project selection if editing an issue */}
          <div className="flex items-center pt-2 pb-4 gap-x-1">
            <IssueProjectSelect
@ -384,7 +393,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                tabIndex={getIndex("create_more")}
                role="button"
              >
-                <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
+                <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => { }} size="sm" />
                <span className="text-xs">Create more</span>
              </div>
            )}
@ -415,15 +424,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                loading={isSubmitting}
                tabIndex={isDraft ? getIndex("submit_button") : getIndex("draft_button")}
              >
-                {data?.id
-                  ? isSubmitting
-                    ? "Updating"
-                    : "Update"
-                  : isSubmitting
-                    ? "Creating"
-                    : isDraft
-                      ? "Save to Drafts"
-                      : "Save"}
+                {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
              </Button>
              {moveToIssue && (
                <Button
--- a/web/core/components/issues/issue-modal/modal.tsx
+++ b/web/core/components/issues/issue-modal/modal.tsx
@ -15,12 +15,18 @@ export interface IssuesModalProps {
  data?: Partial<TIssue>;
  isOpen: boolean;
  onClose: () => void;
+  beforeFormSubmit?: () => Promise<void>;
  onSubmit?: (res: TIssue) => Promise<void>;
  withDraftIssueWrapper?: boolean;
  storeType?: EIssuesStoreType;
  isDraft?: boolean;
  fetchIssueDetails?: boolean;
  moveToIssue?: boolean;
+  modalTitle?: string;
+  primaryButtonText?: {
+    default: string;
+    loading: string;
+  };
 }

 export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
--- a/web/core/components/issues/workspace-draft/delete-modal.tsx
+++ b/web/core/components/issues/workspace-draft/delete-modal.tsx
@ -90,7 +90,7 @@ export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
      isSubmitting={isDeleting}
      isOpen={isOpen}
      title="Delete draft"
-      content={<>Are you sure you want to delete this draft? This can't be undone.</>}
+      content={<>Are you sure you want to delete this draft? This can&apos;t be undone.</>}
    />
  );
 };
--- a/web/core/store/issue/issue.store.ts
+++ b/web/core/store/issue/issue.store.ts
@ -125,7 +125,7 @@ export class IssueStore implements IIssueStore {
      // if type is archived then check archived_at is not null
      // if type is un-archived then check archived_at is null
      const issue = this.issuesMap[issueId];
-      if ((issue && type === "archived" && issue.archived_at) || (type === "un-archived" && !issue?.archived_at)) {
+      if (issue && ((type === "archived" && issue.archived_at) || (type === "un-archived" && !issue?.archived_at))) {
        filteredIssues.push(issue);
      }
    });