May 13, 2022 · May 12, 2022 · May 12, 2022 · May 12, 2022 · May 13, 2022 · May 13, 2022
diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
 import Box from "@material-ui/core/Box"
 import Button, { ButtonProps } from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
  /** Text Message to display, placed inside Typography component */
  message: string
  /** Longer optional description to display below the message */
  description?:React.ReactNode
 button?:ButtonProps
  description?:string
 cta?:React.ReactNode
 }

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

  return (
    <Box className={styles.root} {...boxProps}>
      <Typography variant="h5" color="textSecondary" className={styles.header}>
        {message}
      </Typography>
      {description && <div className={styles.description}>{description}</div>}
      {button && <Button variant="contained" color="primary" {...button} className={buttonClassName} />}
      <div className={styles.header}>
        <Typography variant="h5" className={styles.title}>
          {message}
        </Typography>
        {description && (
          <Typography variant="body2" color="textSecondary" className={styles.description}>
            {description}
          </Typography>
        )}
      </div>
      {cta}
    </Box>
  )
 }
      padding: theme.spacing(3),
    },
    header: {
      marginBottom: theme.spacing(3),
    },
    title: {
      fontWeight: 400,
    },
    description: {
      marginTop: theme.spacing(2),
      marginBottom: theme.spacing(1),
      color: theme.palette.text.secondary,
      fontSize: theme.typography.body2.fontSize,
    },
    button: {
      marginTop: theme.spacing(2),
    },
    icon: {
      fontSize: theme.typography.h2.fontSize,
      color: theme.palette.text.secondary,
      marginBottom: theme.spacing(1),
      opacity: 0.5,
      marginTop: theme.spacing(1),
    },
  }),
  { name: "EmptyState" },
diff --git a/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx
 import Button from "@material-ui/core/Button"
 import React from "react"
 import { Link, useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"

  const emptyState = (
    <EmptyState
      button={{
        children: "Create Workspace",
        onClick: createWorkspace,
      }}
      message="No workspaces have been created yet"
      description="Create a workspace to get started"
      cta={
        <Button variant="contained" color="primary" onClick={createWorkspace}>
          Create workspace
        </Button>
      }
    />
  )

diff --git a/site/src/pages/TemplatesPages/TemplatesPage.tsx b/site/src/pages/TemplatesPages/TemplatesPage.tsx
 import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
 }

 export const TemplatesPage: React.FC = () => {
  const styles = useStyles()
  const { data: orgs, error: orgsError } = useSWR<TypesGen.Organization[], Error>("/api/v2/users/me/organizations")
  const { data: templates, error } = useSWR<TypesGen.Template[] | null, Error>(
    orgs ? `/api/v2/organizations/${orgs[0].id}/templates` : null,
                    <Box p={4}>
                      <EmptyState
                        message={Language.emptyMessage}
                        description={
                          <div>
                            <div className={styles.descriptionLabel}>{Language.emptyDescription}</div>
                            <CodeExample code="coder templates create" />
                          </div>
                        }
                        description={Language.emptyDescription}
                        cta={<CodeExample code="coder templates create" />}
                      />
                    </Box>
                  </TableCell>
    </Stack>
  )
 }

 const useStyles = makeStyles((theme) => ({
  descriptionLabel: {
    marginBottom: theme.spacing(1),
  },
 }))
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,4 @@
		import Box from "@material-ui/core/Box"
		import Button, { ButtonProps } from "@material-ui/core/Button"
		import { makeStyles } from "@material-ui/core/styles"
		import Typography from "@material-ui/core/Typography"
		import React from "react"
Expand All		@@ -8,8 +7,8 @@ export interface EmptyStateProps {
		/** Text Message to display, placed inside Typography component */
		message: string
		/** Longer optional description to display below the message */
		description?:React.ReactNode
		button?:ButtonProps
		description?:string
		cta?:React.ReactNode
		}

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

		return (
		<Box className={styles.root} {...boxProps}>
		<Typography variant="h5" color="textSecondary" className={styles.header}>
		{message}
		</Typography>
		{description && <div className={styles.description}>{description}</div>}
		{button && <Button variant="contained" color="primary" {...button} className={buttonClassName} />}
		<div className={styles.header}>
		<Typography variant="h5" className={styles.title}>
		{message}
		</Typography>
		{description && (
		<Typography variant="body2" color="textSecondary" className={styles.description}>
		{description}
		</Typography>
		)}
		</div>
		{cta}
		</Box>
		)
		}
Expand All		@@ -48,22 +52,13 @@ const useStyles = makeStyles(
		padding: theme.spacing(3),
		},
		header: {
		marginBottom: theme.spacing(3),
		},
		title: {
		fontWeight: 400,
		},
		description: {
		marginTop: theme.spacing(2),
		marginBottom: theme.spacing(1),
		color: theme.palette.text.secondary,
		fontSize: theme.typography.body2.fontSize,
		},
		button: {
		marginTop: theme.spacing(2),
		},
		icon: {
		fontSize: theme.typography.h2.fontSize,
		color: theme.palette.text.secondary,
		marginBottom: theme.spacing(1),
		opacity: 0.5,
		marginTop: theme.spacing(1),
		},
		}),
		{ name: "EmptyState" },
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,4 @@
		import Button from "@material-ui/core/Button"
		import React from "react"
		import { Link, useNavigate, useParams } from "react-router-dom"
		import useSWR from "swr"
Expand DownExpand Up		@@ -53,12 +54,13 @@ export const TemplatePage: React.FC = () => {

		const emptyState = (
		<EmptyState
		button={{
		children: "Create Workspace",
		onClick: createWorkspace,
		}}
		message="No workspaces have been created yet"
		description="Create a workspace to get started"
		cta={
		<Button variant="contained" color="primary" onClick={createWorkspace}>
		Create workspace
		</Button>
		}
		/>
		)

Expand Down