Refactor template page to use MUI table

BrunoQuaresma · BrunoQuaresma · commit c76d68c23b4b · 2022-05-13T16:24:43.000Z
diff --git a/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx
@@ -1,18 +1,35 @@
+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 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 { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
 import { Margins } from "../../../../components/Margins/Margins"
 import { Stack } from "../../../../components/Stack/Stack"
-import { Column, Table } from "../../../../components/Table/Table"
+import { TableHeaderRow } from "../../../../components/TableHeaders/TableHeaders"
+import { TableLoader } from "../../../../components/TableLoader/TableLoader"
+import { TableTitle } from "../../../../components/TableTitle/TableTitle"
 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",
+}
+
 export const TemplatePage: React.FC = () => {
   const navigate = useNavigate()
   const { template: templateName, organization: organizationName } = useParams()
@@ -32,73 +49,75 @@ export const TemplatePage: React.FC = () => {
     () => `/api/v2/organizations/${unsafeSWRArgument(organizationInfo).id}/workspaces`,
   )
 
-  if (organizationError) {
-    return <ErrorSummary error={organizationError} />
-  }
-
-  if (templateError) {
-    return <ErrorSummary error={templateError} />
-  }
-
-  if (workspacesError) {
-    return <ErrorSummary error={workspacesError} />
-  }
-
-  if (!templateInfo || !workspaces) {
-    return <FullScreenLoader />
-  }
+  const hasError = organizationError || templateError || workspacesError
+  const isLoading = !templateInfo || !workspaces
 
   const createWorkspace = () => {
     navigate(`/templates/${organizationName}/${templateName}/create`)
   }
 
-  const emptyState = (
-    <EmptyState
-      message="No workspaces have been created yet"
-      description="Create a workspace to get started"
-      cta={
-        <Button variant="contained" color="primary" onClick={createWorkspace}>
-          Create workspace
-        </Button>
-      }
-    />
-  )
-
-  const columns: Column<TypesGen.Workspace>[] = [
-    {
-      key: "name",
-      name: "Name",
-      renderer: (nameField: string | TypesGen.WorkspaceBuild, workspace: TypesGen.Workspace) => {
-        return <Link to={`/workspaces/${workspace.id}`}>{nameField}</Link>
-      },
-    },
-  ]
-
-  const perTemplateWorkspaces = workspaces.filter((workspace) => {
-    return workspace.template_id === templateInfo.id
-  })
-
-  const tableProps = {
-    title: "Workspaces",
-    columns,
-    data: perTemplateWorkspaces,
-    emptyState: emptyState,
-  }
+  const perTemplateWorkspaces =
+    workspaces && templateInfo
+      ? workspaces.filter((workspace) => {
+          return workspace.template_id === templateInfo.id
+        })
+      : undefined
 
   return (
     <Stack spacing={4}>
       <Header
         title={firstOrItem(templateName, "")}
         description={firstOrItem(organizationName, "")}
-        subTitle={`${perTemplateWorkspaces.length} workspaces`}
+        subTitle={perTemplateWorkspaces ? `${perTemplateWorkspaces.length} ${Language.subtitlePosfix}` : ""}
         action={{
           text: "Create Workspace",
           onClick: createWorkspace,
         }}
       />
 
       <Margins>
-        <Table {...tableProps} />
+        {organizationError && <ErrorSummary error={organizationError} />}
+        {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>
+        )}
       </Margins>
     </Stack>
   )
