Group template actions

BrunoQuaresma · BrunoQuaresma · commit cb51c1c561f7 · 2023-03-20T17:43:08.000Z
diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
@@ -1,8 +1,5 @@
 import Button from "@material-ui/core/Button"
-import DeleteOutlined from "@material-ui/icons/DeleteOutlined"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
-import SettingsOutlined from "@material-ui/icons/SettingsOutlined"
-import CodeOutlined from "@material-ui/icons/CodeOutlined"
 import { AuthorizationResponse, Template } from "api/typesGenerated"
 import { Avatar } from "components/Avatar/Avatar"
 import { Maybe } from "components/Conditionals/Maybe"
@@ -13,10 +10,13 @@ import {
   PageHeaderSubtitle,
 } from "components/PageHeader/PageHeader"
 import { Stack } from "components/Stack/Stack"
-import { FC } from "react"
+import { FC, useState } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { useDeleteTemplate } from "./deleteTemplate"
 import { Margins } from "components/Margins/Margins"
+import MoreVertOutlined from "@material-ui/icons/MoreVertOutlined"
+import Menu from "@material-ui/core/Menu"
+import MenuItem from "@material-ui/core/MenuItem"
 
 const Language = {
   editButton: "Edit",
@@ -26,31 +26,60 @@ const Language = {
   deleteButton: "Delete",
 }
 
-const TemplateSettingsButton: FC<{ templateName: string }> = ({
+const TemplateMenu: FC<{ templateName: string; onDelete: () => void }> = ({
   templateName,
-}) => (
-  <Button
-    variant="outlined"
-    component={RouterLink}
-    to={`/templates/${templateName}/settings`}
-    startIcon={<SettingsOutlined />}
-  >
-    {Language.settingsButton}
-  </Button>
-)
+  onDelete,
+}) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
 
-const TemplateVariablesButton: FC<{ templateName: string }> = ({
-  templateName,
-}) => (
-  <Button
-    variant="outlined"
-    component={RouterLink}
-    to={`/templates/${templateName}/variables`}
-    startIcon={<CodeOutlined />}
-  >
-    {Language.variablesButton}
-  </Button>
-)
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <div>
+      <Button
+        variant="outlined"
+        aria-controls="template-options"
+        aria-haspopup="true"
+        onClick={(e) => setAnchorEl(e.currentTarget)}
+      >
+        <MoreVertOutlined />
+      </Button>
+
+      <Menu
+        id="template-options"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem
+          onClick={handleClose}
+          component={RouterLink}
+          to={`/templates/${templateName}/settings`}
+        >
+          {Language.settingsButton}
+        </MenuItem>
+        <MenuItem
+          component={RouterLink}
+          to={`/templates/${templateName}/variables`}
+          onClick={handleClose}
+        >
+          {Language.variablesButton}
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            onDelete()
+            handleClose()
+          }}
+        >
+          {Language.deleteButton}
+        </MenuItem>
+      </Menu>
+    </div>
+  )
+}
 
 const CreateWorkspaceButton: FC<{
   templateName: string
@@ -65,12 +94,6 @@ const CreateWorkspaceButton: FC<{
   </Button>
 )
 
-const DeleteTemplateButton: FC<{ onClick: () => void }> = ({ onClick }) => (
-  <Button variant="outlined" startIcon={<DeleteOutlined />} onClick={onClick}>
-    {Language.deleteButton}
-  </Button>
-)
-
 export type TemplatePageHeaderProps = {
   template: Template
   permissions: AuthorizationResponse
@@ -90,14 +113,13 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
       <PageHeader
         actions={
           <>
+            <CreateWorkspaceButton templateName={template.name} />
             <Maybe condition={permissions.canUpdateTemplate}>
-              <DeleteTemplateButton
-                onClick={deleteTemplate.openDeleteConfirmation}
+              <TemplateMenu
+                templateName={template.name}
+                onDelete={deleteTemplate.openDeleteConfirmation}
               />
-              <TemplateSettingsButton templateName={template.name} />
-              <TemplateVariablesButton templateName={template.name} />
             </Maybe>
-            <CreateWorkspaceButton templateName={template.name} />
           </>
         }
       >
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
@@ -234,5 +234,13 @@ export const getOverrides = ({
         backgroundColor: colors.gray[12],
       },
     },
+    MuiMenu: {
+      paper: {
+        marginTop: 8,
+        borderRadius: 4,
+        padding: "4px 0",
+        minWidth: 120,
+      },
+    },
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -234,5 +234,13 @@ export const getOverrides = ({`
`234`	`234`	`backgroundColor: colors.gray[12],`
`235`	`235`	`},`
`236`	`236`	`},`
	`237`	`+ MuiMenu: {`
	`238`	`+ paper: {`
	`239`	`+ marginTop: 8,`
	`240`	`+ borderRadius: 4,`
	`241`	`+ padding: "4px 0",`
	`242`	`+ minWidth: 120,`
	`243`	`+ },`
	`244`	`+ },`
`237`	`245`	`}`
`238`	`246`	`}`