Merge remote-tracking branch 'origin/main' into metrics

This primarily resolves delete template conflicts.
coder · ammario · Sep 1, 2022 · Aug 29, 2022 · Aug 29, 2022 · Sep 1, 2022
commit 00ec95321abb9d1fbfea0f4a1805c650f3fe7ce6
diff --git a/site/package.json b/site/package.json
@@ -109,8 +109,8 @@
     "jest": "27.5.1",
     "jest-canvas-mock": "2.4.0",
     "jest-junit": "14.0.0",
-    "jest-runner-eslint": "1.0.0",
-    "jest-websocket-mock": "2.3.0",
+    "jest-runner-eslint": "1.1.0",
+    "jest-websocket-mock": "2.4.0",
     "mini-css-extract-plugin": "2.6.1",
     "msw": "^0.45.0",
     "prettier": "2.7.1",

diff --git a/site/src/pages/TemplatePage/TemplatePage.test.tsx b/site/src/pages/TemplatePage/TemplatePage.test.tsx
@@ -1,5 +1,7 @@
-import { screen } from "@testing-library/react"
+import { fireEvent, screen } from "@testing-library/react"
+import { rest } from "msw"
 import { ResizeObserver } from "resize-observer"
+import { server } from "testHelpers/server"
 import * as CreateDayString from "util/createDayString"
 import {
   MockMemberPermissions,

diff --git a/site/src/pages/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatePage/TemplatePage.tsx
@@ -33,9 +33,22 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
     },
   })
 
-  const { template, activeTemplateVersion, templateResources, templateVersions, templateDAUs } =
-    templateState.context
-  const isLoading = !template || !activeTemplateVersion || !templateResources || !template
+  const {
+    template,
+    activeTemplateVersion,
+    templateResources,
+    templateVersions,
+    deleteTemplateError,
+    templateDAUs,
+  } = templateState.context
+  const xServices = useContext(XServiceContext)
+  const permissions = useSelector(xServices.authXService, selectPermissions)
+  const isLoading =
+    !template || !activeTemplateVersion || !templateResources || !permissions || !templateDAUs
+
+  const handleDeleteTemplate = () => {
+    templateSend("DELETE")
+  }
 
   if (isLoading) {
     return <Loader />
@@ -56,6 +69,25 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
         templateResources={templateResources}
         templateVersions={templateVersions}
         templateDAUs={templateDAUs}
+        canDeleteTemplate={permissions.deleteTemplates}
+        handleDeleteTemplate={handleDeleteTemplate}
+        deleteTemplateError={deleteTemplateError}
+      />
+
+      <ConfirmDialog
+        type="delete"
+        hideCancel={false}
+        open={templateState.matches("confirmingDelete")}
+        confirmLoading={templateState.matches("deleting")}
+        title={t("deleteDialog.title")}
+        confirmText={t("deleteDialog.confirm")}
+        onConfirm={() => {
+          templateSend("CONFIRM_DELETE")
+        }}
+        onClose={() => {
+          templateSend("CANCEL_DELETE")
+        }}
+        description={<>{t("deleteDialog.message")}</>}
       />
     </>
   )

diff --git a/site/src/pages/TemplatePage/TemplatePageView.tsx b/site/src/pages/TemplatePage/TemplatePageView.tsx
@@ -46,6 +46,9 @@ export interface TemplatePageViewProps {
   templateResources: WorkspaceResource[]
   templateVersions?: TemplateVersion[]
   templateDAUs?: TemplateDAUsResponse
+  handleDeleteTemplate: (templateId: string) => void
+  deleteTemplateError: Error | unknown
+  canDeleteTemplate: boolean
 }
 
 export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>> = ({
@@ -54,6 +57,9 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
   templateResources,
   templateVersions,
   templateDAUs,
+  handleDeleteTemplate,
+  deleteTemplateError,
+  canDeleteTemplate,
 }) => {
   const styles = useStyles()
   const readme = frontMatter(activeTemplateVersion.readme)
@@ -93,12 +99,24 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
                 </Button>
               </Link>
 
-      <Stack spacing={2.5}>
-        {templateDAUs && <DAUChart templateDAUs={templateDAUs} />}
-        <TemplateStats template={template} activeVersion={activeTemplateVersion} />
-        <WorkspaceSection
-          title={Language.resourcesTitle}
-          contentsProps={{ className: styles.resourcesTableContents }}
+              {canDeleteTemplate ? (
+                <DropdownButton
+                  primaryAction={createWorkspaceButton(styles.actionButton)}
+                  secondaryActions={[
+                    {
+                      action: "delete",
+                      button: (
+                        <DeleteButton handleAction={() => handleDeleteTemplate(template.id)} />
+                      ),
+                    },
+                  ]}
+                  canCancel={false}
+                />
+              ) : (
+                createWorkspaceButton()
+              )}
+            </Stack>
+          }
         >
           <Stack direction="row" spacing={3} className={styles.pageTitle}>
             <div>
@@ -121,6 +139,7 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
 
         <Stack spacing={2.5}>
           {deleteError}
+          {templateDAUs && <DAUChart templateDAUs={templateDAUs} />}
           <TemplateStats template={template} activeVersion={activeTemplateVersion} />
           <WorkspaceSection
             title={Language.resourcesTitle}

diff --git a/site/src/xServices/template/templateXService.ts b/site/src/xServices/template/templateXService.ts
@@ -24,15 +24,19 @@ interface TemplateContext {
   templateResources?: WorkspaceResource[]
   templateVersions?: TemplateVersion[]
   templateDAUs: TemplateDAUsResponse
+  deleteTemplateError?: Error | unknown
 }
 
+type TemplateEvent = { type: "DELETE" } | { type: "CONFIRM_DELETE" } | { type: "CANCEL_DELETE" }
+
 export const templateMachine =
-  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOhgBdyCoAVMVABwBt1ywBiCAe0JIIDcuAazAk0WPIVIUq+WvWaswCAV0ytcPANoAGALqJQDLrFxUehkAA9EAJgDsOkgGYd9gIwBOTwBYdnhzd7ABoQAE9Edx13Eh9PHTcANgAOAFYEnR9U5wBfHNDxHAJiPnwzXHQmAEl8ADMuEiwqfjA6RhY2ADUwACdTHjIwSmoAQUxm1oUOsG6+zXxOHlFVETEMIqlS8sqa+sbx3Ba2xS7e-vxB4bkxiePp2fOVfEF1c3xdAyQQY1M3yxsED4fDFEsDHO5Uql3IlnM4sqEIghkpkXJ4Usl4rZkskPPY8gV1pISgRttU6g02O0lAAlOBcACuPUwcEusnkVLYtNgDKZcEWvBWokKRNIJKoO3JJEpJzAXJ5zNgrOodxpdMZCqeLw02n0lh+5QsXwBwOSJGStixzlsMM87mR1oRkR0zhizlSiVscRdVrctnxIGFxVFZXFZL20vuZ3mipkyqmSge0f5y2ewiFhKDW1Duwp8dOcx4MaGbJV+fOsE1am1711X31fyNiD8PhI9gCtq8cNSjmSjoQ3fssWc9lSWPsQOyiX9gc2YoqYdzHLAABERgBVItXdky1cb5OlQSrGfEkPznNSvMr9ebkuX3cV1SveYfPUmA34f6IZzJZwkLEYsdfGyYc+3cWxUlNF1u1hRJIU8ccp3yAMM1nU8JXqfdYHIJQ1gkTM53QrhX1+eZPwQTxvzNCF4OSRJ3Hsa03D7bFPBcZEGMSNsEmSHxEKQ-AuAgOBLGPaRizjJdiPfMifFsZjWM8bE4SBRTskcXIkNErMz0lJpDkmJdEwGWNrgOI5LyMj86zfBtQABdx6L7NtbDNTwoXdTjx0yP1NJQk9SXPPTzMMqMBlgelMAVeBrJIw07MQewrRIKJvxNHxcXsEJwkQZJ6LNNJbDhC00jczxpz84MAt0syDJlSypNs6xEAopzbCceJHFgnROLa81yrw1CqvDS85XVFkTO3aZRt5aKjBs0jGwQByssRKIvDNVIfGcdtnVcH9+o2fzs0lCNVW5MbFXCyK4Fm755ripqEBSRJYlgtJUniTadB40DMhbHj0ratyPB0HyCQGo6dOGpdpoVBqFvi8jnD7XxB1omFolsCiHMKg6RW0wiLxCgt8BvCS6tC0n4Ye+zHOy-tYJICj3QY2FeOHPH8LQhciYpknLoiqLqasxG3tiHQPrc4FQfsRJPD7D72sYhJvx4vbOcG47ob58thbIlr6a9Jn0og30gWBdwfA1yHCdOth7yVORSyvDc9cW5bQM9F7cu-TKvbcTbrcqrXFx3a8SCuoWYukxa6NSVFzTRWEsfsc1PY8M1MjcbFITlnEg4Jnm7Zd276wRx6DdW+j-vA1P3TdHE0QLgiFzd0X5cN2wYlKnwMQc2Sslx3yIdIJguHQISIDbx6omyFxElg0EAghZxEmYn8zVTtqGPg+iRyD6f7N7em7TyPIgA */
+  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOhgBdyCoAVMVABwBt1ywBiCAe0JIIDcuAazAk0WPIVIUq+WvWaswCAV0ytcPANoAGALqJQDLrFxUehkAA9EAJgDsOkgGZbO2wE5bANg8BGABZnHR0AgBoQAE9EPx0-Eg9EpIAOe28-D28ggF9siPEcAmI+fDNcdCYASXwAMy4SLCp+MDpGFjYANTAAJ1MeMjBKagBBTCaWhXawLt7NfE4eUVURMQxCqRKyiuq6hrHcZtbFTp6+-AGhuVHxo6mZs5V8QXVzfF0DJBBjU1fLGwQAgF4t4AKzeWzOTIhEEhZIRaIIZI6EEkEIhZyg2xuEF+XL5NaSYoELZVWr1NhtJQAJTgXAArt1MHALrJ5JS2DTYPTGXAFrxlqICoTSMSqNsySQKccwJzuUzYCzqLdqbSGfLHs8NNp9JZvmULJ9-kDkiRks4QR50SDkh5nH5nPCYjpXKi0SDnObbeaAniQEKiiLSmLSbspXdTnMFTIlZMlPdI3ylk9hIKCQHNsGduTYydZjwo4NWcrc2dYBq1Fq3jrPnrfobEAFQqbQt5kiCcf4go6ECD7Ca0XFMskAmksr7-RtReUQ1xEyRYOQlKsJOmp+K6rqTPr8H9ELaTclkg5wQEzRidB5u-Y0q6QgFbAEsuCMuO0xsmFx0BBIOwACIAUQAGX-Gh-03H45ksBFrycGE7zcW1bD8e0In+Pw3G8EggT8M0-Fbc8PGSV8Vw2TAeBqXBulQahfzAJhBg4ABhAB5AA5AAxSoqQAWQAfQA4DQPA7ddwQZCMVRUF7Bw3svXsEFuz8MFMNtC8bRtHQzWHYj1mKMjako6i5Fo+i2HYRjhlYxigP4oCQLAmstzrUA0OcaSSHsZwbSUjwAl83zwiiGJGw8LCwTtU8vGQnI8j9N9im-UzqDnAUSEShjizAYTnOsRB7BHEglLwoqskCWxFJ8ewPJ0bx8tsC1IQhZwdOFNK6MGZKem6LhuhIY46iotrTImdkssciCDRcvcbVRJrwr8fLXHsRTYRIOCau8WqYRxIjfXwLhv3gT4J2KaM5Ey7LIPrAFyqChBLVvEJPGk2w21PFrVyDacsz2G4c2mCN+jOqBrgOEbpXjSavicq6prEhar1tR7IXSaSfVik7AxJH7GjBzLIfOWA6UweUjqMGGof+TzbEKsEMiRdwYUhbtkhw5HnHvXx0g8D7Jy+9d6lxw5-oJy7Kb3B07vsJDkekjwcSyWxeaJfmZ0lf7ZTVZlgcyzWeTJ6GJp3a7kOWu7YjcR6wQCEFAQfbxlaxzMJTDFUuS1hUiZJuADdrWHcoQVtMJxdtWfvaL0hWm2rfcRXHxBR2M2+l2NdVfWxeNuHbW7Xz+xCWJkm8ZE3LbRO1zV12S0jRVzpFwH8F9inM4D03u2Ux6sWvQj2wTjH4qd5PQzrvMG-nYnSYz0TQRNG3gnUyE+zNNv-EevDrUya9mr7kiVexlPRoJxujdE7O7r8gIO+dXtUkyMvVazSfrt8bt7xpgcFttC1nXsROPy-SBH5w1iO6MKwRghAkbH2BSUtHBrTRPeC8rhxKJ30hRKiNF2psEAS3ZCNMkR4R8MOWqfloEIntCvDmnoRzyUIvLRO6VWTYP+F4TCNt0g22REhV6pCYgEJIPVDENsPBpA9GkehmCAHjREtdVmmFPCKy2u6RwcJzaQicMOb0wQ3ALVxNvXSRAmExBUWQvOA5baqXlrbXIuQgA */
   createMachine(
     {
       tsTypes: {} as import("./templateXService.typegen").Typegen0,
       schema: {
         context: {} as TemplateContext,
+        events: {} as TemplateEvent,
         services: {} as {
           getTemplate: {
             data: Template
@@ -46,6 +50,9 @@ export const templateMachine =
           getTemplateVersions: {
             data: TemplateVersion[]
           }
+          deleteTemplate: {
+            data: Template
+          }
           getTemplateDAUs: {
             data: TemplateDAUsResponse
           }
@@ -149,7 +156,48 @@ export const templateMachine =
             target: "loaded",
           },
         },
-        loaded: {},
+        loaded: {
+          on: {
+            DELETE: {
+              target: "confirmingDelete",
+            },
+          },
+          onDone: {
+            target: "loaded",
+          },
+        },
+        confirmingDelete: {
+          on: {
+            CONFIRM_DELETE: {
+              target: "deleting",
+            },
+            CANCEL_DELETE: {
+              target: "loaded",
+            },
+          },
+        },
+        deleting: {
+          entry: "clearDeleteTemplateError",
+          invoke: {
+            src: "deleteTemplate",
+            id: "deleteTemplate",
+            onDone: [
+              {
+                target: "deleted",
+                actions: "displayDeleteSuccess",
+              },
+            ],
+            onError: [
+              {
+                actions: "assignDeleteTemplateError",
+                target: "loaded",
+              },
+            ],
+          },
+        },
+        deleted: {
+          type: "final",
+        },
       },
     },
     {
@@ -176,11 +224,16 @@ export const templateMachine =
 
           return getTemplateVersions(ctx.template.id)
         },
+        deleteTemplate: (ctx) => {
+          if (!ctx.template) {
+            throw new Error("Template not loaded")
+          }
+          return deleteTemplate(ctx.template.id)
+        },
         getTemplateDAUs: (ctx) => {
           if (!ctx.template) {
             throw new Error("Template not loaded")
           }
-
           return getTemplateDAUs(ctx.template.id)
         },
       },
@@ -200,6 +253,13 @@ export const templateMachine =
         assignTemplateDAUs: assign({
           templateDAUs: (_, event) => event.data,
         }),
+        assignDeleteTemplateError: assign({
+          deleteTemplateError: (_, event) => event.data,
+        }),
+        clearDeleteTemplateError: assign({
+          deleteTemplateError: (_) => undefined,
+        }),
+        displayDeleteSuccess: () => displaySuccess(t("deleteSuccess", { ns: "templatePage" })),
       },
     },
   )