Skip to content

feat(site): add batch actions to the workspaces page #9091

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

Merged
merged 15 commits into from
Aug 15, 2023
Merged

feat(site): add batch actions to the workspaces page #9091

Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
039d0ba
Workspace batch actions
BrunoQuaresma Aug 10, 2023
e3b7c9d
Uncheck all workspaces when pagination or filter change
BrunoQuaresma Aug 10, 2023
32d9025
Improve delete dialog
BrunoQuaresma Aug 10, 2023
18965e0
Improve delete
BrunoQuaresma Aug 10, 2023
ce38d74
Fix verbiage
BrunoQuaresma Aug 10, 2023
0c42242
Create table tool bar component
BrunoQuaresma Aug 10, 2023
f02b635
Merge branch 'main' of https://github.com/coder/coder into bq/batch-w…
BrunoQuaresma Aug 14, 2023
606cfce
Add experiment
BrunoQuaresma Aug 14, 2023
e8a4f18
Add experiment in the FE side
BrunoQuaresma Aug 14, 2023
db1201b
Minor UI improvements
BrunoQuaresma Aug 14, 2023
42ee67c
Add minor improvements
BrunoQuaresma Aug 14, 2023
5e6880b
Merge branch 'main' of https://github.com/coder/coder into bq/batch-w…
BrunoQuaresma Aug 15, 2023
420819e
Simplify logi
BrunoQuaresma Aug 15, 2023
2a6c18f
Add tests for the delete flow
BrunoQuaresma Aug 15, 2023
5710752
Fix workspaces page view stories
BrunoQuaresma Aug 15, 2023
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
Prev Previous commit
Next Next commit
Improve delete
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Aug 10, 2023
commit 18965e0fa876fcfcb76a3eb8f886d82c96ebc879
51 changes: 43 additions & 8 deletions site/src/pages/WorkspacesPage/WorkspacesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@ import { useTemplateFilterMenu, useStatusFilterMenu } from "./filter/menus"
import { useSearchParams } from "react-router-dom"
import { useFilter } from "components/Filter/filter"
import { useUserFilterMenu } from "components/Filter/UserFilter"
import { getWorkspaces } from "api/api"
import { deleteWorkspace, getWorkspaces } from "api/api"
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
import Box from "@mui/material/Box"
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
import TextField from "@mui/material/TextField"
import { displayError } from "components/GlobalSnackbar/utils"
import { getErrorMessage } from "api/errors"

const WorkspacesPage: FC = () => {
const [lockedWorkspaces, setLockedWorkspaces] = useState<Workspace[]>([])
Expand All @@ -25,7 +27,7 @@ const WorkspacesPage: FC = () => {
const searchParamsResult = useSearchParams()
const pagination = usePagination({ searchParamsResult })
const filterProps = useWorkspacesFilter({ searchParamsResult, pagination })
const { data, error, queryKey } = useWorkspacesData({
const { data, error, queryKey, refetch } = useWorkspacesData({
...pagination,
query: filterProps.filter.query,
})
Expand Down Expand Up @@ -101,6 +103,10 @@ const WorkspacesPage: FC = () => {
onClose={() => {
setIsDeletingAll(false)
}}
onDelete={async () => {
await refetch()
setCheckedWorkspaces([])
}}
/>
</>
)
Expand Down Expand Up @@ -159,38 +165,69 @@ const BatchDeleteConfirmation = ({
checkedWorkspaces,
open,
onClose,
onDelete,
}: {
checkedWorkspaces: Workspace[]
open: boolean
onClose: () => void
onDelete: () => void
}) => {
const [confirmValue, setConfirmValue] = useState("")
const [confirmError, setConfirmError] = useState(false)
const [isDeleting, setIsDeleting] = useState(false)

const close = () => {
if (isDeleting) {
return
}

onClose()
setConfirmValue("")
setConfirmError(false)
setIsDeleting(false)
}

const confirmDeletion = async () => {
setConfirmError(false)

const confirmDeletion = () => {
if (confirmValue.toLowerCase() !== "delete") {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could consider only accepting the value as stated (i.e. must be upper-case DELETE) to confirm. But there may be differing opinions on this.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can test it as it is now on dev.coder.com and see if we get any feedback.

setConfirmError(true)
return
}

try {
setIsDeleting(true)
await Promise.all(checkedWorkspaces.map((w) => deleteWorkspace(w.id)))
} catch (e) {
displayError(
"Error on deleting workspaces",
getErrorMessage(e, "An error occurred while deleting the workspaces"),
)
} finally {
close()
onDelete()
}
}

return (
<ConfirmDialog
type="delete"
open={open}
confirmLoading={isDeleting}
onConfirm={confirmDeletion}
onClose={() => {
onClose()
setConfirmValue("")
setConfirmError(false)
}}
type="delete"
title={`Delete ${checkedWorkspaces?.length} ${
checkedWorkspaces.length === 1 ? "workspace" : "workspaces"
}`}
description={
<form
onSubmit={(e) => {
onSubmit={async (e) => {
e.preventDefault()
confirmDeletion()
await confirmDeletion()
}}
>
<Box>
Expand Down Expand Up @@ -223,8 +260,6 @@ const BatchDeleteConfirmation = ({
/>
</form>
}
confirmLoading={false}
onConfirm={confirmDeletion}
/>
)
}