Skip to content

Commit 40afc47

Browse files
committed
Improve empty state
1 parent e1e6d9d commit 40afc47

File tree

3 files changed

+26
-41
lines changed

3 files changed

+26
-41
lines changed

site/src/components/EmptyState/EmptyState.tsx

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Box from "@material-ui/core/Box"
2-
import Button, { ButtonProps } from "@material-ui/core/Button"
32
import { makeStyles } from "@material-ui/core/styles"
43
import Typography from "@material-ui/core/Typography"
54
import React from "react"
@@ -8,8 +7,8 @@ export interface EmptyStateProps {
87
/** Text Message to display, placed inside Typography component */
98
message: string
109
/** Longer optional description to display below the message */
11-
description?: React.ReactNode
12-
button?: ButtonProps
10+
description?: string
11+
cta?: React.ReactNode
1312
}
1413

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

2826
return (
2927
<Box className={styles.root} {...boxProps}>
30-
<Typography variant="h5" color="textSecondary" className={styles.header}>
31-
{message}
32-
</Typography>
33-
{description && <div className={styles.description}>{description}</div>}
34-
{button && <Button variant="contained" color="primary" {...button} className={buttonClassName} />}
28+
<div className={styles.header}>
29+
<Typography variant="h5" className={styles.title}>
30+
{message}
31+
</Typography>
32+
{description && (
33+
<Typography variant="body2" color="textSecondary" className={styles.description}>
34+
{description}
35+
</Typography>
36+
)}
37+
</div>
38+
{cta}
3539
</Box>
3640
)
3741
}
@@ -48,22 +52,13 @@ const useStyles = makeStyles(
4852
padding: theme.spacing(3),
4953
},
5054
header: {
55+
marginBottom: theme.spacing(3),
56+
},
57+
title: {
5158
fontWeight: 400,
5259
},
5360
description: {
54-
marginTop: theme.spacing(2),
55-
marginBottom: theme.spacing(1),
56-
color: theme.palette.text.secondary,
57-
fontSize: theme.typography.body2.fontSize,
58-
},
59-
button: {
60-
marginTop: theme.spacing(2),
61-
},
62-
icon: {
63-
fontSize: theme.typography.h2.fontSize,
64-
color: theme.palette.text.secondary,
65-
marginBottom: theme.spacing(1),
66-
opacity: 0.5,
61+
marginTop: theme.spacing(1),
6762
},
6863
}),
6964
{ name: "EmptyState" },

site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Button from "@material-ui/core/Button"
12
import React from "react"
23
import { Link, useNavigate, useParams } from "react-router-dom"
34
import useSWR from "swr"
@@ -53,12 +54,13 @@ export const TemplatePage: React.FC = () => {
5354

5455
const emptyState = (
5556
<EmptyState
56-
button={{
57-
children: "Create Workspace",
58-
onClick: createWorkspace,
59-
}}
6057
message="No workspaces have been created yet"
6158
description="Create a workspace to get started"
59+
cta={
60+
<Button variant="contained" color="primary" onClick={createWorkspace}>
61+
Create workspace
62+
</Button>
63+
}
6264
/>
6365
)
6466

site/src/pages/TemplatesPages/TemplatesPage.tsx

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Box from "@material-ui/core/Box"
2-
import { makeStyles } from "@material-ui/core/styles"
32
import Table from "@material-ui/core/Table"
43
import TableBody from "@material-ui/core/TableBody"
54
import TableCell from "@material-ui/core/TableCell"
@@ -29,7 +28,6 @@ export const Language = {
2928
}
3029

3130
export const TemplatesPage: React.FC = () => {
32-
const styles = useStyles()
3331
const { data: orgs, error: orgsError } = useSWR<TypesGen.Organization[], Error>("/api/v2/users/me/organizations")
3432
const { data: templates, error } = useSWR<TypesGen.Template[] | null, Error>(
3533
orgs ? `/api/v2/organizations/${orgs[0].id}/templates` : null,
@@ -81,12 +79,8 @@ export const TemplatesPage: React.FC = () => {
8179
<Box p={4}>
8280
<EmptyState
8381
message={Language.emptyMessage}
84-
description={
85-
<div>
86-
<div className={styles.descriptionLabel}>{Language.emptyDescription}</div>
87-
<CodeExample code="coder templates create" />
88-
</div>
89-
}
82+
description={Language.emptyDescription}
83+
cta={<CodeExample code="coder templates create" />}
9084
/>
9185
</Box>
9286
</TableCell>
@@ -99,9 +93,3 @@ export const TemplatesPage: React.FC = () => {
9993
</Stack>
10094
)
10195
}
102-
103-
const useStyles = makeStyles((theme) => ({
104-
descriptionLabel: {
105-
marginBottom: theme.spacing(1),
106-
},
107-
}))

0 commit comments

Comments
 (0)