feat: add inline actions into workspaces table

coder · BrunoQuaresma · May 6, 2025 · May 1, 2025 · May 1, 2025 · May 1, 2025
commit 0ba83723323f1e042f57996ba981313cd03057c4
diff --git a/site/src/api/queries/workspaces.ts b/site/src/api/queries/workspaces.ts
@@ -139,13 +139,9 @@ export function workspacesKey(config: WorkspacesRequest = {}) {
 }
 
 export function workspaces(config: WorkspacesRequest = {}) {
-	// Duplicates some of the work from workspacesKey, but that felt better than
-	// letting invisible properties sneak into the query logic
-	const { q, limit } = config;
-
 	return {
 		queryKey: workspacesKey(config),
-		queryFn: () => API.getWorkspaces({ q, limit }),
+		queryFn: () => API.getWorkspaces(config),
 	} as const satisfies QueryOptions<WorkspacesResponse>;
 }
 

diff --git a/site/src/hooks/usePagination.ts b/site/src/hooks/usePagination.ts
@@ -9,7 +9,7 @@ export const usePagination = ({
 	const [searchParams, setSearchParams] = searchParamsResult;
 	const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
 	const limit = DEFAULT_RECORDS_PER_PAGE;
-	const offset = page <= 0 ? 0 : (page - 1) * limit;
+	const offset = calcOffset(page, limit);
 
 	const goToPage = (page: number) => {
 		searchParams.set("page", page.toString());
@@ -23,3 +23,7 @@ export const usePagination = ({
 		offset,
 	};
 };
+
+export const calcOffset = (page: number, limit: number) => {
+	return page <= 0 ? 0 : (page - 1) * limit;
+};
diff --git a/...rkspacePage/WorkspaceActions/constants.ts → site/src/modules/workspaces/actions.ts b/...rkspacePage/WorkspaceActions/constants.ts → site/src/modules/workspaces/actions.ts
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/useWorkspacesToBeDeleted.ts b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/useWorkspacesToBeDeleted.ts
@@ -2,16 +2,17 @@ import type { Template, Workspace } from "api/typesGenerated";
 import { compareAsc } from "date-fns";
 import { useWorkspacesData } from "pages/WorkspacesPage/data";
 import type { TemplateScheduleFormValues } from "./formHelpers";
+import { calcOffset } from "hooks/usePagination";
 
 export const useWorkspacesToGoDormant = (
 	template: Template,
 	formValues: TemplateScheduleFormValues,
 	fromDate: Date,
 ) => {
 	const { data } = useWorkspacesData({
-		page: 0,
+		offset: calcOffset(0, 0),
 		limit: 0,
-		query: `template:${template.name}`,
+		q: `template:${template.name}`,
 	});
 
 	return data?.workspaces?.filter((workspace: Workspace) => {
@@ -40,9 +41,9 @@ export const useWorkspacesToBeDeleted = (
 	fromDate: Date,
 ) => {
 	const { data } = useWorkspacesData({
-		page: 0,
+		offset: calcOffset(0, 0),
 		limit: 0,
-		query: `template:${template.name} dormant:true`,
+		q: `template:${template.name} dormant:true`,
 	});
 	return data?.workspaces?.filter((workspace: Workspace) => {
 		if (!workspace.dormant_at || !formValues.time_til_dormant_autodelete_ms) {

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -31,7 +31,10 @@ import {
 import { DebugButton } from "./DebugButton";
 import { DownloadLogsDialog } from "./DownloadLogsDialog";
 import { RetryButton } from "./RetryButton";
-import { type ActionType, abilitiesByWorkspaceStatus } from "./constants";
+import {
+	abilitiesByWorkspaceStatus,
+	type ActionType,
+} from "modules/workspaces/actions";
 
 export interface WorkspaceActionsProps {
 	workspace: Workspace;

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -1,6 +1,6 @@
 import { workspacePermissionsByOrganization } from "api/queries/organizations";
 import { templates } from "api/queries/templates";
-import type { Workspace } from "api/typesGenerated";
+import type { Workspace, WorkspacesResponse } from "api/typesGenerated";
 import { useFilter } from "components/Filter/Filter";
 import { useUserFilterMenu } from "components/Filter/UserFilter";
 import { useAuthenticated } from "hooks";
@@ -10,7 +10,7 @@ import { useDashboard } from "modules/dashboard/useDashboard";
 import { useOrganizationsFilterMenu } from "modules/tableFiltering/options";
 import { type FC, useEffect, useMemo, useState } from "react";
 import { Helmet } from "react-helmet-async";
-import { useQuery } from "react-query";
+import { useQuery, useQueryClient } from "react-query";
 import { useSearchParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
 import { BatchDeleteConfirmation } from "./BatchDeleteConfirmation";
@@ -35,6 +35,7 @@ function useSafeSearchParams() {
 }
 
 const WorkspacesPage: FC = () => {
+	const queryClient = useQueryClient();
 	// If we use a useSearchParams for each hook, the values will not be in sync.
 	// So we have to use a single one, centralizing the values, and pass it to
 	// each hook.
@@ -72,7 +73,7 @@ const WorkspacesPage: FC = () => {
 
 	const { data, error, queryKey, refetch } = useWorkspacesData({
 		...pagination,
-		query: filterProps.filter.query,
+		q: filterProps.filter.query,
 	});
 
 	const updateWorkspace = useWorkspaceUpdate(queryKey);
@@ -128,6 +129,11 @@ const WorkspacesPage: FC = () => {
 				onUpdateAll={() => setConfirmingBatchAction("update")}
 				onStartAll={() => batchActions.startAll(checkedWorkspaces)}
 				onStopAll={() => batchActions.stopAll(checkedWorkspaces)}
+				onActionSuccess={async () => {
+					await queryClient.invalidateQueries({
+						queryKey,
+					});
+				}}
 			/>
 
 			<BatchDeleteConfirmation

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -6,7 +6,7 @@ import StopOutlined from "@mui/icons-material/StopOutlined";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Divider from "@mui/material/Divider";
 import { hasError, isApiValidationError } from "api/errors";
-import type { Template, Workspace } from "api/typesGenerated";
+import type { Template, Workspace, WorkspaceBuild } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Button } from "components/Button/Button";
 import { EmptyState } from "components/EmptyState/EmptyState";
@@ -65,6 +65,7 @@ export interface WorkspacesPageViewProps {
 	templates: TemplateQuery["data"];
 	canCreateTemplate: boolean;
 	canChangeVersions: boolean;
+	onActionSuccess: () => Promise<void>;
 }
 
 export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
@@ -88,6 +89,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 	templatesFetchStatus,
 	canCreateTemplate,
 	canChangeVersions,
+	onActionSuccess,
 }) => {
 	// Let's say the user has 5 workspaces, but tried to hit page 100, which does
 	// not exist. In this case, the page is not valid and we want to show a better
@@ -221,6 +223,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 					onCheckChange={onCheckChange}
 					canCheckWorkspaces={canCheckWorkspaces}
 					templates={templates}
+					onActionSuccess={onActionSuccess}
 				/>
 			)}