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, {
+      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, {
+    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, {
+      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, {
+    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,8 +181,11 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
     return <SpreadsheetLayoutLoader />;
   }
 
-  if (issueIds.length === 0) {
   return (
+    <div className="relative flex h-full w-full flex-col overflow-hidden">
+      <div className="relative h-full w-full overflow-auto">
+        <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
+        {issueIds.length === 0 ? (
           <EmptyState
             image={emptyStateImage}
             title={(workspaceProjectIds ?? []).length > 0 ? currentViewDetails.title : "No project"}
@@ -213,13 +216,8 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
             }
             disabled={!isEditingAllowed}
           />
-    );
+        ) : (
-  }
+          <Fragment>
-
-  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 ?? {}}
@@ -230,9 +228,11 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
               canEditProperties={canEditProperties}
               viewId={globalViewId}
             />
-      </div>
             {/* peek overview */}
             <IssuePeekOverview />
+          </Fragment>
+        )}
+      </div>
     </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 />
+
+      {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,8 +69,14 @@ export const CycleLayoutRoot: React.FC = observer(() => {
     );
   }
 
-  if (issues?.groupedIssueIds?.length === 0) {
   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 />
+
+        {issues?.groupedIssueIds?.length === 0 ? (
           <div className="relative h-full w-full overflow-y-auto">
             <CycleEmptyState
               workspaceSlug={workspaceSlug.toString()}
@@ -79,17 +85,8 @@ export const CycleLayoutRoot: React.FC = observer(() => {
               activeLayout={activeLayout}
             />
           </div>
-    );
+        ) : (
-  }
+          <Fragment>
-
-  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 />
@@ -105,6 +102,8 @@ export const CycleLayoutRoot: React.FC = observer(() => {
             </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 />
 
+      {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}
+          {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,8 +63,11 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
     );
   }
 
-  if (issues?.groupedIssueIds?.length === 0) {
   return (
+    <div className="relative flex h-full w-full flex-col overflow-hidden">
+      <ModuleAppliedFiltersRoot />
+
+      {issues?.groupedIssueIds?.length === 0 ? (
         <div className="relative h-full w-full overflow-y-auto">
           <ModuleEmptyState
             workspaceSlug={workspaceSlug.toString()}
@@ -73,13 +76,8 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
             activeLayout={activeLayout}
           />
         </div>
-    );
+      ) : (
-  }
+        <Fragment>
-
-  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 />
@@ -95,6 +93,8 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
           </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,18 +48,14 @@ 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 />
 
+      {issues?.groupedIssueIds?.length === 0 ? (
+        <ProjectEmptyState />
+      ) : (
+        <Fragment>
           <div className="relative h-full w-full overflow-auto bg-custom-background-90">
             {/* mutation loader */}
             {issues?.loader === "mutation" && (
@@ -82,6 +78,8 @@ export const ProjectLayoutRoot: FC = observer(() => {
 
           {/* 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,18 +79,16 @@ 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 />
 
+      {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} />
@@ -107,6 +105,8 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
 
           {/* 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:
+posthog-js@^1.105.0:
-  version "1.96.1"
+  version "1.105.8"
-  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.96.1.tgz#4f9719a24e4e14037b0e72d430194d7cdb576447"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.105.8.tgz#934602f0c7a5e522a25828062b5841ad8780756f"
-  integrity sha512-kv1vQqYMt2BV3YHS+wxsbGuP+tz+M3y1AzNhz8TfkpY1HT8W/ONT0i0eQpeRr9Y+d4x/fZ6M4cXG5GMvi9lRCA==
+  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"