Add templates table

coder · BrunoQuaresma · May 13, 2022 · May 12, 2022 · May 12, 2022 · May 12, 2022
commit 6b378684a977df55528d0c37ade1092bbccacad9
diff --git a/site/src/components/TemplatesTable/TemplatesTable.stories.tsx b/site/src/components/TemplatesTable/TemplatesTable.stories.tsx
@@ -0,0 +1,23 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { MockOrganization, MockTemplate } from "../../testHelpers/entities"
+import { TemplatesTable, TemplatesTableProps } from "./TemplatesTable"
+
+export default {
+  title: "components/TemplatesTable",
+  component: TemplatesTable,
+} as ComponentMeta<typeof TemplatesTable>
+
+const Template: Story<TemplatesTableProps> = (args) => <TemplatesTable {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  templates: [MockTemplate],
+  organizations: [MockOrganization],
+}
+
+export const Empty = Template.bind({})
+Empty.args = {
+  templates: [],
+  organizations: [],
+}
diff --git a/site/src/components/TemplatesTable/TemplatesTable.tsx b/site/src/components/TemplatesTable/TemplatesTable.tsx
@@ -0,0 +1,81 @@
+import Box from "@material-ui/core/Box"
+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 { CodeExample } from "../../components/CodeExample/CodeExample"
+import { EmptyState } from "../../components/EmptyState/EmptyState"
+import { TableHeaderRow } from "../../components/TableHeaders/TableHeaders"
+import { TableLoader } from "../../components/TableLoader/TableLoader"
+import { TableTitle } from "../../components/TableTitle/TableTitle"
+
+export const Language = {
+  title: "Templates",
+  tableTitle: "All templates",
+  nameLabel: "Name",
+  emptyMessage: "No templates have been created yet",
+  emptyDescription: "Run the following command to get started:",
+  totalLabel: "total",
+}
+
+export interface TemplatesTableProps {
+  templates?: TypesGen.Template[]
+  organizations?: TypesGen.Organization[]
+}
+
+export const TemplatesTable: React.FC<TemplatesTableProps> = ({ templates, organizations }) => {
+  const isLoading = !templates || !organizations
+
+  // Create a dictionary of organization ID -> organization Name
+  // Needed to properly construct links to dive into a template
+  const orgDictionary =
+    organizations &&
+    organizations.reduce((acc: Record<string, string>, curr: TypesGen.Organization) => {
+      return {
+        ...acc,
+        [curr.id]: curr.name,
+      }
+    }, {})
+
+  return (
+    <Table>
+      <TableHead>
+        <TableTitle title={Language.tableTitle} />
+        <TableHeaderRow>
+          <TableCell size="small">{Language.nameLabel}</TableCell>
+        </TableHeaderRow>
+      </TableHead>
+      <TableBody>
+        {isLoading && <TableLoader />}
+        {templates &&
+          organizations &&
+          orgDictionary &&
+          templates.map((t) => (
+            <TableRow key={t.id}>
+              <TableCell>
+                <Link to={`/templates/${orgDictionary[t.organization_id]}/${t.name}`}>{t.name}</Link>
+              </TableCell>
+            </TableRow>
+          ))}
+
+        {templates && templates.length === 0 && (
+          <TableRow>
+            <TableCell colSpan={999}>
+              <Box p={4}>
+                <EmptyState
+                  message={Language.emptyMessage}
+                  description={Language.emptyDescription}
+                  cta={<CodeExample code="coder templates create" />}
+                />
+              </Box>
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/site/src/pages/TemplatesPages/TemplatesPage.tsx b/site/src/pages/TemplatesPages/TemplatesPage.tsx
@@ -1,22 +1,11 @@
-import Box from "@material-ui/core/Box"
-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 useSWR from "swr"
 import * as TypesGen from "../../api/typesGenerated"
-import { CodeExample } from "../../components/CodeExample/CodeExample"
-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 { TemplatesTable } from "../../components/TemplatesTable/TemplatesTable"
 
 export const Language = {
   title: "Templates",
@@ -29,66 +18,19 @@ export const Language = {
 
 export const TemplatesPage: React.FC = () => {
   const { data: orgs, error: orgsError } = useSWR<TypesGen.Organization[], Error>("/api/v2/users/me/organizations")
-  const { data: templates, error } = useSWR<TypesGen.Template[] | null, Error>(
-    orgs ? `/api/v2/organizations/${orgs[0].id}/templates` : null,
+  const { data: templates, error } = useSWR<TypesGen.Template[] | undefined, Error>(
+    orgs ? `/api/v2/organizations/${orgs[0].id}/templates` : undefined,
   )
-  const isLoading = !templates || !orgs
   const subTitle = templates ? `${templates.length} ${Language.totalLabel}` : undefined
   const hasError = orgsError || error
-  // Create a dictionary of organization ID -> organization Name
-  // Needed to properly construct links to dive into a template
-  const orgDictionary =
-    orgs &&
-    orgs.reduce((acc: Record<string, string>, curr: TypesGen.Organization) => {
-      return {
-        ...acc,
-        [curr.id]: curr.name,
-      }
-    }, {})
 
   return (
     <Stack spacing={4}>
       <Header title={Language.title} subTitle={subTitle} />
       <Margins>
         {error && <ErrorSummary error={error} />}
         {orgsError && <ErrorSummary error={orgsError} />}
-        {!hasError && (
-          <Table>
-            <TableHead>
-              <TableTitle title={Language.tableTitle} />
-              <TableHeaderRow>
-                <TableCell size="small">{Language.nameLabel}</TableCell>
-              </TableHeaderRow>
-            </TableHead>
-            <TableBody>
-              {isLoading && <TableLoader />}
-              {templates &&
-                orgs &&
-                orgDictionary &&
-                templates.map((t) => (
-                  <TableRow key={t.id}>
-                    <TableCell>
-                      <Link to={`/templates/${orgDictionary[t.organization_id]}/${t.name}`}>{t.name}</Link>
-                    </TableCell>
-                  </TableRow>
-                ))}
-
-              {templates && templates.length === 0 && (
-                <TableRow>
-                  <TableCell colSpan={999}>
-                    <Box p={4}>
-                      <EmptyState
-                        message={Language.emptyMessage}
-                        description={Language.emptyDescription}
-                        cta={<CodeExample code="coder templates create" />}
-                      />
-                    </Box>
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        )}
+        {!hasError && <TemplatesTable organizations={orgs} templates={templates} />}
       </Margins>
     </Stack>
   )