Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 59e27e9

Browse files
bryphe-coderbryphe-coder
committed
Replace Create Project buttons with CLI call to action
1 parent b6fcd81 commit 59e27e9

File tree

5 files changed

+95
-16
lines changed

5 files changed

+95
-16
lines changed

‎site/components/Button/CopyButton.tsx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import Button from "@material-ui/core/Button"
3+
import Tooltip from "@material-ui/core/Tooltip"
4+
import React from "react"
5+
import { FileCopy } from "../Icons"
6+
7+
interface CopyButtonProps {
8+
text: string
9+
className?: string
10+
onFailure: () => void
11+
onSuccess: () => void
12+
}
13+
14+
/**
15+
* Copy button used inside the CodeBlock component internally
16+
*/
17+
export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text, onSuccess, onFailure }) => {
18+
const styles = useStyles()
19+
20+
21+
const copyToClipboard = async (): Promise<void> => {
22+
try {
23+
await window.navigator.clipboard.writeText(text)
24+
onSuccess()
25+
} catch (err) {
26+
const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
27+
if (err instanceof Error) {
28+
wrappedErr.stack = err.stack
29+
}
30+
console.error(wrappedErr)
31+
32+
onFailure()
33+
}
34+
}
35+
36+
return (
37+
<Tooltip title="Copy to Clipboard" placement="top">
38+
<div className={`${styles.copyButtonWrapper} ${className}`}>
39+
<Button
40+
className={styles.copyButton}
41+
onClick={copyToClipboard}
42+
size="small"
43+
>
44+
<FileCopy className={styles.fileCopyIcon} />
45+
</Button>
46+
</div>
47+
</Tooltip>
48+
)
49+
}
50+
51+
const useStyles = makeStyles((theme) => ({
52+
copyButtonWrapper: {
53+
display: "flex",
54+
marginLeft: theme.spacing(1),
55+
},
56+
copyButton: {
57+
borderRadius: 7,
58+
background: theme.palette.codeBlock.button.main,
59+
color: theme.palette.codeBlock.button.contrastText,
60+
padding: theme.spacing(0.85),
61+
minWidth: 32,
62+
63+
"&:hover": {
64+
background: theme.palette.codeBlock.button.hover,
65+
},
66+
},
67+
fileCopyIcon: {
68+
width: 20,
69+
height: 20,
70+
},
71+
}))
72+

‎site/components/Button/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from "./SplitButton"
22
export * from "./LoadingButton"
3+
export * from "./CopyButton"

‎site/components/Icons/FileCopy.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import SvgIcon from "@material-ui/core/SvgIcon"
2+
import React from "react"
3+
4+
export const FileCopy: typeof SvgIcon = (props) => (
5+
<SvgIcon {...props} viewBox="0 0 20 20">
6+
<path
7+
d="M12.7412 2.2807H4.32014C3.5447 2.2807 2.91663 2.90877 2.91663 3.68421V13.5088H4.32014V3.68421H12.7412V2.2807ZM14.8465 5.08772H7.12716C6.35172 5.08772 5.72365 5.71579 5.72365 6.49123V16.3158C5.72365 17.0912 6.35172 17.7193 7.12716 17.7193H14.8465C15.6219 17.7193 16.25 17.0912 16.25 16.3158V6.49123C16.25 5.71579 15.6219 5.08772 14.8465 5.08772ZM14.8465 16.3158H7.12716V6.49123H14.8465V16.3158Z"
8+
fill="currentColor"
9+
/>
10+
</SvgIcon>
11+
)

‎site/components/Icons/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { CoderIcon } from "./CoderIcon"
2+
export * from "./FileCopy"
23
export { Logo } from "./Logo"
34
export * from "./Logout"
45
export { WorkspacesIcon } from "./WorkspacesIcon"

‎site/pages/projects/index.tsx

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
1414

1515
import { Organization, Project } from "./../../api"
1616
import useSWR from "swr"
17+
import { CodeBlock } from "../../components/CodeBlock"
1718

1819
const ProjectsPage: React.FC = () => {
1920
const styles = useStyles()
@@ -38,11 +39,6 @@ const ProjectsPage: React.FC = () => {
3839
void router.push("/projects/create")
3940
}
4041

41-
const action = {
42-
text: "Create Project",
43-
onClick: createProject,
44-
}
45-
4642
// Create a dictionary of organization ID -> organization Name
4743
// Needed to properly construct links to dive into a project
4844
const orgDictionary = orgs.reduce((acc: Record<string, string>, curr: Organization) => {
@@ -62,16 +58,14 @@ const ProjectsPage: React.FC = () => {
6258
},
6359
]
6460

65-
const emptyState = (
66-
<EmptyState
67-
button={{
68-
children: "Create Project",
69-
onClick: createProject,
70-
}}
71-
message="No projects have been created yet"
72-
description="Create a project to get started."
73-
/>
74-
)
61+
const description = <div>
62+
<div>Run the following command to get started:</div>
63+
<CodeBlock lines={["coder project create"]} />
64+
</div>
65+
66+
const emptyState = <EmptyState
67+
message="No projects have been created yet"
68+
description={description} />
7569

7670
const tableProps = {
7771
title: "All Projects",
@@ -85,7 +79,7 @@ const ProjectsPage: React.FC = () => {
8579
return (
8680
<div className={styles.root}>
8781
<Navbar user={me} onSignOut={signOut} />
88-
<Header title="Projects" subTitle={subTitle} action={action} />
82+
<Header title="Projects" subTitle={subTitle} />
8983
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
9084
<Table {...tableProps} />
9185
</Paper>

0 commit comments

Comments
 (0)