chore: cycle and module sidebar state filter implementation (#4522)

web/components/core/sidebar/sidebar-progress-stats.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-
+import { observer } from "mobx-react";
 import Image from "next/image";
 // headless ui
 import { Tab } from "@headlessui/react";
@@ -15,6 +15,7 @@ import {
 // hooks
 import { Avatar, StateGroupIcon } from "@plane/ui";
 import { SingleProgressStats } from "@/components/core";
+import { useProjectState } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 // images
 import emptyLabel from "public/empty-state/empty_label.svg";
@@ -44,7 +45,8 @@ type Props = {
   handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
 };
 
-export const SidebarProgressStats: React.FC<Props> = ({
+export const SidebarProgressStats: React.FC<Props> = observer((props) => {
+  const {
     distribution,
     groupedIssues,
     totalIssues,
@@ -55,9 +57,11 @@ export const SidebarProgressStats: React.FC<Props> = ({
     isCompleted = false,
     filters,
     handleFiltersUpdate,
-}) => {
+  } = props;
   const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
 
+  const { groupedProjectStates } = useProjectState();
+
   const currentValue = (tab: string | null) => {
     switch (tab) {
       case "Assignees":
@@ -71,6 +75,12 @@ export const SidebarProgressStats: React.FC<Props> = ({
     }
   };
 
+  const getStateGroupState = (stateGroup: string) => {
+    const stateGroupStates = groupedProjectStates?.[stateGroup];
+    const stateGroupStatesId = stateGroupStates?.map((state) => state.id);
+    return stateGroupStatesId;
+  };
+
   return (
     <Tab.Group
       defaultIndex={currentValue(tab)}
@@ -261,10 +271,14 @@ export const SidebarProgressStats: React.FC<Props> = ({
               }
               completed={groupedIssues[group]}
               total={totalIssues}
+              {...(!isPeekView &&
+                !isCompleted && {
+                  onClick: () => handleFiltersUpdate("state", getStateGroupState(group) ?? []),
+                })}
             />
           ))}
         </Tab.Panel>
       </Tab.Panels>
     </Tab.Group>
   );
-};
+});

web/components/cycles/sidebar.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import isEmpty from "lodash/isEmpty";
+import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
@@ -199,14 +200,18 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
       if (!workspaceSlug || !projectId) return;
-      const newValues = issueFilters?.filters?.[key] ?? [];
+      let newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
-        // this validation is majorly for the filter start_date, target_date custom
+        if (key === "state") {
+          if (isEqual(newValues, value)) newValues = [];
+          else newValues = value;
+        } else {
           value.forEach((val) => {
             if (!newValues.includes(val)) newValues.push(val);
             else newValues.splice(newValues.indexOf(val), 1);
           });
+        }
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);

web/components/modules/sidebar.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
+import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
@@ -252,14 +253,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
       if (!workspaceSlug || !projectId) return;
-      const newValues = issueFilters?.filters?.[key] ?? [];
+      let newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
-        // this validation is majorly for the filter start_date, target_date custom
+        if (key === "state") {
+          if (isEqual(newValues, value)) newValues = [];
+          else newValues = value;
+        } else {
           value.forEach((val) => {
             if (!newValues.includes(val)) newValues.push(val);
             else newValues.splice(newValues.indexOf(val), 1);
           });
+        }
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);