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

Skip to content

Commit 5f683ea

Browse files
bryphe-coderbryphe-coder
committed
Fix up
1 parent 9b84598 commit 5f683ea

File tree

8 files changed

+32
-31
lines changed

8 files changed

+32
-31
lines changed

‎site/.eslintrc.yaml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,6 @@ rules:
9292
message:
9393
"Use path imports to avoid pulling in unused modules. See:
9494
https://material-ui.com/guides/minimizing-bundle-size/"
95-
- name: "@material-ui/core/Tooltip"
96-
message: "Use the custom Tooltip on componens/Tooltip"
9795
no-storage/no-browser-storage: error
9896
no-unused-vars: "off"
9997
"object-curly-spacing": "off"

‎site/components/Button/CopyButton.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import Button from "@material-ui/core/Button"
33
import Tooltip from "@material-ui/core/Tooltip"
4-
import React from "react"
4+
import Check from "@material-ui/icons/Check"
5+
import React, { useState } from "react"
56
import { FileCopy } from "../Icons"
67

78
interface CopyButtonProps {
@@ -14,11 +15,16 @@ interface CopyButtonProps {
1415
*/
1516
export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text }) => {
1617
const styles = useStyles()
17-
18+
const [isCopied, setIsCopied] = useState<boolean>(false)
1819

1920
const copyToClipboard = async (): Promise<void> => {
2021
try {
2122
await window.navigator.clipboard.writeText(text)
23+
setIsCopied(true)
24+
25+
window.setTimeout(() => {
26+
setIsCopied(false)
27+
}, 1000)
2228
} catch (err) {
2329
const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
2430
if (err instanceof Error) {
@@ -31,12 +37,8 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text })
3137
return (
3238
<Tooltip title="Copy to Clipboard" placement="top">
3339
<div className={`${styles.copyButtonWrapper} ${className}`}>
34-
<Button
35-
className={styles.copyButton}
36-
onClick={copyToClipboard}
37-
size="small"
38-
>
39-
<FileCopy className={styles.fileCopyIcon} />
40+
<Button className={styles.copyButton} onClick={copyToClipboard} size="small">
41+
{isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopy className={styles.fileCopyIcon} />}
4042
</Button>
4143
</div>
4244
</Tooltip>
@@ -64,4 +66,3 @@ const useStyles = makeStyles((theme) => ({
6466
height: 20,
6567
},
6668
}))
67-

‎site/components/CodeExample/index.stories.tsx‎ renamed to ‎site/components/CodeExample/CodeExample.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Story } from "@storybook/react"
22
import React from "react"
3-
import { CodeExample, CodeExampleProps } from "./index"
3+
import { CodeExample, CodeExampleProps } from "./CodeExample"
44

55
const sampleCode = `echo "Hello, world"`
66

‎site/components/CodeExample/index.test.tsx‎ renamed to ‎site/components/CodeExample/CodeExample.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { screen } from "@testing-library/react"
22
import { render } from "../../test_helpers"
33
import React from "react"
4-
import { CodeExample } from "./index"
4+
import { CodeExample } from "./CodeExample"
55

66
describe("CodeExample", () => {
77
it("renders code", async () => {

‎site/components/CodeExample/index.tsx‎ renamed to ‎site/components/CodeExample/CodeExample.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import { makeStyles } from "@material-ui/core/styles"
22
import React from "react"
33
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
44

5-
import { CopyButton } from "./../Button"
5+
import { CopyButton } from "../Button"
66

77
export interface CodeExampleProps {
88
code: string
99
}
1010

11+
/**
12+
* Component to show single-line code examples, with a copy button
13+
*/
1114
export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => {
1215
const styles = useStyles()
1316

@@ -23,7 +26,8 @@ const useStyles = makeStyles((theme) => ({
2326
root: {
2427
display: "flex",
2528
flexDirection: "row",
26-
justifyContent: "flex-start",
29+
justifyContent: "space-between",
30+
alignItems: "center",
2731
background: theme.palette.background.default,
2832
color: theme.palette.codeBlock.contrastText,
2933
fontFamily: MONOSPACE_FONT_FAMILY,

‎site/components/CodeExample/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./CodeExample"

‎site/components/Icons/FileCopy.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@ export const FileCopy: typeof SvgIcon = (props) => (
88
fill="currentColor"
99
/>
1010
</SvgIcon>
11-
)
11+
)

‎site/pages/projects/index.tsx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react"
22
import { makeStyles } from "@material-ui/core/styles"
33
import Paper from "@material-ui/core/Paper"
4-
import { useRouter } from "next/router"
54
import Link from "next/link"
65
import { EmptyState } from "../../components"
76
import { ErrorSummary } from "../../components/ErrorSummary"
@@ -14,11 +13,10 @@ import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
1413

1514
import { Organization, Project } from "./../../api"
1615
import useSWR from "swr"
17-
import { CodeExample } from "../../components/CodeExample"
16+
import { CodeExample } from "../../components/CodeExample/CodeExample"
1817

1918
const ProjectsPage: React.FC = () => {
2019
const styles = useStyles()
21-
const router = useRouter()
2220
const { me, signOut } = useUser(true)
2321
const { data: projects, error } = useSWR<Project[] | null, Error>("/api/v2/projects")
2422
const { data: orgs, error: orgsError } = useSWR<Organization[], Error>("/api/v2/users/me/organizations")
@@ -35,10 +33,6 @@ const ProjectsPage: React.FC = () => {
3533
return <FullScreenLoader />
3634
}
3735

38-
const createProject = () => {
39-
void router.push("/projects/create")
40-
}
41-
4236
// Create a dictionary of organization ID -> organization Name
4337
// Needed to properly construct links to dive into a project
4438
const orgDictionary = orgs.reduce((acc: Record<string, string>, curr: Organization) => {
@@ -58,14 +52,14 @@ const ProjectsPage: React.FC = () => {
5852
},
5953
]
6054

61-
const description = <div>
62-
<div>Run the following command to get started:</div>
63-
<CodeExample code="coder project create" />
64-
</div>
55+
const description = (
56+
<div>
57+
<div className={styles.descriptionLabel}>Run the following command to get started:</div>
58+
<CodeExample code="coder project create" />
59+
</div>
60+
)
6561

66-
const emptyState = <EmptyState
67-
message="No projects have been created yet"
68-
description={description} />
62+
const emptyState = <EmptyState message="No projects have been created yet" description={description} />
6963

7064
const tableProps = {
7165
title: "All Projects",
@@ -88,11 +82,14 @@ const ProjectsPage: React.FC = () => {
8882
)
8983
}
9084

91-
const useStyles = makeStyles(() => ({
85+
const useStyles = makeStyles((theme) => ({
9286
root: {
9387
display: "flex",
9488
flexDirection: "column",
9589
},
90+
descriptionLabel: {
91+
marginBottom: theme.spacing(1),
92+
},
9693
}))
9794

9895
export default ProjectsPage

0 commit comments

Comments
 (0)