Replace Create Project buttons with CLI call to action

bryphe-coder · bryphe-coder · commit 59e27e9ae928 · 2022-02-10T04:30:13.000Z
diff --git a/site/components/Button/CopyButton.tsx b/site/components/Button/CopyButton.tsx
@@ -0,0 +1,72 @@
+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 { FileCopy } from "../Icons"
+
+interface CopyButtonProps {
+  text: string
+  className?: string
+  onFailure: () => void
+  onSuccess: () => void
+}
+
+/**
+ * Copy button used inside the CodeBlock component internally
+ */
+export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text, onSuccess, onFailure }) => {
+  const styles = useStyles()
+
+
+  const copyToClipboard = async (): Promise<void> => {
+    try {
+      await window.navigator.clipboard.writeText(text)
+      onSuccess()
+    } catch (err) {
+      const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
+      if (err instanceof Error) {
+        wrappedErr.stack = err.stack
+      }
+      console.error(wrappedErr)
+
+      onFailure()
+    }
+  }
+
+  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>
+      </div>
+    </Tooltip>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  copyButtonWrapper: {
+    display: "flex",
+    marginLeft: theme.spacing(1),
+  },
+  copyButton: {
+    borderRadius: 7,
+    background: theme.palette.codeBlock.button.main,
+    color: theme.palette.codeBlock.button.contrastText,
+    padding: theme.spacing(0.85),
+    minWidth: 32,
+
+    "&:hover": {
+      background: theme.palette.codeBlock.button.hover,
+    },
+  },
+  fileCopyIcon: {
+    width: 20,
+    height: 20,
+  },
+}))
+
diff --git a/site/components/Button/index.ts b/site/components/Button/index.ts
@@ -1,2 +1,3 @@
 export * from "./SplitButton"
 export * from "./LoadingButton"
+export * from "./CopyButton"
diff --git a/site/components/Icons/FileCopy.tsx b/site/components/Icons/FileCopy.tsx
@@ -0,0 +1,11 @@
+import SvgIcon from "@material-ui/core/SvgIcon"
+import React from "react"
+
+export const FileCopy: typeof SvgIcon = (props) => (
+  <SvgIcon {...props} viewBox="0 0 20 20">
+    <path
+      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"
+      fill="currentColor"
+    />
+  </SvgIcon>
+)
diff --git a/site/components/Icons/index.ts b/site/components/Icons/index.ts
@@ -1,4 +1,5 @@
 export { CoderIcon } from "./CoderIcon"
+export * from "./FileCopy"
 export { Logo } from "./Logo"
 export * from "./Logout"
 export { WorkspacesIcon } from "./WorkspacesIcon"
diff --git a/site/pages/projects/index.tsx b/site/pages/projects/index.tsx
@@ -14,6 +14,7 @@ import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 
 import { Organization, Project } from "./../../api"
 import useSWR from "swr"
+import { CodeBlock } from "../../components/CodeBlock"
 
 const ProjectsPage: React.FC = () => {
   const styles = useStyles()
@@ -38,11 +39,6 @@ const ProjectsPage: React.FC = () => {
     void router.push("/projects/create")
   }
 
-  const action = {
-    text: "Create Project",
-    onClick: createProject,
-  }
-
   // 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) => {
@@ -62,16 +58,14 @@ const ProjectsPage: React.FC = () => {
     },
   ]
 
-  const emptyState = (
-    <EmptyState
-      button={{
-        children: "Create Project",
-        onClick: createProject,
-      }}
-      message="No projects have been created yet"
-      description="Create a project to get started."
-    />
-  )
+  const description = <div>
+    <div>Run the following command to get started:</div>
+    <CodeBlock lines={["coder project create"]} />
+  </div>
+
+  const emptyState = <EmptyState
+    message="No projects have been created yet"
+    description={description} />
 
   const tableProps = {
     title: "All Projects",
@@ -85,7 +79,7 @@ const ProjectsPage: React.FC = () => {
   return (
     <div className={styles.root}>
       <Navbar user={me} onSignOut={signOut} />
-      <Header title="Projects" subTitle={subTitle} action={action} />
+      <Header title="Projects" subTitle={subTitle} />
       <Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
         <Table {...tableProps} />
       </Paper>

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export * from "./SplitButton"`
`2`	`2`	`export * from "./LoadingButton"`
	`3`	`+export * from "./CopyButton"`