Add empty states

kylecarbs · kylecarbs · commit 584d3a34c848 · 2022-05-17T05:06:40.000Z
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
@@ -0,0 +1,36 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { MockTemplate } from "../../testHelpers/entities"
+import { TemplatesPageView, TemplatesPageViewProps } from "./TemplatesPageView"
+
+export default {
+  title: "pages/TemplatesPageView",
+  component: TemplatesPageView,
+} as ComponentMeta<typeof TemplatesPageView>
+
+const Template: Story<TemplatesPageViewProps> = (args) => <TemplatesPageView {...args} />
+
+export const AllStates = Template.bind({})
+AllStates.args = {
+  canCreateTemplate: true,
+  templates: [
+      MockTemplate,
+      {
+          ...MockTemplate,
+          description: "🚀 Some magical template that does some magical things!",
+      },
+      {
+          ...MockTemplate,
+          workspace_owner_count: 150,
+          description: "😮 Wow, this one has a bunch of usage!"
+      }
+  ],
+}
+
+export const EmptyCanCreate = Template.bind({})
+EmptyCanCreate.args = {
+  canCreateTemplate: true,
+}
+
+export const EmptyCannotCreate = Template.bind({})
+EmptyCannotCreate.args = {}
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -1,29 +1,27 @@
 import Avatar from "@material-ui/core/Avatar"
 import Button from "@material-ui/core/Button"
 import Link from "@material-ui/core/Link"
-import { makeStyles, Theme } from "@material-ui/core/styles"
+import { makeStyles } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
-import useTheme from "@material-ui/styles/useTheme"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import React from "react"
 import { Link as RouterLink } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
-import { combineClasses } from "../../util/combineClasses"
 import { firstLetter } from "../../util/firstLetter"
 
 dayjs.extend(relativeTime)
 
 export const Language = {
   createButton: "Create Template",
-  emptyView: "so you can check out your repositories, edit your source code, and build and test your software.",
+  emptyView: "to standardize development workspaces for your team.",
 }
 
 export interface TemplatesPageViewProps {
@@ -35,14 +33,11 @@ export interface TemplatesPageViewProps {
 
 export const TemplatesPageView: React.FC<TemplatesPageViewProps> = (props) => {
   const styles = useStyles()
-  const theme: Theme = useTheme()
   return (
     <Stack spacing={4}>
       <Margins>
         <div className={styles.actions}>
-          {props.canCreateTemplate && (
-          <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
-          )}
+          {props.canCreateTemplate && <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>}
         </div>
         <Table>
           <TableHead>
@@ -57,12 +52,16 @@ export const TemplatesPageView: React.FC<TemplatesPageViewProps> = (props) => {
               <TableRow>
                 <TableCell colSpan={999}>
                   <div className={styles.welcome}>
-                    <span>
-                      <Link component={RouterLink} to="/templates/new">
-                        Create a template
-                      </Link>
-                      &nbsp;{Language.emptyView}
-                    </span>
+                    {props.canCreateTemplate ? (
+                      <span>
+                        <Link component={RouterLink} to="/templates/new">
+                          Create a template
+                        </Link>
+                        &nbsp;{Language.emptyView}
+                      </span>
+                    ) : (
+                      <span>No templates have been created! Contact your Coder administrator.</span>
+                    )}
                   </div>
                 </TableCell>
               </TableRow>
@@ -77,13 +76,13 @@ export const TemplatesPageView: React.FC<TemplatesPageViewProps> = (props) => {
                       </Avatar>
                       <Link component={RouterLink} to={`/templates/${template.id}`} className={styles.templateLink}>
                         <b>{template.name}</b>
-                        <span>
-                        {template.description}
-                        </span>
+                        <span>{template.description}</span>
                       </Link>
                     </div>
                   </TableCell>
-                  <TableCell>{template.workspace_owner_count} developer{template.workspace_owner_count !== 1 && "s"}</TableCell>
+                  <TableCell>
+                    {template.workspace_owner_count} developer{template.workspace_owner_count !== 1 && "s"}
+                  </TableCell>
                   <TableCell>{dayjs().to(dayjs(template.updated_at))}</TableCell>
                 </TableRow>
               )
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -80,8 +80,8 @@ export const MockRunningProvisionerJob = { ...MockProvisionerJob, status: "runni
 
 export const MockTemplate: TypesGen.Template = {
   id: "test-template",
-  created_at: "",
-  updated_at: "",
+  created_at: new Date().toString(),
+  updated_at: new Date().toString(),
   organization_id: MockOrganization.id,
   name: "Test Template",
   provisioner: MockProvisioner.id,
