May 16, 2022 · May 5, 2022 · May 5, 2022 · May 5, 2022 · May 6, 2022 · May 6, 2022
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
 import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
 import { WorkspaceSettingsPage } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"

 const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))

        </Route>

        <Route path="workspaces">
          <Route
            path=":workspace"
            element={
              <AuthAndFrame>
                <WorkspacePage />
              </AuthAndFrame>
            }
          />
          <Route path=":workspace">
            <Route
              index
              element={
                <AuthAndFrame>
                  <WorkspacePage />
                </AuthAndFrame>
              }
            />
            <Route
              path="edit"
              element={
                <AuthAndFrame>
                  <WorkspaceSettingsPage />
                </AuthAndFrame>
              }
            />
          </Route>
        </Route>

        <Route path="users">
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 import axios, { AxiosRequestHeaders } from "axios"
 import { mutate } from "swr"
 import { WorkspaceBuildTransition } from "./types"
 import * as TypesGen from "./typesGenerated"

 const CONTENT_TYPE_JSON: AxiosRequestHeaders = {
  return response.data
 }

 const postWorkspaceBuild =
  (transition: WorkspaceBuildTransition) =>
  async (workspaceId: string, template_version_id?: string): Promise<TypesGen.WorkspaceBuild> => {
    const payload = {
      transition,
      template_version_id,
    }
    const response = await axios.post(`/api/v2/workspaces/${workspaceId}/builds`, payload)
    return response.data
  }

 export const startWorkspace = postWorkspaceBuild("start")
 export const stopWorkspace = postWorkspaceBuild("stop")
 export const deleteWorkspace = postWorkspaceBuild("delete")

 export const createUser = async (user: TypesGen.CreateUserRequest): Promise<TypesGen.User> => {
  const response = await axios.post<TypesGen.User>("/api/v2/users", user)
  return response.data
diff --git a/site/src/api/types.ts b/site/src/api/types.ts
  readonly height?: number
  readonly width?: number
 }

 export type WorkspaceBuildTransition = "start" | "stop" | "delete"
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import React from "react"
 import { MockOrganization, MockTemplate, MockWorkspace } from "../../testHelpers/renderHelpers"
 import { MockOrganization,MockOutdatedWorkspace,MockTemplate, MockWorkspace } from "../../testHelpers/renderHelpers"
 import { Workspace, WorkspaceProps } from "./Workspace"

 export default {

 const Template: Story<WorkspaceProps> = (args) => <Workspace {...args} />

 export constExample = Template.bind({})
 Example.args = {
 export constStarted = Template.bind({})
 Started.args = {
  organization: MockOrganization,
  template: MockTemplate,
  workspace: MockWorkspace,
  handleStart: action("start"),
  handleStop: action("stop"),
  handleRetry: action("retry"),
  workspaceStatus: "started",
 }

 export const Starting = Template.bind({})
 Starting.args = { ...Started.args, workspaceStatus: "starting" }

 export const Stopped = Template.bind({})
 Stopped.args = { ...Started.args, workspaceStatus: "stopped" }

 export const Stopping = Template.bind({})
 Stopping.args = { ...Started.args, workspaceStatus: "stopping" }

 export const Error = Template.bind({})
 Error.args = { ...Started.args, workspaceStatus: "error" }

 export const BuildLoading = Template.bind({})
 BuildLoading.args = { ...Started.args, workspaceStatus: "loading" }

 export const Deleting = Template.bind({})
 Deleting.args = { ...Started.args, workspaceStatus: "deleting" }

 export const Deleted = Template.bind({})
 Deleted.args = { ...Started.args, workspaceStatus: "deleted" }

 export const Canceling = Template.bind({})
 Canceling.args = { ...Started.args, workspaceStatus: "canceling" }

 export const NoBreadcrumb = Template.bind({})
 NoBreadcrumb.args = { ...Started.args, template: undefined }

 export const Outdated = Template.bind({})
 Outdated.args = { ...Started.args, workspace: MockOutdatedWorkspace }
diff --git a/site/src/components/Workspace/Workspace.test.tsx b/site/src/components/Workspace/Workspace.test.tsx
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
 import Box from "@material-ui/core/Box"
 import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import CloudCircleIcon from "@material-ui/icons/CloudCircle"
 import React from "react"
 import { Link } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { WorkspaceStatus } from "../../pages/WorkspacePage/WorkspacePage"
 import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import* as Constants from "./constants"
 import{ WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"

 export interface WorkspaceProps {
  organization: TypesGen.Organization
  organization?: TypesGen.Organization
  workspace: TypesGen.Workspace
  template: TypesGen.Template
  template?: TypesGen.Template
  handleStart: () => void
  handleStop: () => void
  handleRetry: () => void
  handleUpdate: () => void
  workspaceStatus: WorkspaceStatus
 }

 /**
 * Workspace is the top-level component for viewing an individual workspace
 */
 export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, workspace }) => {
 export const Workspace: React.FC<WorkspaceProps> = ({
  organization,
  template,
  workspace,
  handleStart,
  handleStop,
  handleRetry,
  handleUpdate,
  workspaceStatus,
 }) => {
  const styles = useStyles()

  return (
    <div className={styles.root}>
      <div className={styles.vertical}>
        <WorkspaceHeader organization={organization} template={template} workspace={workspace} />
        <WorkspaceStatusBar
          organization={organization}
          template={template}
          workspace={workspace}
          handleStart={handleStart}
          handleStop={handleStop}
          handleRetry={handleRetry}
          handleUpdate={handleUpdate}
          workspaceStatus={workspaceStatus}
        />
        <div className={styles.horizontal}>
          <div className={styles.sidebarContainer}>
            <WorkspaceSection title="Applications">
  )
 }

 /**
 * Component for the header at the top of the workspace page
 */
 export const WorkspaceHeader: React.FC<WorkspaceProps> = ({ organization, template, workspace }) => {
  const styles = useStyles()

  const templateLink = `/templates/${organization.name}/${template.name}`

  return (
    <Paper elevation={0} className={styles.section}>
      <div className={styles.horizontal}>
        <WorkspaceHeroIcon />
        <div className={styles.vertical}>
          <Typography variant="h4">{workspace.name}</Typography>
          <Typography variant="body2" color="textSecondary">
            <Link to={templateLink}>{template.name}</Link>
          </Typography>
        </div>
      </div>
    </Paper>
  )
 }

 /**
 * Component to render the 'Hero Icon' in the header of a workspace
 */
 export const WorkspaceHeroIcon: React.FC = () => {
  return (
    <Box mr="1em">
      <CloudCircleIcon width={Constants.TitleIconSize} height={Constants.TitleIconSize} />
    </Box>
  )
 }

 /**
 * Temporary placeholder component until we have the sections implemented
 * Can be removed once the Workspace page has all the necessary sections
  )
 }

 export const useStyles = makeStyles((theme) => {
 export const useStyles = makeStyles(() => {
  return {
    root: {
      display: "flex",
      display: "flex",
      flexDirection: "column",
    },
    section: {
      border: `1px solid ${theme.palette.divider}`,
      borderRadius: Constants.CardRadius,
      padding: Constants.CardPadding,
      margin: theme.spacing(1),
    },
    sidebarContainer: {
      display: "flex",
      flexDirection: "column",
    timelineContainer: {
      flex: 1,
    },
    icon: {
      width: Constants.TitleIconSize,
      height: Constants.TitleIconSize,
    },
  }
 })
diff --git a/site/src/components/Workspace/constants.ts b/site/src/components/Workspace/constants.ts
diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
 import { CardPadding, CardRadius } from "../Workspace/constants"
 import { CardPadding, CardRadius } from "../../theme/constants"

 export interface WorkspaceSectionProps {
  title: string
  title?: string
 }

 export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, children }) => {
  const styles = useStyles()

  return (
    <Paper elevation={0} className={styles.root}>
      <div className={styles.headerContainer}>
        <div className={styles.header}>
          <Typography variant="h6">{title}</Typography>
      {title && (
        <div className={styles.headerContainer}>
          <div className={styles.header}>
            <Typography variant="h6">{title}</Typography>
          </div>
        </div>
 </div>
 )}

      <div className={styles.contents}>{children}</div>
    </Paper>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,6 +18,7 @@ import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
		import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
		import { UsersPage } from "./pages/UsersPage/UsersPage"
		import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
		import { WorkspaceSettingsPage } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"

		const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))

Expand DownExpand Up		@@ -75,14 +76,24 @@ export const AppRouter: React.FC = () => (
		</Route>

		<Route path="workspaces">
		<Route
		path=":workspace"
		element={
		<AuthAndFrame>
		<WorkspacePage />
		</AuthAndFrame>
		}
		/>
		<Route path=":workspace">
		<Route
		index
		element={
		<AuthAndFrame>
		<WorkspacePage />
		</AuthAndFrame>
		}
		/>
		<Route
		path="edit"
		element={
		<AuthAndFrame>
		<WorkspaceSettingsPage />
		</AuthAndFrame>
		}
		/>
		</Route>
		</Route>

		<Route path="users">
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		import axios, { AxiosRequestHeaders } from "axios"
		import { mutate } from "swr"
		import { WorkspaceBuildTransition } from "./types"
		import * as TypesGen from "./typesGenerated"

		const CONTENT_TYPE_JSON: AxiosRequestHeaders = {
Expand DownExpand Up		@@ -132,6 +133,21 @@ export const getWorkspaceResources = async (workspaceBuildID: string): Promise<T
		return response.data
		}

		const postWorkspaceBuild =
		(transition: WorkspaceBuildTransition) =>
		async (workspaceId: string, template_version_id?: string): Promise<TypesGen.WorkspaceBuild> => {
		const payload = {
		transition,
		template_version_id,
		}
		const response = await axios.post(`/api/v2/workspaces/${workspaceId}/builds`, payload)
		return response.data
		}

		export const startWorkspace = postWorkspaceBuild("start")
		export const stopWorkspace = postWorkspaceBuild("stop")
		export const deleteWorkspace = postWorkspaceBuild("delete")

		export const createUser = async (user: TypesGen.CreateUserRequest): Promise<TypesGen.User> => {
		const response = await axios.post<TypesGen.User>("/api/v2/users", user)
		return response.data
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,3 +10,5 @@ export interface ReconnectingPTYRequest {
		readonly height?: number
		readonly width?: number
		}

		export type WorkspaceBuildTransition = "start" \| "stop" \| "delete"
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,7 @@
		import { action } from "@storybook/addon-actions"
		import { Story } from "@storybook/react"
		import React from "react"
		import { MockOrganization, MockTemplate, MockWorkspace } from "../../testHelpers/renderHelpers"
		import { MockOrganization,MockOutdatedWorkspace,MockTemplate, MockWorkspace } from "../../testHelpers/renderHelpers"
		import { Workspace, WorkspaceProps } from "./Workspace"

		export default {
Expand All		@@ -11,9 +12,43 @@ export default {

		const Template: Story<WorkspaceProps> = (args) => <Workspace {...args} />

		export constExample = Template.bind({})
		Example.args = {
		export constStarted = Template.bind({})
		Started.args = {
		organization: MockOrganization,
		template: MockTemplate,
		workspace: MockWorkspace,
		handleStart: action("start"),
		handleStop: action("stop"),
		handleRetry: action("retry"),
		workspaceStatus: "started",
		}

		export const Starting = Template.bind({})
		Starting.args = { ...Started.args, workspaceStatus: "starting" }

		export const Stopped = Template.bind({})
		Stopped.args = { ...Started.args, workspaceStatus: "stopped" }

		export const Stopping = Template.bind({})
		Stopping.args = { ...Started.args, workspaceStatus: "stopping" }

		export const Error = Template.bind({})
		Error.args = { ...Started.args, workspaceStatus: "error" }

		export const BuildLoading = Template.bind({})
		BuildLoading.args = { ...Started.args, workspaceStatus: "loading" }

		export const Deleting = Template.bind({})
		Deleting.args = { ...Started.args, workspaceStatus: "deleting" }

		export const Deleted = Template.bind({})
		Deleted.args = { ...Started.args, workspaceStatus: "deleted" }

		export const Canceling = Template.bind({})
		Canceling.args = { ...Started.args, workspaceStatus: "canceling" }

		export const NoBreadcrumb = Template.bind({})
		NoBreadcrumb.args = { ...Started.args, template: undefined }

		export const Outdated = Template.bind({})
		Outdated.args = { ...Started.args, workspace: MockOutdatedWorkspace }
Original file line number	Diff line number	Diff line change
		@@ -1,31 +1,51 @@
		import Box from "@material-ui/core/Box"
		import Paper from "@material-ui/core/Paper"
		import { makeStyles } from "@material-ui/core/styles"
		import Typography from "@material-ui/core/Typography"
		import CloudCircleIcon from "@material-ui/icons/CloudCircle"
		import React from "react"
		import { Link } from "react-router-dom"
		import * as TypesGen from "../../api/typesGenerated"
		import { WorkspaceStatus } from "../../pages/WorkspacePage/WorkspacePage"
		import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
		import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
		import* as Constants from "./constants"
		import{ WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"

		export interface WorkspaceProps {
		organization: TypesGen.Organization
		organization?: TypesGen.Organization
		workspace: TypesGen.Workspace
		template: TypesGen.Template
		template?: TypesGen.Template
		handleStart: () => void
		handleStop: () => void
		handleRetry: () => void
		handleUpdate: () => void
		workspaceStatus: WorkspaceStatus
		}

		/**
		* Workspace is the top-level component for viewing an individual workspace
		*/
		export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, workspace }) => {
		export const Workspace: React.FC<WorkspaceProps> = ({
		organization,
		template,
		workspace,
		handleStart,
		handleStop,
		handleRetry,
		handleUpdate,
		workspaceStatus,
		}) => {
		const styles = useStyles()

		return (
		<div className={styles.root}>
		<div className={styles.vertical}>
		<WorkspaceHeader organization={organization} template={template} workspace={workspace} />
		<WorkspaceStatusBar
		organization={organization}
		template={template}
		workspace={workspace}
		handleStart={handleStart}
		handleStop={handleStop}
		handleRetry={handleRetry}
		handleUpdate={handleUpdate}
		workspaceStatus={workspaceStatus}
		/>
		<div className={styles.horizontal}>
		<div className={styles.sidebarContainer}>
		<WorkspaceSection title="Applications">
Expand DownExpand Up		@@ -55,40 +75,6 @@ export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, wo
		)
		}

		/**
		* Component for the header at the top of the workspace page
		*/
		export const WorkspaceHeader: React.FC<WorkspaceProps> = ({ organization, template, workspace }) => {
		const styles = useStyles()

		const templateLink = `/templates/${organization.name}/${template.name}`

		return (
		<Paper elevation={0} className={styles.section}>
		<div className={styles.horizontal}>
		<WorkspaceHeroIcon />
		<div className={styles.vertical}>
		<Typography variant="h4">{workspace.name}</Typography>
		<Typography variant="body2" color="textSecondary">
		<Link to={templateLink}>{template.name}</Link>
		</Typography>
		</div>
		</div>
		</Paper>
		)
		}

		/**
		* Component to render the 'Hero Icon' in the header of a workspace
		*/
		export const WorkspaceHeroIcon: React.FC = () => {
		return (
		<Box mr="1em">
		<CloudCircleIcon width={Constants.TitleIconSize} height={Constants.TitleIconSize} />
		</Box>
		)
		}

		/**
		* Temporary placeholder component until we have the sections implemented
		* Can be removed once the Workspace page has all the necessary sections
Expand All		@@ -101,7 +87,7 @@ const Placeholder: React.FC = () => {
		)
		}

		export const useStyles = makeStyles((theme) => {
		export const useStyles = makeStyles(() => {
		return {
		root: {
		display: "flex",
Expand All		@@ -115,12 +101,6 @@ export const useStyles = makeStyles((theme) => {
		display: "flex",
		flexDirection: "column",
		},
		section: {
		border: `1px solid ${theme.palette.divider}`,
		borderRadius: Constants.CardRadius,
		padding: Constants.CardPadding,
		margin: theme.spacing(1),
		},
		sidebarContainer: {
		display: "flex",
		flexDirection: "column",
Expand All		@@ -129,9 +109,5 @@ export const useStyles = makeStyles((theme) => {
		timelineContainer: {
		flex: 1,
		},
		icon: {
		width: Constants.TitleIconSize,
		height: Constants.TitleIconSize,
		},
		}
		})
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,22 +2,24 @@ import Paper from "@material-ui/core/Paper"
		import { makeStyles } from "@material-ui/core/styles"
		import Typography from "@material-ui/core/Typography"
		import React from "react"
		import { CardPadding, CardRadius } from "../Workspace/constants"
		import { CardPadding, CardRadius } from "../../theme/constants"

		export interface WorkspaceSectionProps {
		title: string
		title?: string
		}

		export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, children }) => {
		const styles = useStyles()

		return (
		<Paper elevation={0} className={styles.root}>
		<div className={styles.headerContainer}>
		<div className={styles.header}>
		<Typography variant="h6">{title}</Typography>
		{title && (
		<div className={styles.headerContainer}>
		<div className={styles.header}>
		<Typography variant="h6">{title}</Typography>
		</div>
		</div>
		</div>
		)}

		<div className={styles.contents}>{children}</div>
		</Paper>
Expand Down