chore: empty state loaders and filter cancel state update for modules and cycles (#3653)

web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx

@@ -36,22 +36,34 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
   const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
     if (!value) {
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
-        [key]: null,
-      });
+      updateFilters(
+        workspaceSlug,
+        projectId,
+        EIssueFilterType.FILTERS,
+        {
+          [key]: null,
+        },
+        cycleId
+      );
       return;
     }
 
     let newValues = issueFilters?.filters?.[key] ?? [];
     newValues = newValues.filter((val) => val !== value);
 
-    updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
-      [key]: newValues,
-    });
+    updateFilters(
+      workspaceSlug,
+      projectId,
+      EIssueFilterType.FILTERS,
+      {
+        [key]: newValues,
+      },
+      cycleId
+    );
   };
 
   const handleClearAllFilters = () => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !cycleId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
       newFilters[key as keyof IIssueFilterOptions] = null;

web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx

@@ -33,24 +33,36 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   });
 
   const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !moduleId) return;
     if (!value) {
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
-        [key]: null,
-      });
+      updateFilters(
+        workspaceSlug,
+        projectId,
+        EIssueFilterType.FILTERS,
+        {
+          [key]: null,
+        },
+        moduleId
+      );
       return;
     }
 
     let newValues = issueFilters?.filters?.[key] ?? [];
     newValues = newValues.filter((val) => val !== value);
 
-    updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
-      [key]: newValues,
-    });
+    updateFilters(
+      workspaceSlug,
+      projectId,
+      EIssueFilterType.FILTERS,
+      {
+        [key]: newValues,
+      },
+      moduleId
+    );
   };
 
   const handleClearAllFilters = () => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !moduleId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
       newFilters[key as keyof IIssueFilterOptions] = null;

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { Fragment, useCallback, useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -181,58 +181,58 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
     return <SpreadsheetLayoutLoader />;
   }
 
-  if (issueIds.length === 0) {
-    return (
-      <EmptyState
-        image={emptyStateImage}
-        title={(workspaceProjectIds ?? []).length > 0 ? currentViewDetails.title : "No project"}
-        description={
-          (workspaceProjectIds ?? []).length > 0
-            ? currentViewDetails.description
-            : "To create issues or manage your work, you need to create a project or be a part of one."
-        }
-        size="sm"
-        primaryButton={
-          (workspaceProjectIds ?? []).length > 0
-            ? currentView !== "custom-view" && currentView !== "subscribed"
-              ? {
-                  text: "Create new issue",
-                  onClick: () => {
-                    setTrackElement("All issues empty state");
-                    commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
-                  },
-                }
-              : undefined
-            : {
-                text: "Start your first project",
-                onClick: () => {
-                  setTrackElement("All issues empty state");
-                  commandPaletteStore.toggleCreateProjectModal(true);
-                },
-              }
-        }
-        disabled={!isEditingAllowed}
-      />
-    );
-  }
-
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
-      <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
       <div className="relative h-full w-full overflow-auto">
-        <SpreadsheetView
-          displayProperties={issueFilters?.displayProperties ?? {}}
-          displayFilters={issueFilters?.displayFilters ?? {}}
-          handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
-          issueIds={issueIds}
-          quickActions={renderQuickActions}
-          handleIssues={handleIssues}
-          canEditProperties={canEditProperties}
-          viewId={globalViewId}
-        />
+        <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
+        {issueIds.length === 0 ? (
+          <EmptyState
+            image={emptyStateImage}
+            title={(workspaceProjectIds ?? []).length > 0 ? currentViewDetails.title : "No project"}
+            description={
+              (workspaceProjectIds ?? []).length > 0
+                ? currentViewDetails.description
+                : "To create issues or manage your work, you need to create a project or be a part of one."
+            }
+            size="sm"
+            primaryButton={
+              (workspaceProjectIds ?? []).length > 0
+                ? currentView !== "custom-view" && currentView !== "subscribed"
+                  ? {
+                      text: "Create new issue",
+                      onClick: () => {
+                        setTrackElement("All issues empty state");
+                        commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+                      },
+                    }
+                  : undefined
+                : {
+                    text: "Start your first project",
+                    onClick: () => {
+                      setTrackElement("All issues empty state");
+                      commandPaletteStore.toggleCreateProjectModal(true);
+                    },
+                  }
+            }
+            disabled={!isEditingAllowed}
+          />
+        ) : (
+          <Fragment>
+            <SpreadsheetView
+              displayProperties={issueFilters?.displayProperties ?? {}}
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+              issueIds={issueIds}
+              quickActions={renderQuickActions}
+              handleIssues={handleIssues}
+              canEditProperties={canEditProperties}
+              viewId={globalViewId}
+            />
+            {/* peek overview */}
+            <IssuePeekOverview />
+          </Fragment>
+        )}
       </div>
-      {/* peek overview */}
-      <IssuePeekOverview />
     </div>
   );
 });

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -40,22 +40,23 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
     return <ListLayoutLoader />;
   }
 
-  if (issues?.groupedIssueIds?.length === 0) {
-    return (
-      <div className="relative h-full w-full overflow-y-auto">
-        <ProjectArchivedEmptyState />
-      </div>
-    );
-  }
-
   if (!workspaceSlug || !projectId) return <></>;
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
       <ArchivedIssueAppliedFiltersRoot />
-      <div className="relative h-full w-full overflow-auto">
-        <ArchivedIssueListLayout />
-      </div>
-      <IssuePeekOverview is_archived />
+
+      {issues?.groupedIssueIds?.length === 0 ? (
+        <div className="relative h-full w-full overflow-y-auto">
+          <ProjectArchivedEmptyState />
+        </div>
+      ) : (
+        <Fragment>
+          <div className="relative h-full w-full overflow-auto">
+            <ArchivedIssueListLayout />
+          </div>
+          <IssuePeekOverview is_archived />
+        </Fragment>
+      )}
     </div>
   );
 });

web/components/issues/issue-layouts/roots/cycle-layout-root.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -69,42 +69,41 @@ export const CycleLayoutRoot: React.FC = observer(() => {
     );
   }
 
-  if (issues?.groupedIssueIds?.length === 0) {
-    return (
-      <div className="relative h-full w-full overflow-y-auto">
-        <CycleEmptyState
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-          cycleId={cycleId.toString()}
-          activeLayout={activeLayout}
-        />
-      </div>
-    );
-  }
-
   return (
     <>
       <TransferIssuesModal handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
-
       <div className="relative flex h-full w-full flex-col overflow-hidden">
         {cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
         <CycleAppliedFiltersRoot />
 
-        <div className="h-full w-full overflow-auto">
-          {activeLayout === "list" ? (
-            <CycleListLayout />
-          ) : activeLayout === "kanban" ? (
-            <CycleKanBanLayout />
-          ) : activeLayout === "calendar" ? (
-            <CycleCalendarLayout />
-          ) : activeLayout === "gantt_chart" ? (
-            <CycleGanttLayout />
-          ) : activeLayout === "spreadsheet" ? (
-            <CycleSpreadsheetLayout />
-          ) : null}
-        </div>
-        {/* peek overview */}
-        <IssuePeekOverview />
+        {issues?.groupedIssueIds?.length === 0 ? (
+          <div className="relative h-full w-full overflow-y-auto">
+            <CycleEmptyState
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              cycleId={cycleId.toString()}
+              activeLayout={activeLayout}
+            />
+          </div>
+        ) : (
+          <Fragment>
+            <div className="h-full w-full overflow-auto">
+              {activeLayout === "list" ? (
+                <CycleListLayout />
+              ) : activeLayout === "kanban" ? (
+                <CycleKanBanLayout />
+              ) : activeLayout === "calendar" ? (
+                <CycleCalendarLayout />
+              ) : activeLayout === "gantt_chart" ? (
+                <CycleGanttLayout />
+              ) : activeLayout === "spreadsheet" ? (
+                <CycleSpreadsheetLayout />
+              ) : null}
+            </div>
+            {/* peek overview */}
+            <IssuePeekOverview />
+          </Fragment>
+        )}
       </div>
     </>
   );

web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx

@@ -55,22 +55,25 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
     );
   }
 
-  if (issues?.groupedIssueIds?.length === 0) {
-    return (
-      <div className="relative h-full w-full overflow-y-auto">
-        <ProjectDraftEmptyState />
-      </div>
-    );
-  }
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
       <DraftIssueAppliedFiltersRoot />
 
-      <div className="relative h-full w-full overflow-auto">
-        {activeLayout === "list" ? <DraftIssueListLayout /> : activeLayout === "kanban" ? <DraftKanBanLayout /> : null}
-        {/* issue peek overview */}
-        <IssuePeekOverview />
-      </div>
+      {issues?.groupedIssueIds?.length === 0 ? (
+        <div className="relative h-full w-full overflow-y-auto">
+          <ProjectDraftEmptyState />
+        </div>
+      ) : (
+        <div className="relative h-full w-full overflow-auto">
+          {activeLayout === "list" ? (
+            <DraftIssueListLayout />
+          ) : activeLayout === "kanban" ? (
+            <DraftKanBanLayout />
+          ) : null}
+          {/* issue peek overview */}
+          <IssuePeekOverview />
+        </div>
+      )}
     </div>
   );
 });

web/components/issues/issue-layouts/roots/module-layout-root.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -63,38 +63,38 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
     );
   }
 
-  if (issues?.groupedIssueIds?.length === 0) {
-    return (
-      <div className="relative h-full w-full overflow-y-auto">
-        <ModuleEmptyState
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-          moduleId={moduleId.toString()}
-          activeLayout={activeLayout}
-        />
-      </div>
-    );
-  }
-
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
       <ModuleAppliedFiltersRoot />
 
-      <div className="h-full w-full overflow-auto">
-        {activeLayout === "list" ? (
-          <ModuleListLayout />
-        ) : activeLayout === "kanban" ? (
-          <ModuleKanBanLayout />
-        ) : activeLayout === "calendar" ? (
-          <ModuleCalendarLayout />
-        ) : activeLayout === "gantt_chart" ? (
-          <ModuleGanttLayout />
-        ) : activeLayout === "spreadsheet" ? (
-          <ModuleSpreadsheetLayout />
-        ) : null}
-      </div>
-      {/* peek overview */}
-      <IssuePeekOverview />
+      {issues?.groupedIssueIds?.length === 0 ? (
+        <div className="relative h-full w-full overflow-y-auto">
+          <ModuleEmptyState
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            moduleId={moduleId.toString()}
+            activeLayout={activeLayout}
+          />
+        </div>
+      ) : (
+        <Fragment>
+          <div className="h-full w-full overflow-auto">
+            {activeLayout === "list" ? (
+              <ModuleListLayout />
+            ) : activeLayout === "kanban" ? (
+              <ModuleKanBanLayout />
+            ) : activeLayout === "calendar" ? (
+              <ModuleCalendarLayout />
+            ) : activeLayout === "gantt_chart" ? (
+              <ModuleGanttLayout />
+            ) : activeLayout === "spreadsheet" ? (
+              <ModuleSpreadsheetLayout />
+            ) : null}
+          </div>
+          {/* peek overview */}
+          <IssuePeekOverview />
+        </Fragment>
+      )}
     </div>
   );
 });

web/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, Fragment } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -48,40 +48,38 @@ export const ProjectLayoutRoot: FC = observer(() => {
     return <>{activeLayout && <ActiveLoader layout={activeLayout} />}</>;
   }
 
-  if (issues?.groupedIssueIds?.length === 0) {
-    return (
-      <div className="relative h-full w-full overflow-y-auto">
-        <ProjectEmptyState />
-      </div>
-    );
-  }
-
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
       <ProjectAppliedFiltersRoot />
 
-      <div className="relative h-full w-full overflow-auto bg-custom-background-90">
-        {/* mutation loader */}
-        {issues?.loader === "mutation" && (
-          <div className="fixed w-[40px] h-[40px] z-50 right-[20px] top-[70px] flex justify-center items-center bg-custom-background-80 shadow-sm rounded">
-            <Spinner className="w-4 h-4" />
+      {issues?.groupedIssueIds?.length === 0 ? (
+        <ProjectEmptyState />
+      ) : (
+        <Fragment>
+          <div className="relative h-full w-full overflow-auto bg-custom-background-90">
+            {/* mutation loader */}
+            {issues?.loader === "mutation" && (
+              <div className="fixed w-[40px] h-[40px] z-50 right-[20px] top-[70px] flex justify-center items-center bg-custom-background-80 shadow-sm rounded">
+                <Spinner className="w-4 h-4" />
+              </div>
+            )}
+            {activeLayout === "list" ? (
+              <ListLayout />
+            ) : activeLayout === "kanban" ? (
+              <KanBanLayout />
+            ) : activeLayout === "calendar" ? (
+              <CalendarLayout />
+            ) : activeLayout === "gantt_chart" ? (
+              <GanttLayout />
+            ) : activeLayout === "spreadsheet" ? (
+              <ProjectSpreadsheetLayout />
+            ) : null}
           </div>
-        )}
-        {activeLayout === "list" ? (
-          <ListLayout />
-        ) : activeLayout === "kanban" ? (
-          <KanBanLayout />
-        ) : activeLayout === "calendar" ? (
-          <CalendarLayout />
-        ) : activeLayout === "gantt_chart" ? (
-          <GanttLayout />
-        ) : activeLayout === "spreadsheet" ? (
-          <ProjectSpreadsheetLayout />
-        ) : null}
-      </div>
 
-      {/* peek overview */}
-      <IssuePeekOverview />
+          {/* peek overview */}
+          <IssuePeekOverview />
+        </Fragment>
+      )}
     </div>
   );
 });

web/components/issues/issue-layouts/roots/project-view-layout-root.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { Fragment, useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -79,34 +79,34 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
     );
   }
 
-  if (issues?.groupedIssueIds?.length === 0) {
-    return (
-      <div className="relative h-full w-full overflow-y-auto">
-        <ProjectViewEmptyState />
-      </div>
-    );
-  }
-
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
       <ProjectViewAppliedFiltersRoot />
 
-      <div className="relative h-full w-full overflow-auto">
-        {activeLayout === "list" ? (
-          <ProjectViewListLayout issueActions={issueActions} />
-        ) : activeLayout === "kanban" ? (
-          <ProjectViewKanBanLayout issueActions={issueActions} />
-        ) : activeLayout === "calendar" ? (
-          <ProjectViewCalendarLayout issueActions={issueActions} />
-        ) : activeLayout === "gantt_chart" ? (
-          <ProjectViewGanttLayout issueActions={issueActions} />
-        ) : activeLayout === "spreadsheet" ? (
-          <ProjectViewSpreadsheetLayout issueActions={issueActions} />
-        ) : null}
-      </div>
+      {issues?.groupedIssueIds?.length === 0 ? (
+        <div className="relative h-full w-full overflow-y-auto">
+          <ProjectViewEmptyState />
+        </div>
+      ) : (
+        <Fragment>
+          <div className="relative h-full w-full overflow-auto">
+            {activeLayout === "list" ? (
+              <ProjectViewListLayout issueActions={issueActions} />
+            ) : activeLayout === "kanban" ? (
+              <ProjectViewKanBanLayout issueActions={issueActions} />
+            ) : activeLayout === "calendar" ? (
+              <ProjectViewCalendarLayout issueActions={issueActions} />
+            ) : activeLayout === "gantt_chart" ? (
+              <ProjectViewGanttLayout issueActions={issueActions} />
+            ) : activeLayout === "spreadsheet" ? (
+              <ProjectViewSpreadsheetLayout issueActions={issueActions} />
+            ) : null}
+          </div>
 
-      {/* peek overview */}
-      <IssuePeekOverview />
+          {/* peek overview */}
+          <IssuePeekOverview />
+        </Fragment>
+      )}
     </div>
   );
 });

web/store/issue/archived/issue.store.ts

@@ -67,10 +67,11 @@ export class ArchivedIssues extends IssueHelperStore implements IArchivedIssues
     const orderBy = displayFilters?.order_by;
     const layout = displayFilters?.layout;
 
-    const archivedIssueIds = this.issues[projectId] ?? [];
+    const archivedIssueIds = this.issues[projectId];
+    if (!archivedIssueIds) return undefined;
 
     const _issues = this.rootIssueStore.issues.getIssuesByIds(archivedIssueIds);
-    if (!_issues) return undefined;
+    if (!_issues) return [];
 
     let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined;
 

web/store/issue/draft/issue.store.ts

@@ -78,10 +78,11 @@ export class DraftIssues extends IssueHelperStore implements IDraftIssues {
     const orderBy = displayFilters?.order_by;
     const layout = displayFilters?.layout;
 
-    const draftIssueIds = this.issues[projectId] ?? [];
+    const draftIssueIds = this.issues[projectId];
+    if (!draftIssueIds) return undefined;
 
     const _issues = this.rootIssueStore.issues.getIssuesByIds(draftIssueIds);
-    if (!_issues) return undefined;
+    if (!_issues) return [];
 
     let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined;
 

yarn.lock

@@ -5012,7 +5012,7 @@ fault@^2.0.0:
   dependencies:
     format "^0.2.0"
 
-fflate@^0.4.1:
+fflate@^0.4.8:
   version "0.4.8"
   resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
   integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
@@ -7171,12 +7171,18 @@ postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.29:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-posthog-js@^1.88.4:
-  version "1.96.1"
-  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.96.1.tgz#4f9719a24e4e14037b0e72d430194d7cdb576447"
-  integrity sha512-kv1vQqYMt2BV3YHS+wxsbGuP+tz+M3y1AzNhz8TfkpY1HT8W/ONT0i0eQpeRr9Y+d4x/fZ6M4cXG5GMvi9lRCA==
+posthog-js@^1.105.0:
+  version "1.105.8"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.105.8.tgz#934602f0c7a5e522a25828062b5841ad8780756f"
+  integrity sha512-zKZKNVLLQQgkJyY3DnzHHTasu6x4xM4MOvH7UbMz6BmrgUPboS6/3akgz+WKD+JV6qFj68bm80iJw0Jtj+pt8Q==
   dependencies:
-    fflate "^0.4.1"
+    fflate "^0.4.8"
+    preact "^10.19.3"
+
+preact@^10.19.3:
+  version "10.19.4"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.4.tgz#735d331d5b1bd2182cc36f2ba481fd6f0da3fe3b"
+  integrity sha512-dwaX5jAh0Ga8uENBX1hSOujmKWgx9RtL80KaKUFLc6jb4vCEAc3EeZ0rnQO/FO4VgjfPMfoLFWnNG8bHuZ9VLw==
 
 prebuild-install@^7.1.1:
   version "7.1.1"