github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-1184] feat: issue bulk operations (#4674)

Browse Source 
* feat: issue bulk operations

* style: bulk operations action bar

* chore: remove edition separation
This commit is contained in:
Aaryan Khandelwal 2024-06-04 11:12:24 +05:30 committed by GitHub
parent 97eea75cb7
commit dd65d03d33
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
46 changed files with 831 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
admin/components/admin-sidebar/help-section.tsx
View File

@ -5,9 +5,11 @@ import { observer } from "mobx-react-lite";
import Link from "next/link";
import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
import { Transition } from "@headlessui/react";
// ui
import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
// helpers
import { WEB_BASE_URL, cn } from "@/helpers/common.helper";
// hooks
import { WEB_BASE_URL } from "@/helpers/common.helper";
import { useTheme } from "@/hooks/store";
// assets
import packageJson from "package.json";
@ -42,9 +44,12 @@ export const HelpSection: FC = observer(() => {
return (
<div
className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
isSidebarCollapsed ? "flex-col" : ""
}`}
className={cn(
"flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-28",
{
"flex-col h-auto py-1.5": isSidebarCollapsed,
}
)}
>
<div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
<Tooltip tooltipContent="Redirect to plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>

22
web/components/gantt-chart/blocks/block.tsx
View File

@ -1,15 +1,16 @@
import { observer } from "mobx-react";
// hooks
// components
// helpers
import { cn } from "@/helpers/common.helper";
import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
// hooks
import { useIssueDetail } from "@/hooks/store";
// types
import { TSelectionHelper } from "@/hooks/use-multiple-select";
// constants
import { BLOCK_HEIGHT } from "../constants";
// components
import { ChartAddBlock, ChartDraggable } from "../helpers";
import { useGanttChart } from "../hooks";
// types
import { IBlockUpdateData, IGanttBlock } from "../types";
type Props = {
@ -21,6 +22,7 @@ type Props = {
enableBlockMove: boolean;
enableAddBlock: boolean;
ganttContainerRef: React.RefObject<HTMLDivElement>;
selectionHelpers: TSelectionHelper;
};
export const GanttChartBlock: React.FC<Props> = observer((props) => {
@ -33,6 +35,7 @@ export const GanttChartBlock: React.FC<Props> = observer((props) => {
enableBlockMove,
enableAddBlock,
ganttContainerRef,
selectionHelpers,
} = props;
// store hooks
const { updateActiveBlockId, isBlockActive } = useGanttChart();
@ -70,6 +73,10 @@ export const GanttChartBlock: React.FC<Props> = observer((props) => {
});
};
const isBlockSelected = selectionHelpers.getIsEntitySelected(block.id);
const isBlockFocused = selectionHelpers.getIsEntityActive(block.id);
const isBlockHoveredOn = isBlockActive(block.id);
return (
<div
key={`block-${block.id}`}
@ -80,10 +87,11 @@ export const GanttChartBlock: React.FC<Props> = observer((props) => {
>
<div
className={cn("relative h-full", {
"bg-custom-background-80": isBlockActive(block.id),
"rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(
block.data.id
),
"rounded-l border border-r-0 border-custom-primary-70": getIsIssuePeeked(block.data.id),
"bg-custom-background-90": isBlockHoveredOn,
"bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isBlockSelected,
"bg-custom-primary-100/10": isBlockSelected && isBlockHoveredOn,
"border border-r-0 border-custom-border-400": isBlockFocused,
})}
onMouseEnter={() => updateActiveBlockId(block.id)}
onMouseLeave={() => updateActiveBlockId(null)}

15
web/components/gantt-chart/blocks/blocks-list.tsx
View File

@ -1,10 +1,12 @@
import { FC } from "react";
// components
import { HEADER_HEIGHT } from "../constants";
import { IBlockUpdateData, IGanttBlock } from "../types";
import { GanttChartBlock } from "./block";
// types
// hooks
import { TSelectionHelper } from "@/hooks/use-multiple-select";
// constants
import { HEADER_HEIGHT } from "../constants";
// types
import { IBlockUpdateData, IGanttBlock } from "../types";
// components
import { GanttChartBlock } from "./block";
export type GanttChartBlocksProps = {
itemsContainerWidth: number;
@ -17,6 +19,7 @@ export type GanttChartBlocksProps = {
enableAddBlock: boolean;
ganttContainerRef: React.RefObject<HTMLDivElement>;
showAllBlocks: boolean;
selectionHelpers: TSelectionHelper;
};
export const GanttChartBlocksList: FC<GanttChartBlocksProps> = (props) => {
@ -31,6 +34,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = (props) => {
enableAddBlock,
ganttContainerRef,
showAllBlocks,
selectionHelpers,
} = props;
return (
@ -56,6 +60,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = (props) => {
enableBlockMove={enableBlockMove}
enableAddBlock={enableAddBlock}
ganttContainerRef={ganttContainerRef}
selectionHelpers={selectionHelpers}
/>
);
})}

97
web/components/gantt-chart/chart/main-content.tsx
View File

@ -2,8 +2,8 @@ import { useEffect, useRef } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
import { observer } from "mobx-react";
// hooks
// components
import { MultipleSelectGroup } from "@/components/core";
import {
BiWeekChartView,
DayChartView,
@ -18,8 +18,12 @@ import {
WeekChartView,
YearChartView,
} from "@/components/gantt-chart";
import { IssueBulkOperationsRoot } from "@/components/issues";
// helpers
import { cn } from "@/helpers/common.helper";
// constants
import { GANTT_SELECT_GROUP } from "../constants";
// hooks
import { useGanttChart } from "../hooks/use-gantt-chart";
type Props = {
@ -33,6 +37,7 @@ type Props = {
enableBlockRightResize: boolean;
enableReorder: boolean;
enableAddBlock: boolean;
enableSelection: boolean;
itemsContainerWidth: number;
showAllBlocks: boolean;
sidebarToRender: (props: any) => React.ReactNode;
@ -53,6 +58,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
enableBlockRightResize,
enableReorder,
enableAddBlock,
enableSelection,
itemsContainerWidth,
showAllBlocks,
sidebarToRender,
@ -107,43 +113,58 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
const ActiveChartView = CHART_VIEW_COMPONENTS[currentView];
return (
<div
// DO NOT REMOVE THE ID
id="gantt-container"
className={cn(
"h-full w-full overflow-auto vertical-scrollbar horizontal-scrollbar scrollbar-lg flex border-t-[0.5px] border-custom-border-200",
{
"mb-8": bottomSpacing,
}
)}
ref={ganttContainerRef}
onScroll={onScroll}
<MultipleSelectGroup
containerRef={ganttContainerRef}
entities={{
[GANTT_SELECT_GROUP]: chartBlocks?.map((block) => block.id) ?? [],
}}
>
<GanttChartSidebar
blocks={blocks}
blockUpdateHandler={blockUpdateHandler}
enableReorder={enableReorder}
sidebarToRender={sidebarToRender}
title={title}
quickAdd={quickAdd}
/>
<div className="relative min-h-full h-max flex-shrink-0 flex-grow">
<ActiveChartView />
{currentViewData && (
<GanttChartBlocksList
itemsContainerWidth={itemsContainerWidth}
blocks={chartBlocks}
blockToRender={blockToRender}
blockUpdateHandler={blockUpdateHandler}
enableBlockLeftResize={enableBlockLeftResize}
enableBlockRightResize={enableBlockRightResize}
enableBlockMove={enableBlockMove}
enableAddBlock={enableAddBlock}
ganttContainerRef={ganttContainerRef}
showAllBlocks={showAllBlocks}
/>
)}
</div>
</div>
{(helpers) => (
<>
<div
// DO NOT REMOVE THE ID
id="gantt-container"
className={cn(
"h-full w-full overflow-auto vertical-scrollbar horizontal-scrollbar scrollbar-lg flex border-t-[0.5px] border-custom-border-200",
{
"mb-8": bottomSpacing,
}
)}
ref={ganttContainerRef}
onScroll={onScroll}
>
<GanttChartSidebar
blocks={blocks}
blockUpdateHandler={blockUpdateHandler}
enableReorder={enableReorder}
enableSelection={enableSelection}
sidebarToRender={sidebarToRender}
title={title}
quickAdd={quickAdd}
selectionHelpers={helpers}
/>
<div className="relative min-h-full h-max flex-shrink-0 flex-grow">
<ActiveChartView />
{currentViewData && (
<GanttChartBlocksList
itemsContainerWidth={itemsContainerWidth}
blocks={chartBlocks}
blockToRender={blockToRender}
blockUpdateHandler={blockUpdateHandler}
enableBlockLeftResize={enableBlockLeftResize}
enableBlockRightResize={enableBlockRightResize}
enableBlockMove={enableBlockMove}
enableAddBlock={enableAddBlock}
ganttContainerRef={ganttContainerRef}
showAllBlocks={showAllBlocks}
selectionHelpers={helpers}
/>
)}
</div>
</div>
<IssueBulkOperationsRoot />
</>
)}
</MultipleSelectGroup>
);
});

3
web/components/gantt-chart/chart/root.tsx
View File

@ -32,6 +32,7 @@ type ChartViewRootProps = {
enableBlockMove: boolean;
enableReorder: boolean;
enableAddBlock: boolean;
enableSelection: boolean;
bottomSpacing: boolean;
showAllBlocks: boolean;
quickAdd?: React.JSX.Element | undefined;
@ -51,6 +52,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
enableBlockMove,
enableReorder,
enableAddBlock,
enableSelection,
bottomSpacing,
showAllBlocks,
quickAdd,
@ -184,6 +186,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
enableBlockRightResize={enableBlockRightResize}
enableReorder={enableReorder}
enableAddBlock={enableAddBlock}
enableSelection={enableSelection}
itemsContainerWidth={itemsContainerWidth}
showAllBlocks={showAllBlocks}
sidebarToRender={sidebarToRender}

2
web/components/gantt-chart/constants.ts
View File

@ -3,3 +3,5 @@ export const BLOCK_HEIGHT = 44;
export const HEADER_HEIGHT = 60;
export const SIDEBAR_WIDTH = 360;
export const GANTT_SELECT_GROUP = "gantt-issues";

3
web/components/gantt-chart/root.tsx
View File

@ -18,6 +18,7 @@ type GanttChartRootProps = {
enableBlockMove?: boolean;
enableReorder?: boolean;
enableAddBlock?: boolean;
enableSelection?: boolean;
bottomSpacing?: boolean;
showAllBlocks?: boolean;
};
@ -36,6 +37,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
enableBlockMove = false,
enableReorder = false,
enableAddBlock = false,
enableSelection = false,
bottomSpacing = false,
showAllBlocks = false,
quickAdd,
@ -56,6 +58,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
enableBlockMove={enableBlockMove}
enableReorder={enableReorder}
enableAddBlock={enableAddBlock}
enableSelection={enableSelection}
bottomSpacing={bottomSpacing}
showAllBlocks={showAllBlocks}
quickAdd={quickAdd}

2
web/components/gantt-chart/sidebar/cycles/block.tsx
View File

@ -38,7 +38,7 @@ export const CyclesSidebarBlock: React.FC<Props> = observer((props) => {
<div
id={`sidebar-block-${block.id}`}
className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
"bg-custom-background-80": isBlockActive(block.id),
"bg-custom-background-90": isBlockActive(block.id),
})}
style={{
height: `${BLOCK_HEIGHT}px`,

64
web/components/gantt-chart/sidebar/issues/block.tsx
View File

@ -1,63 +1,87 @@
import React, { MutableRefObject } from "react";
import { observer } from "mobx-react";
import { MoreVertical } from "lucide-react";
// hooks
import { useGanttChart } from "@/components/gantt-chart/hooks";
// components
import { MultipleSelectEntityAction } from "@/components/core";
import { useGanttChart } from "@/components/gantt-chart/hooks";
import { IssueGanttSidebarBlock } from "@/components/issues";
// helpers
import { cn } from "@/helpers/common.helper";
import { findTotalDaysInRange } from "@/helpers/date-time.helper";
// hooks
import { useIssueDetail } from "@/hooks/store";
// types
import { TSelectionHelper } from "@/hooks/use-multiple-select";
// constants
import { BLOCK_HEIGHT } from "../../constants";
import { BLOCK_HEIGHT, GANTT_SELECT_GROUP } from "../../constants";
// types
import { IGanttBlock } from "../../types";
type Props = {
block: IGanttBlock;
enableReorder: boolean;
enableSelection: boolean;
isDragging: boolean;
dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
selectionHelpers?: TSelectionHelper;
};
export const IssuesSidebarBlock = observer((props: Props) => {
const { block, enableReorder, isDragging, dragHandleRef } = props;
const { block, enableReorder, enableSelection, isDragging, dragHandleRef, selectionHelpers } = props;
// store hooks
const { updateActiveBlockId, isBlockActive } = useGanttChart();
const { getIsIssuePeeked } = useIssueDetail();
const duration = findTotalDaysInRange(block.start_date, block.target_date);
const isIssueSelected = selectionHelpers?.getIsEntitySelected(block.id);
const isIssueFocused = selectionHelpers?.getIsEntityActive(block.id);
const isBlockHoveredOn = isBlockActive(block.id);
return (
<div
className={cn({
className={cn("group/list-block", {
"rounded bg-custom-background-80": isDragging,
"rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(
block.data.id
),
"rounded-l border border-r-0 border-custom-primary-70": getIsIssuePeeked(block.data.id),
"border border-r-0 border-custom-border-400": isIssueFocused,
})}
onMouseEnter={() => updateActiveBlockId(block.id)}
onMouseLeave={() => updateActiveBlockId(null)}
>
<div
className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
"bg-custom-background-80": isBlockActive(block.id),
"bg-custom-background-90": isBlockHoveredOn,
"bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isIssueSelected,
"bg-custom-primary-100/10": isIssueSelected && isBlockHoveredOn,
})}
style={{
height: `${BLOCK_HEIGHT}px`,
}}
>
{enableReorder && (
<button
type="button"
className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
ref={dragHandleRef}
>
<MoreVertical className="h-3.5 w-3.5" />
<MoreVertical className="-ml-5 h-3.5 w-3.5" />
</button>
)}
<div className="flex items-center gap-2">
{enableReorder && (
<button
type="button"
className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
ref={dragHandleRef}
>
<MoreVertical className="h-3.5 w-3.5" />
<MoreVertical className="-ml-5 h-3.5 w-3.5" />
</button>
)}
{enableSelection && selectionHelpers && (
<MultipleSelectEntityAction
className={cn(
"opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
{
"opacity-100 pointer-events-auto": isIssueSelected,
}
)}
groupId={GANTT_SELECT_GROUP}
id={block.id}
selectionHelpers={selectionHelpers}
/>
)}
</div>
<div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
<div className="flex-grow truncate">
<IssueGanttSidebarBlock issueId={block.data.id} />

12
web/components/gantt-chart/sidebar/issues/sidebar.tsx
View File

@ -1,22 +1,26 @@
import { MutableRefObject } from "react";
// components
// ui
import { Loader } from "@plane/ui";
// types
// components
import { IGanttBlock, IBlockUpdateData } from "@/components/gantt-chart/types";
// hooks
import { TSelectionHelper } from "@/hooks/use-multiple-select";
import { GanttDnDHOC } from "../gantt-dnd-HOC";
import { handleOrderChange } from "../utils";
// types
import { IssuesSidebarBlock } from "./block";
type Props = {
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
blocks: IGanttBlock[] | null;
enableReorder: boolean;
enableSelection: boolean;
showAllBlocks?: boolean;
selectionHelpers?: TSelectionHelper;
};
export const IssueGanttSidebar: React.FC<Props> = (props) => {
const { blockUpdateHandler, blocks, enableReorder, showAllBlocks = false } = props;
const { blockUpdateHandler, blocks, enableReorder, enableSelection, showAllBlocks = false, selectionHelpers } = props;
const handleOnDrop = (
draggingBlockId: string | undefined,
@ -47,8 +51,10 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
<IssuesSidebarBlock
block={block}
enableReorder={enableReorder}
enableSelection={enableSelection}
isDragging={isDragging}
dragHandleRef={dragHandleRef}
selectionHelpers={selectionHelpers}
/>
)}
</GanttDnDHOC>

2
web/components/gantt-chart/sidebar/modules/block.tsx
View File

@ -38,7 +38,7 @@ export const ModulesSidebarBlock: React.FC<Props> = observer((props) => {
<div
id={`sidebar-block-${block.id}`}
className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
"bg-custom-background-80": isBlockActive(block.id),
"bg-custom-background-90": isBlockActive(block.id),
})}
style={{
height: `${BLOCK_HEIGHT}px`,

53
web/components/gantt-chart/sidebar/root.tsx
View File

@ -1,19 +1,38 @@
import { observer } from "mobx-react";
// components
import { MultipleSelectGroupAction } from "@/components/core";
import { IBlockUpdateData, IGanttBlock } from "@/components/gantt-chart";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { TSelectionHelper } from "@/hooks/use-multiple-select";
// constants
import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../constants";
import { GANTT_SELECT_GROUP, HEADER_HEIGHT, SIDEBAR_WIDTH } from "../constants";
type Props = {
blocks: IGanttBlock[] | null;
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
enableReorder: boolean;
enableSelection: boolean;
sidebarToRender: (props: any) => React.ReactNode;
title: string;
quickAdd?: React.JSX.Element | undefined;
selectionHelpers: TSelectionHelper;
};
export const GanttChartSidebar: React.FC<Props> = (props) => {
const { blocks, blockUpdateHandler, enableReorder, sidebarToRender, title, quickAdd } = props;
export const GanttChartSidebar: React.FC<Props> = observer((props) => {
const {
blocks,
blockUpdateHandler,
enableReorder,
enableSelection,
sidebarToRender,
title,
quickAdd,
selectionHelpers,
} = props;
const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(GANTT_SELECT_GROUP) === "empty";
return (
<div
@ -25,19 +44,39 @@ export const GanttChartSidebar: React.FC<Props> = (props) => {
}}
>
<div
className="box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-custom-border-200 pb-2 pl-8 pr-4 text-sm font-medium text-custom-text-300 sticky top-0 z-10 bg-custom-background-100"
className="group/list-header box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-custom-border-200 pb-2 pl-2 pr-4 text-sm font-medium text-custom-text-300 sticky top-0 z-10 bg-custom-background-100"
style={{
height: `${HEADER_HEIGHT}px`,
}}
>
<h6>{title}</h6>
<div
className={cn("flex items-center gap-2", {
"pl-2": !enableSelection,
})}
>
{enableSelection && (
<div className="flex-shrink-0 flex items-center w-3.5">
<MultipleSelectGroupAction
className={cn(
"size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
{
"opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
}
)}
groupID={GANTT_SELECT_GROUP}
selectionHelpers={selectionHelpers}
/>
</div>
)}
<h6>{title}</h6>
</div>
<h6>Duration</h6>
</div>
<div className="min-h-full h-max bg-custom-background-100 overflow-hidden">
{sidebarToRender && sidebarToRender({ title, blockUpdateHandler, blocks, enableReorder })}
{sidebarToRender?.({ title, blockUpdateHandler, blocks, enableReorder, enableSelection, selectionHelpers })}
</div>
{quickAdd ? quickAdd : null}
</div>
);
};
});

2
web/components/issues/bulk-operations/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./root";
export * from "./upgrade-banner";

19
web/components/issues/bulk-operations/root.tsx Normal file
View File

@ -0,0 +1,19 @@
import { observer } from "mobx-react";
// components
import { BulkOperationsUpgradeBanner } from "@/components/issues";
// hooks
import { useMultipleSelectStore } from "@/hooks/store";
type Props = {
className?: string;
};
export const IssueBulkOperationsRoot: React.FC<Props> = observer((props) => {
const { className } = props;
// store hooks
const { isSelectionActive } = useMultipleSelectStore();
if (!isSelectionActive) return null;
return <BulkOperationsUpgradeBanner className={className} />;
});

32
web/components/issues/bulk-operations/upgrade-banner.tsx Normal file
View File

@ -0,0 +1,32 @@
// ui
import { getButtonStyling } from "@plane/ui";
// constants
import { MARKETING_PLANE_ONE_PAGE_LINK } from "@/constants/common";
// helpers
import { cn } from "@/helpers/common.helper";
type Props = {
className?: string;
};
export const BulkOperationsUpgradeBanner: React.FC<Props> = (props) => {
const { className } = props;
return (
<div className={cn("sticky bottom-0 left-0 h-20 z-[2] px-3.5 grid place-items-center", className)}>
<div className="h-14 w-full bg-custom-primary-100/10 border-[0.5px] border-custom-primary-100/50 py-4 px-3.5 flex items-center justify-between gap-2 rounded-md">
<p className="text-custom-primary-100 font-medium">
Change state, priority, and more for several issues at once. Save three minutes on an average per operation.
</p>
<a
href={MARKETING_PLANE_ONE_PAGE_LINK}
target="_blank"
rel="noopener noreferrer"
className={cn(getButtonStyling("primary", "sm"), "flex-shrink-0")}
>
Upgrade to One
</a>
</div>
</div>
);
};

1
web/components/issues/index.ts
View File

@ -1,4 +1,5 @@
export * from "./attachment";
export * from "./bulk-operations";
export * from "./issue-modal";
export * from "./delete-issue-modal";
export * from "./issue-layouts";

1
web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
View File

@ -72,6 +72,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
enableBlockMove={isAllowed}
enableReorder={appliedDisplayFilters?.order_by === "sort_order" && isAllowed}
enableAddBlock={isAllowed}
enableSelection={isAllowed}
quickAdd={
enableIssueCreation && isAllowed ? (
<GanttQuickAddIssueForm quickAddCallback={issues.quickAddIssue} viewId={viewId} />

21
web/components/issues/issue-layouts/list/base-list-root.tsx
View File

@ -1,16 +1,16 @@
import { FC, useCallback } from "react";
import { observer } from "mobx-react-lite";
// types
// constants
import { EIssuesStoreType } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
// hooks
import { useIssues, useUser } from "@/hooks/store";
import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
import { useIssuesActions } from "@/hooks/use-issues-actions";
// components
import { List } from "./default";
// types
import { IQuickActionProps, TRenderQuickActions } from "./list-view-types";
// constants
// hooks
type ListStoreType =
| EIssuesStoreType.PROJECT
@ -37,22 +37,19 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
canEditPropertiesBasedOnProject,
isCompletedCycle = false,
} = props;
// router
//stores
// store hooks
const { issuesFilter, issues } = useIssues(storeType);
const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue } = useIssuesActions(storeType);
// mobx store
const {
membership: { currentProjectRole },
} = useUser();
const { issueMap } = useIssues();
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
// derived values
const issueIds = issues?.groupedIssueIds || [];
// auth
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issues?.viewFlags || {};
const canEditProperties = useCallback(
(projectId: string | undefined) => {
const isEditingAllowedBasedOnProject =
@ -90,7 +87,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
);
return (
<div className={`relative h-full w-full bg-custom-background-90`}>
<div className="relative size-full bg-custom-background-90">
<List
issuesMap={issueMap}
displayProperties={displayProperties}

9
web/components/issues/issue-layouts/list/block-root.tsx
View File

@ -10,6 +10,7 @@ import RenderIfVisible from "@/components/core/render-if-visible-HOC";
import { IssueBlock } from "@/components/issues/issue-layouts/list";
// hooks
import { useIssueDetail } from "@/hooks/store";
import { TSelectionHelper } from "@/hooks/use-multiple-select";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
// types
import { HIGHLIGHT_CLASS, getIssueBlockId } from "../utils";
@ -26,6 +27,7 @@ type Props = {
nestingLevel: number;
spacingLeft?: number;
containerRef: MutableRefObject<HTMLDivElement | null>;
selectionHelpers: TSelectionHelper;
groupId: string;
isDragAllowed: boolean;
canDropOverIssue: boolean;
@ -50,6 +52,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
canDropOverIssue,
isParentIssueBeingDragged = false,
isLastChild = false,
selectionHelpers,
} = props;
// states
const [isExpanded, setExpanded] = useState<boolean>(false);
@ -132,6 +135,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
setExpanded={setExpanded}
nestingLevel={nestingLevel}
spacingLeft={spacingLeft}
selectionHelpers={selectionHelpers}
canDrag={!isSubIssue && isDragAllowed}
isCurrentBlockDragging={isParentIssueBeingDragged || isCurrentBlockDragging}
setIsCurrentBlockDragging={setIsCurrentBlockDragging}
@ -139,9 +143,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
</RenderIfVisible>
{isExpanded &&
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssueId: string) => (
subIssues?.map((subIssueId: string) => (
<IssueBlockRoot
key={`${subIssueId}`}
issueIds={issueIds}
@ -154,6 +156,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
nestingLevel={nestingLevel + 1}
spacingLeft={spacingLeft + (displayProperties?.key ? 12 : 0)}
containerRef={containerRef}
selectionHelpers={selectionHelpers}
groupId={groupId}
isDragAllowed={isDragAllowed}
canDropOverIssue={canDropOverIssue}

86
web/components/issues/issue-layouts/list/block.tsx
View File

@ -8,11 +8,13 @@ import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
// ui
import { Spinner, Tooltip, ControlLink, DragHandle } from "@plane/ui";
// components
import { MultipleSelectEntityAction } from "@/components/core";
import { IssueProperties } from "@/components/issues/issue-layouts/properties";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppRouter, useIssueDetail, useProject } from "@/hooks/store";
import { TSelectionHelper } from "@/hooks/use-multiple-select";
import { usePlatformOS } from "@/hooks/use-platform-os";
// types
import { TRenderQuickActions } from "./list-view-types";
@ -29,6 +31,7 @@ interface IssueBlockProps {
spacingLeft?: number;
isExpanded: boolean;
setExpanded: Dispatch<SetStateAction<boolean>>;
selectionHelpers: TSelectionHelper;
isCurrentBlockDragging: boolean;
setIsCurrentBlockDragging: React.Dispatch<React.SetStateAction<boolean>>;
canDrag: boolean;
@ -47,6 +50,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
spacingLeft = 14,
isExpanded,
setExpanded,
selectionHelpers,
isCurrentBlockDragging,
setIsCurrentBlockDragging,
canDrag,
@ -55,7 +59,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
const issueRef = useRef<HTMLDivElement | null>(null);
const dragHandleRef = useRef(null);
// hooks
const { workspaceSlug } = useAppRouter();
const { workspaceSlug, projectId } = useAppRouter();
const { getProjectIdentifierById } = useProject();
const { getIsIssuePeeked, peekIssue, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail();
@ -98,8 +102,11 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
const canEditIssueProperties = canEditProperties(issue.project_id);
const projectIdentifier = getProjectIdentifierById(issue.project_id);
const isIssueSelected = selectionHelpers.getIsEntitySelected(issue.id);
const isIssueActive = selectionHelpers.getIsEntityActive(issue.id);
const isSubIssue = nestingLevel !== 0;
const paddingLeft = `${spacingLeft}px`;
const marginLeft = `${spacingLeft}px`;
const handleToggleExpand = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
@ -119,39 +126,76 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
<div
ref={issueRef}
className={cn(
"group min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 pl-1.5 pr-1 text-sm",
"group/list-block min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 hover:bg-custom-background-90 p-3 pl-1.5 text-sm transition-colors border border-transparent",
{
"border border-custom-primary-70 hover:border-custom-primary-70":
getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
"last:border-b-transparent": !getIsIssuePeeked(issue.id),
"border-custom-primary-70": getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
"border-custom-border-400": isIssueActive,
"last:border-b-transparent": !getIsIssuePeeked(issue.id) && !isIssueActive,
"bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isIssueSelected,
"bg-custom-background-80": isCurrentBlockDragging,
}
)}
>
<div className="flex w-full truncate" style={nestingLevel !== 0 ? { paddingLeft } : {}}>
<div className="flex w-full truncate">
<div className="flex flex-grow items-center gap-3 truncate">
<div className="flex items-center gap-0.5">
<div className="flex items-center">
{/* drag handle */}
<div className="size-4 flex items-center group/drag-handle">
<DragHandle
ref={dragHandleRef}
disabled={!canDrag}
className={cn("opacity-0 group-hover:opacity-100", {
className={cn("opacity-0 group-hover/drag-handle:opacity-100", {
"opacity-100": isCurrentBlockDragging,
})}
/>
<div className="flex h-5 w-5 items-center justify-center">
{subIssuesCount > 0 && (
<button
className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
onClick={handleToggleExpand}
>
<ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
</button>
)}
</div>
</div>
{/* select checkbox */}
{projectId && canEditIssueProperties && (
<Tooltip
tooltipContent={
<>
Only issues within the current
<br />
project can be selected.
</>
}
disabled={issue.project_id === projectId}
>
<div className="flex-shrink-0 grid place-items-center w-3.5">
<MultipleSelectEntityAction
className={cn(
"opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
{
"opacity-100 pointer-events-auto": isIssueSelected,
}
)}
groupId={groupId}
id={issue.id}
selectionHelpers={selectionHelpers}
disabled={issue.project_id !== projectId}
/>
</div>
</Tooltip>
)}
{/* sub-issues chevron */}
<div className="size-4 grid place-items-center flex-shrink-0" style={isSubIssue ? { marginLeft } : {}}>
{subIssuesCount > 0 && (
<button
type="button"
className="size-4 grid place-items-center rounded-sm text-custom-text-400 hover:text-custom-text-300"
onClick={handleToggleExpand}
>
<ChevronRight
className={cn("size-4", {
"rotate-90": isExpanded,
})}
strokeWidth={2.5}
/>
</button>
)}
</div>
{displayProperties && displayProperties?.key && (
<div className="pl-1 flex-shrink-0 text-xs font-medium text-custom-text-300">
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
{projectIdentifier}-{issue.sequence_id}
</div>
)}
@ -183,7 +227,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
)}
</div>
{!issue?.tempId && (
<div className="block md:hidden border border-custom-border-300 rounded ">
<div className="block md:hidden border border-custom-border-300 rounded">
{quickActions({
issue,
parentRef: issueRef,

46
web/components/issues/issue-layouts/list/blocks-list.tsx
View File

@ -2,6 +2,7 @@ import { FC, MutableRefObject } from "react";
// components
import { TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
import { IssueBlockRoot } from "@/components/issues/issue-layouts/list";
import { TSelectionHelper } from "@/hooks/use-multiple-select";
// types
import { TRenderQuickActions } from "./list-view-types";
@ -16,6 +17,7 @@ interface Props {
containerRef: MutableRefObject<HTMLDivElement | null>;
isDragAllowed: boolean;
canDropOverIssue: boolean;
selectionHelpers: TSelectionHelper;
}
export const IssueBlocksList: FC<Props> = (props) => {
@ -28,33 +30,33 @@ export const IssueBlocksList: FC<Props> = (props) => {
displayProperties,
canEditProperties,
containerRef,
selectionHelpers,
isDragAllowed,
canDropOverIssue,
} = props;
return (
<div className="relative h-full w-full">
{issueIds &&
issueIds.length > 0 &&
issueIds.map((issueId: string, index) => (
<IssueBlockRoot
key={`${issueId}`}
issueIds={issueIds}
issueId={issueId}
issuesMap={issuesMap}
updateIssue={updateIssue}
quickActions={quickActions}
canEditProperties={canEditProperties}
displayProperties={displayProperties}
nestingLevel={0}
spacingLeft={0}
containerRef={containerRef}
groupId={groupId}
isLastChild={index === issueIds.length - 1}
isDragAllowed={isDragAllowed}
canDropOverIssue={canDropOverIssue}
/>
))}
<div className="relative size-full">
{issueIds?.map((issueId, index) => (
<IssueBlockRoot
key={`${issueId}`}
issueIds={issueIds}
issueId={issueId}
issuesMap={issuesMap}
updateIssue={updateIssue}
quickActions={quickActions}
canEditProperties={canEditProperties}
displayProperties={displayProperties}
nestingLevel={0}
spacingLeft={0}
containerRef={containerRef}
selectionHelpers={selectionHelpers}
groupId={groupId}
isLastChild={index === issueIds.length - 1}
isDragAllowed={isDragAllowed}
canDropOverIssue={canDropOverIssue}
/>
))}
</div>
);
};

102
web/components/issues/issue-layouts/list/default.tsx
View File

@ -1,7 +1,8 @@
import { useEffect, useRef } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
// components
import { observer } from "mobx-react";
// types
import {
GroupByColumnTypes,
TGroupedIssues,
@ -13,6 +14,9 @@ import {
TIssueOrderByOptions,
TIssueGroupByOptions,
} from "@plane/types";
// components
import { MultipleSelectGroup } from "@/components/core";
import { IssueBulkOperationsRoot } from "@/components/issues";
// hooks
import { EIssuesStoreType } from "@/constants/issue";
import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
@ -46,7 +50,7 @@ export interface IGroupByList {
isCompletedCycle?: boolean;
}
const GroupByList: React.FC<IGroupByList> = (props) => {
const GroupByList: React.FC<IGroupByList> = observer((props) => {
const {
issueIds,
issuesMap,
@ -113,43 +117,69 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
const is_list = group_by === null ? true : false;
// create groupIds array and entities object for bulk ops
const groupIds = groups.map((g) => g.id);
const orderedGroups: Record<string, string[]> = {};
groupIds.forEach((gID) => {
orderedGroups[gID] = [];
});
let entities: Record<string, string[]> = {};
if (is_list) {
entities = Object.assign(orderedGroups, { [groupIds[0]]: issueIds });
} else {
entities = Object.assign(orderedGroups, { ...issueIds });
}
return (
<div
ref={containerRef}
className="vertical-scrollbar scrollbar-lg relative h-full w-full overflow-auto vertical-scrollbar-margin-top-md"
>
{groups &&
groups.length > 0 &&
groups.map(
(group: IGroupByColumn) =>
validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[group.id]) && (
<ListGroup
key={group.id}
group={group}
getGroupIndex={getGroupIndex}
issueIds={issueIds}
issuesMap={issuesMap}
group_by={group_by}
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={quickActions}
displayProperties={displayProperties}
enableIssueQuickAdd={enableIssueQuickAdd}
canEditProperties={canEditProperties}
storeType={storeType}
containerRef={containerRef}
quickAddCallback={quickAddCallback}
disableIssueCreation={disableIssueCreation}
addIssuesToView={addIssuesToView}
handleOnDrop={handleOnDrop}
viewId={viewId}
isCompletedCycle={isCompletedCycle}
/>
)
)}
<div className="relative size-full flex flex-col">
{groups && (
<MultipleSelectGroup containerRef={containerRef} entities={entities}>
{(helpers) => (
<>
<div
ref={containerRef}
className="size-full overflow-auto vertical-scrollbar scrollbar-lg vertical-scrollbar-margin-top-md"
>
{groups.map(
(group: IGroupByColumn) =>
validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[group.id]) && (
<ListGroup
key={group.id}
group={group}
getGroupIndex={getGroupIndex}
issueIds={issueIds}
issuesMap={issuesMap}
group_by={group_by}
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={quickActions}
displayProperties={displayProperties}
enableIssueQuickAdd={enableIssueQuickAdd}
canEditProperties={canEditProperties}
storeType={storeType}
containerRef={containerRef}
quickAddCallback={quickAddCallback}
disableIssueCreation={disableIssueCreation}
addIssuesToView={addIssuesToView}
handleOnDrop={handleOnDrop}
viewId={viewId}
isCompletedCycle={isCompletedCycle}
selectionHelpers={helpers}
/>
)
)}
</div>
<IssueBulkOperationsRoot />
</>
)}
</MultipleSelectGroup>
)}
</div>
);
};
});
GroupByList.displayName = "GroupByList";
export interface IList {
issueIds: TGroupedIssues | TUnGroupedIssues | any;

249
web/components/issues/issue-layouts/list/headers/group-by-card.tsx
View File

@ -1,138 +1,169 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
// lucide icons
import { CircleDashed, Plus } from "lucide-react";
import { TIssue, ISearchIssueResponse } from "@plane/types";
// components
import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
import { ExistingIssuesListModal } from "@/components/core";
import { CreateUpdateIssueModal } from "@/components/issues";
// ui
// mobx
// hooks
import { EIssuesStoreType } from "@/constants/issue";
import { useEventTracker } from "@/hooks/store";
// types
import { TIssue, ISearchIssueResponse } from "@plane/types";
// ui
import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { ExistingIssuesListModal, MultipleSelectGroupAction } from "@/components/core";
import { CreateUpdateIssueModal } from "@/components/issues";
// constants
import { EIssuesStoreType } from "@/constants/issue";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useEventTracker } from "@/hooks/store";
import { TSelectionHelper } from "@/hooks/use-multiple-select";
interface IHeaderGroupByCard {
groupID: string;
icon?: React.ReactNode;
title: string;
count: number;
issuePayload: Partial<TIssue>;
canEditProperties: (projectId: string | undefined) => boolean;
disableIssueCreation?: boolean;
storeType: EIssuesStoreType;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
selectionHelpers: TSelectionHelper;
}
export const HeaderGroupByCard = observer(
({ icon, title, count, issuePayload, disableIssueCreation, storeType, addIssuesToView }: IHeaderGroupByCard) => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
// hooks
const { setTrackElement } = useEventTracker();
export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
const {
groupID,
icon,
title,
count,
issuePayload,
canEditProperties,
disableIssueCreation,
storeType,
addIssuesToView,
selectionHelpers,
} = props;
// states
const [isOpen, setIsOpen] = useState(false);
const [openExistingIssueListModal, setOpenExistingIssueListModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
// hooks
const { setTrackElement } = useEventTracker();
// derived values
const isDraftIssue = router.pathname.includes("draft-issue");
const renderExistingIssueModal = moduleId || cycleId;
const existingIssuesListModalPayload = moduleId ? { module: moduleId.toString() } : { cycle: true };
const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(groupID) === "empty";
// auth
const canSelectIssues = canEditProperties(projectId?.toString());
const [isOpen, setIsOpen] = useState(false);
const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !projectId) return;
const [openExistingIssueListModal, setOpenExistingIssueListModal] = useState(false);
const issues = data.map((i) => i.id);
const isDraftIssue = router.pathname.includes("draft-issue");
try {
await addIssuesToView?.(issues);
const renderExistingIssueModal = moduleId || cycleId;
const ExistingIssuesListModalPayload = moduleId ? { module: moduleId.toString() } : { cycle: true };
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "Issues added to the cycle successfully.",
});
} catch (error) {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Selected issues could not be added to the cycle. Please try again.",
});
}
};
const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !projectId) return;
const issues = data.map((i) => i.id);
try {
await addIssuesToView?.(issues);
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "Issues added to the cycle successfully.",
});
} catch (error) {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Selected issues could not be added to the cycle. Please try again.",
});
}
};
return (
<>
<div className="relative flex w-full flex-shrink-0 flex-row items-center gap-1.5 py-1.5">
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
{icon ? icon : <CircleDashed className="h-3.5 w-3.5" strokeWidth={2} />}
</div>
<div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
<div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
<div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
</div>
{!disableIssueCreation &&
(renderExistingIssueModal ? (
<CustomMenu
customButton={
<span className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
<Plus className="h-3.5 w-3.5" strokeWidth={2} />
</span>
return (
<>
<div className="group/list-header relative w-full flex-shrink-0 flex items-center gap-2.5 py-1.5 pl-3.5">
{canSelectIssues && (
<div className="flex-shrink-0 flex items-center w-3.5">
<MultipleSelectGroupAction
className={cn(
"size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
{
"opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
}
>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("List layout");
setIsOpen(true);
}}
>
<span className="flex items-center justify-start gap-2">Create issue</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("List layout");
setOpenExistingIssueListModal(true);
}}
>
<span className="flex items-center justify-start gap-2">Add an existing issue</span>
</CustomMenu.MenuItem>
</CustomMenu>
) : (
<div
className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
)}
groupID={groupID}
selectionHelpers={selectionHelpers}
/>
</div>
)}
<div className="flex-shrink-0 grid place-items-center overflow-hidden pl-3">
{icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
</div>
<div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
<div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
<div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
</div>
{!disableIssueCreation &&
(renderExistingIssueModal ? (
<CustomMenu
customButton={
<span className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
<Plus className="h-3.5 w-3.5" strokeWidth={2} />
</span>
}
>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("List layout");
setIsOpen(true);
}}
>
<Plus width={14} strokeWidth={2} />
</div>
))}
<span className="flex items-center justify-start gap-2">Create issue</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("List layout");
setOpenExistingIssueListModal(true);
}}
>
<span className="flex items-center justify-start gap-2">Add an existing issue</span>
</CustomMenu.MenuItem>
</CustomMenu>
) : (
<div
className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
onClick={() => {
setTrackElement("List layout");
setIsOpen(true);
}}
>
<Plus width={14} strokeWidth={2} />
</div>
))}
<CreateUpdateIssueModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
data={issuePayload}
storeType={storeType}
isDraft={isDraftIssue}
<CreateUpdateIssueModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
data={issuePayload}
storeType={storeType}
isDraft={isDraftIssue}
/>
{renderExistingIssueModal && (
<ExistingIssuesListModal
workspaceSlug={workspaceSlug?.toString()}
projectId={projectId?.toString()}
isOpen={openExistingIssueListModal}
handleClose={() => setOpenExistingIssueListModal(false)}
searchParams={existingIssuesListModalPayload}
handleOnSubmit={handleAddIssuesToView}
/>
{renderExistingIssueModal && (
<ExistingIssuesListModal
workspaceSlug={workspaceSlug?.toString()}
projectId={projectId?.toString()}
isOpen={openExistingIssueListModal}
handleClose={() => setOpenExistingIssueListModal(false)}
searchParams={ExistingIssuesListModalPayload}
handleOnSubmit={handleAddIssuesToView}
/>
)}
</div>
</>
);
}
);
)}
</div>
</>
);
});

9
web/components/issues/issue-layouts/list/list-group.tsx
View File

@ -19,6 +19,7 @@ import { TOAST_TYPE, setToast } from "@plane/ui";
import { DRAG_ALLOWED_GROUPS, EIssuesStoreType } from "@/constants/issue";
// hooks
import { useProjectState } from "@/hooks/store";
import { TSelectionHelper } from "@/hooks/use-multiple-select";
// components
import { GroupDragOverlay } from "../group-drag-overlay";
import {
@ -58,6 +59,7 @@ type Props = {
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
viewId?: string;
isCompletedCycle?: boolean;
selectionHelpers: TSelectionHelper;
};
export const ListGroup = observer((props: Props) => {
@ -81,6 +83,7 @@ export const ListGroup = observer((props: Props) => {
enableIssueQuickAdd,
isCompletedCycle,
storeType,
selectionHelpers,
} = props;
const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false);
@ -190,15 +193,18 @@ export const ListGroup = observer((props: Props) => {
"border-custom-error-200": isDraggingOverColumn && !!group.isDropDisabled,
})}
>
<div className="sticky top-0 z-[3] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 pl-5 py-1">
<div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1">
<HeaderGroupByCard
groupID={group.id}
icon={group.icon}
title={group.name || ""}
count={issueCount}
issuePayload={group.payload}
canEditProperties={canEditProperties}
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
storeType={storeType}
addIssuesToView={addIssuesToView}
selectionHelpers={selectionHelpers}
/>
</div>
@ -224,6 +230,7 @@ export const ListGroup = observer((props: Props) => {
containerRef={containerRef}
isDragAllowed={isDragAllowed}
canDropOverIssue={!canOverlayBeVisible}
selectionHelpers={selectionHelpers}
/>
)}

4
web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import { observer } from "mobx-react-lite";
// types
import { TIssue } from "@plane/types";
// components
import { MemberDropdown } from "@/components/dropdowns";
// types
type Props = {
issue: TIssue;
@ -36,7 +36,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
buttonVariant={
issue?.assignee_ids && issue.assignee_ids.length > 0 ? "transparent-without-text" : "transparent-with-text"
}
buttonClassName="text-left"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
buttonContainerClassName="w-full"
onClose={onClose}
/>

4
web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { observer } from "mobx-react-lite";
import { TIssue } from "@plane/types";
// types
import { TIssue } from "@plane/types";
type Props = {
issue: TIssue;
@ -11,7 +11,7 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = observer((props) =>
const { issue } = props;
return (
<div className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80">
<div className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
{issue?.attachment_count} {issue?.attachment_count === 1 ? "attachment" : "attachments"}
</div>
);

5
web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import { observer } from "mobx-react-lite";
// types
import { TIssue } from "@plane/types";
// helpers
import { renderFormattedDate } from "@/helpers/date-time.helper";
// types
type Props = {
issue: TIssue;
@ -11,8 +11,9 @@ type Props = {
export const SpreadsheetCreatedOnColumn: React.FC<Props> = observer((props: Props) => {
const { issue } = props;
return (
<div className="flex h-11 w-full items-center justify-center border-b-[0.5px] border-custom-border-200 text-xs hover:bg-custom-background-80">
<div className="flex h-11 w-full items-center justify-center border-b-[0.5px] border-custom-border-200 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
{renderFormattedDate(issue.created_at)}
</div>
);

19
web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
View File

@ -1,14 +1,14 @@
import React, { useCallback } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { TIssue } from "@plane/types";
// hooks
import { CycleDropdown } from "@/components/dropdowns";
import { EIssuesStoreType } from "@/constants/issue";
import { useEventTracker, useIssues } from "@/hooks/store";
// components
// types
import { TIssue } from "@plane/types";
// components
import { CycleDropdown } from "@/components/dropdowns";
// constants
import { EIssuesStoreType } from "@/constants/issue";
// hooks
import { useEventTracker, useIssues } from "@/hooks/store";
type Props = {
issue: TIssue;
@ -17,11 +17,10 @@ type Props = {
};
export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
const { issue, disabled, onClose } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// props
const { issue, disabled, onClose } = props;
// hooks
const { captureIssueEvent } = useEventTracker();
const {
@ -56,8 +55,8 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
disabled={disabled}
placeholder="Select cycle"
buttonVariant="transparent-with-text"
buttonContainerClassName="w-full relative flex items-center p-2"
buttonClassName="relative leading-4 h-4.5 bg-transparent"
buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent"
onClose={onClose}
/>
</div>

13
web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
View File

@ -1,16 +1,16 @@
import React from "react";
import { observer } from "mobx-react";
import { CalendarCheck2 } from "lucide-react";
// types
import { TIssue } from "@plane/types";
// hooks
// components
import { DateDropdown } from "@/components/dropdowns";
// helpers
import { cn } from "@/helpers/common.helper";
import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
// hooks
import { useProjectState } from "@/hooks/store";
// types
type Props = {
issue: TIssue;
@ -47,9 +47,12 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
buttonVariant="transparent-with-text"
buttonContainerClassName="w-full"
buttonClassName={cn("rounded-none text-left", {
"text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
})}
buttonClassName={cn(
"rounded-none text-left group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
{
"text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
}
)}
clearIconClassName="!text-custom-text-100"
onClose={onClose}
/>

8
web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
View File

@ -1,8 +1,8 @@
// components
import { observer } from "mobx-react-lite";
import { TIssue } from "@plane/types";
import { EstimateDropdown } from "@/components/dropdowns";
// types
import { TIssue } from "@plane/types";
// components
import { EstimateDropdown } from "@/components/dropdowns";
type Props = {
issue: TIssue;
@ -25,7 +25,7 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = observer((props: Props
projectId={issue.project_id}
disabled={disabled}
buttonVariant="transparent-with-text"
buttonClassName="rounded-none text-left"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
buttonContainerClassName="w-full"
onClose={onClose}
/>

8
web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
View File

@ -1,10 +1,10 @@
import React from "react";
import { observer } from "mobx-react-lite";
// types
import { TIssue } from "@plane/types";
// components
// hooks
import { useLabel } from "@/hooks/store";
// types
// components
import { IssuePropertyLabels } from "../../properties";
type Props = {
@ -27,8 +27,8 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
value={issue.label_ids}
defaultOptions={defaultLabelOptions}
onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
className="h-11 w-full border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80"
buttonClassName="px-2.5 h-full"
className="h-11 w-full border-b-[0.5px] border-custom-border-200"
buttonClassName="px-2.5 h-full group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
hideDropdownArrow
maxRender={1}
disabled={disabled}

4
web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { observer } from "mobx-react-lite";
import { TIssue } from "@plane/types";
// types
import { TIssue } from "@plane/types";
type Props = {
issue: TIssue;
@ -11,7 +11,7 @@ export const SpreadsheetLinkColumn: React.FC<Props> = observer((props: Props) =>
const { issue } = props;
return (
<div className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80">
<div className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
{issue?.link_count} {issue?.link_count === 1 ? "link" : "links"}
</div>
);

19
web/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
View File

@ -2,14 +2,14 @@ import React, { useCallback } from "react";
import xor from "lodash/xor";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { TIssue } from "@plane/types";
// hooks
import { ModuleDropdown } from "@/components/dropdowns";
import { EIssuesStoreType } from "@/constants/issue";
import { useEventTracker, useIssues } from "@/hooks/store";
// components
// types
import { TIssue } from "@plane/types";
// components
import { ModuleDropdown } from "@/components/dropdowns";
// constants
import { EIssuesStoreType } from "@/constants/issue";
// hooks
import { useEventTracker, useIssues } from "@/hooks/store";
type Props = {
issue: TIssue;
@ -18,11 +18,10 @@ type Props = {
};
export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
const { issue, disabled, onClose } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// props
const { issue, disabled, onClose } = props;
// hooks
const { captureIssueEvent } = useEventTracker();
const {
@ -65,8 +64,8 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
disabled={disabled}
placeholder="Select modules"
buttonVariant="transparent-with-text"
buttonContainerClassName="w-full relative flex items-center p-2"
buttonClassName="relative leading-4 h-4.5 bg-transparent"
buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent"
onClose={onClose}
multiple
showCount

4
web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import { observer } from "mobx-react-lite";
// types
import { TIssue } from "@plane/types";
// components
import { PriorityDropdown } from "@/components/dropdowns";
// types
type Props = {
issue: TIssue;
@ -22,7 +22,7 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = observer((props: Props
onChange={(data) => onChange(issue, { priority: data }, { changed_property: "priority", change_details: data })}
disabled={disabled}
buttonVariant="transparent-with-text"
buttonClassName="rounded-none text-left"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
buttonContainerClassName="w-full"
onClose={onClose}
/>

4
web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
View File

@ -1,12 +1,12 @@
import React from "react";
import { observer } from "mobx-react";
import { CalendarClock } from "lucide-react";
// types
import { TIssue } from "@plane/types";
// components
import { DateDropdown } from "@/components/dropdowns";
// helpers
import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
// types
type Props = {
issue: TIssue;
@ -38,7 +38,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
placeholder="Start date"
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
buttonVariant="transparent-with-text"
buttonClassName="rounded-none text-left"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
buttonContainerClassName="w-full"
onClose={onClose}
/>

4
web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import { observer } from "mobx-react-lite";
// types
import { TIssue } from "@plane/types";
// components
import { StateDropdown } from "@/components/dropdowns";
// types
type Props = {
issue: TIssue;
@ -23,7 +23,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = observer((props) => {
onChange={(data) => onChange(issue, { state_id: data }, { changed_property: "state", change_details: data })}
disabled={disabled}
buttonVariant="transparent-with-text"
buttonClassName="rounded-none text-left"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
buttonContainerClassName="w-full"
onClose={onClose}
/>

2
web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
View File

@ -34,7 +34,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props
<div
onClick={subIssueCount ? redirectToIssueDetail : () => {}}
className={cn(
"flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80",
"flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
{
"cursor-pointer": subIssueCount,
}

5
web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import { observer } from "mobx-react-lite";
// types
import { TIssue } from "@plane/types";
// helpers
import { renderFormattedDate } from "@/helpers/date-time.helper";
// types
type Props = {
issue: TIssue;
@ -11,8 +11,9 @@ type Props = {
export const SpreadsheetUpdatedOnColumn: React.FC<Props> = observer((props: Props) => {
const { issue } = props;
return (
<div className="flex h-11 w-full items-center justify-center border-b-[0.5px] border-custom-border-200 text-xs hover:bg-custom-background-80">
<div className="flex h-11 w-full items-center justify-center border-b-[0.5px] border-custom-border-200 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
{renderFormattedDate(issue.updated_at)}
</div>
);

15
web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
View File

@ -1,13 +1,14 @@
import { useRef } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { IIssueDisplayProperties, TIssue } from "@plane/types";
// types
import { SPREADSHEET_PROPERTY_DETAILS } from "@/constants/spreadsheet";
import { useEventTracker } from "@/hooks/store";
import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
import { IIssueDisplayProperties, TIssue } from "@plane/types";
// constants
import { SPREADSHEET_PROPERTY_DETAILS } from "@/constants/spreadsheet";
// hooks
import { useEventTracker } from "@/hooks/store";
// components
import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
type Props = {
displayProperties: IIssueDisplayProperties;
@ -37,7 +38,7 @@ export const IssueColumn = observer((props: Props) => {
>
<td
tabIndex={0}
className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100"
className="h-11 w-full min-w-[8rem] text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100"
ref={tableCellRef}
>
<Column
@ -58,9 +59,7 @@ export const IssueColumn = observer((props: Props) => {
})
}
disabled={disableUserActions}
onClose={() => {
tableCellRef?.current?.focus();
}}
onClose={() => tableCellRef?.current?.focus()}
/>
</td>
</WithDisplayPropertiesHOC>

108
web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
View File

@ -1,20 +1,23 @@
import { Dispatch, MouseEvent, MutableRefObject, SetStateAction, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
// icons
import { ChevronRight, MoreHorizontal } from "lucide-react";
// types
import { IIssueDisplayProperties, TIssue } from "@plane/types";
// ui
import { ControlLink, Tooltip } from "@plane/ui";
// components
import { MultipleSelectEntityAction } from "@/components/core";
import RenderIfVisible from "@/components/core/render-if-visible-HOC";
// constants
import { SPREADSHEET_SELECT_GROUP } from "@/constants/spreadsheet";
// helper
import { cn } from "@/helpers/common.helper";
// hooks
import { useIssueDetail, useProject } from "@/hooks/store";
import { TSelectionHelper } from "@/hooks/use-multiple-select";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import { usePlatformOS } from "@/hooks/use-platform-os";
// types
// local components
import { TRenderQuickActions } from "../list/list-view-types";
import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
@ -34,6 +37,7 @@ interface Props {
issueIds: string[];
spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
spacingLeft?: number;
selectionHelpers: TSelectionHelper;
}
export const SpreadsheetIssueRow = observer((props: Props) => {
@ -51,12 +55,16 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
issueIds,
spreadsheetColumnsList,
spacingLeft = 6,
selectionHelpers,
} = props;
// states
const [isExpanded, setExpanded] = useState<boolean>(false);
// store hooks
const { subIssues: subIssuesStore } = useIssueDetail();
// derived values
const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
const isIssueSelected = selectionHelpers.getIsEntitySelected(issueId);
const isIssueActive = selectionHelpers.getIsEntityActive(issueId);
return (
<>
@ -65,7 +73,13 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
as="tr"
defaultHeight="calc(2.75rem - 1px)"
root={containerRef}
placeholderChildren={<td colSpan={100} className="border-b-[0.5px] border-custom-border-200" />}
placeholderChildren={
<td colSpan={100} className="border-[0.5px] border-transparent border-b-custom-border-200" />
}
classNames={cn("bg-custom-background-100 transition-[background-color]", {
"group selected-issue-row": isIssueSelected,
"border-[0.5px] border-custom-border-400": isIssueActive,
})}
>
<IssueRowDetails
issueId={issueId}
@ -81,13 +95,12 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
isExpanded={isExpanded}
setExpanded={setExpanded}
spreadsheetColumnsList={spreadsheetColumnsList}
selectionHelpers={selectionHelpers}
/>
</RenderIfVisible>
{isExpanded &&
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssueId: string) => (
subIssues?.map((subIssueId: string) => (
<SpreadsheetIssueRow
key={subIssueId}
issueId={subIssueId}
@ -103,6 +116,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
containerRef={containerRef}
issueIds={issueIds}
spreadsheetColumnsList={spreadsheetColumnsList}
selectionHelpers={selectionHelpers}
/>
))}
</>
@ -123,6 +137,7 @@ interface IssueRowDetailsProps {
setExpanded: Dispatch<SetStateAction<boolean>>;
spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
spacingLeft?: number;
selectionHelpers: TSelectionHelper;
}
const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
@ -140,6 +155,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
setExpanded,
spreadsheetColumnsList,
spacingLeft = 6,
selectionHelpers,
} = props;
// states
const [isMenuActive, setIsMenuActive] = useState(false);
@ -148,7 +164,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
const menuActionRef = useRef<HTMLDivElement | null>(null);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug, projectId } = router.query;
// hooks
const { getProjectIdentifierById } = useProject();
const { getIsIssuePeeked, peekIssue, setPeekIssue } = useIssueDetail();
@ -171,7 +187,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
const issueDetail = issue.getIssueById(issueId);
const paddingLeft = `${spacingLeft}px`;
const marginLeft = `${spacingLeft}px`;
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
@ -204,16 +220,22 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
const disableUserActions = !canEditProperties(issueDetail.project_id);
const subIssuesCount = issueDetail?.sub_issues_count ?? 0;
const isIssueSelected = selectionHelpers.getIsEntitySelected(issueDetail.id);
return (
<>
<td id={`issue-${issueId}`} ref={cellRef} tabIndex={0} className="sticky left-0 z-10">
<td
id={`issue-${issueId}`}
ref={cellRef}
tabIndex={0}
className="sticky left-0 z-10 group/list-block bg-custom-background-100"
>
<ControlLink
href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
target="_blank"
onClick={() => handleIssuePeekOverview(issueDetail)}
className={cn(
"group clickable cursor-pointer h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200",
"group clickable cursor-pointer h-11 w-[28rem] flex items-center text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200 bg-transparent group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
{
"border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
"border border-custom-primary-70 hover:border-custom-primary-70":
@ -223,23 +245,51 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
)}
disabled={!!issueDetail?.tempId}
>
<div
className="flex min-w-min items-center gap-0.5 px-4 py-2.5 pl-1.5 pr-0"
style={nestingLevel !== 0 ? { paddingLeft } : {}}
>
<div className="flex items-center">
{/* bulk ops */}
<span className="size-3.5" />
<div className="flex size-4 items-center justify-center">
{subIssuesCount > 0 && (
<button
className="flex items-center justify-center size-4 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
onClick={handleToggleExpand}
>
<ChevronRight className={`size-4 ${isExpanded ? "rotate-90" : ""}`} />
</button>
)}
</div>
<div className="flex items-center gap-1 min-w-min py-2.5 pl-2">
{/* select checkbox */}
{projectId && !disableUserActions && (
<Tooltip
tooltipContent={
<>
Only issues within the current
<br />
project can be selected.
</>
}
disabled={issueDetail.project_id === projectId}
>
<div className="flex-shrink-0 grid place-items-center w-3.5">
<MultipleSelectEntityAction
className={cn(
"opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
{
"opacity-100 pointer-events-auto": isIssueSelected,
}
)}
groupId={SPREADSHEET_SELECT_GROUP}
id={issueDetail.id}
selectionHelpers={selectionHelpers}
disabled={issueDetail.project_id !== projectId}
/>
</div>
</Tooltip>
)}
{/* sub-issues chevron */}
<div className="grid place-items-center size-4" style={nestingLevel !== 0 ? { marginLeft } : {}}>
{subIssuesCount > 0 && (
<button
type="button"
className="grid place-items-center size-4 rounded-sm text-custom-text-400 hover:text-custom-text-300"
onClick={handleToggleExpand}
>
<ChevronRight
className={cn("size-4", {
"rotate-90": isExpanded,
})}
strokeWidth={2.5}
/>
</button>
)}
</div>
<WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">

57
web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
View File

@ -1,33 +1,68 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
// ui
import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
// types
import { LayersIcon } from "@plane/ui";
// components
import { MultipleSelectGroupAction } from "@/components/core";
import { SpreadsheetHeaderColumn } from "@/components/issues/issue-layouts";
// constants
import { SPREADSHEET_SELECT_GROUP } from "@/constants/spreadsheet";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { TSelectionHelper } from "@/hooks/use-multiple-select";
interface Props {
displayProperties: IIssueDisplayProperties;
displayFilters: IIssueDisplayFilterOptions;
handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
canEditProperties: (projectId: string | undefined) => boolean;
isEstimateEnabled: boolean;
spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
selectionHelpers: TSelectionHelper;
}
export const SpreadsheetHeader = (props: Props) => {
const { displayProperties, displayFilters, handleDisplayFilterUpdate, isEstimateEnabled, spreadsheetColumnsList } =
props;
export const SpreadsheetHeader = observer((props: Props) => {
const {
displayProperties,
displayFilters,
handleDisplayFilterUpdate,
canEditProperties,
isEstimateEnabled,
spreadsheetColumnsList,
selectionHelpers,
} = props;
// router
const router = useRouter();
const { projectId } = router.query;
// derived values
const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(SPREADSHEET_SELECT_GROUP) === "empty";
// auth
const canSelectIssues = canEditProperties(projectId?.toString());
return (
<thead className="sticky top-0 left-0 z-[12] border-b-[0.5px] border-custom-border-100">
<tr>
<th
className="sticky left-0 z-[15] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px] before:border-custom-border-100"
className="group/list-header sticky left-0 z-[15] h-11 w-[28rem] flex items-center gap-1 bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px] before:border-custom-border-100 pl-2"
tabIndex={-1}
>
<span className="flex h-full w-full flex-grow items-center pl-5 px-4 py-2.5">
<LayersIcon className="mr-1 h-4 w-4 text-custom-text-400" />
Issue
</span>
{canSelectIssues && (
<div className="flex-shrink-0 flex items-center w-3.5">
<MultipleSelectGroupAction
className={cn(
"size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
{
"opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
}
)}
groupID={SPREADSHEET_SELECT_GROUP}
selectionHelpers={selectionHelpers}
/>
</div>
)}
<div className="size-4" />
<span className="flex h-full w-full flex-grow items-center py-2.5">Issues</span>
</th>
{spreadsheetColumnsList.map((property) => (
@ -43,4 +78,4 @@ export const SpreadsheetHeader = (props: Props) => {
</tr>
</thead>
);
};
});

6
web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
View File

@ -2,6 +2,7 @@ import { MutableRefObject, useCallback, useEffect, useRef } from "react";
import { observer } from "mobx-react-lite";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssue } from "@plane/types";
//types
import { TSelectionHelper } from "@/hooks/use-multiple-select";
import { useTableKeyboardNavigation } from "@/hooks/use-table-keyboard-navigation";
//components
import { TRenderQuickActions } from "../list/list-view-types";
@ -20,6 +21,7 @@ type Props = {
portalElement: React.MutableRefObject<HTMLDivElement | null>;
containerRef: MutableRefObject<HTMLTableElement | null>;
spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
selectionHelpers: TSelectionHelper;
};
export const SpreadsheetTable = observer((props: Props) => {
@ -35,6 +37,7 @@ export const SpreadsheetTable = observer((props: Props) => {
canEditProperties,
containerRef,
spreadsheetColumnsList,
selectionHelpers,
} = props;
// states
@ -81,8 +84,10 @@ export const SpreadsheetTable = observer((props: Props) => {
displayProperties={displayProperties}
displayFilters={displayFilters}
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
canEditProperties={canEditProperties}
isEstimateEnabled={isEstimateEnabled}
spreadsheetColumnsList={spreadsheetColumnsList}
selectionHelpers={selectionHelpers}
/>
<tbody>
{issueIds.map((id) => (
@ -100,6 +105,7 @@ export const SpreadsheetTable = observer((props: Props) => {
isScrolled={isScrolled}
issueIds={issueIds}
spreadsheetColumnsList={spreadsheetColumnsList}
selectionHelpers={selectionHelpers}
/>
))}
</tbody>

68
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -1,15 +1,18 @@
import React, { useRef } from "react";
import { observer } from "mobx-react-lite";
// types
import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
// components
import { LogoSpinner } from "@/components/common";
import { SpreadsheetQuickAddIssueForm } from "@/components/issues";
import { SPREADSHEET_PROPERTY_LIST } from "@/constants/spreadsheet";
import { MultipleSelectGroup } from "@/components/core";
import { IssueBulkOperationsRoot, SpreadsheetQuickAddIssueForm } from "@/components/issues";
// constants
import { SPREADSHEET_PROPERTY_LIST, SPREADSHEET_SELECT_GROUP } from "@/constants/spreadsheet";
// hooks
import { useProject } from "@/hooks/store";
// types
import { TRenderQuickActions } from "../list/list-view-types";
import { SpreadsheetTable } from "./spreadsheet-table";
// types
//hooks
type Props = {
displayProperties: IIssueDisplayProperties;
@ -73,28 +76,41 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
return (
<div className="relative flex h-full w-full flex-col overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-custom-text-200">
<div ref={portalRef} className="spreadsheet-menu-portal" />
<div ref={containerRef} className="vertical-scrollbar horizontal-scrollbar scrollbar-lg h-full w-full">
<SpreadsheetTable
displayProperties={displayProperties}
displayFilters={displayFilters}
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
issueIds={issueIds}
isEstimateEnabled={isEstimateEnabled}
portalElement={portalRef}
quickActions={quickActions}
updateIssue={updateIssue}
canEditProperties={canEditProperties}
containerRef={containerRef}
spreadsheetColumnsList={spreadsheetColumnsList}
/>
</div>
<div className="border-t border-custom-border-100">
<div className="z-5 sticky bottom-0 left-0 mb-3">
{enableQuickCreateIssue && !disableIssueCreation && (
<SpreadsheetQuickAddIssueForm formKey="name" quickAddCallback={quickAddCallback} viewId={viewId} />
)}
</div>
</div>
<MultipleSelectGroup
containerRef={containerRef}
entities={{
[SPREADSHEET_SELECT_GROUP]: issueIds,
}}
>
{(helpers) => (
<>
<div ref={containerRef} className="vertical-scrollbar horizontal-scrollbar scrollbar-lg h-full w-full">
<SpreadsheetTable
displayProperties={displayProperties}
displayFilters={displayFilters}
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
issueIds={issueIds}
isEstimateEnabled={isEstimateEnabled}
portalElement={portalRef}
quickActions={quickActions}
updateIssue={updateIssue}
canEditProperties={canEditProperties}
containerRef={containerRef}
spreadsheetColumnsList={spreadsheetColumnsList}
selectionHelpers={helpers}
/>
</div>
<div className="border-t border-custom-border-100">
<div className="z-5 sticky bottom-0 left-0 mb-3">
{enableQuickCreateIssue && !disableIssueCreation && (
<SpreadsheetQuickAddIssueForm formKey="name" quickAddCallback={quickAddCallback} viewId={viewId} />
)}
</div>
</div>
<IssueBulkOperationsRoot />
</>
)}
</MultipleSelectGroup>
</div>
);
});

13
web/components/workspace/help-section.tsx
View File

@ -1,12 +1,12 @@
import React, { useRef, useState } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
// headless ui
import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
import { Transition } from "@headlessui/react";
// icons
// ui
import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppTheme, useCommandPalette } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
@ -59,9 +59,12 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
return (
<>
<div
className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 py-[6px] ${
isCollapsed ? "flex-col" : ""
}`}
className={cn(
"flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
{
"flex-col h-auto py-1.5": isCollapsed,
}
)}
>
{!isCollapsed && (
<Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>

2
web/constants/common.ts
View File

@ -3,3 +3,5 @@ export const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
export const MARKETING_PRICING_PAGE_LINK = "https://plane.so/pricing";
export const MARKETING_CONTACT_US_PAGE_LINK = "https://plane.so/contact";
export const MARKETING_PLANE_ONE_PAGE_LINK = "https://plane.so/one";

14
web/constants/spreadsheet.ts
View File

@ -1,6 +1,16 @@
import { FC } from "react";
// icons
import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarCheck2, CalendarClock, Users } from "lucide-react";
import {
CalendarDays,
Link2,
Signal,
Tag,
Triangle,
Paperclip,
CalendarCheck2,
CalendarClock,
Users,
} from "lucide-react";
// types
import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types";
// ui
@ -184,3 +194,5 @@ export const SPREADSHEET_PROPERTY_LIST: (keyof IIssueDisplayProperties)[] = [
"attachment_count",
"sub_issue_count",
];
export const SPREADSHEET_SELECT_GROUP = "spreadsheet-issues";