chore: applying query params to the global issues filters in the global views (#3464)

* chore: applying filters from the route params to the global issue filters store and Typos

* chore: enabled posthog

* fix: labels disbaled and loader while creating the label in isse detail and relation modal loader and mutation issue

web/components/core/modals/existing-issues-list-modal.tsx

@@ -27,8 +27,8 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
   // states
   const [searchTerm, setSearchTerm] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
-  const [isSearching, setIsSearching] = useState(false);
   const [selectedIssues, setSelectedIssues] = useState<ISearchIssueResponse[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
 
@@ -72,8 +72,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
 
   useEffect(() => {
     if (!isOpen || !workspaceSlug || !projectId) return;
-
-    setIsSearching(true);
+    if (issues.length <= 0) setIsSearching(true);
 
     projectService
       .projectIssuesSearch(workspaceSlug as string, projectId as string, {
@@ -83,7 +82,16 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
       })
       .then((res) => setIssues(res))
       .finally(() => setIsSearching(false));
-  }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]);
+  }, [issues, debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]);
+
+  useEffect(() => {
+    setSearchTerm("");
+    setIssues([]);
+    setSelectedIssues([]);
+    setIsSearching(false);
+    setIsSubmitting(false);
+    setIsWorkspaceLevel(false);
+  }, [isOpen]);
 
   return (
     <>

web/components/issues/issue-detail/label/create-label.tsx

@@ -1,5 +1,5 @@
 import { FC, useState, Fragment, useEffect } from "react";
-import { Plus, X } from "lucide-react";
+import { Plus, X, Loader } from "lucide-react";
 import { Controller, useForm } from "react-hook-form";
 import { TwitterPicker } from "react-color";
 import { Popover, Transition } from "@headlessui/react";
@@ -138,6 +138,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
                 hasError={Boolean(errors.name)}
                 placeholder="Title"
                 className="w-full"
+                disabled={isSubmitting}
               />
             )}
           />
@@ -150,7 +151,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
             <X className="h-4 w-4 text-white" />
           </button>
           <button type="submit" className="grid place-items-center rounded bg-green-500 p-1.5" disabled={isSubmitting}>
-            <Plus className="h-4 w-4 text-white" />
+            {isSubmitting ? <Loader className="h-4 w-4 text-white spin" /> : <Plus className="h-4 w-4 text-white" />}
           </button>
         </form>
       )}

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

@@ -7,14 +7,14 @@ import { AppliedFiltersList } from "components/issues";
 // types
 import { IIssueFilterOptions } from "@plane/types";
 import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
-import { useWorskspaceIssueProperties } from "hooks/use-worskspace-issue-properties";
+import { useWorkspaceIssueProperties } from "hooks/use-workspace-issue-properties";
 
 export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
   //swr hook for fetching issue properties
-  useWorskspaceIssueProperties(workspaceSlug);
+  useWorkspaceIssueProperties(workspaceSlug);
   // store hooks
   const {
     issuesFilter: { issueFilters, updateFilters },

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

@@ -2,9 +2,10 @@ import React, { useCallback, useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+import isEmpty from "lodash/isEmpty";
 // hooks
 import { useApplication, useGlobalView, useIssues, useProject, useUser } from "hooks/store";
-import { useWorskspaceIssueProperties } from "hooks/use-worskspace-issue-properties";
+import { useWorkspaceIssueProperties } from "hooks/use-workspace-issue-properties";
 // components
 import { GlobalViewsAppliedFiltersRoot, IssuePeekOverview } from "components/issues";
 import { SpreadsheetView } from "components/issues/issue-layouts";
@@ -17,7 +18,7 @@ import { TIssue, IIssueDisplayFilterOptions } from "@plane/types";
 import { EIssueActions } from "../types";
 // constants
 import { EUserProjectRoles } from "constants/project";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { ALL_ISSUES_EMPTY_STATE_DETAILS, EUserWorkspaceRoles } from "constants/workspace";
 
 export const AllIssueLayoutRoot: React.FC = observer(() => {
@@ -25,7 +26,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, globalViewId } = router.query;
   //swr hook for fetching issue properties
-  useWorskspaceIssueProperties(workspaceSlug);
+  useWorkspaceIssueProperties(workspaceSlug);
   // store
   const { commandPalette: commandPaletteStore } = useApplication();
   const {
@@ -47,6 +48,40 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
 
   const emptyStateImage = getEmptyStateImagePath("all-issues", currentView, currentUser?.theme.theme === "light");
 
+  // filter init from the query params
+
+  const routerFilterParams = () => {
+    if (
+      workspaceSlug &&
+      globalViewId &&
+      ["all-issues", "assigned", "created", "subscribed"].includes(globalViewId.toString())
+    ) {
+      const routerQueryParams = { ...router.query };
+      const { ["workspaceSlug"]: _workspaceSlug, ["globalViewId"]: _globalViewId, ...filters } = routerQueryParams;
+
+      let issueFilters: any = {};
+      Object.keys(filters).forEach((key) => {
+        const filterKey: any = key;
+        const filterValue = filters[key]?.toString() || undefined;
+        if (
+          ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet.filters.includes(filterKey) &&
+          filterKey &&
+          filterValue
+        )
+          issueFilters = { ...issueFilters, [filterKey]: filterValue.split(",") };
+      });
+
+      if (!isEmpty(filters))
+        updateFilters(
+          workspaceSlug.toString(),
+          undefined,
+          EIssueFilterType.FILTERS,
+          issueFilters,
+          globalViewId.toString()
+        );
+    }
+  };
+
   useSWR(workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS${workspaceSlug}` : null, async () => {
     if (workspaceSlug) {
       await fetchAllGlobalViews(workspaceSlug.toString());
@@ -60,6 +95,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
         await fetchAllGlobalViews(workspaceSlug.toString());
         await fetchFilters(workspaceSlug.toString(), globalViewId.toString());
         await fetchIssues(workspaceSlug.toString(), globalViewId.toString(), issueIds ? "mutation" : "init-loader");
+        routerFilterParams();
       }
     }
   );

web/hooks/use-workspace-issue-properties.ts

@@ -1,12 +1,12 @@
 import useSWR from "swr";
 import { useEstimate, useLabel, useProjectState } from "./store";
 
-export const useWorskspaceIssueProperties = (workspaceSlug: string | string[] | undefined) => {
+export const useWorkspaceIssueProperties = (workspaceSlug: string | string[] | undefined) => {
   const { fetchWorkspaceLabels } = useLabel();
 
   const { fetchWorkspaceStates } = useProjectState();
 
-  const { fetchWorskpaceEstimates } = useEstimate();
+  const { fetchWorkspaceEstimates } = useEstimate();
 
   // fetch workspace labels
   useSWR(
@@ -23,6 +23,6 @@ export const useWorskspaceIssueProperties = (workspaceSlug: string | string[] |
   // fetch workspace estimates
   useSWR(
     workspaceSlug ? `WORKSPACE_ESTIMATES_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorskpaceEstimates(workspaceSlug.toString()) : null
+    workspaceSlug ? () => fetchWorkspaceEstimates(workspaceSlug.toString()) : null
   );
 };

web/store/estimate.store.ts

@@ -23,7 +23,7 @@ export interface IEstimateStore {
   getProjectActiveEstimateDetails: (projectId: string) => IEstimate | null;
   // fetch actions
   fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<IEstimate[]>;
-  fetchWorskpaceEstimates: (workspaceSlug: string) => Promise<IEstimate[]>;
+  fetchWorkspaceEstimates: (workspaceSlug: string) => Promise<IEstimate[]>;
   // crud actions
   createEstimate: (workspaceSlug: string, projectId: string, data: IEstimateFormData) => Promise<IEstimate>;
   updateEstimate: (
@@ -56,7 +56,7 @@ export class EstimateStore implements IEstimateStore {
       activeEstimateDetails: computed,
       // actions
       fetchProjectEstimates: action,
-      fetchWorskpaceEstimates: action,
+      fetchWorkspaceEstimates: action,
       createEstimate: action,
       updateEstimate: action,
       deleteEstimate: action,
@@ -158,7 +158,7 @@ export class EstimateStore implements IEstimateStore {
    * @param workspaceSlug
    * @param projectId
    */
-  fetchWorskpaceEstimates = async (workspaceSlug: string) =>
+  fetchWorkspaceEstimates = async (workspaceSlug: string) =>
     await this.estimateService.getWorkspaceEstimatesList(workspaceSlug).then((response) => {
       runInAction(() => {
         response.forEach((estimate) => {

web/store/issue/workspace/filter.store.ts

@@ -162,14 +162,17 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
   ) => {
     try {
       if (!viewId) throw new Error("View id is required");
+      const issueFilters = this.getIssueFilters(viewId);
 
-      if (isEmpty(this.filters) || isEmpty(this.filters[viewId]) || isEmpty(filters)) return;
+      console.log("issueFilters", issueFilters);
+
+      if (!issueFilters || isEmpty(filters)) return;
 
       const _filters = {
-        filters: this.filters[viewId].filters as IIssueFilterOptions,
-        displayFilters: this.filters[viewId].displayFilters as IIssueDisplayFilterOptions,
-        displayProperties: this.filters[viewId].displayProperties as IIssueDisplayProperties,
-        kanbanFilters: this.filters[viewId].kanbanFilters as TIssueKanbanFilters,
+        filters: issueFilters.filters as IIssueFilterOptions,
+        displayFilters: issueFilters.displayFilters as IIssueDisplayFilterOptions,
+        displayProperties: issueFilters.displayProperties as IIssueDisplayProperties,
+        kanbanFilters: issueFilters.kanbanFilters as TIssueKanbanFilters,
       };
 
       switch (type) {