Add workspaces table

coder · BrunoQuaresma · May 13, 2022 · May 12, 2022 · May 12, 2022 · May 12, 2022
commit b3bdc36ae3ade14efd0d37715c99cd984357e12a
diff --git a/site/src/components/NavbarView/NavbarView.stories.tsx b/site/src/components/NavbarView/NavbarView.stories.tsx
@@ -1,5 +1,6 @@
 import { Story } from "@storybook/react"
 import React from "react"
+import { MockUser, MockUser2 } from "../../testHelpers/entities"
 import { NavbarView, NavbarViewProps } from "./NavbarView"
 
 export default {
@@ -14,15 +15,15 @@ const Template: Story<NavbarViewProps> = (args: NavbarViewProps) => <NavbarView
 
 export const ForAdmin = Template.bind({})
 ForAdmin.args = {
-  user: { id: "1", username: "Administrator", email: "admin@coder.com", created_at: "dawn" },
+  user: MockUser,
   onSignOut: () => {
     return Promise.resolve()
   },
 }
 
 export const ForMember = Template.bind({})
 ForMember.args = {
-  user: { id: "1", username: "CathyCoder", email: "cathy@coder.com", created_at: "dawn" },
+  user: MockUser2,
   onSignOut: () => {
     return Promise.resolve()
   },

diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.stories.tsx b/site/src/components/WorkspacesTable/WorkspacesTable.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { MockTemplate, MockWorkspace } from "../../testHelpers/entities"
+import { WorkspacesTable, WorkspacesTableProps } from "./WorkspacesTable"
+
+export default {
+  title: "components/WorkspacesTable",
+  component: WorkspacesTable,
+} as ComponentMeta<typeof WorkspacesTable>
+
+const Template: Story<WorkspacesTableProps> = (args) => <WorkspacesTable {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  templateInfo: MockTemplate,
+  workspaces: [MockWorkspace],
+  onCreateWorkspace: () => {
+    console.info("Create workspace")
+  },
+}
+
+export const Empty = Template.bind({})
+Empty.args = {
+  templateInfo: MockTemplate,
+  workspaces: [],
+  onCreateWorkspace: () => {
+    console.info("Create workspace")
+  },
+}
diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.tsx b/site/src/components/WorkspacesTable/WorkspacesTable.tsx
@@ -0,0 +1,72 @@
+import Box from "@material-ui/core/Box"
+import Button from "@material-ui/core/Button"
+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 React from "react"
+import { Link } from "react-router-dom"
+import * as TypesGen from "../../api/typesGenerated"
+import { EmptyState } from "../EmptyState/EmptyState"
+import { TableHeaderRow } from "../TableHeaders/TableHeaders"
+import { TableLoader } from "../TableLoader/TableLoader"
+import { TableTitle } from "../TableTitle/TableTitle"
+
+export const Language = {
+  title: "Workspaces",
+  nameLabel: "Name",
+  emptyMessage: "No workspaces have been created yet",
+  emptyDescription: "Create a workspace to get started",
+  ctaAction: "Create workspace",
+}
+
+export interface WorkspacesTableProps {
+  templateInfo?: TypesGen.Template
+  workspaces?: TypesGen.Workspace[]
+  onCreateWorkspace: () => void
+}
+
+export const WorkspacesTable: React.FC<WorkspacesTableProps> = ({ templateInfo, workspaces, onCreateWorkspace }) => {
+  const isLoading = !templateInfo || !workspaces
+
+  return (
+    <Table>
+      <TableHead>
+        <TableTitle title={Language.title} />
+        <TableHeaderRow>
+          <TableCell size="small">{Language.nameLabel}</TableCell>
+        </TableHeaderRow>
+      </TableHead>
+      <TableBody>
+        {isLoading && <TableLoader />}
+        {workspaces &&
+          workspaces.map((w) => (
+            <TableRow key={w.id}>
+              <TableCell>
+                <Link to={`/workspaces/${w.id}`}>{w.name}</Link>
+              </TableCell>
+            </TableRow>
+          ))}
+
+        {workspaces && workspaces.length === 0 && (
+          <TableRow>
+            <TableCell colSpan={999}>
+              <Box p={4}>
+                <EmptyState
+                  message={Language.emptyMessage}
+                  description={Language.emptyDescription}
+                  cta={
+                    <Button variant="contained" color="primary" onClick={onCreateWorkspace}>
+                      {Language.ctaAction}
+                    </Button>
+                  }
+                />
+              </Box>
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx
@@ -1,33 +1,17 @@
-import Box from "@material-ui/core/Box"
-import Button from "@material-ui/core/Button"
-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 React from "react"
-import { Link, useNavigate, useParams } from "react-router-dom"
+import { useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
 import * as TypesGen from "../../../../api/typesGenerated"
-import { EmptyState } from "../../../../components/EmptyState/EmptyState"
 import { ErrorSummary } from "../../../../components/ErrorSummary/ErrorSummary"
 import { Header } from "../../../../components/Header/Header"
 import { Margins } from "../../../../components/Margins/Margins"
 import { Stack } from "../../../../components/Stack/Stack"
-import { TableHeaderRow } from "../../../../components/TableHeaders/TableHeaders"
-import { TableLoader } from "../../../../components/TableLoader/TableLoader"
-import { TableTitle } from "../../../../components/TableTitle/TableTitle"
+import { WorkspacesTable } from "../../../../components/WorkspacesTable/WorkspacesTable"
 import { unsafeSWRArgument } from "../../../../util"
 import { firstOrItem } from "../../../../util/array"
 
 export const Language = {
-  tableTitle: "Workspaces",
-  nameLabel: "Name",
-  emptyMessage: "No workspaces have been created yet",
-  emptyDescription: "Create a workspace to get started",
-  totalLabel: "total",
-  ctaAction: "Create workspace",
-  subtitlePosfix: "workspaces",
+  subtitle: "workspaces",
 }
 
 export const TemplatePage: React.FC = () => {
@@ -44,13 +28,11 @@ export const TemplatePage: React.FC = () => {
 
   // This just grabs all workspaces... and then later filters them to match the
   // current template.
-
   const { data: workspaces, error: workspacesError } = useSWR<TypesGen.Workspace[], Error>(
     () => `/api/v2/organizations/${unsafeSWRArgument(organizationInfo).id}/workspaces`,
   )
 
   const hasError = organizationError || templateError || workspacesError
-  const isLoading = !templateInfo || !workspaces
 
   const createWorkspace = () => {
     navigate(`/templates/${organizationName}/${templateName}/create`)
@@ -68,7 +50,7 @@ export const TemplatePage: React.FC = () => {
       <Header
         title={firstOrItem(templateName, "")}
         description={firstOrItem(organizationName, "")}
-        subTitle={perTemplateWorkspaces ? `${perTemplateWorkspaces.length} ${Language.subtitlePosfix}` : ""}
+        subTitle={perTemplateWorkspaces ? `${perTemplateWorkspaces.length} ${Language.subtitle}` : ""}
         action={{
           text: "Create Workspace",
           onClick: createWorkspace,
@@ -80,43 +62,7 @@ export const TemplatePage: React.FC = () => {
         {templateError && <ErrorSummary error={templateError} />}
         {workspacesError && <ErrorSummary error={workspacesError} />}
         {!hasError && (
-          <Table>
-            <TableHead>
-              <TableTitle title={Language.tableTitle} />
-              <TableHeaderRow>
-                <TableCell size="small">{Language.nameLabel}</TableCell>
-              </TableHeaderRow>
-            </TableHead>
-            <TableBody>
-              {isLoading && <TableLoader />}
-              {workspaces &&
-                workspaces.map((w) => (
-                  <TableRow key={w.id}>
-                    <TableCell>
-                      <Link to={`/workspaces/${w.id}`}>{w.name}</Link>
-                    </TableCell>
-                  </TableRow>
-                ))}
-
-              {workspaces && workspaces.length === 0 && (
-                <TableRow>
-                  <TableCell colSpan={999}>
-                    <Box p={4}>
-                      <EmptyState
-                        message={Language.emptyMessage}
-                        description={Language.emptyDescription}
-                        cta={
-                          <Button variant="contained" color="primary" onClick={createWorkspace}>
-                            {Language.ctaAction}
-                          </Button>
-                        }
-                      />
-                    </Box>
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
+          <WorkspacesTable templateInfo={templateInfo} workspaces={workspaces} onCreateWorkspace={createWorkspace} />
         )}
       </Margins>
     </Stack>