Add empty view

kylecarbs · kylecarbs · commit cbc1015fb74a · 2022-05-16T16:03:21.000Z
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -1,12 +1,8 @@
 import { useMachine } from "@xstate/react"
-import dayjs from "dayjs"
-import relativeTime from "dayjs/plugin/relativeTime"
 import React from "react"
 import { workspacesMachine } from "../../xServices/workspaces/workspacesXService"
 import { WorkspacesPageView } from "./WorkspacesPageView"
 
-dayjs.extend(relativeTime)
-
 export const WorkspacesPage: React.FC = () => {
   const [workspacesState] = useMachine(workspacesMachine)
 
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
@@ -45,3 +45,6 @@ AllStates.args = {
     createWorkspaceWithStatus("running", "delete"),
   ],
 }
+
+export const Empty = Template.bind({})
+Empty.args = {}
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -1,3 +1,4 @@
+import { Link } from "@material-ui/core"
 import Avatar from "@material-ui/core/Avatar"
 import Button from "@material-ui/core/Button"
 import { makeStyles, Theme } from "@material-ui/core/styles"
@@ -11,7 +12,7 @@ import useTheme from "@material-ui/styles/useTheme"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import React from "react"
-import { Link } from "react-router-dom"
+import { Link as RouterLink } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { WorkspaceBuild } from "../../api/typesGenerated"
 import { Margins } from "../../components/Margins/Margins"
@@ -50,14 +51,28 @@ export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) =>
             </TableRow>
           </TableHead>
           <TableBody>
+            {!props.workspaces && (
+              <TableRow>
+                <TableCell colSpan={999}>
+                  <div className={styles.welcome}>
+                    <span>
+                      <Link component={RouterLink} to="/workspaces/new">
+                        Create a workspace
+                      </Link>
+                      &nbsp;so you can check out your repositories, edit your source code, and build and test your software.
+                    </span>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
             {props.workspaces?.map((workspace) => (
               <TableRow key={workspace.id} className={styles.workspaceRow}>
                 <TableCell>
                   <div className={styles.workspaceName}>
                     <Avatar variant="square" className={styles.workspaceAvatar}>
                       {firstLetter(workspace.name)}
                     </Avatar>
-                    <Link to={`/workspaces/${workspace.id}`} className={styles.workspaceLink}>
+                    <Link component={RouterLink} to={`/workspaces/${workspace.id}`} className={styles.workspaceLink}>
                       <b>{workspace.name}</b>
                       <span>{workspace.owner_name}</span>
                     </Link>
@@ -139,6 +154,20 @@ const useStyles = makeStyles((theme) => ({
       marginLeft: "auto",
     },
   },
+  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`,
+    },
+  },
   workspaceRow: {
     "& > td": {
       paddingTop: theme.spacing(2),
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
@@ -1,4 +1,4 @@
-import { PaletteOptions } from "@material-ui/core/styles/createPalette"
+import { PaletteOptions, SimplePaletteColorOptions } from "@material-ui/core/styles/createPalette"
 import { MONOSPACE_FONT_FAMILY } from "./constants"
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -74,5 +74,10 @@ export const getOverrides = (palette: PaletteOptions) => {
         },
       },
     },
+    MuiLink: {
+      root: {
+        color: (palette.primary as SimplePaletteColorOptions).light,
+      },
+    },
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -45,3 +45,6 @@ AllStates.args = {`
`45`	`45`	`createWorkspaceWithStatus("running", "delete"),`
`46`	`46`	`],`
`47`	`47`	`}`
	`48`	`+`
	`49`	`+export const Empty = Template.bind({})`
	`50`	`+Empty.args = {}`