Add more actions to workspaces row

BrunoQuaresma · BrunoQuaresma · commit 3b5f20bfc34c · 2025-05-12T19:46:04.000Z
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceMoreActions.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceMoreActions.tsx
@@ -1,5 +1,9 @@
 import { MissingBuildParameters } from "api/api";
-import { changeVersion, deleteWorkspace } from "api/queries/workspaces";
+import {
+	changeVersion,
+	deleteWorkspace,
+	workspacePermissions,
+} from "api/queries/workspaces";
 import type { Workspace } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import {
@@ -20,7 +24,7 @@ import {
 import { UpdateBuildParametersDialog } from "./UpdateBuildParametersDialog";
 import { DownloadLogsDialog } from "./DownloadLogsDialog";
 import { useState, type FC } from "react";
-import { useMutation, useQueryClient } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { Link as RouterLink } from "react-router-dom";
 import { ChangeWorkspaceVersionDialog } from "./ChangeWorkspaceVersionDialog";
 import { WorkspaceDeleteDialog } from "./WorkspaceDeleteDialog";
@@ -29,17 +33,18 @@ import { useWorkspaceDuplication } from "./useWorkspaceDuplication";
 
 type WorkspaceMoreActionsProps = {
 	workspace: Workspace;
-	permissions: WorkspacePermissions;
 	disabled?: boolean;
 };
 
 export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
 	workspace,
 	disabled,
-	permissions,
 }) => {
 	const queryClient = useQueryClient();
 
+	// Permissions
+	const { data: permissions } = useQuery(workspacePermissions(workspace));
+
 	// Download logs
 	const [isDownloadDialogOpen, setIsDownloadDialogOpen] = useState(false);
 
@@ -83,7 +88,7 @@ export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
 						</RouterLink>
 					</DropdownMenuItem>
 
-					{permissions.updateWorkspaceVersion && (
+					{permissions?.updateWorkspaceVersion && (
 						<DropdownMenuItem
 							onClick={() => {
 								setChangeVersionDialogOpen(true);
@@ -162,7 +167,7 @@ export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
 
 			<WorkspaceDeleteDialog
 				workspace={workspace}
-				canDeleteFailedWorkspace={permissions.deleteFailedWorkspace}
+				canDeleteFailedWorkspace={!!permissions?.deleteFailedWorkspace}
 				isOpen={isConfirmingDelete}
 				onCancel={() => {
 					setIsConfirmingDelete(false);
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -165,11 +165,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
 				onToggle={handleToggleFavorite}
 			/>
 
-			<WorkspaceMoreActions
-				workspace={workspace}
-				permissions={permissions}
-				disabled={!canAcceptJobs}
-			/>
+			<WorkspaceMoreActions workspace={workspace} disabled={!canAcceptJobs} />
 		</div>
 	);
 };
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -91,6 +91,7 @@ import {
 	lastUsedMessage,
 } from "utils/workspace";
 import { WorkspacesEmpty } from "./WorkspacesEmpty";
+import { WorkspaceMoreActions } from "modules/workspaces/WorkspaceMoreActions/WorkspaceMoreActions";
 
 dayjs.extend(relativeTime);
 
@@ -185,7 +186,6 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 					<TableHead className="w-2/6">Template</TableHead>
 					<TableHead className="w-2/6">Status</TableHead>
 					<TableHead className="w-0" />
-					<TableHead className="w-0" />
 				</TableRow>
 			</TableHeader>
 			<TableBody className="[&_td]:h-[72px]">
@@ -303,11 +303,6 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 								onActionSuccess={onActionSuccess}
 								onActionError={onActionError}
 							/>
-							<TableCell>
-								<div className="flex">
-									<ChevronRightIcon className="text-content-secondary size-icon-sm" />
-								</div>
-							</TableCell>
 						</WorkspacesRow>
 					);
 				})}
@@ -385,11 +380,6 @@ const TableLoader: FC<TableLoaderProps> = ({ canCheckWorkspaces }) => {
 				<TableCell className="w-0">
 					<Skeleton variant="rounded" width={40} height={40} />
 				</TableCell>
-				<TableCell>
-					<div className="flex">
-						<ChevronRightIcon className="text-content-disabled size-icon-sm" />
-					</div>
-				</TableCell>
 			</TableRowSkeleton>
 		</TableLoaderSkeleton>
 	);
@@ -585,6 +575,11 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
 						<RefreshCcwIcon />
 					</PrimaryAction>
 				)}
+
+				<WorkspaceMoreActions
+					workspace={workspace}
+					disabled={!abilities.canAcceptJobs}
+				/>
 			</div>
 		</TableCell>
 	);
@@ -731,6 +726,8 @@ const WorkspaceApps: FC<WorkspaceAppsProps> = ({ workspace }) => {
 		);
 	}
 
+	buttons.push();
+
 	return buttons;
 };
 
