Workspace batch actions

coder · BrunoQuaresma · Aug 15, 2023 · Aug 10, 2023 · Aug 10, 2023 · Aug 10, 2023
commit 039d0baf7fd6ecc88948db92f4ac55f86e1d06bb
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -12,6 +12,7 @@ import { useSearchParams } from "react-router-dom"
 import { useFilter } from "components/Filter/filter"
 import { useUserFilterMenu } from "components/Filter/UserFilter"
 import { getWorkspaces } from "api/api"
+import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
 
 const WorkspacesPage: FC = () => {
   const [lockedWorkspaces, setLockedWorkspaces] = useState<Workspace[]>([])
@@ -55,8 +56,9 @@ const WorkspacesPage: FC = () => {
       setLockedWorkspaces([])
     }
   }, [experimentEnabled, data, filterProps.filter.query])
-
   const updateWorkspace = useWorkspaceUpdate(queryKey)
+  const [checkedWorkspaces, setCheckedWorkspaces] = useState<Workspace[]>([])
+  const [isDeletingAll, setIsDeletingAll] = useState(false)
 
   return (
     <>
@@ -65,6 +67,8 @@ const WorkspacesPage: FC = () => {
       </Helmet>
 
       <WorkspacesPageView
+        checkedWorkspaces={checkedWorkspaces}
+        onCheckChange={setCheckedWorkspaces}
         workspaces={data?.workspaces}
         lockedWorkspaces={lockedWorkspaces}
         error={error}
@@ -76,6 +80,25 @@ const WorkspacesPage: FC = () => {
         onUpdateWorkspace={(workspace) => {
           updateWorkspace.mutate(workspace)
         }}
+        onDeleteAll={() => {
+          setIsDeletingAll(true)
+        }}
+      />
+
+      <ConfirmDialog
+        type="delete"
+        title={`Delete ${checkedWorkspaces?.length} ${
+          checkedWorkspaces.length === 1 ? "workspace" : "workspaces"
+        }`}
+        description="Deleting these workspaces is irreversible! Are you sure you want to proceed?"
+        open={isDeletingAll}
+        confirmLoading={false}
+        onConfirm={() => {
+          alert("DO IT!")
+        }}
+        onClose={() => {
+          setIsDeletingAll(false)
+        }}
       />
     </>
   )

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -19,6 +19,9 @@ import { ErrorAlert } from "components/Alert/ErrorAlert"
 import { WorkspacesFilter } from "./filter/filter"
 import { hasError, isApiValidationError } from "api/errors"
 import { PaginationStatus } from "components/PaginationStatus/PaginationStatus"
+import Box from "@mui/material/Box"
+import Button from "@mui/material/Button"
+import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
 
 export const Language = {
   pageTitle: "Workspaces",
@@ -33,12 +36,15 @@ export interface WorkspacesPageViewProps {
   error: unknown
   workspaces?: Workspace[]
   lockedWorkspaces?: Workspace[]
+  checkedWorkspaces: Workspace[]
   count?: number
   filterProps: ComponentProps<typeof WorkspacesFilter>
   page: number
   limit: number
   onPageChange: (page: number) => void
   onUpdateWorkspace: (workspace: Workspace) => void
+  onCheckChange: (checkedWorkspaces: Workspace[]) => void
+  onDeleteAll: () => void
 }
 
 export const WorkspacesPageView: FC<
@@ -53,6 +59,9 @@ export const WorkspacesPageView: FC<
   onPageChange,
   onUpdateWorkspace,
   page,
+  checkedWorkspaces,
+  onCheckChange,
+  onDeleteAll,
 }) => {
   const { saveLocal } = useLocalStorage()
 
@@ -102,17 +111,50 @@ export const WorkspacesPageView: FC<
         <WorkspacesFilter error={error} {...filterProps} />
       </Stack>
 
-      <PaginationStatus
-        isLoading={!workspaces && !error}
-        showing={workspaces?.length ?? 0}
-        total={count ?? 0}
-        label="workspaces"
-      />
+      {checkedWorkspaces.length > 0 ? (
+        <Box
+          sx={{
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            fontSize: 13,
+            mb: 2,
+            mt: 1,
+            color: (theme) => theme.palette.text.secondary,
+            "& strong": { color: (theme) => theme.palette.text.primary },
+          }}
+        >
+          <Box>
+            Selected <strong>{checkedWorkspaces.length}</strong> of{" "}
+            <strong>{workspaces?.length}</strong>{" "}
+            {checkedWorkspaces.length === 1 ? "workspace" : "workspaces"}
+          </Box>
+
+          <Box sx={{ position: "absolute", right: 0 }}>
+            <Button
+              size="small"
+              startIcon={<DeleteOutlined />}
+              onClick={onDeleteAll}
+            >
+              Delete all
+            </Button>
+          </Box>
+        </Box>
+      ) : (
+        <PaginationStatus
+          isLoading={!workspaces && !error}
+          showing={workspaces?.length ?? 0}
+          total={count ?? 0}
+          label="workspaces"
+        />
+      )}
 
       <WorkspacesTable
         workspaces={workspaces}
         isUsingFilter={filterProps.filter.used}
         onUpdateWorkspace={onUpdateWorkspace}
+        checkedWorkspaces={checkedWorkspaces}
+        onCheckChange={onCheckChange}
       />
       {count !== undefined && (
         <PaginationWidgetBase

diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -31,18 +31,23 @@ import { LastUsed } from "components/LastUsed/LastUsed"
 import { WorkspaceOutdatedTooltip } from "components/Tooltips"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
 import { getDisplayWorkspaceTemplateName } from "utils/workspace"
+import Checkbox from "@mui/material/Checkbox"
 
 export interface WorkspacesTableProps {
   workspaces?: Workspace[]
+  checkedWorkspaces: Workspace[]
+  error?: unknown
   isUsingFilter: boolean
   onUpdateWorkspace: (workspace: Workspace) => void
-  error?: unknown
+  onCheckChange: (checkedWorkspaces: Workspace[]) => void
 }
 
 export const WorkspacesTable: FC<WorkspacesTableProps> = ({
   workspaces,
+  checkedWorkspaces,
   isUsingFilter,
   onUpdateWorkspace,
+  onCheckChange,
 }) => {
   const { t } = useTranslation("workspacesPage")
   const styles = useStyles()
@@ -52,7 +57,31 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell width="40%">Name</TableCell>
+            <TableCell
+              width="40%"
+              sx={{
+                paddingLeft: (theme) => `${theme.spacing(1.5)} !important`,
+              }}
+            >
+              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                <Checkbox
+                  checked={checkedWorkspaces.length === workspaces?.length}
+                  size="small"
+                  onChange={(_, checked) => {
+                    if (!workspaces) {
+                      return
+                    }
+
+                    if (!checked) {
+                      onCheckChange([])
+                    } else {
+                      onCheckChange(workspaces)
+                    }
+                  }}
+                />
+                Name
+              </Box>
+            </TableCell>
             <TableCell width="25%">Template</TableCell>
             <TableCell width="20%">Last used</TableCell>
             <TableCell width="15%">Status</TableCell>
@@ -94,33 +123,61 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
           {workspaces &&
             workspaces.map((workspace) => (
               <WorkspacesRow workspace={workspace} key={workspace.id}>
-                <TableCell>
-                  <AvatarData
-                    title={
-                      <Stack direction="row" spacing={0} alignItems="center">
-                        {workspace.name}
-                        {workspace.outdated && (
-                          <WorkspaceOutdatedTooltip
-                            templateName={workspace.template_name}
-                            templateId={workspace.template_id}
-                            onUpdateVersion={() => {
-                              onUpdateWorkspace(workspace)
-                            }}
-                          />
-                        )}
-                      </Stack>
-                    }
-                    subtitle={workspace.owner_name}
-                    avatar={
-                      <Avatar
-                        src={workspace.template_icon}
-                        variant={workspace.template_icon ? "square" : undefined}
-                        fitImage={Boolean(workspace.template_icon)}
-                      >
-                        {workspace.name}
-                      </Avatar>
-                    }
-                  />
+                <TableCell
+                  sx={{
+                    paddingLeft: (theme) => `${theme.spacing(1.5)} !important`,
+                  }}
+                >
+                  <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                    <Checkbox
+                      size="small"
+                      checked={checkedWorkspaces.some(
+                        (w) => w.id === workspace.id,
+                      )}
+                      onClick={(e) => {
+                        e.stopPropagation()
+                      }}
+                      onChange={(e) => {
+                        if (e.currentTarget.checked) {
+                          onCheckChange([...checkedWorkspaces, workspace])
+                        } else {
+                          onCheckChange(
+                            checkedWorkspaces.filter(
+                              (w) => w.id !== workspace.id,
+                            ),
+                          )
+                        }
+                      }}
+                    />
+                    <AvatarData
+                      title={
+                        <Stack direction="row" spacing={0} alignItems="center">
+                          {workspace.name}
+                          {workspace.outdated && (
+                            <WorkspaceOutdatedTooltip
+                              templateName={workspace.template_name}
+                              templateId={workspace.template_id}
+                              onUpdateVersion={() => {
+                                onUpdateWorkspace(workspace)
+                              }}
+                            />
+                          )}
+                        </Stack>
+                      }
+                      subtitle={workspace.owner_name}
+                      avatar={
+                        <Avatar
+                          src={workspace.template_icon}
+                          variant={
+                            workspace.template_icon ? "square" : undefined
+                          }
+                          fitImage={Boolean(workspace.template_icon)}
+                        >
+                          {workspace.name}
+                        </Avatar>
+                      }
+                    />
+                  </Box>
                 </TableCell>
 
                 <TableCell>