Improve empty state

coder · BrunoQuaresma · May 13, 2022 · May 12, 2022 · May 12, 2022 · May 12, 2022
commit 40afc475a50b97d08b138691a616ca576c8e4adc
diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
@@ -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"
@@ -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
 }
 
 /**
@@ -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>
   )
 }
@@ -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" },

diff --git a/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx
@@ -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"
@@ -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>
+      }
     />
   )
 

diff --git a/site/src/pages/TemplatesPages/TemplatesPage.tsx b/site/src/pages/TemplatesPages/TemplatesPage.tsx
@@ -1,5 +1,4 @@
 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"
@@ -29,7 +28,6 @@ export const Language = {
 }
 
 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,
@@ -81,12 +79,8 @@ export const TemplatesPage: React.FC = () => {
                     <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>
@@ -99,9 +93,3 @@ export const TemplatesPage: React.FC = () => {
     </Stack>
   )
 }
-
-const useStyles = makeStyles((theme) => ({
-  descriptionLabel: {
-    marginBottom: theme.spacing(1),
-  },
-}))