Fix up

bryphe-coder · bryphe-coder · commit 5f683ea6ba3b · 2022-02-11T03:45:04.000Z
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -92,8 +92,6 @@ rules:
           message:
             "Use path imports to avoid pulling in unused modules. See:
             https://material-ui.com/guides/minimizing-bundle-size/"
-        - name: "@material-ui/core/Tooltip"
-          message: "Use the custom Tooltip on componens/Tooltip"
   no-storage/no-browser-storage: error
   no-unused-vars: "off"
   "object-curly-spacing": "off"
diff --git a/site/components/Button/CopyButton.tsx b/site/components/Button/CopyButton.tsx
@@ -1,7 +1,8 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Button from "@material-ui/core/Button"
 import Tooltip from "@material-ui/core/Tooltip"
-import React from "react"
+import Check from "@material-ui/icons/Check"
+import React, { useState } from "react"
 import { FileCopy } from "../Icons"
 
 interface CopyButtonProps {
@@ -14,11 +15,16 @@ interface CopyButtonProps {
  */
 export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text }) => {
   const styles = useStyles()
-
+  const [isCopied, setIsCopied] = useState<boolean>(false)
 
   const copyToClipboard = async (): Promise<void> => {
     try {
       await window.navigator.clipboard.writeText(text)
+      setIsCopied(true)
+
+      window.setTimeout(() => {
+        setIsCopied(false)
+      }, 1000)
     } catch (err) {
       const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
       if (err instanceof Error) {
@@ -31,12 +37,8 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text })
   return (
     <Tooltip title="Copy to Clipboard" placement="top">
       <div className={`${styles.copyButtonWrapper} ${className}`}>
-        <Button
-          className={styles.copyButton}
-          onClick={copyToClipboard}
-          size="small"
-        >
-          <FileCopy className={styles.fileCopyIcon} />
+        <Button className={styles.copyButton} onClick={copyToClipboard} size="small">
+          {isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopy className={styles.fileCopyIcon} />}
         </Button>
       </div>
     </Tooltip>
@@ -64,4 +66,3 @@ const useStyles = makeStyles((theme) => ({
     height: 20,
   },
 }))
-
diff --git a/site/components/CodeExample/CodeExample.stories.tsx b/site/components/CodeExample/CodeExample.stories.tsx
@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react"
 import React from "react"
-import { CodeExample, CodeExampleProps } from "./index"
+import { CodeExample, CodeExampleProps } from "./CodeExample"
 
 const sampleCode = `echo "Hello, world"`
 
diff --git a/site/components/CodeExample/CodeExample.test.tsx b/site/components/CodeExample/CodeExample.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import { render } from "../../test_helpers"
 import React from "react"
-import { CodeExample } from "./index"
+import { CodeExample } from "./CodeExample"
 
 describe("CodeExample", () => {
   it("renders code", async () => {
diff --git a/site/components/CodeExample/CodeExample.tsx b/site/components/CodeExample/CodeExample.tsx
@@ -2,12 +2,15 @@ import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 
-import { CopyButton } from "./../Button"
+import { CopyButton } from "../Button"
 
 export interface CodeExampleProps {
   code: string
 }
 
+/**
+ * Component to show single-line code examples, with a copy button
+ */
 export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => {
   const styles = useStyles()
 
@@ -23,7 +26,8 @@ const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
     flexDirection: "row",
-    justifyContent: "flex-start",
+    justifyContent: "space-between",
+    alignItems: "center",
     background: theme.palette.background.default,
     color: theme.palette.codeBlock.contrastText,
     fontFamily: MONOSPACE_FONT_FAMILY,
diff --git a/site/components/CodeExample/index.ts b/site/components/CodeExample/index.ts
@@ -0,0 +1 @@
+export * from "./CodeExample"
diff --git a/site/components/Icons/FileCopy.tsx b/site/components/Icons/FileCopy.tsx
@@ -8,4 +8,4 @@ export const FileCopy: typeof SvgIcon = (props) => (
       fill="currentColor"
     />
   </SvgIcon>
-)
+)
diff --git a/site/pages/projects/index.tsx b/site/pages/projects/index.tsx
@@ -1,7 +1,6 @@
 import React from "react"
 import { makeStyles } from "@material-ui/core/styles"
 import Paper from "@material-ui/core/Paper"
-import { useRouter } from "next/router"
 import Link from "next/link"
 import { EmptyState } from "../../components"
 import { ErrorSummary } from "../../components/ErrorSummary"
@@ -14,11 +13,10 @@ import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 
 import { Organization, Project } from "./../../api"
 import useSWR from "swr"
-import { CodeExample } from "../../components/CodeExample"
+import { CodeExample } from "../../components/CodeExample/CodeExample"
 
 const ProjectsPage: React.FC = () => {
   const styles = useStyles()
-  const router = useRouter()
   const { me, signOut } = useUser(true)
   const { data: projects, error } = useSWR<Project[] | null, Error>("/api/v2/projects")
   const { data: orgs, error: orgsError } = useSWR<Organization[], Error>("/api/v2/users/me/organizations")
@@ -35,10 +33,6 @@ const ProjectsPage: React.FC = () => {
     return <FullScreenLoader />
   }
 
-  const createProject = () => {
-    void router.push("/projects/create")
-  }
-
   // Create a dictionary of organization ID -> organization Name
   // Needed to properly construct links to dive into a project
   const orgDictionary = orgs.reduce((acc: Record<string, string>, curr: Organization) => {
@@ -58,14 +52,14 @@ const ProjectsPage: React.FC = () => {
     },
   ]
 
-  const description = <div>
-    <div>Run the following command to get started:</div>
-    <CodeExample code="coder project create" />
-  </div>
+  const description = (
+    <div>
+      <div className={styles.descriptionLabel}>Run the following command to get started:</div>
+      <CodeExample code="coder project create" />
+    </div>
+  )
 
-  const emptyState = <EmptyState
-    message="No projects have been created yet"
-    description={description} />
+  const emptyState = <EmptyState message="No projects have been created yet" description={description} />
 
   const tableProps = {
     title: "All Projects",
@@ -88,11 +82,14 @@ const ProjectsPage: React.FC = () => {
   )
 }
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
     flexDirection: "column",
   },
+  descriptionLabel: {
+    marginBottom: theme.spacing(1),
+  },
 }))
 
 export default ProjectsPage
