Jun 1, 2022 · May 31, 2022 · May 31, 2022 · May 31, 2022 · May 31, 2022 · May 31, 2022
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
 import{makeStyles}from"@material-ui/core/styles"
 import{FC}from"react"
 import{MONOSPACE_FONT_FAMILY}from"../../theme/constants"
 import{combineClasses}from"../../util/combineClasses"
 import{CopyButton}from"../CopyButton/CopyButton"

 exportinterfaceCodeExampleProps{
 code:string
 className?:string
 buttonClassName?:string
 }

 /**
 * Component to show single-line code examples, with a copy button
 */
 exportconstCodeExample:FC<CodeExampleProps>=({ code})=>{
 exportconstCodeExample:FC<CodeExampleProps>=({ code, className, buttonClassName})=>{
 conststyles=useStyles()

 return(
 <divclassName={styles.root}>
 <code>{code}</code>
 <CopyButtontext={code}/>
 <divclassName={combineClasses([styles.root,className])}>
 <codeclassName={styles.code}>{code}</code>
 <CopyButtontext={code}buttonClassName={combineClasses([styles.button,buttonClassName])}/>
 </div>
 )
 }
 background:theme.palette.background.default,
 color:theme.palette.primary.contrastText,
 fontFamily:MONOSPACE_FONT_FAMILY,
 fontSize:13,
 padding:theme.spacing(2),
 fontSize:14,
 borderRadius:theme.shape.borderRadius,
 padding:theme.spacing(0.5),
 },
 code:{
 padding:`${theme.spacing(0.5)}px${theme.spacing(0.75)}px${theme.spacing(0.5)}px${theme.spacing(2)}px`,
 },
 button:{
 border:0,
 minWidth:42,
 minHeight:42,
 borderRadius:theme.shape.borderRadius,
 },
 }))
diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import { FC, ReactNode } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"

 export interface EmptyStateProps {
  /** Text Message to display, placed inside Typography component */
  message: string
  /** Longer optional description to display below the message */
  description?: string
  description?: string | React.ReactNode
  descriptionClassName?: string
  cta?: ReactNode
  className?: string
 }

 /**
 * that you can directly pass props through to to customize the shape and layout of it.
 */
 export const EmptyState: FC<EmptyStateProps> = (props) => {
  const { message, description, cta, ...boxProps } = props
  const { message, description, cta,descriptionClassName, className,...boxProps } = props
  const styles = useStyles()

  return (
    <Box className={styles.root} {...boxProps}>
    <Box className={combineClasses([styles.root, className])} {...boxProps}>
      <div className={styles.header}>
        <Typography variant="h5" className={styles.title}>
          {message}
        </Typography>
        {description && (
          <Typography variant="body2" color="textSecondary" className={styles.description}>
          <Typography
            variant="body2"
            color="textSecondary"
            className={combineClasses([styles.description, descriptionClassName])}
          >
            {description}
          </Typography>
        )}
      justifyContent: "center",
      alignItems: "center",
      textAlign: "center",
      minHeight:120,
      minHeight:300,
      padding: theme.spacing(3),
      fontFamily: MONOSPACE_FONT_FAMILY,
    },
    header: {
      marginBottom: theme.spacing(3),
    },
    title: {
      fontWeight: 400,
      fontWeight: 600,
      fontFamily: "inherit",
    },
    description: {
      marginTop: theme.spacing(1),
      fontFamily: "inherit",
    },
  }),
  { name: "EmptyState" },
diff --git a/site/src/components/Footer/Footer.tsx b/site/src/components/Footer/Footer.tsx
      </div>
      {buildInfoState.context.buildInfo && (
        <div className={styles.buildInfo}>
          <Link variant="caption" target="_blank" href={buildInfoState.context.buildInfo.external_url}>
          <Link
            className={styles.link}
            variant="caption"
            target="_blank"
            href={buildInfoState.context.buildInfo.external_url}
          >
            {Language.buildInfoText(buildInfoState.context.buildInfo)}
          </Link>
        </div>

 const useFooterStyles = makeStyles((theme) => ({
  root: {
    opacity: 0.6,
    textAlign: "center",
    flex: "0",
    paddingTop: theme.spacing(2),
  buildInfo: {
    margin: theme.spacing(0.25),
  },
  link: {
    color: theme.palette.text.secondary,
    fontWeight: 600,
  },
 }))
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx

 const Template: Story<CreateWorkspacePageViewProps> = (args) => <CreateWorkspacePageView {...args} />

 export const NoTemplates = Template.bind({})
 NoTemplates.args = {
  templates: [],
 }

 export const NoParameters = Template.bind({})
 NoParameters.args = {
  templates: [MockTemplate],
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
 import { Link as RouterLink } from "react-router-dom"
 import * as Yup from "yup"
 import * as TypesGen from "../../api/typesGenerated"
 import { CodeExample } from "../../components/CodeExample/CodeExample"
 import { EmptyState } from "../../components/EmptyState/EmptyState"
 import { FormFooter } from "../../components/FormFooter/FormFooter"
 import { FullPageForm } from "../../components/FullPageForm/FullPageForm"
 import { Loader } from "../../components/Loader/Loader"
 export const Language = {
  templateLabel: "Template",
  nameLabel: "Name",
  emptyMessage: "Let's create your first template",
  emptyDescription: (
    <>
      To create a workspace you need to have a template. You can{" "}
      <Link target="_blank" href="https://github.com/coder/coder/blob/main/docs/templates.md">
        create one from scratch
      </Link>{" "}
      or use a built-in template by typing the following Coder CLI command:
    </>
  ),
  templateLink: "Read more about this template",
 }

 export interface CreateWorkspacePageViewProps {
        {props.loadingTemplates && <Loader />}

        <Stack>
          {props.templates && (
          {props.templates && props.templates.length === 0 && (
            <EmptyState
              className={styles.emptyState}
              message={Language.emptyMessage}
              description={Language.emptyDescription}
              descriptionClassName={styles.emptyStateDescription}
              cta={
                <CodeExample className={styles.code} buttonClassName={styles.codeButton} code="coder template init" />
              }
            />
          )}
          {props.templates && props.templates.length > 0 && (
            <TextField
              {...getFieldHelpers("template_id")}
              disabled={form.isSubmitting}
                    to={`/templates/${selectedTemplate.name}`}
                    target="_blank"
                  >
 Read more about this template <OpenInNewIcon />
 {Language.templateLink} <OpenInNewIcon />
                  </Link>
                )
              }
      marginLeft: theme.spacing(0.5),
    },
  },
  emptyState: {
    padding: 0,
    fontFamily: "inherit",
    textAlign: "left",
    minHeight: "auto",
    alignItems: "flex-start",
  },
  emptyStateDescription: {
    lineHeight: "160%",
  },
  code: {
    background: theme.palette.background.paper,
    width: "100%",
  },
  codeButton: {
    background: theme.palette.background.paper,
  },
 }))
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx
    render(<TemplatesPage />)

    // Then
    await screen.findByText(Language.emptyViewCreate)
    await screen.findByText(Language.emptyMessage)
  })

  it("renders a filled templates page", async () => {
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { AvatarData } from "../../components/AvatarData/AvatarData"
 import { CodeExample } from "../../components/CodeExample/CodeExample"
 import { EmptyState } from "../../components/EmptyState/EmptyState"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { TableLoader } from "../../components/TableLoader/TableLoader"
  nameLabel: "Name",
  usedByLabel: "Used by",
  lastUpdatedLabel: "Last updated",
  emptyViewCreateCTA: "Create a template",
  emptyViewCreate: "to standardize development workspaces for your team.",
  emptyViewNoPerms: "No templates have been created! Contact your Coder administrator.",
  emptyViewNoPerms: "Contact your Coder administrator to create a template. You can share the code below.",
  emptyMessage: "Create your first template",
  emptyDescription: (
    <>
      To create a workspace you need to have a template. You can{" "}
      <Link target="_blank" href="https://github.com/coder/coder/blob/main/docs/templates.md">
        create one from scratch
      </Link>{" "}
      or use a built-in template using the following Coder CLI command:
    </>
  ),
 }

 export interface TemplatesPageViewProps {
            {!props.loading && !props.templates?.length && (
              <TableRow>
                <TableCell colSpan={999}>
                  <div className={styles.welcome}>
                    {props.canCreateTemplate ? (
                      <span>
                        <Link component={RouterLink} to="/templates/new">
                          {Language.emptyViewCreateCTA}
                        </Link>
                        &nbsp;{Language.emptyViewCreate}
                      </span>
                    ) : (
                      <span>{Language.emptyViewNoPerms}</span>
                    )}
                  </div>
                  <EmptyState
                    message={Language.emptyMessage}
                    description={props.canCreateTemplate ? Language.emptyDescription : Language.emptyViewNoPerms}
                    descriptionClassName={styles.emptyDescription}
                    cta={<CodeExample code="coder template init" />}
                  />
                </TableCell>
              </TableRow>
            )}

 const useStyles = makeStyles((theme) => ({
  root: {
    marginTop: theme.spacing(3),
    marginTop: theme.spacing(10),
  },
  welcome: {
    paddingTop: theme.spacing(12),
    paddingBottom: theme.spacing(12),
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    "& span": {
      maxWidth: 600,
      textAlign: "center",
      fontSize: theme.spacing(2),
      lineHeight: `${theme.spacing(3)}px`,
    },
  emptyDescription: {
    maxWidth: theme.spacing(62),
  },
 }))
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
    render(<WorkspacesPage />)

    // Then
    await screen.findByText(Language.emptyView)
    await screen.findByText(Language.emptyMessage)
  })

  it("renders a filled workspaces page", async () => {
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
 import { ComponentMeta, Story } from "@storybook/react"
 import { ProvisionerJobStatus, Workspace } from "../../api/typesGenerated"
 import { ProvisionerJobStatus, Workspace, WorkspaceTransition } from "../../api/typesGenerated"
 import { MockWorkspace } from "../../testHelpers/entities"
 import { WorkspacesPageView, WorkspacesPageViewProps } from "./WorkspacesPageView"


 const Template: Story<WorkspacesPageViewProps> = (args) => <WorkspacesPageView {...args} />

 const createWorkspaceWithStatus = (status: ProvisionerJobStatus, transition = "start"): Workspace => {
 const createWorkspaceWithStatus = (
  status: ProvisionerJobStatus,
  transition: WorkspaceTransition = "start",
 ): Workspace => {
  return {
    ...MockWorkspace,
    latest_build: {
 }

 export const Empty = Template.bind({})
 Empty.args = {}
 Empty.args = {
  workspaces: [],
 }
Original file line number	Diff line number	Diff line change
		@@ -1,22 +1,25 @@
		import{makeStyles}from"@material-ui/core/styles"
		import{FC}from"react"
		import{MONOSPACE_FONT_FAMILY}from"../../theme/constants"
		import{combineClasses}from"../../util/combineClasses"
BrunoQuaresma marked this conversation as resolved. Show resolvedHide resolved
		import{CopyButton}from"../CopyButton/CopyButton"

		exportinterfaceCodeExampleProps{
		code:string
		className?:string
		buttonClassName?:string
Comment on lines +9 to +10 Copy link Contributor greyscaledJun 1, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Thought: One thing to consider here is mimicking MUIs API. These use a`classes` object, so it would look like this: `<CodeExample classes={{ root: ..., button: ..., }} />` I'm adding this as athought because it's not required to do anything now, just wanted to pose the question. Might make sense as a FE V topic. BrunoQuaresma reacted with thumbs up emoji Copy link CollaboratorAuthor BrunoQuaresmaJun 1, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I agree with you, but I see some components are already using the pattern`elementClassName` so I just keep it for consistency but IMO, we should try to use the`classes` prop to keep parity with MUIs API.
		}

		/**
		* Component to show single-line code examples, with a copy button
		*/
		exportconstCodeExample:FC<CodeExampleProps>=({ code})=>{
		exportconstCodeExample:FC<CodeExampleProps>=({ code, className, buttonClassName})=>{
		conststyles=useStyles()

		return(
		<divclassName={styles.root}>
		<code>{code}</code>
		<CopyButtontext={code}/>
		<divclassName={combineClasses([styles.root,className])}>
		<codeclassName={styles.code}>{code}</code>
		<CopyButtontext={code}buttonClassName={combineClasses([styles.button,buttonClassName])}/>
		</div>
		)
		}
Expand All		@@ -30,8 +33,17 @@ const useStyles = makeStyles((theme) => ({
		background:theme.palette.background.default,
		color:theme.palette.primary.contrastText,
		fontFamily:MONOSPACE_FONT_FAMILY,
		fontSize:13,
		padding:theme.spacing(2),
		fontSize:14,
		borderRadius:theme.shape.borderRadius,
		padding:theme.spacing(0.5),
		},
		code:{
		padding:`${theme.spacing(0.5)}px${theme.spacing(0.75)}px${theme.spacing(0.5)}px${theme.spacing(2)}px`,
		},
		button:{
		border:0,
		minWidth:42,
		minHeight:42,
		borderRadius:theme.shape.borderRadius,
		},
		}))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,13 +2,17 @@ import Box from "@material-ui/core/Box"
		import { makeStyles } from "@material-ui/core/styles"
		import Typography from "@material-ui/core/Typography"
		import { FC, ReactNode } from "react"
		import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
		import { combineClasses } from "../../util/combineClasses"

		export interface EmptyStateProps {
		/** Text Message to display, placed inside Typography component */
		message: string
		/** Longer optional description to display below the message */
		description?: string
		description?: string \| React.ReactNode
		descriptionClassName?: string
		cta?: ReactNode
		className?: string
		}

		/**
Expand All		@@ -20,17 +24,21 @@ export interface EmptyStateProps {
		* that you can directly pass props through to to customize the shape and layout of it.
		*/
		export const EmptyState: FC<EmptyStateProps> = (props) => {
		const { message, description, cta, ...boxProps } = props
		const { message, description, cta,descriptionClassName, className,...boxProps } = props
		const styles = useStyles()

		return (
		<Box className={styles.root} {...boxProps}>
		<Box className={combineClasses([styles.root, className])} {...boxProps}>
		<div className={styles.header}>
		<Typography variant="h5" className={styles.title}>
		{message}
		</Typography>
		{description && (
		<Typography variant="body2" color="textSecondary" className={styles.description}>
		<Typography
		variant="body2"
		color="textSecondary"
		className={combineClasses([styles.description, descriptionClassName])}
		>
		{description}
		</Typography>
		)}
Expand All		@@ -48,17 +56,20 @@ const useStyles = makeStyles(
		justifyContent: "center",
		alignItems: "center",
		textAlign: "center",
		minHeight:120,
		minHeight:300,
		padding: theme.spacing(3),
		fontFamily: MONOSPACE_FONT_FAMILY,
		},
		header: {
		marginBottom: theme.spacing(3),
		},
		title: {
		fontWeight: 400,
		fontWeight: 600,
		fontFamily: "inherit",
		},
		description: {
		marginTop: theme.spacing(1),
		fontFamily: "inherit",
		},
		}),
		{ name: "EmptyState" },
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -27,7 +27,12 @@ export const Footer: React.FC = ({ children }) => {
		</div>
		{buildInfoState.context.buildInfo && (
		<div className={styles.buildInfo}>
		<Link variant="caption" target="_blank" href={buildInfoState.context.buildInfo.external_url}>
		<Link
		className={styles.link}
		variant="caption"
		target="_blank"
		href={buildInfoState.context.buildInfo.external_url}
		>
		{Language.buildInfoText(buildInfoState.context.buildInfo)}
		</Link>
		</div>
Expand All		@@ -38,6 +43,7 @@ export const Footer: React.FC = ({ children }) => {

		const useFooterStyles = makeStyles((theme) => ({
		root: {
		opacity: 0.6,
		textAlign: "center",
		flex: "0",
		paddingTop: theme.spacing(2),
Expand All		@@ -50,4 +56,8 @@ const useFooterStyles = makeStyles((theme) => ({
		buildInfo: {
		margin: theme.spacing(0.25),
		},
		link: {
		color: theme.palette.text.secondary,
		fontWeight: 600,
		},
		}))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -33,6 +33,11 @@ export default {

		const Template: Story<CreateWorkspacePageViewProps> = (args) => <CreateWorkspacePageView {...args} />

		export const NoTemplates = Template.bind({})
		NoTemplates.args = {
		templates: [],
		}

		export const NoParameters = Template.bind({})
		NoParameters.args = {
		templates: [MockTemplate],
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,6 +8,8 @@ import { FC, useState } from "react"
		import { Link as RouterLink } from "react-router-dom"
		import * as Yup from "yup"
		import * as TypesGen from "../../api/typesGenerated"
		import { CodeExample } from "../../components/CodeExample/CodeExample"
		import { EmptyState } from "../../components/EmptyState/EmptyState"
		import { FormFooter } from "../../components/FormFooter/FormFooter"
		import { FullPageForm } from "../../components/FullPageForm/FullPageForm"
		import { Loader } from "../../components/Loader/Loader"
Expand All		@@ -18,6 +20,17 @@ import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formU
		export const Language = {
		templateLabel: "Template",
		nameLabel: "Name",
		emptyMessage: "Let's create your first template",
		emptyDescription: (
		<>
		To create a workspace you need to have a template. You can{" "}
		<Link target="_blank" href="https://github.com/coder/coder/blob/main/docs/templates.md">
		create one from scratch
		</Link>{" "}
		or use a built-in template by typing the following Coder CLI command:
		</>
BrunoQuaresma marked this conversation as resolved. Show resolvedHide resolved
		),
		templateLink: "Read more about this template",
		}

		export interface CreateWorkspacePageViewProps {
Expand DownExpand Up		@@ -98,7 +111,18 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props)
		{props.loadingTemplates && <Loader />}

		<Stack>
		{props.templates && (
		{props.templates && props.templates.length === 0 && (
		<EmptyState
		className={styles.emptyState}
		message={Language.emptyMessage}
		description={Language.emptyDescription}
		descriptionClassName={styles.emptyStateDescription}
		cta={
		<CodeExample className={styles.code} buttonClassName={styles.codeButton} code="coder template init" />
BrunoQuaresma marked this conversation as resolved. Show resolvedHide resolved
		}
		/>
		)}
		{props.templates && props.templates.length > 0 && (
		<TextField
		{...getFieldHelpers("template_id")}
		disabled={form.isSubmitting}
Expand All		@@ -116,7 +140,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props)
		to={`/templates/${selectedTemplate.name}`}
		target="_blank"
		>
		Read more about this template <OpenInNewIcon />
		{Language.templateLink} <OpenInNewIcon />
		</Link>
		)
		}
Expand DownExpand Up		@@ -179,4 +203,21 @@ const useStyles = makeStyles((theme) => ({
		marginLeft: theme.spacing(0.5),
		},
		},
		emptyState: {
		padding: 0,
		fontFamily: "inherit",
		textAlign: "left",
		minHeight: "auto",
		alignItems: "flex-start",
		},
		emptyStateDescription: {
		lineHeight: "160%",
		},
		code: {
		background: theme.palette.background.paper,
		width: "100%",
		},
		codeButton: {
		background: theme.palette.background.paper,
		},
		}))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,7 +31,7 @@ describe("TemplatesPage", () => {
		render(<TemplatesPage />)

		// Then
		await screen.findByText(Language.emptyViewCreate)
		await screen.findByText(Language.emptyMessage)
		})

		it("renders a filled templates page", async () => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,9 +8,10 @@ import TableRow from "@material-ui/core/TableRow"
		import dayjs from "dayjs"
		import relativeTime from "dayjs/plugin/relativeTime"
		import { FC } from "react"
		import { Link as RouterLink } from "react-router-dom"
		import * as TypesGen from "../../api/typesGenerated"
		import { AvatarData } from "../../components/AvatarData/AvatarData"
		import { CodeExample } from "../../components/CodeExample/CodeExample"
		import { EmptyState } from "../../components/EmptyState/EmptyState"
		import { Margins } from "../../components/Margins/Margins"
		import { Stack } from "../../components/Stack/Stack"
		import { TableLoader } from "../../components/TableLoader/TableLoader"
Expand All		@@ -24,9 +25,17 @@ export const Language = {
		nameLabel: "Name",
		usedByLabel: "Used by",
		lastUpdatedLabel: "Last updated",
		emptyViewCreateCTA: "Create a template",
		emptyViewCreate: "to standardize development workspaces for your team.",
		emptyViewNoPerms: "No templates have been created! Contact your Coder administrator.",
		emptyViewNoPerms: "Contact your Coder administrator to create a template. You can share the code below.",
		emptyMessage: "Create your first template",
		emptyDescription: (
		<>
		To create a workspace you need to have a template. You can{" "}
		<Link target="_blank" href="https://github.com/coder/coder/blob/main/docs/templates.md">
		create one from scratch
		</Link>{" "}
		or use a built-in template using the following Coder CLI command:
		</>
		),
		}

		export interface TemplatesPageViewProps {
Expand All		@@ -53,18 +62,12 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
		{!props.loading && !props.templates?.length && (
		<TableRow>
		<TableCell colSpan={999}>
		<div className={styles.welcome}>
		{props.canCreateTemplate ? (
		<span>
		<Link component={RouterLink} to="/templates/new">
		{Language.emptyViewCreateCTA}
		</Link>
		{Language.emptyViewCreate}
		</span>
		) : (
		<span>{Language.emptyViewNoPerms}</span>
		)}
		</div>
		<EmptyState
		message={Language.emptyMessage}
		description={props.canCreateTemplate ? Language.emptyDescription : Language.emptyViewNoPerms}
		descriptionClassName={styles.emptyDescription}
		cta={<CodeExample code="coder template init" />}
		/>
		</TableCell>
		</TableRow>
		)}
Expand DownExpand Up		@@ -92,20 +95,9 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {

		const useStyles = makeStyles((theme) => ({
		root: {
		marginTop: theme.spacing(3),
		marginTop: theme.spacing(10),
		},
		welcome: {
		paddingTop: theme.spacing(12),
		paddingBottom: theme.spacing(12),
		display: "flex",
		flexDirection: "column",
		alignItems: "center",
		justifyContent: "center",
		"& span": {
		maxWidth: 600,
		textAlign: "center",
		fontSize: theme.spacing(2),
		lineHeight: `${theme.spacing(3)}px`,
		},
		emptyDescription: {
		maxWidth: theme.spacing(62),
		},
		}))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,7 +23,7 @@ describe("WorkspacesPage", () => {
		render(<WorkspacesPage />)

		// Then
		await screen.findByText(Language.emptyView)
		await screen.findByText(Language.emptyMessage)
		})

		it("renders a filled workspaces page", async () => {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		import { ComponentMeta, Story } from "@storybook/react"
		import { ProvisionerJobStatus, Workspace } from "../../api/typesGenerated"
		import { ProvisionerJobStatus, Workspace, WorkspaceTransition } from "../../api/typesGenerated"
		import { MockWorkspace } from "../../testHelpers/entities"
		import { WorkspacesPageView, WorkspacesPageViewProps } from "./WorkspacesPageView"

Expand All		@@ -10,7 +10,10 @@ export default {

		const Template: Story<WorkspacesPageViewProps> = (args) => <WorkspacesPageView {...args} />

		const createWorkspaceWithStatus = (status: ProvisionerJobStatus, transition = "start"): Workspace => {
		const createWorkspaceWithStatus = (
		status: ProvisionerJobStatus,
		transition: WorkspaceTransition = "start",
		): Workspace => {
		return {
		...MockWorkspace,
		latest_build: {
Expand DownExpand Up		@@ -46,4 +49,6 @@ AllStates.args = {
		}

		export const Empty = Template.bind({})
		Empty.args = {}
		Empty.args = {
		workspaces: [],
		}