Improve template empty

coder · BrunoQuaresma · Jun 1, 2022 · May 31, 2022 · May 31, 2022 · May 31, 2022
commit d1ddfaecba7a6f6a1333c5e6946577a05f41b865
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -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>
   )
 }
@@ -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,
   },
 }))
diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
@@ -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
 }
 
@@ -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 (
@@ -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>
         )}

diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -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"
@@ -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 {
@@ -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}
@@ -63,8 +80,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
                       </span>
                     ) : (
                       <span>{Language.emptyViewNoPerms}</span>
-                    )}
-                  </div>
+                    )} */}
                 </TableCell>
               </TableRow>
             )}
@@ -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),
   },
 }))