Skip to content

feat: Improve empty states for workspaces and templates #1950

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Jun 1, 2022
Merged

feat: Improve empty states for workspaces and templates #1950

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7711138
Add empty state for workspace
BrunoQuaresma May 31, 2022
d1ddfae
Improve template empty
BrunoQuaresma May 31, 2022
8796128
Increase template page top spacing
BrunoQuaresma May 31, 2022
65678ab
Make footer more soft
BrunoQuaresma May 31, 2022
d812056
Merge branch 'main' of github.com:coder/coder into bq/improve-empty-s…
BrunoQuaresma May 31, 2022
df6bc50
Add empty state to the form
BrunoQuaresma May 31, 2022
eaf4a78
Add no templates storybook
BrunoQuaresma Jun 1, 2022
8d5e771
Update site/src/pages/TemplatesPage/TemplatesPageView.tsx
BrunoQuaresma Jun 1, 2022
b7dbfff
Improve verbiage
BrunoQuaresma Jun 1, 2022
c3ca61b
Add template link to the Language obj
BrunoQuaresma Jun 1, 2022
dfef339
Update message if user has no permission to create template
BrunoQuaresma Jun 1, 2022
5300bf8
Update no perm text
BrunoQuaresma Jun 1, 2022
114f65a
Fix workspace page view stories
BrunoQuaresma Jun 1, 2022
12a55cb
Fix tests
BrunoQuaresma Jun 1, 2022
57e909d
Remove unecessary language and fix tests
BrunoQuaresma Jun 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions site/src/components/CodeExample/CodeExample.tsx
View file
Open in desktop
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"
import { CopyButton } from "../CopyButton/CopyButton"

export interface CodeExampleProps {
code: string
className?: string
buttonClassName?: string
Comment on lines +9 to +10
Copy link
Contributor

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 a thought because it's not required to do anything now, just wanted to pose the question.

Might make sense as a FE V topic.

Copy link
Collaborator Author

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
*/
export const CodeExample: FC<CodeExampleProps> = ({ code }) => {
export const CodeExample: FC<CodeExampleProps> = ({ code, className, buttonClassName }) => {
const styles = useStyles()

return (
<div className={styles.root}>
<code>{code}</code>
<CopyButton text={code} />
<div className={combineClasses([styles.root, className])}>
<code className={styles.code}>{code}</code>
<CopyButton text={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,
},
}))
23 changes: 17 additions & 6 deletions site/src/components/EmptyState/EmptyState.tsx
View file
Open in desktop
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
12 changes: 11 additions & 1 deletion site/src/components/Footer/Footer.tsx
View file
Open in desktop
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,
},
}))
5 changes: 5 additions & 0 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
View file
Open in desktop
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
45 changes: 43 additions & 2 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
View file
Open in desktop
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:
</>
),
templateLink: "Read more about this template",
}

export interface CreateWorkspacePageViewProps {
Expand Down Expand 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" />
}
/>
)}
{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 Down Expand 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,
},
}))
2 changes: 1 addition & 1 deletion site/src/pages/TemplatesPage/TemplatesPage.test.tsx
View file
Open in desktop
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
52 changes: 22 additions & 30 deletions site/src/pages/TemplatesPage/TemplatesPageView.tsx
View file
Open in desktop
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>
&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>
)}
Expand Down Expand 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),
},
}))
2 changes: 1 addition & 1 deletion site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
View file
Open in desktop
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
11 changes: 8 additions & 3 deletions site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
View file
Open in desktop
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 Down Expand Up @@ -46,4 +49,6 @@ AllStates.args = {
}

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