fix: archive issue bugs (#2712)

* fix: blur on side/modal peek view

* fix: delete archive not working on list layout with group by is none

* fix: show empty group has no effect

* fix: filter/display options same as production

* fix: disabling full-screen peek-overview for archive issues

* fix: truncate in calendar view

web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx

@@ -30,12 +30,14 @@ export const ArchivedIssueListLayout: FC = observer(() => {
   const issues = archivedIssueStore.getIssues;
   const displayProperties = archivedIssueFiltersStore?.userDisplayProperties || null;
   const group_by: string | null = archivedIssueFiltersStore?.userDisplayFilters?.group_by || null;
+  const showEmptyGroup = archivedIssueFiltersStore?.userDisplayFilters?.show_empty_groups || false;
 
   const handleIssues = (group_by: string | null, issue: IIssue, action: "delete" | "update") => {
     if (!workspaceSlug || !projectId) return;
 
     if (action === "delete") {
-      archivedIssueStore.deleteArchivedIssue(group_by, null, issue);
+      archivedIssueStore.deleteArchivedIssue(group_by === "null" ? null : group_by, null, issue);
+      archivedIssueStore.fetchIssues(workspaceSlug.toString(), projectId.toString());
     }
   };
 
@@ -68,6 +70,7 @@ export const ArchivedIssueListLayout: FC = observer(() => {
         members={projectMembers?.map((m) => m.member) ?? null}
         projects={projects}
         estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+        showEmptyGroup={showEmptyGroup}
       />
     </div>
   );

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

@@ -247,9 +247,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
 
             {/* content */}
             <div className="relative w-full h-full overflow-hidden overflow-y-auto">
-              {isArchived && (
-                <div className="absolute top-0 left-0 h-full w-full z-[999] flex items-center justify-center bg-custom-background-100 opacity-60" />
-              )}
               {isLoading && !issue ? (
                 <div className="h-full w-full flex items-center justify-center">
                   <Spinner />
@@ -258,7 +255,10 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                 issue && (
                   <>
                     {["side-peek", "modal"].includes(peekMode) ? (
-                      <div className="flex flex-col gap-3 py-5 px-8">
+                      <div className="relative flex flex-col gap-3 py-5 px-8">
+                        {isArchived && (
+                          <div className="absolute top-0 left-0 h-full min-h-full w-full z-[9] flex items-center justify-center bg-custom-background-100 opacity-60" />
+                        )}
                         <PeekOverviewIssueDetails
                           workspaceSlug={workspaceSlug}
                           issue={issue}
@@ -290,8 +290,9 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                         />
                       </div>
                     ) : (
-                      <div className="w-full h-full flex">
+                      <div className={`overflow-auto w-full h-full flex ${isArchived ? "opacity-60" : ""}`}>
-                        <div className="w-full h-full space-y-6 p-4 py-5">
+                        <div className="relative w-full h-full space-y-6 p-4 py-5 overflow-auto">
+                          <div className={isArchived ? "pointer-events-none" : ""}>
                             <PeekOverviewIssueDetails
                               workspaceSlug={workspaceSlug}
                               issue={issue}
@@ -316,7 +317,12 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                               showCommentAccessSpecifier={showCommentAccessSpecifier}
                             />
                           </div>
-                        <div className="flex-shrink-0 !w-[400px] h-full border-l border-custom-border-200 p-4 py-5">
+                        </div>
+                        <div
+                          className={`flex-shrink-0 !w-[400px] h-full border-l border-custom-border-200 p-4 py-5 ${
+                            isArchived ? "pointer-events-none" : ""
+                          }`}
+                        >
                           <PeekOverviewProperties
                             issue={issue}
                             issueUpdate={issueUpdate}

web/constants/issue.ts

@@ -251,23 +251,10 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
   },
   archived_issues: {
     list: {
-      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
-        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        group_by: ["state", "state_detail.group", "priority", "labels", "assignees", "created_by", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["show_empty_groups"],
-      },
-    },
-    kanban: {
-      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
-      display_properties: true,
-      display_filters: {
-        group_by: ["state_detail.group", "priority", "project", "labels", null],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
         type: [null, "active", "backlog"],
       },

web/store/archived-issues/issue.store.ts

@@ -138,7 +138,7 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
       };
     }
 
-    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    const orderBy = this.rootStore?.archivedIssueFilters?.userDisplayFilters?.order_by || "";
     if (orderBy === "-created_at") {
       issues = sortArrayByDate(issues as any, "created_at");
     }