Skip to content

[WEB-2213] fix: group by persistence for list view #5590

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pushya22 merged 9 commits into from
Oct 3, 2024
Merged

[WEB-2213] fix: group by persistence for list view #5590

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f1d10ae
fix kanban view localStorage
sharma01ketan Sep 10, 2024
bebf238
add functionality for list view and add type for kanban function
sharma01ketan Sep 12, 2024
36b503c
add comment in issue-filter-helper store
sharma01ketan Sep 12, 2024
71094a6
improved code quality
sharma01ketan Sep 12, 2024
d176b83
add comment for clarity
sharma01ketan Sep 12, 2024
9c5a4d2
use better variable names
sharma01ketan Sep 17, 2024
df3d6bb
use useCallback hook and change variable name
sharma01ketan Sep 28, 2024
1000153
Merge branch 'preview' of https://github.com/makeplane/plane into fix…
sharma01ketan Sep 30, 2024
5a92bca
made suggested changes
sharma01ketan Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 18 additions & 15 deletions web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,21 +199,24 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
});
};

const handleKanbanFilters = (toggle: "group_by" | "sub_group_by", value: string) => {
if (workspaceSlug) {
let kanbanFilters = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || [];
if (kanbanFilters.includes(value)) {
kanbanFilters = kanbanFilters.filter((_value) => _value != value);
} else {
kanbanFilters.push(value);
const handleCollapsedGroups = useCallback(
(toggle: "group_by" | "sub_group_by", value: string) => {
if (workspaceSlug) {
let collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || [];
if (collapsedGroups.includes(value)) {
collapsedGroups = collapsedGroups.filter((_value) => _value != value);
} else {
collapsedGroups.push(value);
}
updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, {
[toggle]: collapsedGroups,
});
}
updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, {
[toggle]: kanbanFilters,
});
}
};
},
[workspaceSlug, issuesFilter, projectId, updateFilters]
);

const kanbanFilters = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] };
const collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] };

return (
<IssueLayoutHOC layout={EIssueLayoutTypes.KANBAN}>
Expand Down Expand Up @@ -258,8 +261,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={renderQuickActions}
handleKanbanFilters={handleKanbanFilters}
kanbanFilters={kanbanFilters}
handleCollapsedGroups={handleCollapsedGroups}
collapsedGroups={collapsedGroups}
enableQuickIssueCreate={enableQuickAdd}
showEmptyGroup={userDisplayFilters?.show_empty_groups ?? true}
quickAddCallback={quickAddIssue}
Expand Down
14 changes: 7 additions & 7 deletions web/core/components/issues/issue-layouts/kanban/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export interface IKanBan {
sub_group_index?: number;
updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
kanbanFilters: TIssueKanbanFilters;
handleKanbanFilters: any;
collapsedGroups: TIssueKanbanFilters;
handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
enableQuickIssueCreate?: boolean;
quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
Expand All @@ -71,8 +71,8 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
sub_group_id = "null",
updateIssue,
quickActions,
kanbanFilters,
handleKanbanFilters,
collapsedGroups,
handleCollapsedGroups,
enableQuickIssueCreate,
quickAddCallback,
loadMoreIssues,
Expand Down Expand Up @@ -133,7 +133,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
if ((getGroupIssueCount(_list.id, undefined, false) ?? 0) > 0) groupVisibility.showGroup = true;
else groupVisibility.showGroup = false;
}
if (kanbanFilters?.group_by.includes(_list.id)) groupVisibility.showIssues = false;
if (collapsedGroups?.group_by.includes(_list.id)) groupVisibility.showIssues = false;
return groupVisibility;
}
};
Expand Down Expand Up @@ -176,8 +176,8 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
issuePayload={subList.payload}
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
addIssuesToView={addIssuesToView}
kanbanFilters={kanbanFilters}
handleKanbanFilters={handleKanbanFilters}
collapsedGroups={collapsedGroups}
handleCollapsedGroups={handleCollapsedGroups}
/>
</div>
)}
Expand Down
12 changes: 6 additions & 6 deletions web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ interface IHeaderGroupByCard {
icon?: React.ReactNode;
title: string;
count: number;
kanbanFilters: TIssueKanbanFilters;
handleKanbanFilters: any;
collapsedGroups: TIssueKanbanFilters;
handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
issuePayload: Partial<TIssue>;
disableIssueCreation?: boolean;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
Expand All @@ -38,13 +38,13 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
icon,
title,
count,
kanbanFilters,
handleKanbanFilters,
collapsedGroups,
handleCollapsedGroups,
issuePayload,
disableIssueCreation,
addIssuesToView,
} = props;
const verticalAlignPosition = sub_group_by ? false : kanbanFilters?.group_by.includes(column_id);
const verticalAlignPosition = sub_group_by ? false : collapsedGroups?.group_by.includes(column_id);
// states
const [isOpen, setIsOpen] = React.useState(false);
const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
Expand Down Expand Up @@ -133,7 +133,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
{sub_group_by === null && (
<div
className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
onClick={() => handleKanbanFilters("group_by", column_id)}
onClick={() => handleCollapsedGroups("group_by", column_id)}
>
{verticalAlignPosition ? (
<Maximize2 width={14} strokeWidth={2} />
Expand Down
10 changes: 5 additions & 5 deletions web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ interface IHeaderSubGroupByCard {
title: string;
count: number;
column_id: string;
kanbanFilters: TIssueKanbanFilters;
handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
collapsedGroups: TIssueKanbanFilters;
handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
}

export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props) => {
const { icon, title, count, column_id, kanbanFilters, handleKanbanFilters } = props;
const { icon, title, count, column_id, collapsedGroups, handleCollapsedGroups } = props;
return (
<div
className={`relative flex w-full flex-shrink-0 flex-row items-center gap-1 rounded-sm py-1.5 cursor-pointer`}
onClick={() => handleKanbanFilters("sub_group_by", column_id)}
onClick={() => handleCollapsedGroups("sub_group_by", column_id)}
>
<div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
{kanbanFilters?.sub_group_by.includes(column_id) ? (
{collapsedGroups?.sub_group_by.includes(column_id) ? (
Comment on lines +21 to +24
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Residual kanbanFilters Found

There are remaining instances of kanbanFilters in the following files, indicating that the renaming to collapsedGroups may be incomplete:

  • web/core/components/issues/issue-layouts/list/base-list-root.tsx
  • web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx

Please update these instances to ensure consistency across the codebase.

🔗 Analysis chain

LGTM! Verify the impact on related components.

The changes in the onClick handler and the condition check are consistent with the interface updates and prop renaming. The functionality appears to remain the same, with only the naming conventions updated.

To ensure that these changes don't introduce any unintended side effects, please run the following verification script:

This script will help identify any places where the old naming conventions might still be in use, and confirm that the new collapsedGroups terminology is used consistently across related components.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any remaining instances of 'kanbanFilters' or 'handleKanbanFilters'
# in related components, and verify that 'collapsedGroups' is used consistently.

echo "Checking for remaining instances of old naming conventions:"
rg --type typescript 'kanbanFilters|handleKanbanFilters' web/core/components/issues/

echo "\nVerifying consistent usage of 'collapsedGroups':"
rg --type typescript 'collapsedGroups' web/core/components/issues/

Length of output: 469

Script:

#!/bin/bash
# Description: Check for any remaining instances of 'kanbanFilters' or 'handleKanbanFilters'
# in related components, and verify that 'collapsedGroups' is used consistently.

echo "Checking for remaining instances of old naming conventions:"
rg --type ts 'kanbanFilters|handleKanbanFilters' web/core/components/issues/

echo "\nVerifying consistent usage of 'collapsedGroups':"
rg --type ts 'collapsedGroups' web/core/components/issues/

Length of output: 6365

<ChevronDown width={14} strokeWidth={2} />
) : (
<ChevronUp width={14} strokeWidth={2} />
Expand Down
44 changes: 22 additions & 22 deletions web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ interface ISubGroupSwimlaneHeader {
sub_group_by: TIssueGroupByOptions | undefined;
group_by: TIssueGroupByOptions | undefined;
list: IGroupByColumn[];
kanbanFilters: TIssueKanbanFilters;
handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
collapsedGroups: TIssueKanbanFilters;
handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
showEmptyGroup: boolean;
}

Expand All @@ -53,7 +53,7 @@ const visibilitySubGroupByGroupCount = (subGroupIssueCount: number, showEmptyGro
};

const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = observer(
({ getGroupIssueCount, sub_group_by, group_by, list, kanbanFilters, handleKanbanFilters, showEmptyGroup }) => (
({ getGroupIssueCount, sub_group_by, group_by, list, collapsedGroups, handleCollapsedGroups, showEmptyGroup }) => (
<div className="relative flex h-max min-h-full w-full items-center gap-2">
{list &&
list.length > 0 &&
Expand All @@ -73,8 +73,8 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = observer(
icon={_list.icon}
title={_list.name}
count={groupCount}
kanbanFilters={kanbanFilters}
handleKanbanFilters={handleKanbanFilters}
collapsedGroups={collapsedGroups}
handleCollapsedGroups={handleCollapsedGroups}
issuePayload={_list.payload}
/>
</div>
Expand All @@ -96,8 +96,8 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
displayProperties: IIssueDisplayProperties | undefined;
updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
kanbanFilters: TIssueKanbanFilters;
handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
collapsedGroups: TIssueKanbanFilters;
handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
disableIssueCreation?: boolean;
enableQuickIssueCreate: boolean;
Expand All @@ -120,8 +120,8 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
updateIssue,
quickActions,
displayProperties,
kanbanFilters,
handleKanbanFilters,
collapsedGroups,
handleCollapsedGroups,
loadMoreIssues,
showEmptyGroup,
enableQuickIssueCreate,
Expand All @@ -147,7 +147,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
if (subGroupCount > 0) subGroupVisibility.showGroup = true;
else subGroupVisibility.showGroup = false;
}
if (kanbanFilters?.sub_group_by.includes(_list.id)) subGroupVisibility.showIssues = false;
if (collapsedGroups?.sub_group_by.includes(_list.id)) subGroupVisibility.showIssues = false;
return subGroupVisibility;
};

Expand All @@ -168,8 +168,8 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
icon={_list.icon}
title={_list.name || ""}
count={issueCount}
kanbanFilters={kanbanFilters}
handleKanbanFilters={handleKanbanFilters}
collapsedGroups={collapsedGroups}
handleCollapsedGroups={handleCollapsedGroups}
/>
</Row>
</div>
Expand All @@ -187,8 +187,8 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
subGroupIndex={subGroupIndex}
updateIssue={updateIssue}
quickActions={quickActions}
kanbanFilters={kanbanFilters}
handleKanbanFilters={handleKanbanFilters}
collapsedGroups={collapsedGroups}
handleCollapsedGroups={handleCollapsedGroups}
showEmptyGroup={showEmptyGroup}
enableQuickIssueCreate={enableQuickIssueCreate}
disableIssueCreation={disableIssueCreation}
Expand Down Expand Up @@ -224,8 +224,8 @@ export interface IKanBanSwimLanes {
group_by: TIssueGroupByOptions | undefined;
updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
kanbanFilters: TIssueKanbanFilters;
handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
collapsedGroups: TIssueKanbanFilters;
handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
showEmptyGroup: boolean;
handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
Expand All @@ -249,8 +249,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
orderBy,
updateIssue,
quickActions,
kanbanFilters,
handleKanbanFilters,
collapsedGroups,
handleCollapsedGroups,
loadMoreIssues,
showEmptyGroup,
handleOnDrop,
Expand Down Expand Up @@ -303,8 +303,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
getGroupIssueCount={getGroupIssueCount}
group_by={group_by}
sub_group_by={sub_group_by}
kanbanFilters={kanbanFilters}
handleKanbanFilters={handleKanbanFilters}
collapsedGroups={collapsedGroups}
handleCollapsedGroups={handleCollapsedGroups}
list={groupByList}
showEmptyGroup={showEmptyGroup}
/>
Expand All @@ -322,8 +322,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={quickActions}
kanbanFilters={kanbanFilters}
handleKanbanFilters={handleKanbanFilters}
collapsedGroups={collapsedGroups}
handleCollapsedGroups={handleCollapsedGroups}
loadMoreIssues={loadMoreIssues}
showEmptyGroup={showEmptyGroup}
handleOnDrop={handleOnDrop}
Expand Down
30 changes: 28 additions & 2 deletions web/core/components/issues/issue-layouts/list/base-list-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { FC, useCallback, useEffect } from "react";
import { observer } from "mobx-react";
// types
import { GroupByColumnTypes, TGroupedIssues } from "@plane/types";
import { useParams } from "next/navigation";
import { GroupByColumnTypes, TGroupedIssues, TIssueKanbanFilters } from "@plane/types";
// constants
import { EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
// hooks
import { useIssues, useUserPermissions } from "@/hooks/store";
// hooks
Expand Down Expand Up @@ -59,6 +60,10 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
const group_by = (displayFilters?.group_by || null) as GroupByColumnTypes | null;
const showEmptyGroup = displayFilters?.show_empty_groups ?? false;

const { workspaceSlug, projectId } = useParams();
const {updateFilters} = useIssuesActions(storeType);
const collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] } as TIssueKanbanFilters;

useEffect(() => {
fetchIssues("init-loader", { canGroup: true, perPageCount: group_by ? 50 : 100 }, viewId);
}, [fetchIssues, storeType, group_by, viewId]);
Expand Down Expand Up @@ -107,6 +112,25 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
[fetchNextIssues]
);

// kanbanFilters and EIssueFilterType.KANBAN_FILTERS are used becuase the state is shared between kanban view and list view
const handleCollapsedGroups = useCallback(
(value: string) => {
if (workspaceSlug) {
let collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters?.group_by || [];
if (collapsedGroups.includes(value)) {
collapsedGroups = collapsedGroups.filter((_value) => _value != value);
} else {
collapsedGroups.push(value);
}
updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS,
{ group_by: collapsedGroups } as TIssueKanbanFilters
);
}
},
[workspaceSlug, issuesFilter, projectId, updateFilters]
);


return (
<IssueLayoutHOC layout={EIssueLayoutTypes.LIST}>
<div className={`relative size-full bg-custom-background-90`}>
Expand All @@ -127,6 +151,8 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
addIssuesToView={addIssuesToView}
isCompletedCycle={isCompletedCycle}
handleOnDrop={handleOnDrop}
handleCollapsedGroups={handleCollapsedGroups}
collapsedGroups={collapsedGroups}
/>
</div>
</IssueLayoutHOC>
Expand Down
7 changes: 7 additions & 0 deletions web/core/components/issues/issue-layouts/list/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
TIssueGroupByOptions,
TIssueOrderByOptions,
IGroupByColumn,
TIssueKanbanFilters,
} from "@plane/types";
// components
import { MultipleSelectGroup } from "@/components/core";
Expand Down Expand Up @@ -47,6 +48,8 @@ export interface IList {
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
isCompletedCycle?: boolean;
loadMoreIssues: (groupId?: string) => void;
handleCollapsedGroups: (value: string) => void;
collapsedGroups : TIssueKanbanFilters;
}

export const List: React.FC<IList> = observer((props) => {
Expand All @@ -67,6 +70,8 @@ export const List: React.FC<IList> = observer((props) => {
addIssuesToView,
isCompletedCycle = false,
loadMoreIssues,
handleCollapsedGroups,
collapsedGroups
} = props;

const storeType = useIssueStoreType();
Expand Down Expand Up @@ -162,6 +167,8 @@ export const List: React.FC<IList> = observer((props) => {
loadMoreIssues={loadMoreIssues}
containerRef={containerRef}
selectionHelpers={helpers}
handleCollapsedGroups={handleCollapsedGroups}
collapsedGroups={collapsedGroups}
/>
))}
</div>
Expand Down
Loading