Skip to content

feat: Redesign the workspace page #1620

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 7 commits into from
May 20, 2022
Merged

feat: Redesign the workspace page #1620

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e70fce6
Refactor workspace page
BrunoQuaresma May 20, 2022
90a2c6c
Add missing stories
BrunoQuaresma May 20, 2022
56516ef
Fix tests
BrunoQuaresma May 20, 2022
81eb20e
Remove unused CSS role
BrunoQuaresma May 20, 2022
6df8903
Add status role
BrunoQuaresma May 20, 2022
550a92e
Merge branch 'main' of github.com:coder/coder into bq/1581-refactor-w…
BrunoQuaresma May 20, 2022
4821acc
Update site/src/components/Workspace/Workspace.tsx
BrunoQuaresma May 20, 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
Fix tests
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed May 20, 2022
commit 56516ef22cd62e6d7de3cb25f9df2d99dc7e7023
23 changes: 12 additions & 11 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 @@ -3,7 +3,7 @@ import { rest } from "msw"
import React from "react"
import * as api from "../../api/api"
import { Workspace } from "../../api/typesGenerated"
import { Language } from "../../components/WorkspaceStatusBar/WorkspaceStatusBar"
import { Language } from "../../components/WorkspaceActions/WorkspaceActions"
import {
MockBuilds,
MockCancelingWorkspace,
Expand All @@ -20,6 +20,7 @@ import {
renderWithAuth,
} from "../../testHelpers/renderHelpers"
import { server } from "../../testHelpers/server"
import { DisplayStatusLanguage } from "../../util/workspace"
import { WorkspacePage } from "./WorkspacePage"

// It renders the workspace page and waits for it be loaded
Expand Down Expand Up @@ -133,28 +134,28 @@ describe("Workspace Page", () => {
await testButton(Language.update, getTemplateMock)
})
it("shows the Stopping status when the workspace is stopping", async () => {
await testStatus(MockStoppingWorkspace, Language.stopping)
await testStatus(MockStoppingWorkspace, DisplayStatusLanguage.stopping)
})
it("shows the Stopped status when the workspace is stopped", async () => {
await testStatus(MockStoppedWorkspace, Language.stopped)
await testStatus(MockStoppedWorkspace, DisplayStatusLanguage.stopped)
})
it("shows the Building status when the workspace is starting", async () => {
await testStatus(MockStartingWorkspace, Language.starting)
await testStatus(MockStartingWorkspace, DisplayStatusLanguage.starting)
})
it("shows the Running status when the workspace is started", async () => {
await testStatus(MockWorkspace, Language.started)
await testStatus(MockWorkspace, DisplayStatusLanguage.started)
})
it("shows the Error status when the workspace is failed or canceled", async () => {
await testStatus(MockFailedWorkspace, Language.error)
it("shows the Failed status when the workspace is failed or canceled", async () => {
await testStatus(MockFailedWorkspace, DisplayStatusLanguage.failed)
})
it("shows the Loading status when the workspace is canceling", async () => {
await testStatus(MockCancelingWorkspace, Language.canceling)
it("shows the Canceling status when the workspace is canceling", async () => {
await testStatus(MockCancelingWorkspace, DisplayStatusLanguage.canceling)
})
it("shows the Deleting status when the workspace is deleting", async () => {
await testStatus(MockDeletingWorkspace, Language.deleting)
await testStatus(MockDeletingWorkspace, DisplayStatusLanguage.deleting)
})
it("shows the Deleted status when the workspace is deleted", async () => {
await testStatus(MockDeletedWorkspace, Language.deleted)
await testStatus(MockDeletedWorkspace, DisplayStatusLanguage.deleted)
})
it("shows the timeline build", async () => {
await renderWorkspacePage()
Expand Down
36 changes: 25 additions & 11 deletions site/src/util/workspace.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,20 @@ export const getWorkspaceStatus = (workspaceBuild?: WorkspaceBuild): WorkspaceSt
}
}

export const DisplayStatusLanguage = {
loading: "Loading...",
started: "Running",
starting: "Starting",
stopping: "Stopping",
stopped: "Stopped",
deleting: "Deleting",
deleted: "Deleted",
canceling: "Canceling",
canceled: "Canceled",
failed: "Failed",
queued: "Queued",
}

export const getDisplayStatus = (
theme: Theme,
build: WorkspaceBuild,
Expand All @@ -62,57 +76,57 @@ export const getDisplayStatus = (
case undefined:
return {
color: theme.palette.text.secondary,
status: "Loading...",
status: DisplayStatusLanguage.loading,
}
case "started":
return {
color: theme.palette.success.main,
status: "⦿ Running",
status: `⦿ ${DisplayStatusLanguage.started}`,
}
case "starting":
return {
color: theme.palette.success.main,
status: "⦿ Starting",
status: `⦿ ${DisplayStatusLanguage.starting}`,
}
case "stopping":
return {
color: theme.palette.text.secondary,
status: "◍ Stopping",
status: `◍ ${DisplayStatusLanguage.stopping}`,
}
case "stopped":
return {
color: theme.palette.text.secondary,
status: "◍ Stopped",
status: `◍ ${DisplayStatusLanguage.stopped}`,
}
case "deleting":
return {
color: theme.palette.text.secondary,
status: "⦸ Deleting",
status: `⦸ ${DisplayStatusLanguage.deleting}`,
}
case "deleted":
return {
color: theme.palette.text.secondary,
status: "⦸ Deleted",
status: `⦸ ${DisplayStatusLanguage.deleted}`,
}
case "canceling":
return {
color: theme.palette.warning.light,
status: "◍ Canceling",
status: `◍ ${DisplayStatusLanguage.canceling}`,
}
case "canceled":
return {
color: theme.palette.text.secondary,
status: "◍ Canceled",
status: `◍ ${DisplayStatusLanguage.canceled}`,
}
case "error":
return {
color: theme.palette.error.main,
status: "ⓧ Failed",
status: `ⓧ ${DisplayStatusLanguage.failed}`,
}
case "queued":
return {
color: theme.palette.text.secondary,
status: "◍ Queued",
status: `◍ ${DisplayStatusLanguage.queued}`,
}
}
throw new Error("unknown status " + status)
Expand Down