Merge branch 'sync/ce-ee' of github.com:makeplane/plane-ee into develop

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

@@ -4,6 +4,8 @@ import Image from "next/image";
 // headless ui
 import { Tab } from "@headlessui/react";
 import {
+  IIssueFilterOptions,
+  IIssueFilters,
   IModule,
   TAssigneesDistribution,
   TCompletionChartDistribution,
@@ -37,6 +39,9 @@ type Props = {
   roundedTab?: boolean;
   noBackground?: boolean;
   isPeekView?: boolean;
+  isCompleted?: boolean;
+  filters?: IIssueFilters | undefined;
+  handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
 };
 
 export const SidebarProgressStats: React.FC<Props> = ({
@@ -47,6 +52,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
   roundedTab,
   noBackground,
   isPeekView = false,
+  isCompleted = false,
+  filters,
+  handleFiltersUpdate,
 }) => {
   const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
 
@@ -145,20 +153,11 @@ export const SidebarProgressStats: React.FC<Props> = ({
                     }
                     completed={assignee.completed_issues}
                     total={assignee.total_issues}
-                    {...(!isPeekView && {
-                      onClick: () => {
-                        // TODO: set filters here
-                        // if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
-                        //   setFilters({
-                        //     assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
-                        //   });
-                        // else
-                        //   setFilters({
-                        //     assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
-                        //   });
-                      },
-                      // selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
-                    })}
+                    {...(!isPeekView &&
+                      !isCompleted && {
+                        onClick: () => handleFiltersUpdate("assignees", assignee.assignee_id ?? ""),
+                        selected: filters?.filters?.assignees?.includes(assignee.assignee_id ?? ""),
+                      })}
                   />
                 );
               else
@@ -192,35 +191,52 @@ export const SidebarProgressStats: React.FC<Props> = ({
           className="flex w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
         >
           {distribution && distribution?.labels.length > 0 ? (
-            distribution.labels.map((label, index) => (
-              <SingleProgressStats
-                key={label.label_id ?? `no-label-${index}`}
-                title={
-                  <div className="flex items-center gap-2">
-                    <span
-                      className="block h-3 w-3 rounded-full"
-                      style={{
-                        backgroundColor: label.color ?? "transparent",
-                      }}
-                    />
-                    <span className="text-xs">{label.label_name ?? "No labels"}</span>
-                  </div>
-                }
-                completed={label.completed_issues}
-                total={label.total_issues}
-                {...(!isPeekView && {
-                  // TODO: set filters here
-                  onClick: () => {
-                    // if (filters.labels?.includes(label.label_id ?? ""))
-                    //   setFilters({
-                    //     labels: filters?.labels?.filter((l) => l !== label.label_id),
-                    //   });
-                    // else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
-                  },
-                  // selected: filters?.labels?.includes(label.label_id ?? ""),
-                })}
-              />
-            ))
+            distribution.labels.map((label, index) => {
+              if (label.label_id) {
+                return (
+                  <SingleProgressStats
+                    key={label.label_id}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="block h-3 w-3 rounded-full"
+                          style={{
+                            backgroundColor: label.color ?? "transparent",
+                          }}
+                        />
+                        <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                      </div>
+                    }
+                    completed={label.completed_issues}
+                    total={label.total_issues}
+                    {...(!isPeekView &&
+                      !isCompleted && {
+                        onClick: () => handleFiltersUpdate("labels", label.label_id ?? ""),
+                        selected: filters?.filters?.labels?.includes(label.label_id ?? `no-label-${index}`),
+                      })}
+                  />
+                );
+              } else {
+                return (
+                  <SingleProgressStats
+                    key={`no-label-${index}`}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="block h-3 w-3 rounded-full"
+                          style={{
+                            backgroundColor: label.color ?? "transparent",
+                          }}
+                        />
+                        <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                      </div>
+                    }
+                    completed={label.completed_issues}
+                    total={label.total_issues}
+                  />
+                );
+              }
+            })
           ) : (
             <div className="flex h-full flex-col items-center justify-center gap-2">
               <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">

web/components/cycles/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
@@ -16,7 +16,7 @@ import {
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
-import { ICycle } from "@plane/types";
+import { ICycle, IIssueFilterOptions } from "@plane/types";
 // ui
 import { Avatar, ArchiveIcon, CustomMenu, Loader, LayersIcon, TOAST_TYPE, setToast, TextArea } from "@plane/ui";
 // components
@@ -27,12 +27,13 @@ import { DateRangeDropdown } from "@/components/dropdowns";
 // constants
 import { CYCLE_STATUS } from "@/constants/cycle";
 import { CYCLE_UPDATED } from "@/constants/event-tracker";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { EUserWorkspaceRoles } from "@/constants/workspace";
 // helpers
 import { findHowManyDaysLeft, getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
+import { useEventTracker, useCycle, useUser, useMember, useIssues } from "@/hooks/store";
 // services
 import { CycleService } from "@/services/cycle.service";
 
@@ -191,25 +192,36 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
     }
   };
 
-  // TODO: refactor this
-  // const handleFiltersUpdate = useCallback(
-  //   (key: keyof IIssueFilterOptions, value: string | string[]) => {
-  //     if (!workspaceSlug || !projectId) return;
-  //     const newValues = issueFilters?.filters?.[key] ?? [];
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.CYCLE);
 
-  //     if (Array.isArray(value)) {
-  //       value.forEach((val) => {
-  //         if (!newValues.includes(val)) newValues.push(val);
-  //       });
-  //     } else {
-  //       if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-  //       else newValues.push(value);
-  //     }
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
 
-  //     updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, { [key]: newValues }, cycleId);
-  //   },
-  //   [workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
-  // );
+      if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
+        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);
+      }
+
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.FILTERS,
+        { [key]: newValues },
+        cycleId
+      );
+    },
+    [workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
+  );
 
   const cycleStatus = cycleDetails?.status?.toLocaleLowerCase();
   const isCompleted = cycleStatus === "completed";
@@ -251,8 +263,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         ? "0 Issue"
         : `${cycleDetails.progress_snapshot.completed_issues}/${cycleDetails.progress_snapshot.total_issues}`
       : cycleDetails.total_issues === 0
-      ? "0 Issue"
-      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+        ? "0 Issue"
+        : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
 
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date);
 
@@ -551,6 +563,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                                     }}
                                     totalIssues={cycleDetails.progress_snapshot.total_issues}
                                     isPeekView={Boolean(peekCycle)}
+                                    isCompleted={isCompleted}
+                                    filters={issueFilters}
+                                    handleFiltersUpdate={handleFiltersUpdate}
                                   />
                                 </div>
                               )}
@@ -570,6 +585,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                                   }}
                                   totalIssues={cycleDetails.total_issues}
                                   isPeekView={Boolean(peekCycle)}
+                                  isCompleted={isCompleted}
+                                  filters={issueFilters}
+                                  handleFiltersUpdate={handleFiltersUpdate}
                                 />
                               </div>
                             )}

web/components/issues/issue-layouts/filters/header/filters/state.tsx

@@ -26,7 +26,7 @@ export const FilterState: React.FC<Props> = observer((props) => {
   const sortedOptions = useMemo(() => {
     const filteredOptions = (states ?? []).filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
 
-    return sortBy(filteredOptions, [(s) => !(appliedFilters ?? []).includes(s.id), (s) => s.name.toLowerCase()]);
+    return sortBy(filteredOptions, [(s) => !(appliedFilters ?? []).includes(s.id)]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery]);
 

web/components/modules/dropdowns/filters/lead.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { Avatar, Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-import { useMember } from "@/hooks/store";
+import { useMember, useUser } from "@/hooks/store";
 // components
 // ui
 
@@ -22,19 +22,22 @@ export const FilterLead: React.FC<Props> = observer((props: Props) => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
   // store hooks
   const { getUserDetails } = useMember();
+  const { currentUser } = useUser();
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const sortedOptions = useMemo(() => {
-    const filteredOptions = (memberIds || []).filter(
-      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
     );
 
     return sortBy(filteredOptions, [
       (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
       (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
     ]);
-  }, [appliedFilters, getUserDetails, memberIds, , searchQuery]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
 
   const handleViewToggle = () => {
     if (!sortedOptions) return;
@@ -65,7 +68,7 @@ export const FilterLead: React.FC<Props> = observer((props: Props) => {
                       isChecked={appliedFilters?.includes(member.id) ? true : false}
                       onClick={() => handleUpdate(member.id)}
                       icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
-                      title={member.display_name}
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
                     />
                   );
                 })}

web/components/modules/dropdowns/filters/members.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { Avatar, Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-import { useMember } from "@/hooks/store";
+import { useMember, useUser } from "@/hooks/store";
 // components
 // ui
 
@@ -22,16 +22,18 @@ export const FilterMembers: React.FC<Props> = observer((props: Props) => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
   // store hooks
   const { getUserDetails } = useMember();
+  const { currentUser } = useUser();
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const sortedOptions = useMemo(() => {
-    const filteredOptions = (memberIds || []).filter(
-      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
     );
 
     return sortBy(filteredOptions, [
       (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
       (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -66,7 +68,7 @@ export const FilterMembers: React.FC<Props> = observer((props: Props) => {
                       isChecked={appliedFilters?.includes(member.id) ? true : false}
                       onClick={() => handleUpdate(member.id)}
                       icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
-                      title={member.display_name}
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
                     />
                   );
                 })}

web/components/modules/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
@@ -15,7 +15,7 @@ import {
   UserCircle2,
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
-import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
+import { IIssueFilterOptions, ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // ui
 import {
   CustomMenu,
@@ -41,13 +41,14 @@ import {
   MODULE_LINK_UPDATED,
   MODULE_UPDATED,
 } from "@/constants/event-tracker";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { MODULE_STATUS } from "@/constants/module";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useModule, useUser, useEventTracker } from "@/hooks/store";
+import { useModule, useUser, useEventTracker, useIssues } from "@/hooks/store";
 // types
 
 const defaultValues: Partial<IModule> = {
@@ -82,6 +83,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink, restoreModule } =
     useModule();
   const { setTrackElement, captureModuleEvent, captureEvent } = useEventTracker();
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.MODULE);
   const moduleDetails = getModuleById(moduleId);
 
   const moduleState = moduleDetails?.status?.toLocaleLowerCase();
@@ -245,6 +249,33 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
       });
   }, [moduleDetails, reset]);
 
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
+        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);
+      }
+
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.FILTERS,
+        { [key]: newValues },
+        moduleId
+      );
+    },
+    [workspaceSlug, projectId, moduleId, issueFilters, updateFilters]
+  );
+
   const startDate = getDate(moduleDetails?.start_date);
   const endDate = getDate(moduleDetails?.target_date);
   const isStartValid = startDate && startDate <= new Date();
@@ -599,6 +630,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                               totalIssues={moduleDetails.total_issues}
                               module={moduleDetails}
                               isPeekView={Boolean(peekModule)}
+                              filters={issueFilters}
+                              handleFiltersUpdate={handleFiltersUpdate}
                             />
                           </div>
                         )}

web/components/pages/list/filters/created-by.tsx

@@ -6,7 +6,7 @@ import { Avatar, Loader } from "@plane/ui";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
 // hooks
-import { useMember } from "@/hooks/store";
+import { useMember, useUser } from "@/hooks/store";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -22,6 +22,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
   // store hooks
   const { getUserDetails } = useMember();
+  const { currentUser } = useUser();
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
@@ -32,9 +33,11 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
 
     return sortBy(filteredOptions, [
       (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
       (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
     ]);
-  }, [appliedFilters, getUserDetails, memberIds, searchQuery]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
 
   const handleViewToggle = () => {
     if (!sortedOptions) return;
@@ -65,7 +68,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
                       isChecked={appliedFilters?.includes(member.id) ? true : false}
                       onClick={() => handleUpdate(member.id)}
                       icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
-                      title={member.display_name}
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
                     />
                   );
                 })}

web/components/project/dropdowns/filters/lead.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { Avatar, Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-import { useMember } from "@/hooks/store";
+import { useMember, useUser } from "@/hooks/store";
 // components
 // ui
 
@@ -22,16 +22,18 @@ export const FilterLead: React.FC<Props> = observer((props: Props) => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
   // store hooks
   const { getUserDetails } = useMember();
+  const { currentUser } = useUser();
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const sortedOptions = useMemo(() => {
-    const filteredOptions = (memberIds || []).filter(
-      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
     );
 
     return sortBy(filteredOptions, [
       (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
       (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -66,7 +68,7 @@ export const FilterLead: React.FC<Props> = observer((props: Props) => {
                       isChecked={appliedFilters?.includes(member.id) ? true : false}
                       onClick={() => handleUpdate(member.id)}
                       icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
-                      title={member.display_name}
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
                     />
                   );
                 })}

web/components/project/dropdowns/filters/members.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { Avatar, Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-import { useMember } from "@/hooks/store";
+import { useMember, useUser } from "@/hooks/store";
 // components
 // ui
 
@@ -22,16 +22,18 @@ export const FilterMembers: React.FC<Props> = observer((props: Props) => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
   // store hooks
   const { getUserDetails } = useMember();
+  const { currentUser } = useUser();
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const sortedOptions = useMemo(() => {
-    const filteredOptions = (memberIds || []).filter(
-      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
     );
 
     return sortBy(filteredOptions, [
       (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
       (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -66,7 +68,7 @@ export const FilterMembers: React.FC<Props> = observer((props: Props) => {
                       isChecked={appliedFilters?.includes(member.id) ? true : false}
                       onClick={() => handleUpdate(member.id)}
                       icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
-                      title={member.display_name}
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
                     />
                   );
                 })}