save all filters and properties for views (#4728)

web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx

@@ -19,7 +19,7 @@ import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
 // hooks
-import { useAppRouter, useUser } from "@/hooks/store";
+import { useUser } from "@/hooks/store";
 
 type Props = {
   appliedFilters: IIssueFilterOptions;
@@ -36,7 +36,6 @@ const dateFilters = ["start_date", "target_date"];
 export const AppliedFiltersList: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, states, alwaysAllowEditing } = props;
   // store hooks
-  const { moduleId, cycleId } = useAppRouter();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -108,14 +107,14 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
                   values={value}
                 />
               )}
-              {filterKey === "cycle" && !cycleId && (
+              {filterKey === "cycle" && (
                 <AppliedCycleFilters
                   editable={isEditingAllowed}
                   handleRemove={(val) => handleRemoveFilter("cycle", val)}
                   values={value}
                 />
               )}
-              {filterKey === "module" && !moduleId && (
+              {filterKey === "module" && (
                 <AppliedModuleFilters
                   editable={isEditingAllowed}
                   handleRemove={(val) => handleRemoveFilter("module", val)}

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

@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
+import { AppliedFiltersList } from "@/components/issues";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState } from "@/hooks/store";
 // components
@@ -76,8 +76,6 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
         labels={projectLabels ?? []}
         states={projectStates}
       />
-
-      <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />
     </div>
   );
 });

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

@@ -74,7 +74,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
   };
 
   // return if no filters are applied
-  if (Object.keys(appliedFilters).length === 0 || !workspaceSlug || !projectId) return null;
+  if (Object.keys(appliedFilters).length === 0 || !workspaceSlug || !projectId || !cycleId) return null;
 
   return (
     <div className="flex justify-between p-4 gap-2.5">
@@ -89,7 +89,11 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
       <SaveFilterView
         workspaceSlug={workspaceSlug.toString()}
         projectId={projectId.toString()}
-        filterParams={appliedFilters}
+        filterParams={{
+          filters: { ...appliedFilters, cycle: [cycleId?.toString()] },
+          display_filters: issueFilters?.displayFilters,
+          display_properties: issueFilters?.displayProperties,
+        }}
       />
     </div>
   );

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

@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
+import { AppliedFiltersList } from "@/components/issues";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState } from "@/hooks/store";
 // components
@@ -71,8 +71,6 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
         labels={projectLabels ?? []}
         states={projectStates}
       />
-
-      <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />
     </div>
   );
 });

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

@@ -73,7 +73,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   };
 
   // return if no filters are applied
-  if (!workspaceSlug || !projectId || Object.keys(appliedFilters).length === 0) return null;
+  if (!workspaceSlug || !projectId || !moduleId || Object.keys(appliedFilters).length === 0) return null;
 
   return (
     <div className="flex justify-between p-4 gap-2.5">
@@ -88,7 +88,11 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
       <SaveFilterView
         workspaceSlug={workspaceSlug.toString()}
         projectId={projectId.toString()}
-        filterParams={appliedFilters}
+        filterParams={{
+          filters: { ...appliedFilters, module: [moduleId.toString()] },
+          display_filters: issueFilters?.displayFilters,
+          display_properties: issueFilters?.displayProperties,
+        }}
       />
     </div>
   );

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

@@ -77,7 +77,15 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
         states={projectStates}
       />
       {isEditingAllowed && (
-        <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />
+        <SaveFilterView
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          filterParams={{
+            filters: appliedFilters,
+            display_filters: issueFilters?.displayFilters,
+            display_properties: issueFilters?.displayProperties,
+          }}
+        />
       )}
     </div>
   );

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

@@ -1,5 +1,4 @@
 import isEmpty from "lodash/isEmpty";
-import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { IIssueFilterOptions } from "@plane/types";
@@ -8,6 +7,7 @@ import { Button } from "@plane/ui";
 import { AppliedFiltersList } from "@/components/issues";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState, useProjectView } from "@/hooks/store";
+import { getAreFiltersEqual } from "../../../utils";
 // components
 // ui
 // types
@@ -79,7 +79,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
     );
   };
 
-  const areFiltersEqual = isEqual(appliedFilters ?? {}, viewDetails?.filters ?? {});
+  const areFiltersEqual = getAreFiltersEqual(appliedFilters, issueFilters, viewDetails);
 
   // return if no filters are applied
   if (isEmpty(appliedFilters) && areFiltersEqual) return null;
@@ -91,6 +91,12 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
       filters: {
         ...(appliedFilters ?? {}),
       },
+      display_filters: {
+        ...issueFilters?.displayFilters,
+      },
+      display_properties: {
+        ...issueFilters?.displayProperties,
+      },
     });
   };
 

web/components/issues/issue-layouts/save-filter-view.tsx

@@ -1,4 +1,5 @@
 import { FC, useState } from "react";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 import { Button } from "@plane/ui";
 // components
 import { CreateUpdateProjectViewModal } from "@/components/views";
@@ -6,7 +7,11 @@ import { CreateUpdateProjectViewModal } from "@/components/views";
 interface ISaveFilterView {
   workspaceSlug: string;
   projectId: string;
-  filterParams: any;
+  filterParams: {
+    filters: IIssueFilterOptions;
+    display_filters?: IIssueDisplayFilterOptions;
+    display_properties?: IIssueDisplayProperties;
+  };
 }
 
 export const SaveFilterView: FC<ISaveFilterView> = (props) => {
@@ -19,7 +24,7 @@ export const SaveFilterView: FC<ISaveFilterView> = (props) => {
       <CreateUpdateProjectViewModal
         workspaceSlug={workspaceSlug}
         projectId={projectId}
-        preLoadedData={{ filters: { ...filterParams } }}
+        preLoadedData={{ ...filterParams }}
         isOpen={viewModal}
         onClose={() => setViewModal(false)}
       />

web/components/issues/issue-layouts/utils.tsx

@@ -1,6 +1,7 @@
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import clone from "lodash/clone";
 import concat from "lodash/concat";
+import isEqual from "lodash/isEqual";
 import pull from "lodash/pull";
 import uniq from "lodash/uniq";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
@@ -13,6 +14,9 @@ import {
   IPragmaticDropPayload,
   TIssue,
   TIssueGroupByOptions,
+  IIssueFilterOptions,
+  IIssueFilters,
+  IProjectView,
 } from "@plane/types";
 // ui
 import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui";
@@ -535,3 +539,19 @@ export const handleGroupDragDrop = async (
     return await updateIssueOnDrop(sourceIssue.project_id, sourceIssue.id, updatedIssue, issueUpdates);
   }
 };
+
+/**
+ * This Method compares filters and returns a boolean based on which and updateView button is shown
+ * @param appliedFilters
+ * @param issueFilters
+ * @param viewDetails
+ * @returns
+ */
+export const getAreFiltersEqual = (
+  appliedFilters: IIssueFilterOptions | undefined,
+  issueFilters: IIssueFilters | undefined,
+  viewDetails: IProjectView | null
+) =>
+  isEqual(appliedFilters ?? {}, viewDetails?.filters ?? {}) &&
+  isEqual(issueFilters?.displayFilters ?? {}, viewDetails?.display_filters ?? {}) &&
+  isEqual(issueFilters?.displayProperties ?? {}, viewDetails?.display_properties ?? {});

web/components/views/form.tsx

@@ -94,6 +94,8 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
       description: formData.description,
       logo_props: formData.logo_props,
       filters: formData.filters,
+      display_filters: formData.display_filters,
+      display_properties: formData.display_properties,
     } as IProjectView);
 
     reset({