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 1 commit
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
Prev Previous commit
Next Next commit
Add empty state to the form
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed May 31, 2022
commit df6bc50ec9a9ed4a3709d5534bea87e8ca612810
10 changes: 7 additions & 3 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}>
<div className={combineClasses([styles.root, className])}>
<code className={styles.code}>{code}</code>
<CopyButton text={code} buttonClassName={styles.button} />
<CopyButton text={code} buttonClassName={combineClasses([styles.button, buttonClassName])} />
</div>
)
}
Expand All @@ -25,6 +28,7 @@ const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
background: theme.palette.background.default,
color: theme.palette.primary.contrastText,
Expand Down
5 changes: 3 additions & 2 deletions site/src/components/EmptyState/EmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface EmptyStateProps {
description?: string | React.ReactNode
descriptionClassName?: string
cta?: ReactNode
className?: string
}

/**
Expand All @@ -23,11 +24,11 @@ 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, descriptionClassName, ...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}
Expand Down
42 changes: 41 additions & 1 deletion 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,16 @@ 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:
</>
),
}

export interface CreateWorkspacePageViewProps {
Expand Down Expand Up @@ -98,7 +110,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 Down Expand Up @@ -179,4 +202,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,
},
}))
25 changes: 25 additions & 0 deletions site/src/xServices/createWorkspace/createWorkspaceXService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@ export const createWorkspaceMachine = createMachine(
invoke: {
src: "getTemplates",
onDone: [
{
actions: ["assignTemplates"],
target: "waitingForTemplateGetCreated",
cond: "areTemplatesEmpty",
},
{
actions: ["assignTemplates", "assignPreSelectedTemplate"],
target: "gettingTemplateSchema",
Expand All @@ -71,6 +76,25 @@ export const createWorkspaceMachine = createMachine(
},
},
},
waitingForTemplateGetCreated: {
initial: "refreshingTemplates",
states: {
refreshingTemplates: {
invoke: {
src: "getTemplates",
onDone: [
{ target: "waiting", cond: "areTemplatesEmpty" },
{ target: "#createWorkspaceState.selectingTemplate", actions: ["assignTemplates"] },
],
},
},
waiting: {
after: {
2_000: "refreshingTemplates",
},
},
},
},
selectingTemplate: {
on: {
SELECT_TEMPLATE: {
Expand Down Expand Up @@ -147,6 +171,7 @@ export const createWorkspaceMachine = createMachine(
const template = event.data.find((template) => template.name === ctx.preSelectedTemplateName)
return !!template
},
areTemplatesEmpty: (_, event) => event.data.length === 0,
},
actions: {
assignTemplates: assign({
Expand Down