Skip to content

feat(site): Show update confirmation dialog #7420

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.

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 1 commit into from
May 4, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions site/src/components/Dialogs/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
{onConfirm && (
<LoadingButton
fullWidth
data-testid="confirm-button"
variant="contained"
onClick={onConfirm}
color={typeToColor(type)}
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/Resources/AgentRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,10 @@ export const AgentRow: FC<AgentRowProps> = ({
useEffect(() => {
// We only want to fetch logs when they are actually shown,
// otherwise we can make a lot of requests that aren't necessary.
if (showStartupLogs) {
if (showStartupLogs && logsMachine.can("FETCH_STARTUP_LOGS")) {
sendLogsEvent("FETCH_STARTUP_LOGS")
}
}, [sendLogsEvent, showStartupLogs])
}, [logsMachine, sendLogsEvent, showStartupLogs])
const logListRef = useRef<List>(null)
const logListDivRef = useRef<HTMLDivElement>(null)
const startupLogs = useMemo(() => {
Expand Down
1 change: 1 addition & 0 deletions site/src/components/WorkspaceActions/Buttons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const UpdateButton: FC<PropsWithChildren<WorkspaceAction>> = ({

return (
<Button
data-testid="workspace-update-button"
variant="outlined"
startIcon={<CloudQueueIcon />}
onClick={handleAction}
Expand Down
7 changes: 2 additions & 5 deletions site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.test.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import { screen } from "@testing-library/react"
import WS from "jest-websocket-mock"
import {
MockWorkspace,
MockWorkspaceBuild,
renderWithAuth,
} from "../../testHelpers/renderHelpers"
import { renderWithAuth } from "../../testHelpers/renderHelpers"
import { WorkspaceBuildPage } from "./WorkspaceBuildPage"
import { MockWorkspace, MockWorkspaceBuild } from "testHelpers/entities"

describe("WorkspaceBuildPage", () => {
test("the mock server seamlessly handles JSON protocols", async () => {
Expand Down
54 changes: 35 additions & 19 deletions site/src/pages/WorkspacePage/WorkspacePage.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ const { t } = i18next
const renderWorkspacePage = async () => {
jest.spyOn(api, "getTemplate").mockResolvedValueOnce(MockTemplate)
jest.spyOn(api, "getTemplateVersionRichParameters").mockResolvedValueOnce([])
jest.spyOn(api, "watchStartupLogs").mockImplementation((_, options) => {
options.onDone()
return new WebSocket("")
})
renderWithAuth(<WorkspacePage />, {
route: `/@${MockWorkspace.owner_name}/${MockWorkspace.name}`,
path: "/@:username/:workspace",
Expand Down Expand Up @@ -188,22 +192,32 @@ describe("WorkspacePage", () => {
})

it("requests an update when the user presses Update", async () => {
// Mocks
jest
.spyOn(api, "getWorkspaceByOwnerAndName")
.mockResolvedValueOnce(MockOutdatedWorkspace)

const updateWorkspaceMock = jest
.spyOn(api, "updateWorkspace")
.mockResolvedValueOnce(MockWorkspaceBuild)

await testButton(
t("actionButton.update", { ns: "workspacePage" }),
updateWorkspaceMock,
)
// Render
await renderWorkspacePage()

// Actions
const user = userEvent.setup()
await user.click(screen.getByTestId("workspace-update-button"))
const confirmButton = await screen.findByTestId("confirm-button")
await user.click(confirmButton)

// Assertions
await waitFor(() => {
expect(updateWorkspaceMock).toBeCalled()
})
})

it("updates the parameters when they are missing during update", async () => {
// Setup mocks
const user = userEvent.setup()
// Mocks
jest
.spyOn(api, "getWorkspaceByOwnerAndName")
.mockResolvedValueOnce(MockOutdatedWorkspace)
Expand All @@ -215,23 +229,24 @@ describe("WorkspacePage", () => {
MockTemplateVersionParameter2,
]),
)
// Render page and wait for it to be loaded
renderWithAuth(<WorkspacePage />, {
route: `/@${MockWorkspace.owner_name}/${MockWorkspace.name}`,
path: "/@:username/:workspace",
})
await waitForLoaderToBeRemoved()
// Click on the update button
const workspaceActions = screen.getByTestId("workspace-actions")
await user.click(
within(workspaceActions).getByRole("button", { name: "Update" }),
)

// Render
await renderWorkspacePage()

// Actions
const user = userEvent.setup()
await user.click(screen.getByTestId("workspace-update-button"))
const confirmButton = await screen.findByTestId("confirm-button")
await user.click(confirmButton)

// The update was called
await waitFor(() => {
expect(api.updateWorkspace).toBeCalled()
// We want to clear this mock to use it later
updateWorkspaceSpy.mockClear()
})
// Fill the parameters and send the form

// After trying to update, a new dialog asking for missed parameters should
// be displayed and filled
const dialog = await screen.findByTestId("dialog")
const firstParameterInput = within(dialog).getByLabelText(
MockTemplateVersionParameter1.name,
Expand All @@ -246,6 +261,7 @@ describe("WorkspacePage", () => {
await user.clear(secondParameterInput)
await user.type(secondParameterInput, "2")
await user.click(within(dialog).getByRole("button", { name: "Update" }))

// Check if the update was called using the values from the form
await waitFor(() => {
expect(api.updateWorkspace).toBeCalledWith(MockOutdatedWorkspace, [
Expand Down
17 changes: 16 additions & 1 deletion site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { ChangeVersionDialog } from "./ChangeVersionDialog"
import { useQuery } from "@tanstack/react-query"
import { getTemplateVersions } from "api/api"
import { useRestartWorkspace } from "./hooks"
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"

interface WorkspaceReadyPageProps {
workspaceState: StateFrom<typeof workspaceMachine>
Expand Down Expand Up @@ -76,6 +77,7 @@ export const WorkspaceReadyPage = ({
queryFn: () => getTemplateVersions(workspace.template_id),
enabled: changeVersionDialogOpen,
})
const [isConfirmingUpdate, setIsConfirmingUpdate] = useState(false)

const {
mutate: restartWorkspace,
Expand Down Expand Up @@ -132,7 +134,7 @@ export const WorkspaceReadyPage = ({
handleStop={() => workspaceSend({ type: "STOP" })}
handleRestart={() => restartWorkspace(workspace)}
handleDelete={() => workspaceSend({ type: "ASK_DELETE" })}
handleUpdate={() => workspaceSend({ type: "UPDATE" })}
handleUpdate={() => setIsConfirmingUpdate(true)}
Copy link
Contributor

Choose a reason for hiding this comment

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

nice!!!! 👌

handleCancel={() => workspaceSend({ type: "CANCEL" })}
handleSettings={() => navigate("settings")}
handleBuildRetry={() => workspaceSend({ type: "RETRY_BUILD" })}
Expand Down Expand Up @@ -198,6 +200,19 @@ export const WorkspaceReadyPage = ({
})
}}
/>
<ConfirmDialog
type="info"
hideCancel={false}
open={isConfirmingUpdate}
onConfirm={() => {
workspaceSend({ type: "UPDATE" })
setIsConfirmingUpdate(false)
}}
onClose={() => setIsConfirmingUpdate(false)}
title="Confirm update"
confirmText="Update"
description="Are you sure you want to update your workspace? Updating your workspace will stop all running processes and delete non-persistent data."
/>
</>
)
}
33 changes: 33 additions & 0 deletions site/src/testHelpers/entities.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1639,3 +1639,36 @@ export const MockDeploymentStats: TypesGen.DeploymentStats = {
tx_bytes: 36113513253,
},
}

export const MockDeploymentSSH: TypesGen.SSHConfigResponse = {
hostname_prefix: " coder.",
ssh_config_options: {},
}

export const MockStartupLogs: TypesGen.WorkspaceAgentStartupLog[] = [
{
id: 166663,
created_at: "2023-05-04T11:30:41.402072Z",
output: "+ curl -fsSL https://code-server.dev/install.sh",
level: "info",
},
{
id: 166664,
created_at: "2023-05-04T11:30:41.40228Z",
output:
"+ sh -s -- --method=standalone --prefix=/tmp/code-server --version 4.8.3",
level: "info",
},
{
id: 166665,
created_at: "2023-05-04T11:30:42.590731Z",
output: "Ubuntu 22.04.2 LTS",
level: "info",
},
{
id: 166666,
created_at: "2023-05-04T11:30:42.593686Z",
output: "Installing v4.8.3 of the amd64 release from GitHub.",
level: "info",
},
]
8 changes: 8 additions & 0 deletions site/src/testHelpers/handlers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -385,4 +385,12 @@ export const handlers = [
)
},
),

rest.get("/api/v2/deployment/ssh", (_, res, ctx) => {
return res(ctx.status(200), ctx.json(M.MockDeploymentSSH))
}),

rest.get("/api/v2/workspaceagents/:agent/startup-logs", (_, res, ctx) => {
return res(ctx.status(200), ctx.json(M.MockStartupLogs))
}),
]