Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
BrunoQuaresma merged 15 commits intomainfrombq/improve-empty-state
Jun 1, 2022
Merged
Show file tree
Hide file tree
Changes from1 commit
Commits
Show all changes
15 commits
Select commitHold shift + click to select a range
7711138
Add empty state for workspace
BrunoQuaresmaMay 31, 2022
d1ddfae
Improve template empty
BrunoQuaresmaMay 31, 2022
8796128
Increase template page top spacing
BrunoQuaresmaMay 31, 2022
65678ab
Make footer more soft
BrunoQuaresmaMay 31, 2022
d812056
Merge branch 'main' of github.com:coder/coder into bq/improve-empty-s…
BrunoQuaresmaMay 31, 2022
df6bc50
Add empty state to the form
BrunoQuaresmaMay 31, 2022
eaf4a78
Add no templates storybook
BrunoQuaresmaJun 1, 2022
8d5e771
Update site/src/pages/TemplatesPage/TemplatesPageView.tsx
BrunoQuaresmaJun 1, 2022
b7dbfff
Improve verbiage
BrunoQuaresmaJun 1, 2022
c3ca61b
Add template link to the Language obj
BrunoQuaresmaJun 1, 2022
dfef339
Update message if user has no permission to create template
BrunoQuaresmaJun 1, 2022
5300bf8
Update no perm text
BrunoQuaresmaJun 1, 2022
114f65a
Fix workspace page view stories
BrunoQuaresmaJun 1, 2022
12a55cb
Fix tests
BrunoQuaresmaJun 1, 2022
57e909d
Remove unecessary language and fix tests
BrunoQuaresmaJun 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
PrevPrevious commit
NextNext commit
Improve template empty
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committedMay 31, 2022
commitd1ddfaecba7a6f6a1333c5e6946577a05f41b865
18 changes: 13 additions & 5 deletionssite/src/components/CodeExample/CodeExample.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,8 +15,8 @@ export const CodeExample: FC<CodeExampleProps> = ({ code }) => {

return (
<div className={styles.root}>
<code>{code}</code>
<CopyButton text={code} />
<code className={styles.code}>{code}</code>
<CopyButton text={code}buttonClassName={styles.button}/>
</div>
)
}
Expand All@@ -25,13 +25,21 @@ const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
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,
},
}))
12 changes: 9 additions & 3 deletionssite/src/components/EmptyState/EmptyState.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,12 +3,14 @@ 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
}

Expand All@@ -21,7 +23,7 @@ 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,...boxProps } = props
const styles = useStyles()

return (
Expand All@@ -31,7 +33,11 @@ export const EmptyState: FC<EmptyStateProps> = (props) => {
{message}
</Typography>
{description && (
<Typography variant="body2" color="textSecondary" className={styles.description}>
<Typography
variant="body2"
color="textSecondary"
className={combineClasses([styles.description, descriptionClassName])}
>
{description}
</Typography>
)}
Expand Down
41 changes: 23 additions & 18 deletionssite/src/pages/TemplatesPage/TemplatesPageView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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@@ -27,6 +28,16 @@ export const Language = {
emptyViewCreateCTA: "Create a template",
emptyViewCreate: "to standardize development workspaces for your team.",
emptyViewNoPerms: "No templates have been created! Contact your Coder administrator.",
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 by typing the following Coder CLI command:
</>
),
}

export interface TemplatesPageViewProps {
Expand All@@ -53,8 +64,14 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
{!props.loading && !props.templates?.length && (
<TableRow>
<TableCell colSpan={999}>
<div className={styles.welcome}>
{props.canCreateTemplate ? (
<EmptyState
message={Language.emptyMessage}
description={Language.emptyDescription}
descriptionClassName={styles.emptyDescription}
cta={<CodeExample code="coder template init" />}
/>

{/* {props.canCreateTemplate ? (
<span>
<Link component={RouterLink} to="/templates/new">
{Language.emptyViewCreateCTA}
Expand All@@ -63,8 +80,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
</span>
) : (
<span>{Language.emptyViewNoPerms}</span>
)}
</div>
)} */}
</TableCell>
</TableRow>
)}
Expand DownExpand Up@@ -94,18 +110,7 @@ const useStyles = makeStyles((theme) => ({
root: {
marginTop: theme.spacing(3),
},
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),
},
}))
[8]ページ先頭
©2009-2025 Movatter.jp