coder · BrunoQuaresma · Aug 15, 2023 · Aug 10, 2023 · Aug 10, 2023 · Aug 10, 2023
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/codersdk/deployment.go b/codersdk/deployment.go
@@ -1931,6 +1931,9 @@ const (
 	// Template parameters insights
 	ExperimentTemplateParametersInsights Experiment = "template_parameters_insights"
 
+	// Workspaces batch actions
+	ExperimentWorkspacesBatchActions Experiment = "workspaces_batch_actions"
+
 	// Add new experiments here!
 	// ExperimentExample Experiment = "example"
 )
@@ -1942,6 +1945,7 @@ const (
 var ExperimentsAll = Experiments{
 	ExperimentDeploymentHealthPage,
 	ExperimentTemplateParametersInsights,
+	ExperimentWorkspacesBatchActions,
 }
 
 // Experiments is a list of experiments that are enabled for the deployment.

diff --git a/docs/api/schemas.md b/docs/api/schemas.md
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/components/PaginationStatus/PaginationStatus.tsx b/site/src/components/PaginationStatus/PaginationStatus.tsx
diff --git a/site/src/components/TableToolbar/TableToolbar.tsx b/site/src/components/TableToolbar/TableToolbar.tsx
@@ -0,0 +1,48 @@
+import { styled } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Skeleton from "@mui/material/Skeleton"
+
+export const TableToolbar = styled(Box)(({ theme }) => ({
+  fontSize: 13,
+  marginBottom: theme.spacing(1),
+  marginTop: theme.spacing(0),
+  height: 36, // The size of a small button
+  color: theme.palette.text.secondary,
+  "& strong": { color: theme.palette.text.primary },
+  display: "flex",
+  alignItems: "center",
+}))
+
+type BasePaginationStatusProps = {
+  label: string
+  isLoading: boolean
+  showing?: number
+  total?: number
+}
+
+type LoadedPaginationStatusProps = BasePaginationStatusProps & {
+  isLoading: false
+  showing: number
+  total: number
+}
+
+export const PaginationStatus = ({
+  isLoading,
+  showing,
+  total,
+  label,
+}: BasePaginationStatusProps | LoadedPaginationStatusProps) => {
+  if (isLoading) {
+    return (
+      <Box sx={{ height: 24, display: "flex", alignItems: "center" }}>
+        <Skeleton variant="text" width={160} height={16} />
+      </Box>
+    )
+  }
+  return (
+    <Box>
+      Showing <strong>{showing}</strong> of{" "}
+      <strong>{total?.toLocaleString()}</strong> {label}
+    </Box>
+  )
+}
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -21,7 +21,10 @@ import { ComponentProps, FC } from "react"
 import { useTranslation } from "react-i18next"
 import { AuditPaywall } from "./AuditPaywall"
 import { AuditFilter } from "./AuditFilter"
-import { PaginationStatus } from "components/PaginationStatus/PaginationStatus"
+import {
+  PaginationStatus,
+  TableToolbar,
+} from "components/TableToolbar/TableToolbar"
 import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase"
 
 export const Language = {
@@ -73,12 +76,14 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
         <Cond condition={isAuditLogVisible}>
           <AuditFilter {...filterProps} />
 
-          <PaginationStatus
-            isLoading={Boolean(isLoading)}
-            showing={auditLogs?.length ?? 0}
-            total={count ?? 0}
-            label="audit logs"
-          />
+          <TableToolbar>
+            <PaginationStatus
+              isLoading={Boolean(isLoading)}
+              showing={auditLogs?.length ?? 0}
+              total={count ?? 0}
+              label="audit logs"
+            />
+          </TableToolbar>
 
           <TableContainer>
             <Table>

diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -33,7 +33,10 @@ import { pageTitle } from "utils/page"
 import { groupMachine } from "xServices/groups/groupXService"
 import { Maybe } from "components/Conditionals/Maybe"
 import { makeStyles } from "@mui/styles"
-import { PaginationStatus } from "components/PaginationStatus/PaginationStatus"
+import {
+  PaginationStatus,
+  TableToolbar,
+} from "components/TableToolbar/TableToolbar"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 
 const AddGroupMember: React.FC<{
@@ -155,12 +158,14 @@ export const GroupPage: React.FC = () => {
                   }}
                 />
               </Maybe>
-              <PaginationStatus
-                isLoading={Boolean(isLoading)}
-                showing={group?.members.length ?? 0}
-                total={group?.members.length ?? 0}
-                label="members"
-              />
+              <TableToolbar>
+                <PaginationStatus
+                  isLoading={Boolean(isLoading)}
+                  showing={group?.members.length ?? 0}
+                  total={group?.members.length ?? 0}
+                  label="members"
+                />
+              </TableToolbar>
 
               <TableContainer>
                 <Table>

diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -4,7 +4,10 @@ import { PaginationMachineRef } from "xServices/pagination/paginationXService"
 import * as TypesGen from "../../api/typesGenerated"
 import { UsersTable } from "../../components/UsersTable/UsersTable"
 import { UsersFilter } from "./UsersFilter"
-import { PaginationStatus } from "components/PaginationStatus/PaginationStatus"
+import {
+  PaginationStatus,
+  TableToolbar,
+} from "components/TableToolbar/TableToolbar"
 
 export const Language = {
   activeUsersFilterName: "Active users",
@@ -60,12 +63,14 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
     <>
       <UsersFilter {...filterProps} />
 
-      <PaginationStatus
-        isLoading={Boolean(isLoading)}
-        showing={users?.length ?? 0}
-        total={count ?? 0}
-        label="users"
-      />
+      <TableToolbar>
+        <PaginationStatus
+          isLoading={Boolean(isLoading)}
+          showing={users?.length ?? 0}
+          total={count ?? 0}
+          label="users"
+        />
+      </TableToolbar>
 
       <UsersTable
         users={users}

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
@@ -1,11 +1,17 @@
-import { screen } from "@testing-library/react"
+import { screen, waitFor, within } from "@testing-library/react"
 import { rest } from "msw"
 import * as CreateDayString from "utils/createDayString"
 import { MockWorkspace, MockWorkspacesResponse } from "testHelpers/entities"
-import { renderWithAuth } from "testHelpers/renderHelpers"
+import {
+  renderWithAuth,
+  waitForLoaderToBeRemoved,
+} from "testHelpers/renderHelpers"
 import { server } from "testHelpers/server"
 import WorkspacesPage from "./WorkspacesPage"
 import { i18n } from "i18n"
+import userEvent from "@testing-library/user-event"
+import * as API from "api/api"
+import { Workspace } from "api/typesGenerated"
 
 const { t } = i18n
 
@@ -40,4 +46,37 @@ describe("WorkspacesPage", () => {
     )
     expect(templateDisplayNames).toHaveLength(MockWorkspacesResponse.count)
   })
+
+  it("deletes only the selected workspaces", async () => {
+    const workspaces = [
+      { ...MockWorkspace, id: "1" },
+      { ...MockWorkspace, id: "2" },
+      { ...MockWorkspace, id: "3" },
+    ]
+    jest
+      .spyOn(API, "getWorkspaces")
+      .mockResolvedValue({ workspaces, count: workspaces.length })
+    const deleteWorkspace = jest.spyOn(API, "deleteWorkspace")
+    const user = userEvent.setup()
+    renderWithAuth(<WorkspacesPage />)
+    await waitForLoaderToBeRemoved()
+
+    await user.click(getWorkspaceCheckbox(workspaces[0]))
+    await user.click(getWorkspaceCheckbox(workspaces[1]))
+    await user.click(screen.getByRole("button", { name: /delete all/i }))
+    await user.type(screen.getByLabelText(/type delete to confirm/i), "DELETE")
+    await user.click(screen.getByTestId("confirm-button"))
+
+    await waitFor(() => {
+      expect(deleteWorkspace).toHaveBeenCalledTimes(2)
+    })
+    expect(deleteWorkspace).toHaveBeenCalledWith(workspaces[0].id)
+    expect(deleteWorkspace).toHaveBeenCalledWith(workspaces[1].id)
+  })
 })
+
+const getWorkspaceCheckbox = (workspace: Workspace) => {
+  return within(screen.getByTestId(`checkbox-${workspace.id}`)).getByRole(
+    "checkbox",
+  )
+}