Skip to content

chore: refactor frontend to use workspace status directly #4361

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 11 commits into from
Oct 5, 2022
Merged

chore: refactor frontend to use workspace status directly #4361

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
330f2af
Add/update copy
presleyp Oct 4, 2022
c38352d
Update mocks
presleyp Oct 4, 2022
7dc2ef2
Handle disabled button labels separately
presleyp Oct 4, 2022
56f927e
Use workspace status directly, use i18n
presleyp Oct 4, 2022
a363534
Update stories and tests
presleyp Oct 4, 2022
1992e08
Fix optimistic update in xservice to use status, pending
presleyp Oct 4, 2022
5072691
Merge branch 'main' into ws-status/presleyp
presleyp Oct 4, 2022
d06c432
Rename started to running in story
presleyp Oct 4, 2022
b9829b5
Fix deletion banner conditional
presleyp Oct 4, 2022
23c607e
Send label to disabled button
presleyp Oct 5, 2022
5e10ddf
Refactor workspace actions
presleyp Oct 5, 2022
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
Update stories and tests
  • Loading branch information
@presleyp
presleyp committed Oct 4, 2022
commit a3635349d8a242bc85161db63cba95cc5d304615
3 changes: 1 addition & 2 deletions site/src/components/DropdownButton/DropdownButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { action } from "@storybook/addon-actions"
import { Story } from "@storybook/react"
import { WorkspaceStateEnum } from "util/workspace"
import { DeleteButton, DisabledButton, StartButton, UpdateButton } from "./ActionCtas"
import { DropdownButton, DropdownButtonProps } from "./DropdownButton"

Expand All @@ -23,7 +22,7 @@ WithDropdown.args = {

export const WithCancel = Template.bind({})
WithCancel.args = {
primaryAction: <DisabledButton workspaceState={WorkspaceStateEnum.deleting} />,
primaryAction: <DisabledButton workspaceStatus="deleting" />,
Copy link
Contributor

Choose a reason for hiding this comment

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

Curious why we're no longer using the enum here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The WorkspaceStatus type is defined by the backend now

secondaryActions: [],
canCancel: true,
handleCancel: action("cancel"),
Expand Down
18 changes: 4 additions & 14 deletions site/src/components/Workspace/Workspace.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,20 +75,10 @@ Stopping.args = {
workspace: Mocks.MockStoppingWorkspace,
}

export const Error = Template.bind({})
Error.args = {
export const Failed = Template.bind({})
Failed.args = {
...Started.args,
workspace: {
...Mocks.MockFailedWorkspace,
latest_build: {
...Mocks.MockWorkspaceBuild,
job: {
...Mocks.MockProvisionerJob,
status: "failed",
},
transition: "start",
},
},
workspace: Mocks.MockFailedWorkspace,
workspaceErrors: {
[WorkspaceErrors.BUILD_ERROR]: Mocks.makeMockApiError({
message: "A workspace build is already active.",
Expand Down Expand Up @@ -148,7 +138,7 @@ GetResourcesError.args = {

export const CancellationError = Template.bind({})
CancellationError.args = {
...Error.args,
...Failed.args,
workspaceErrors: {
[WorkspaceErrors.CANCELLATION_ERROR]: Mocks.makeMockApiError({
message: "Job could not be canceled.",
Expand Down
65 changes: 48 additions & 17 deletions site/src/components/WorkspaceActions/WorkspaceActions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { fireEvent, screen } from "@testing-library/react"
import { WorkspaceStateEnum } from "util/workspace"
import i18next from "i18next"
import * as Mocks from "../../testHelpers/entities"
import { render } from "../../testHelpers/renderHelpers"
import { Language } from "../DropdownButton/ActionCtas"
import { WorkspaceActions, WorkspaceActionsProps } from "./WorkspaceActions"

const { t } = i18next

const renderComponent = async (props: Partial<WorkspaceActionsProps> = {}) => {
render(
<WorkspaceActions
Expand Down Expand Up @@ -39,7 +40,9 @@ describe("WorkspaceActions", () => {
describe("when the workspace is starting", () => {
it("primary is starting; cancel is available; no secondary", async () => {
await renderComponent({ workspace: Mocks.MockStartingWorkspace })
expect(screen.getByTestId("primary-cta")).toHaveTextContent(Language.starting)
expect(screen.getByTestId("primary-cta")).toHaveTextContent(
t("actionButton.starting", { ns: "workspacePage" }),
)
expect(
screen.getByRole("button", {
name: "cancel action",
Expand All @@ -51,14 +54,20 @@ describe("WorkspaceActions", () => {
describe("when the workspace is started", () => {
it("primary is stop; secondary is delete", async () => {
await renderAndClick({ workspace: Mocks.MockWorkspace })
expect(screen.getByTestId("primary-cta")).toHaveTextContent(Language.stop)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(Language.delete)
expect(screen.getByTestId("primary-cta")).toHaveTextContent(
t("actionButton.stop", { ns: "workspacePage" }),
)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(
t("actionButton.delete", { ns: "workspacePage" }),
)
})
})
describe("when the workspace is stopping", () => {
it("primary is stopping; cancel is available; no secondary", async () => {
await renderComponent({ workspace: Mocks.MockStoppingWorkspace })
expect(screen.getByTestId("primary-cta")).toHaveTextContent(Language.stopping)
expect(screen.getByTestId("primary-cta")).toHaveTextContent(
t("actionButton.stopping", { ns: "workspacePage" }),
)
expect(
screen.getByRole("button", {
name: "cancel action",
Expand All @@ -70,29 +79,43 @@ describe("WorkspaceActions", () => {
describe("when the workspace is canceling", () => {
it("primary is canceling; no secondary", async () => {
await renderAndClick({ workspace: Mocks.MockCancelingWorkspace })
expect(screen.getByTestId("primary-cta")).toHaveTextContent(WorkspaceStateEnum.canceling)
expect(screen.getByTestId("primary-cta")).toHaveTextContent(
t("disabledButton.canceling", { ns: "workspacePage" }),
)
expect(screen.queryByTestId("secondary-ctas")).toBeNull()
})
})
describe("when the workspace is canceled", () => {
it("primary is start; secondary are stop, delete", async () => {
await renderAndClick({ workspace: Mocks.MockCanceledWorkspace })
expect(screen.getByTestId("primary-cta")).toHaveTextContent(Language.start)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(Language.stop)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(Language.delete)
expect(screen.getByTestId("primary-cta")).toHaveTextContent(
t("actionButton.start", { ns: "workspacePage" }),
)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(
t("actionButton.stop", { ns: "workspacePage" }),
)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(
t("actionButton.delete", { ns: "workspacePage" }),
)
})
})
describe("when the workspace is errored", () => {
it("primary is start; secondary is delete", async () => {
await renderAndClick({ workspace: Mocks.MockFailedWorkspace })
expect(screen.getByTestId("primary-cta")).toHaveTextContent(Language.start)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(Language.delete)
expect(screen.getByTestId("primary-cta")).toHaveTextContent(
t("actionButton.start", { ns: "workspacePage" }),
)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(
t("actionButton.delete", { ns: "workspacePage" }),
)
})
})
describe("when the workspace is deleting", () => {
it("primary is deleting; cancel is available; no secondary", async () => {
await renderComponent({ workspace: Mocks.MockDeletingWorkspace })
expect(screen.getByTestId("primary-cta")).toHaveTextContent(Language.deleting)
expect(screen.getByTestId("primary-cta")).toHaveTextContent(
t("actionButton.deleting", { ns: "workspacePage" }),
)
expect(
screen.getByRole("button", {
name: "cancel action",
Expand All @@ -104,16 +127,24 @@ describe("WorkspaceActions", () => {
describe("when the workspace is deleted", () => {
it("primary is deleted; no secondary", async () => {
await renderAndClick({ workspace: Mocks.MockDeletedWorkspace })
expect(screen.getByTestId("primary-cta")).toHaveTextContent(WorkspaceStateEnum.deleted)
expect(screen.getByTestId("primary-cta")).toHaveTextContent(
t("disabledButton.deleted", { ns: "workspacePage" }),
)
expect(screen.queryByTestId("secondary-ctas")).toBeNull()
})
})
describe("when the workspace is outdated", () => {
it("primary is update; secondary are start, delete", async () => {
await renderAndClick({ workspace: Mocks.MockOutdatedWorkspace })
expect(screen.getByTestId("primary-cta")).toHaveTextContent(Language.update)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(Language.start)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(Language.delete)
expect(screen.getByTestId("primary-cta")).toHaveTextContent(
t("actionButton.update", { ns: "workspacePage" }),
)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(
t("actionButton.start", { ns: "workspacePage" }),
)
expect(screen.getByTestId("secondary-ctas")).toHaveTextContent(
t("actionButton.delete", { ns: "workspacePage" }),
)
Copy link
Member

Choose a reason for hiding this comment

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

Thanks for doing all these translations!!!

})
})
})
8 changes: 4 additions & 4 deletions site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
MockDeletedWorkspace,
MockDeletingWorkspace,
MockFailedWorkspace,
MockQueuedWorkspace,
MockPendingWorkspace,
MockStartingWorkspace,
MockStoppedWorkspace,
MockStoppingWorkspace,
Expand Down Expand Up @@ -65,7 +65,7 @@ Failed.args = {
build: MockFailedWorkspace.latest_build,
}

export const Queued = Template.bind({})
Queued.args = {
build: MockQueuedWorkspace.latest_build,
export const Pending = Template.bind({})
Pending.args = {
build: MockPendingWorkspace.latest_build,
}
34 changes: 18 additions & 16 deletions site/src/pages/WorkspacePage/WorkspacePage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import i18next from "i18next"
import { rest } from "msw"
import * as api from "../../api/api"
import { Workspace } from "../../api/typesGenerated"
import { Language } from "../../components/DropdownButton/ActionCtas"
import {
MockBuilds,
MockCanceledWorkspace,
Expand All @@ -28,7 +27,7 @@ import {
renderWithAuth,
} from "../../testHelpers/renderHelpers"
import { server } from "../../testHelpers/server"
import { DisplayAgentStatusLanguage, DisplayStatusLanguage } from "../../util/workspace"
import { DisplayAgentStatusLanguage } from "../../util/workspace"
import { WorkspacePage } from "./WorkspacePage"

const { t } = i18next
Expand Down Expand Up @@ -94,7 +93,7 @@ describe("WorkspacePage", () => {
const stopWorkspaceMock = jest
.spyOn(api, "stopWorkspace")
.mockResolvedValueOnce(MockWorkspaceBuild)
testButton(Language.stop, stopWorkspaceMock)
testButton(t("actionButton.stop", { ns: "workspacePage" }), stopWorkspaceMock)
})

it("requests a delete job when the user presses Delete and confirms", async () => {
Expand All @@ -108,7 +107,8 @@ describe("WorkspacePage", () => {
const trigger = await screen.findByTestId("workspace-actions-button")
await user.click(trigger)

const button = await screen.findByText(Language.delete)
const buttonText = t("actionButton.delete", { ns: "workspacePage" })
const button = await screen.findByText(buttonText)
await user.click(button)

const labelText = t("deleteDialog.confirmLabel", { ns: "common", entity: "workspace" })
Expand All @@ -128,7 +128,7 @@ describe("WorkspacePage", () => {
const startWorkspaceMock = jest
.spyOn(api, "startWorkspace")
.mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
testButton(Language.start, startWorkspaceMock)
testButton(t("actionButton.start", { ns: "workspacePage" }), startWorkspaceMock)
})
it("requests cancellation when the user presses Cancel", async () => {
server.use(
Expand Down Expand Up @@ -159,7 +159,8 @@ describe("WorkspacePage", () => {
)

await renderWorkspacePage()
const button = await screen.findByText(Language.update, { exact: true })
const buttonText = t("actionButton.update", { ns: "workspacePage" })
const button = await screen.findByText(buttonText, { exact: true })
fireEvent.click(button)

// getTemplate is called twice: once when the machine starts, and once after the user requests to update
Expand All @@ -177,36 +178,37 @@ describe("WorkspacePage", () => {
}),
)
await renderWorkspacePage()
const button = await screen.findByText(Language.update, { exact: true })
const buttonText = t("actionButton.update", { ns: "workspacePage" })
const button = await screen.findByText(buttonText, { exact: true })
fireEvent.click(button)

await waitFor(() =>
expect(api.startWorkspace).toBeCalledWith("test-workspace", "test-template-version"),
)
})
it("shows the Stopping status when the workspace is stopping", async () => {
await testStatus(MockStoppingWorkspace, DisplayStatusLanguage.stopping)
await testStatus(MockStoppingWorkspace, t("workspaceStatus.stopping", { ns: "common" }))
})
it("shows the Stopped status when the workspace is stopped", async () => {
await testStatus(MockStoppedWorkspace, DisplayStatusLanguage.stopped)
await testStatus(MockStoppedWorkspace, t("workspaceStatus.stopped", { ns: "common" }))
})
it("shows the Building status when the workspace is starting", async () => {
await testStatus(MockStartingWorkspace, DisplayStatusLanguage.starting)
await testStatus(MockStartingWorkspace, t("workspaceStatus.starting", { ns: "common" }))
})
it("shows the Running status when the workspace is started", async () => {
await testStatus(MockWorkspace, DisplayStatusLanguage.started)
it("shows the Running status when the workspace is running", async () => {
await testStatus(MockWorkspace, t("workspaceStatus.running", { ns: "common" }))
})
it("shows the Failed status when the workspace is failed or canceled", async () => {
await testStatus(MockFailedWorkspace, DisplayStatusLanguage.failed)
await testStatus(MockFailedWorkspace, t("workspaceStatus.failed", { ns: "common" }))
})
it("shows the Canceling status when the workspace is canceling", async () => {
await testStatus(MockCancelingWorkspace, DisplayStatusLanguage.canceling)
await testStatus(MockCancelingWorkspace, t("workspaceStatus.canceling", { ns: "common" }))
})
it("shows the Canceled status when the workspace is canceling", async () => {
await testStatus(MockCanceledWorkspace, DisplayStatusLanguage.canceled)
await testStatus(MockCanceledWorkspace, t("workspaceStatus.canceled", { ns: "common" }))
})
it("shows the Deleting status when the workspace is deleting", async () => {
await testStatus(MockDeletingWorkspace, DisplayStatusLanguage.deleting)
await testStatus(MockDeletingWorkspace, t("workspaceStatus.deleting", { ns: "common" }))
})
it("shows the Deleted status when the workspace is deleted", async () => {
await testStatus(MockDeletedWorkspace, t("workspaceStatus.deleted", { ns: "common" }))
Expand Down
39 changes: 0 additions & 39 deletions site/src/util/workspace.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
defaultWorkspaceExtension,
getDisplayVersionStatus,
getDisplayWorkspaceBuildInitiatedBy,
isWorkspaceDeleted,
isWorkspaceOn,
} from "./workspace"

Expand Down Expand Up @@ -48,44 +47,6 @@ describe("util > workspace", () => {
})
})

describe("isWorkspaceDeleted", () => {
it.each<[TypesGen.WorkspaceTransition, TypesGen.ProvisionerJobStatus, boolean]>([
["delete", "canceled", false],
["delete", "canceling", false],
["delete", "failed", false],
["delete", "pending", false],
["delete", "running", false],
["delete", "succeeded", true],

["stop", "canceled", false],
["stop", "canceling", false],
["stop", "failed", false],
["stop", "pending", false],
["stop", "running", false],
["stop", "succeeded", false],

["start", "canceled", false],
["start", "canceling", false],
["start", "failed", false],
["start", "pending", false],
["start", "running", false],
["start", "succeeded", false],
])(`transition=%p, status=%p, isWorkspaceDeleted=%p`, (transition, status, isDeleted) => {
const workspace: TypesGen.Workspace = {
...Mocks.MockWorkspace,
latest_build: {
...Mocks.MockWorkspaceBuild,
job: {
...Mocks.MockProvisionerJob,
status,
},
transition,
},
}
expect(isWorkspaceDeleted(workspace)).toBe(isDeleted)
})
})

describe("defaultWorkspaceExtension", () => {
it.each<[string, TypesGen.PutExtendWorkspaceRequest]>([
[
Expand Down