Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: add shift+click to select multiple workspaces #18043

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

feat: add shift+click to select multiple workspaces #18043

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a56f218
feat(workspaces): add shift+click to select multiple workspaces
kuluruvineeth May 26, 2025
1126903
refactor(workspaces): remove tooltip from select-all checkbox
kuluruvineeth May 26, 2025
f63716f
refactor: extract shift-click selection logic into separate functions
kuluruvineeth May 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 94 additions & 20 deletions site/src/pages/WorkspacesPage/WorkspacesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ import {
type PropsWithChildren,
type ReactNode,
useMemo,
useRef,
} from "react";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { useNavigate } from "react-router-dom";
Expand Down Expand Up @@ -109,6 +110,8 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
onActionError,
}) => {
const dashboard = useDashboard();
const lastCheckedWorkspaceIdRef = useRef<string | null>(null);

const workspaceIDToAppByStatus = useMemo(() => {
return (
workspaces?.reduce(
Expand Down Expand Up @@ -149,6 +152,70 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
activity: "w-2/6",
};

const handleWorkspaceCheckChange = (
workspace: Workspace,
isChecked: boolean,
isShiftKey: boolean
) => {
if (!workspaces) return;

if (isShiftKey && lastCheckedWorkspaceIdRef.current && isChecked) {
const newWorkspaces = getWorkspacesForShiftClick(
workspaces,
checkedWorkspaces,
lastCheckedWorkspaceIdRef.current,
workspace.id
);

onCheckChange(newWorkspaces);
} else {
if (isChecked) {
onCheckChange([...checkedWorkspaces, workspace]);
} else {
onCheckChange(checkedWorkspaces.filter(w => w.id !== workspace.id));
}
}

lastCheckedWorkspaceIdRef.current = workspace.id;
};

/**
* Handles shift+click multi-selection logic to select a range of workspaces
*/
const getWorkspacesForShiftClick = (
allWorkspaces: readonly Workspace[],
selectedWorkspaces: readonly Workspace[],
lastCheckedId: string | null,
currentId: string
): readonly Workspace[] => {
const lastIndex = allWorkspaces.findIndex(w => w.id === lastCheckedId);
const currentIndex = allWorkspaces.findIndex(w => w.id === currentId);

if (lastIndex === -1 || currentIndex === -1) {
return selectedWorkspaces;
}

const startIndex = Math.min(lastIndex, currentIndex);
const endIndex = Math.max(lastIndex, currentIndex);

const workspacesToAdd = allWorkspaces
.slice(startIndex, endIndex + 1)
.filter(w => !cantBeChecked(w));

const existingIds = new Set(selectedWorkspaces.map(w => w.id));
return [
...selectedWorkspaces,
...workspacesToAdd.filter(w => !existingIds.has(w.id)),
];
};

/**
* Detects if the shift key was pressed during a mouse event
*/
const isShiftKeyPressed = (event: React.SyntheticEvent): boolean => {
return event.nativeEvent instanceof MouseEvent && event.nativeEvent.shiftKey;
};

return (
<Table>
<TableHeader>
Expand Down Expand Up @@ -215,26 +282,33 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
<TableCell>
<div className="flex items-center gap-2">
{canCheckWorkspaces && (
<Checkbox
data-testid={`checkbox-${workspace.id}`}
size="xsmall"
disabled={cantBeChecked(workspace)}
checked={checked}
onClick={(e) => {
e.stopPropagation();
}}
onChange={(e) => {
if (e.currentTarget.checked) {
onCheckChange([...checkedWorkspaces, workspace]);
} else {
onCheckChange(
checkedWorkspaces.filter(
(w) => w.id !== workspace.id,
),
);
}
}}
/>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span>
<Checkbox
data-testid={`checkbox-${workspace.id}`}
size="xsmall"
disabled={cantBeChecked(workspace)}
checked={checked}
onClick={(e) => {
e.stopPropagation();
}}
onChange={(e) => {
handleWorkspaceCheckChange(
workspace,
e.currentTarget.checked,
isShiftKeyPressed(e)
);
}}
/>
</span>
</TooltipTrigger>
<TooltipContent>
Select this workspace. Use Shift+Click to select a range.
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
<AvatarData
title={
Expand Down
Loading