feat: Redesign workspaces page (#1450)

* feat: Improve navbar to be more compact

The navbar was unnecessarily large before, which made
the UI feel a bit bloaty from my perspective.

* Attempt to remove overrides

* Update theme

* Add text field

* Update theme to dark!

* Fix import ordering

* Fix page location

* Fix requested changes

* Add storybook for workspaces page view

* Add empty view

* Add tests for empty view

* Remove templates page

* Fix local port

* Remove templates from nav

* Fix e2e test

* Remove time.ts

* Remove dep

* Add background color to margins

* Merge status checking from workspace page

* Fix requested changes

* Fix workspace status tests
This commit is contained in:
Kyle Carberry
2022-05-16 16:52:54 -05:00
committed by GitHub
parent e925818526
commit 22ec366535
53 changed files with 626 additions and 1743 deletions

View File

@ -5,9 +5,9 @@ import Typography from "@material-ui/core/Typography"
import React from "react"
import { Link } from "react-router-dom"
import * as TypesGen from "../../api/typesGenerated"
import { WorkspaceStatus } from "../../pages/WorkspacePage/WorkspacePage"
import { TitleIconSize } from "../../theme/constants"
import { combineClasses } from "../../util/combineClasses"
import { WorkspaceStatus } from "../../util/workspace"
import { Stack } from "../Stack/Stack"
import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
@ -21,6 +21,8 @@ export const Language = {
stopped: "Stopped",
starting: "Building",
stopping: "Stopping",
canceled: "Canceled",
queued: "Queued",
error: "Build Failed",
loading: "Loading Status",
deleting: "Deleting",
@ -46,14 +48,12 @@ export interface WorkspaceStatusBarProps {
* so check whether workspace job status has reached completion (whether successful or not).
*/
const canAcceptJobs = (workspaceStatus: WorkspaceStatus) =>
["started", "stopped", "deleted", "error"].includes(workspaceStatus)
["started", "stopped", "deleted", "error", "canceled"].includes(workspaceStatus)
/**
* Component for the header at the top of the workspace page
*/
export const WorkspaceStatusBar: React.FC<WorkspaceStatusBarProps> = ({
organization,
template,
workspace,
handleStart,
handleStop,
@ -63,7 +63,6 @@ export const WorkspaceStatusBar: React.FC<WorkspaceStatusBarProps> = ({
}) => {
const styles = useStyles()
const templateLink = `/templates/${organization?.name}/${template?.name}`
const settingsLink = "edit"
return (
@ -75,15 +74,6 @@ export const WorkspaceStatusBar: React.FC<WorkspaceStatusBarProps> = ({
{Language.settings}
</Link>
</div>
{organization && template && (
<Typography variant="body2" color="textSecondary">
Back to{" "}
<Link className={styles.link} to={templateLink}>
{template.name}
</Link>
</Typography>
)}
</div>
<div className={styles.horizontal}>