Start adding DropdownButton to Template page

presleyp · presleyp · commit e431721a05f0 · 2022-08-26T22:16:58.000Z
diff --git a/site/src/pages/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatePage/TemplatePage.tsx
@@ -31,6 +31,11 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
     templateState.context
   const isLoading = !template || !activeTemplateVersion || !templateResources
 
+  const handleDeleteTemplate = (templateId: string) => {
+    //TODO
+    console.log("implement me", templateId)
+  }
+
   if (isLoading) {
     return <Loader />
   }
@@ -45,6 +50,7 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
         activeTemplateVersion={activeTemplateVersion}
         templateResources={templateResources}
         templateVersions={templateVersions}
+        handleDeleteTemplate={handleDeleteTemplate}
       />
     </>
   )
diff --git a/site/src/pages/TemplatePage/TemplatePageView.tsx b/site/src/pages/TemplatePage/TemplatePageView.tsx
@@ -4,6 +4,8 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
 import SettingsOutlined from "@material-ui/icons/SettingsOutlined"
+import { DeleteButton } from "components/DropdownButton/ActionCtas"
+import { DropdownButton } from "components/DropdownButton/DropdownButton"
 import frontMatter from "front-matter"
 import { FC } from "react"
 import ReactMarkdown from "react-markdown"
@@ -36,13 +38,15 @@ export interface TemplatePageViewProps {
   activeTemplateVersion: TemplateVersion
   templateResources: WorkspaceResource[]
   templateVersions?: TemplateVersion[]
+  handleDeleteTemplate: (templateId: string) => void
 }
 
 export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>> = ({
   template,
   activeTemplateVersion,
   templateResources,
   templateVersions,
+  handleDeleteTemplate
 }) => {
   const styles = useStyles()
   const readme = frontMatter(activeTemplateVersion.readme)
@@ -66,13 +70,22 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
                 {Language.settingsButton}
               </Button>
             </Link>
-            <Link
-              underline="none"
-              component={RouterLink}
-              to={`/templates/${template.name}/workspace`}
-            >
-              <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
-            </Link>
+
+            <DropdownButton
+              primaryAction={
+                <Link
+                  underline="none"
+                  component={RouterLink}
+                  to={`/templates/${template.name}/workspace`}
+                >
+                  <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
+                </Link>
+              }
+              secondaryActions={[
+                { action: "delete", button: <DeleteButton handleAction={() => handleDeleteTemplate(template.id)} /> }
+              ]}
+              canCancel={false}
+             />
           </Stack>
         }
       >
