Show create template conditionally

kylecarbs · kylecarbs · commit 3d70c676d691 · 2022-05-17T04:35:03.000Z
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -6,7 +6,13 @@ import { TemplatesPageView } from "./TemplatesPageView"
 const TemplatesPage: React.FC = () => {
   const [templatesState] = useMachine(templatesMachine)
 
-  return <TemplatesPageView templates={templatesState.context.templates} loading={templatesState.hasTag("loading")} />
+  return (
+    <TemplatesPageView
+      templates={templatesState.context.templates}
+      canCreateTemplate={templatesState.context.canCreateTemplate}
+      loading={templatesState.hasTag("loading")}
+    />
+  )
 }
 
 export default TemplatesPage
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -16,6 +16,7 @@ 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)
@@ -27,6 +28,7 @@ export const Language = {
 
 export interface TemplatesPageViewProps {
   loading?: boolean
+  canCreateTemplate?: boolean
   templates?: TypesGen.Template[]
   error?: unknown
 }
@@ -38,16 +40,16 @@ export const TemplatesPageView: React.FC<TemplatesPageViewProps> = (props) => {
     <Stack spacing={4}>
       <Margins>
         <div className={styles.actions}>
+          {props.canCreateTemplate && (
           <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
+          )}
         </div>
         <Table>
           <TableHead>
             <TableRow>
               <TableCell>Name</TableCell>
-              <TableCell>Resources</TableCell>
-              <TableCell>Last Updated</TableCell>
-              <TableCell>Provisioner</TableCell>
               <TableCell>Used By</TableCell>
+              <TableCell>Last Updated</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
@@ -76,13 +78,10 @@ export const TemplatesPageView: React.FC<TemplatesPageViewProps> = (props) => {
                       <Link component={RouterLink} to={`/templates/${template.id}`} className={styles.templateLink}>
                         <b>{template.name}</b>
                       </Link>
+                      {template.description}
                     </div>
                   </TableCell>
-                  <TableCell>{template.description}</TableCell>
                   <TableCell>{dayjs().to(dayjs(template.updated_at))}</TableCell>
-                  <TableCell>
-                    <img alt="Terraform" src="/terraform-logo.svg" />
-                  </TableCell>
                   <TableCell>{template.workspace_owner_count} developer{template.workspace_owner_count !== 1 && "s"}</TableCell>
                 </TableRow>
               )
diff --git a/site/src/xServices/templates/templatesXService.ts b/site/src/xServices/templates/templatesXService.ts
@@ -5,6 +5,8 @@ import * as TypesGen from "../../api/typesGenerated"
 interface TemplatesContext {
   organizations?: TypesGen.Organization[]
   templates?: TypesGen.Template[]
+  canCreateTemplate?: boolean
+  permissionsError?: Error | unknown
   organizationsError?: Error | unknown
   templatesError?: Error | unknown
 }
@@ -18,6 +20,9 @@ export const templatesMachine = createMachine(
         getOrganizations: {
           data: TypesGen.Organization[]
         }
+        getPermissions: {
+          data: boolean
+        }
         getTemplates: {
           data: TypesGen.Template[]
         }
@@ -34,7 +39,7 @@ export const templatesMachine = createMachine(
           onDone: [
             {
               actions: ["assignOrganizations", "clearOrganizationsError"],
-              target: "gettingTemplates",
+              target: "gettingPermissions",
             },
           ],
           onError: [
@@ -46,6 +51,26 @@ export const templatesMachine = createMachine(
         },
         tags: "loading",
       },
+      gettingPermissions: {
+        entry: "clearPermissionsError",
+        invoke: {
+          src: "getPermissions",
+          id: "getPermissions",
+          onDone: [
+            {
+              target: "gettingTemplates",
+              actions: ["assignPermissions", "clearPermissionsError"],
+            },
+          ],
+          onError: [
+            {
+              actions: "assignPermissionsError",
+              target: "error",
+            },
+          ],
+        },
+        tags: "loading",
+      },
       gettingTemplates: {
         entry: "clearTemplatesError",
         invoke: {
@@ -78,6 +103,16 @@ export const templatesMachine = createMachine(
         ...context,
         organizationsError: undefined,
       })),
+      assignPermissions: assign({
+        canCreateTemplate: (_, event) => event.data,
+      }),
+      assignPermissionsError: assign({
+        permissionsError: (_, event) => event.data,
+      }),
+      clearPermissionsError: assign((context) => ({
+        ...context,
+        permissionsError: undefined,
+      })),
       assignTemplates: assign({
         templates: (_, event) => event.data,
       }),
@@ -88,6 +123,20 @@ export const templatesMachine = createMachine(
     },
     services: {
       getOrganizations: API.getOrganizations,
+      getPermissions: async () => {
+        const permName = "createTemplates"
+        const resp = await API.checkUserPermissions("me", {
+          checks: {
+            [permName]: {
+              action: "write",
+              object: {
+                resource_type: "template",
+              },
+            },
+          },
+        })
+        return resp[permName]
+      },
       getTemplates: async (context) => {
         if (!context.organizations || context.organizations.length === 0) {
           throw new Error("no organizations")
