8000 feat: Improve empty states for workspaces and templates by BrunoQuaresma · Pull Request #1950 · coder/coder · GitHub
[go: up one dir, main page]
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
Next Next commit
Add empty state for workspace
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed May 31, 2022
commit 77111388186e599de8248aaf12a692dd8fd747fb
8 changes: 6 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 @@ -2,6 +2,7 @@ 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"

export interface EmptyStateProps {
/** Text Message to display, placed inside Typography component */
Expand Down Expand Up @@ -48,17 +49,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
84 changes: 45 additions & 39 deletions site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,18 @@ 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 { EmptyState } from "../../components/EmptyState/EmptyState"
import { Margins } from "../../components/Margins/Margins"
import { Stack } from "../../components/Stack/Stack"
import { TableLoader } from "../../components/TableLoader/TableLoader"
import { getDisplayStatus } from "../../util/workspace"

dayjs.extend(relativeTime)

export const Language = {
createButton: "Create workspace",
emptyView: "so you can check out your repositories, edit your source code, and build and test your software.",
emptyMessage: "Create your first workspace",
emptyDescription: "To start edit your source code, and build your awesome software.",
}

export interface WorkspacesPageViewProps {
Expand Down Expand Up @@ -53,50 +56,53 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = (props) => {
</TableRow>
</TableHead>
<TableBody>
{!props.loading && !props.workspaces?.length && (
{props.loading && <TableLoader />}
{props.workspaces && props.workspaces.length === 0 && (
<TableRow>
<TableCell colSpan={999}>
<div className={styles.welcome}>
<span>
<Link component={RouterLink} to="/templates">
Create a workspace
<EmptyState
message={Language.emptyMessage}
description={Language.emptyDescription}
cta={
<Link underline="none" component={RouterLink} to="/workspaces/new">
<Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
</Link>
&nbsp;{Language.emptyView}
</span>
</div>
}
/>
</TableCell>
</TableRow>
)}
{props.workspaces?.map((workspace) => {
const status = getDisplayStatus(theme, workspace.latest_build)
return (
<TableRow key={workspace.id}>
<TableCell>
<AvatarData
title={workspace.name}
subtitle={workspace.owner_name}
link={`/workspaces/${workspace.id}`}
/>
</TableCell>
<TableCell>{workspace.template_name}</TableCell>
<TableCell>
{workspace.outdated ? (
<span style={{ color: theme.palette.error.main }}>outdated</span>
) : (
<span style={{ color: theme.palette.text.secondary }}>up to date</span>
)}
</TableCell>
<TableCell>
<span data-chromatic="ignore" style={{ color: theme.palette.text.secondary }}>
{dayjs().to(dayjs(workspace.latest_build.created_at))}
</span>
</TableCell>
<TableCell>
<span style={{ color: status.color }}>{status.status}</span>
</TableCell>
</TableRow>
)
})}
{props.workspaces &&
props.workspaces.map((workspace) => {
const status = getDisplayStatus(theme, workspace.latest_build)
8435 return (
<TableRow key={workspace.id}>
<TableCell>
<AvatarData
title={workspace.name}
subtitle={workspace.owner_name}
link={`/workspaces/${workspace.id}`}
/>
</TableCell>
<TableCell>{workspace.template_name}</TableCell>
<TableCell>
{workspace.outdated ? (
<span style={{ color: theme.palette.error.main }}>outdated</span>
) : (
<span style={{ color: theme.palette.text.secondary }}>up to date</span>
)}
</TableCell>
<TableCell>
<span data-chromatic="ignore" style={{ color: theme.palette.text.secondary }}>
{dayjs().to(dayjs(workspace.latest_build.created_at))}
</span>
</TableCell>
<TableCell>
<span style={{ color: status.color }}>{status.status}</span>
</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</Margins>
Expand Down
0