fix: Filters in all issues and enable dnd in kanban based on roles (#3493)

* fix filters mutation issue * fix all issue filters for state group * disable drag in Kanban for non members * remove unused imports
2024-06-14 14:31:34 +00:00 · 2024-01-29 15:27:14 +05:30 · 2024-01-29 15:27:14 +05:30 · b3393f5c48
commit b3393f5c48
parent f7f1f2bea4
6 changed files with 80 additions and 66 deletions
--- a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
@ -1,5 +1,5 @@
 import React, { useState } from "react";
-
+import { observer } from "mobx-react";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
@ -18,7 +18,7 @@ type Props = {
  searchQuery: string;
 };

-export const FilterLabels: React.FC<Props> = (props) => {
+export const FilterLabels: React.FC<Props> = observer((props) => {
  const { appliedFilters, handleUpdate, labels, searchQuery } = props;

  const [itemsToRender, setItemsToRender] = useState(5);
@ -80,4 +80,4 @@ export const FilterLabels: React.FC<Props> = (props) => {
      )}
    </>
  );
-};
+});
--- a/web/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
@ -1,5 +1,5 @@
 import React, { useState } from "react";
-
+import { observer } from "mobx-react";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // hooks
@ -15,7 +15,7 @@ type Props = {
  searchQuery: string;
 };

-export const FilterProjects: React.FC<Props> = (props) => {
+export const FilterProjects: React.FC<Props> = observer((props) => {
  const { appliedFilters, handleUpdate, searchQuery } = props;
  // states
  const [itemsToRender, setItemsToRender] = useState(5);
@ -93,4 +93,4 @@ export const FilterProjects: React.FC<Props> = (props) => {
      )}
    </>
  );
-};
+});
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@ -1,5 +1,5 @@
 import { memo } from "react";
-import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { observer } from "mobx-react-lite";
 // components
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
@ -16,11 +16,11 @@ interface IssueBlockProps {
  issuesMap: IIssueMap;
  displayProperties: IIssueDisplayProperties | undefined;
  isDragDisabled: boolean;
+  draggableId: string;
+  index: number;
  handleIssues: (issue: TIssue, action: EIssueActions) => void;
  quickActions: (issue: TIssue) => React.ReactNode;
  canEditProperties: (projectId: string | undefined) => boolean;
-  provided: DraggableProvided;
-  snapshot: DraggableStateSnapshot;
 }

 interface IssueDetailsBlockProps {
@ -90,11 +90,11 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
    issuesMap,
    displayProperties,
    isDragDisabled,
+    draggableId,
+    index,
    handleIssues,
    quickActions,
    canEditProperties,
-    provided,
-    snapshot,
  } = props;

  const issue = issuesMap[issueId];
@ -104,29 +104,38 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
  const canEditIssueProperties = canEditProperties(issue.project_id);

  return (
-    <div
-      className="group/kanban-block relative p-1.5 hover:cursor-default"
-      {...provided.draggableProps}
-      {...provided.dragHandleProps}
-      ref={provided.innerRef}
+    <Draggable
+      key={draggableId}
+      draggableId={draggableId}
+      index={index}
+      isDragDisabled={!canEditIssueProperties || isDragDisabled}
    >
-      {issue.tempId !== undefined && (
-        <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+      {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
+        <div
+          className="group/kanban-block relative p-1.5 hover:cursor-default"
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          ref={provided.innerRef}
+        >
+          {issue.tempId !== undefined && (
+            <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+          )}
+          <div
+            className={`space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
+              isDragDisabled ? "" : "hover:cursor-grab"
+            } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
+          >
+            <KanbanIssueDetailsBlock
+              issue={issue}
+              displayProperties={displayProperties}
+              handleIssues={handleIssues}
+              quickActions={quickActions}
+              isReadOnly={!canEditIssueProperties}
+            />
+          </div>
+        </div>
      )}
-      <div
-        className={`space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
-          isDragDisabled ? "" : "hover:cursor-grab"
-        } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
-      >
-        <KanbanIssueDetailsBlock
-          issue={issue}
-          displayProperties={displayProperties}
-          handleIssues={handleIssues}
-          quickActions={quickActions}
-          isReadOnly={!canEditIssueProperties}
-        />
-      </div>
-    </div>
+    </Draggable>
  );
 });

--- a/web/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
@ -4,7 +4,6 @@ import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
 import { EIssueActions } from "../types";
 // components
 import { KanbanIssueBlock } from "components/issues";
-import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";

 interface IssueBlocksListProps {
  sub_group_id: string;
@ -43,22 +42,18 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
            if (sub_group_id) draggableId = `${draggableId}__${sub_group_id}`;

            return (
-              <Draggable key={draggableId} draggableId={draggableId} index={index} isDragDisabled={isDragDisabled}>
-                {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
-                  <KanbanIssueBlock
-                    key={`kanban-issue-block-${issueId}`}
-                    issueId={issueId}
-                    issuesMap={issuesMap}
-                    displayProperties={displayProperties}
-                    handleIssues={handleIssues}
-                    quickActions={quickActions}
-                    provided={provided}
-                    snapshot={snapshot}
-                    isDragDisabled={isDragDisabled}
-                    canEditProperties={canEditProperties}
-                  />
-                )}
-              </Draggable>
+              <KanbanIssueBlock
+                key={draggableId}
+                issueId={issueId}
+                issuesMap={issuesMap}
+                displayProperties={displayProperties}
+                handleIssues={handleIssues}
+                quickActions={quickActions}
+                draggableId={draggableId}
+                index={index}
+                isDragDisabled={isDragDisabled}
+                canEditProperties={canEditProperties}
+              />
            );
          })}
        </>
--- a/web/store/issue/helpers/issue-filter-helper.store.ts
+++ b/web/store/issue/helpers/issue-filter-helper.store.ts
@ -31,7 +31,10 @@ export interface IIssueFilterHelperStore {
    filteredParams: TIssueParams[]
  ): Partial<Record<TIssueParams, string | boolean>>;
  computedFilters(filters: IIssueFilterOptions): IIssueFilterOptions;
-  computedDisplayFilters(displayFilters: IIssueDisplayFilterOptions): IIssueDisplayFilterOptions;
+  computedDisplayFilters(
+    displayFilters: IIssueDisplayFilterOptions,
+    defaultValues?: IIssueDisplayFilterOptions
+  ): IIssueDisplayFilterOptions;
  computedDisplayProperties(filters: IIssueDisplayProperties): IIssueDisplayProperties;
 }

@ -147,20 +150,27 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore {
   * @param {IIssueDisplayFilterOptions} displayFilters
   * @returns {IIssueDisplayFilterOptions}
   */
-  computedDisplayFilters = (displayFilters: IIssueDisplayFilterOptions): IIssueDisplayFilterOptions => ({
-    calendar: {
-      show_weekends: displayFilters?.calendar?.show_weekends || false,
-      layout: displayFilters?.calendar?.layout || "month",
-    },
-    layout: displayFilters?.layout || "list",
-    order_by: displayFilters?.order_by || "sort_order",
-    group_by: displayFilters?.group_by || null,
-    sub_group_by: displayFilters?.sub_group_by || null,
-    type: displayFilters?.type || null,
-    sub_issue: displayFilters?.sub_issue || false,
-    show_empty_groups: displayFilters?.show_empty_groups || false,
-    start_target_date: displayFilters?.start_target_date || false,
-  });
+  computedDisplayFilters = (
+    displayFilters: IIssueDisplayFilterOptions,
+    defaultValues?: IIssueDisplayFilterOptions
+  ): IIssueDisplayFilterOptions => {
+    const filters = displayFilters || defaultValues;
+
+    return {
+      calendar: {
+        show_weekends: filters?.calendar?.show_weekends || false,
+        layout: filters?.calendar?.layout || "month",
+      },
+      layout: filters?.layout || "list",
+      order_by: filters?.order_by || "sort_order",
+      group_by: filters?.group_by || null,
+      sub_group_by: filters?.sub_group_by || null,
+      type: filters?.type || null,
+      sub_issue: filters?.sub_issue || false,
+      show_empty_groups: filters?.show_empty_groups || false,
+      start_target_date: filters?.start_target_date || false,
+    };
+  };

  /**
   * @description This method is used to apply the display properties on the issues
--- a/web/store/issue/workspace/filter.store.ts
+++ b/web/store/issue/workspace/filter.store.ts
@ -90,7 +90,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
    const userFilters = this.getIssueFilters(viewId);
    if (!userFilters) return undefined;

-    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "issues");
+    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "my_issues");
    if (!filteredParams) return undefined;

    const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
@ -126,7 +126,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
      };

      const _filters = this.handleIssuesLocalFilters.get(EIssuesStoreType.GLOBAL, workspaceSlug, undefined, viewId);
-      displayFilters = this.computedDisplayFilters(_filters?.display_filters);
+      displayFilters = this.computedDisplayFilters(_filters?.display_filters, { layout: "spreadsheet" });
      displayProperties = this.computedDisplayProperties(_filters?.display_properties);
      kanbanFilters = {
        group_by: _filters?.kanban_filters?.group_by || [],