feat: resizable kanban columns - [WEB-9677]

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

@@ -105,7 +105,7 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
         fetchNextIssues(groupId, subgroupId);
       }
     },
-    [fetchNextIssues]
+    [fetchNextIssues, issues]
   );
 
   const groupedIssueIds = issues?.groupedIssueIds;
@@ -130,9 +130,11 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
   const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by, sub_group_by);
 
   const canEditProperties = useCallback(
-    (projectId: string | undefined) => {
+    (targetProjectId: string | undefined) => {
       const isEditingAllowedBasedOnProject =
-        canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
+        canEditPropertiesBasedOnProject && targetProjectId
+          ? canEditPropertiesBasedOnProject(targetProjectId)
+          : isEditingAllowed;
 
       return enableInlineEditing && isEditingAllowedBasedOnProject;
     },
@@ -161,7 +163,11 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
     return combine(
       dropTargetForElements({
         element,
-        getData: () => ({ columnId: "issue-trash-box", groupId: "issue-trash-box", type: "DELETE" }),
+        getData: () => ({
+          columnId: "issue-trash-box",
+          groupId: "issue-trash-box",
+          type: "DELETE",
+        }),
         onDragEnter: () => {
           setIsDragOverDelete(true);
         },
@@ -231,7 +237,21 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
     [workspaceSlug, issuesFilter, projectId, updateFilters]
   );
 
-  const collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] };
+  const collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters || {
+    group_by: [],
+    sub_group_by: [],
+  };
+  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<string>>(new Set());
+  const handleExpandedGroups = useCallback((_toggle: "group_by" | "sub_group_by", value: string) => {
+    setExpandedGroupIds((currentGroupIds) => {
+      const nextGroupIds = new Set(currentGroupIds);
+
+      if (nextGroupIds.has(value)) nextGroupIds.delete(value);
+      else nextGroupIds.add(value);
+
+      return nextGroupIds;
+    });
+  }, []);
 
   return (
     <>
@@ -264,8 +284,8 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
           className={`horizontal-scrollbar relative scrollbar-lg flex h-full w-full bg-surface-2 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
           ref={scrollableContainerRef}
         >
-          <div className="relative h-full w-max min-w-full bg-surface-2">
-            <div className="h-full w-max">
+          <div className="relative h-full w-full min-w-full bg-surface-2">
+            <div className="h-full w-full min-w-full">
               <KanBanView
                 issuesMap={issueMap}
                 groupedIssueIds={groupedIssueIds ?? {}}
@@ -277,6 +297,8 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
                 updateIssue={updateIssue}
                 quickActions={renderQuickActions}
                 handleCollapsedGroups={handleCollapsedGroups}
+                expandedGroupIds={expandedGroupIds}
+                handleExpandedGroups={handleExpandedGroups}
                 collapsedGroups={collapsedGroups}
                 enableQuickIssueCreate={enableQuickAdd}
                 showEmptyGroup={userDisplayFilters?.show_empty_groups ?? true}

apps/web/core/components/issues/issue-layouts/kanban/default.tsx

@@ -56,6 +56,8 @@ export interface IKanBan {
   quickActions: TRenderQuickActions;
   collapsedGroups: TIssueKanbanFilters;
   handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  expandedGroupIds?: ReadonlySet<string>;
+  handleExpandedGroups?: (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>;
@@ -82,6 +84,8 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
     quickActions,
     collapsedGroups,
     handleCollapsedGroups,
+    expandedGroupIds,
+    handleExpandedGroups,
     enableQuickIssueCreate,
     quickAddCallback,
     loadMoreIssues,
@@ -161,8 +165,12 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
           return (
             <div
               key={subList.id}
-              className={`group relative flex flex-shrink-0 flex-col ${
-                groupByVisibilityToggle.showIssues ? `w-[350px]` : ``
+              className={`group relative flex flex-col ${
+                groupByVisibilityToggle.showIssues
+                  ? expandedGroupIds?.has(subList.id)
+                    ? `min-w-[350px] flex-1`
+                    : `w-[350px] flex-shrink-0`
+                  : ``
               } `}
             >
               {sub_group_by === null && (
@@ -183,6 +191,8 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
                     addIssuesToView={addIssuesToView}
                     collapsedGroups={collapsedGroups}
                     handleCollapsedGroups={handleCollapsedGroups}
+                    expandedGroupIds={expandedGroupIds}
+                    handleExpandedGroups={handleExpandedGroups}
                     isEpic={isEpic}
                   />
                 </div>

apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // lucide icons
-import { Circle } from "lucide-react";
+import { Circle, UnfoldHorizontal, FoldHorizontal } from "lucide-react";
 import { AddOutline, ArrowCollapseOutline, FullScreenOutline } from "@makeplane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue, ISearchIssueResponse, TIssueKanbanFilters, TIssueGroupByOptions } from "@plane/types";
@@ -30,6 +30,8 @@ interface IHeaderGroupByCard {
   count: number;
   collapsedGroups: TIssueKanbanFilters;
   handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  handleExpandedGroups?: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  expandedGroupIds?: ReadonlySet<string>;
   issuePayload: Partial<TIssue>;
   disableIssueCreation?: boolean;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
@@ -45,6 +47,8 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
     count,
     collapsedGroups,
     handleCollapsedGroups,
+    handleExpandedGroups,
+    expandedGroupIds,
     issuePayload,
     disableIssueCreation,
     addIssuesToView,
@@ -136,12 +140,27 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
         </div>
 
         {sub_group_by === null && (
-          <button
+          <div className="flex items-center gap-1">
+            {!verticalAlignPosition && (
+              <button
+                className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover"
+                aria-label={expandedGroupIds?.has(column_id) ? "Collapse group" : "Expand group"}
+                onClick={() => handleExpandedGroups?.("group_by", column_id)}
+              >
+                {expandedGroupIds?.has(column_id) ? (
+                  <FoldHorizontal width={14} strokeWidth={2} />
+                ) : (
+                  <UnfoldHorizontal width={14} strokeWidth={2} />
+                )}
+              </button>
+            )}
+            <button
             className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover"
             onClick={() => handleCollapsedGroups("group_by", column_id)}
           >
             {verticalAlignPosition ? <FullScreenOutline width={14} /> : <ArrowCollapseOutline width={14} />}
           </button>
+          </div>
         )}
 
         {!disableIssueCreation &&

apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -41,6 +41,8 @@ interface ISubGroupSwimlaneHeader {
     isSubGroupCumulative: boolean
   ) => number | undefined;
   handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  expandedGroupIds?: ReadonlySet<string>;
+  handleExpandedGroups?: (toggle: "group_by" | "sub_group_by", value: string) => void;
   isEpic?: boolean;
   list: IGroupByColumn[];
   showEmptyGroup: boolean;
@@ -64,6 +66,8 @@ const SubGroupSwimlaneHeader = observer(function SubGroupSwimlaneHeader({
   getGroupIssueCount,
   group_by,
   handleCollapsedGroups,
+  expandedGroupIds,
+  handleExpandedGroups,
   isEpic = false,
   list,
   showEmptyGroup,
@@ -93,6 +97,8 @@ const SubGroupSwimlaneHeader = observer(function SubGroupSwimlaneHeader({
                 count={groupCount}
                 collapsedGroups={collapsedGroups}
                 handleCollapsedGroups={handleCollapsedGroups}
+                expandedGroupIds={expandedGroupIds}
+                handleExpandedGroups={handleExpandedGroups}
                 issuePayload={_list.payload}
                 disableIssueCreation={getIsWorkflowWorkItemCreationDisabled(_list.id)}
                 isEpic={isEpic}
@@ -118,6 +124,8 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   ) => number | undefined;
   groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
   handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  expandedGroupIds?: ReadonlySet<string>;
+  handleExpandedGroups?: (toggle: "group_by" | "sub_group_by", value: string) => void;
   handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
   isEpic?: boolean;
   issuesMap: IIssueMap;
@@ -142,6 +150,8 @@ const SubGroupSwimlane = observer(function SubGroupSwimlane(props: ISubGroupSwim
     group_by,
     groupedIssueIds,
     handleCollapsedGroups,
+    expandedGroupIds,
+    handleExpandedGroups,
     handleOnDrop,
     isEpic = false,
     issuesMap,
@@ -212,6 +222,8 @@ const SubGroupSwimlane = observer(function SubGroupSwimlane(props: ISubGroupSwim
                     quickActions={quickActions}
                     collapsedGroups={collapsedGroups}
                     handleCollapsedGroups={handleCollapsedGroups}
+                    expandedGroupIds={expandedGroupIds}
+                    handleExpandedGroups={handleExpandedGroups}
                     showEmptyGroup={showEmptyGroup}
                     enableQuickIssueCreate={enableQuickIssueCreate}
                     disableIssueCreation={disableIssueCreation}
@@ -250,6 +262,8 @@ export interface IKanBanSwimLanes {
   group_by: TIssueGroupByOptions | undefined;
   groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
   handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  expandedGroupIds?: ReadonlySet<string>;
+  handleExpandedGroups?: (toggle: "group_by" | "sub_group_by", value: string) => void;
   handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
   isEpic?: boolean;
   issuesMap: IIssueMap;
@@ -276,6 +290,8 @@ export const KanBanSwimLanes = observer(function KanBanSwimLanes(props: IKanBanS
     quickActions,
     collapsedGroups,
     handleCollapsedGroups,
+    expandedGroupIds,
+    handleExpandedGroups,
     loadMoreIssues,
     showEmptyGroup,
     handleOnDrop,
@@ -314,6 +330,8 @@ export const KanBanSwimLanes = observer(function KanBanSwimLanes(props: IKanBanS
           sub_group_by={sub_group_by}
           collapsedGroups={collapsedGroups}
           handleCollapsedGroups={handleCollapsedGroups}
+          expandedGroupIds={expandedGroupIds}
+          handleExpandedGroups={handleExpandedGroups}
           list={groupByList}
           showEmptyGroup={showEmptyGroup}
           isEpic={isEpic}
@@ -334,6 +352,8 @@ export const KanBanSwimLanes = observer(function KanBanSwimLanes(props: IKanBanS
           quickActions={quickActions}
           collapsedGroups={collapsedGroups}
           handleCollapsedGroups={handleCollapsedGroups}
+          expandedGroupIds={expandedGroupIds}
+          handleExpandedGroups={handleExpandedGroups}
           loadMoreIssues={loadMoreIssues}
           showEmptyGroup={showEmptyGroup}
           handleOnDrop={handleOnDrop}