coder · presleyp · Sep 1, 2022 · Aug 26, 2022 · Aug 26, 2022 · Aug 26, 2022
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -153,6 +153,11 @@ export const updateTemplateMeta = async (
   return response.data
 }
 
+export const deleteTemplate = async (templateId: string): Promise<TypesGen.Template> => {
+  const response = await axios.delete<TypesGen.Template>(`/api/v2/templates/${templateId}`)
+  return response.data
+}
+
 export const getWorkspace = async (
   workspaceId: string,
   params?: TypesGen.WorkspaceOptions,

diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx
@@ -21,10 +21,15 @@ interface ArrowProps {
 
 export const OpenDropdown: FC<ArrowProps> = ({ margin = true }) => {
   const styles = useStyles({ margin })
-  return <KeyboardArrowDown className={styles.arrowIcon} />
+  return <KeyboardArrowDown aria-label="open-dropdown" className={styles.arrowIcon} />
 }
 
 export const CloseDropdown: FC<ArrowProps> = ({ margin = true }) => {
   const styles = useStyles({ margin })
-  return <KeyboardArrowUp className={`${styles.arrowIcon} ${styles.arrowIconUp}`} />
+  return (
+    <KeyboardArrowUp
+      aria-label="close-dropdown"
+      className={`${styles.arrowIcon} ${styles.arrowIconUp}`}
+    />
+  )
 }
diff --git a/...omponents/WorkspaceActions/ActionCtas.tsx → .../components/DropdownButton/ActionCtas.tsx b/...omponents/WorkspaceActions/ActionCtas.tsx → .../components/DropdownButton/ActionCtas.tsx
diff --git a/site/src/components/DropdownButton/DropdownButton.stories.tsx b/site/src/components/DropdownButton/DropdownButton.stories.tsx
@@ -0,0 +1,30 @@
+import { action } from "@storybook/addon-actions"
+import { Story } from "@storybook/react"
+import { WorkspaceStateEnum } from "util/workspace"
+import { DeleteButton, DisabledButton, StartButton, UpdateButton } from "./ActionCtas"
+import { DropdownButton, DropdownButtonProps } from "./DropdownButton"
+
+export default {
+  title: "Components/DropdownButton",
+  component: DropdownButton,
+}
+
+const Template: Story<DropdownButtonProps> = (args) => <DropdownButton {...args} />
+
+export const WithDropdown = Template.bind({})
+WithDropdown.args = {
+  primaryAction: <StartButton handleAction={action("start")} />,
+  secondaryActions: [
+    { action: "update", button: <UpdateButton handleAction={action("update")} /> },
+    { action: "delete", button: <DeleteButton handleAction={action("delete")} /> },
+  ],
+  canCancel: false,
+}
+
+export const WithCancel = Template.bind({})
+WithCancel.args = {
+  primaryAction: <DisabledButton workspaceState={WorkspaceStateEnum.deleting} />,
+  secondaryActions: [],
+  canCancel: true,
+  handleCancel: action("cancel"),
+}
diff --git a/site/src/components/DropdownButton/DropdownButton.tsx b/site/src/components/DropdownButton/DropdownButton.tsx
@@ -0,0 +1,104 @@
+import Button from "@material-ui/core/Button"
+import Popover from "@material-ui/core/Popover"
+import { makeStyles } from "@material-ui/core/styles"
+import { CloseDropdown, OpenDropdown } from "components/DropdownArrows/DropdownArrows"
+import { DropdownContent } from "components/DropdownButton/DropdownContent/DropdownContent"
+import { FC, ReactNode, useRef, useState } from "react"
+import { CancelButton } from "./ActionCtas"
+
+export interface DropdownButtonProps {
+  primaryAction: ReactNode
+  secondaryActions: Array<{ action: string; button: ReactNode }>
+  canCancel: boolean
+  handleCancel?: () => void
+}
+
+export const DropdownButton: FC<DropdownButtonProps> = ({
+  primaryAction,
+  secondaryActions,
+  canCancel,
+  handleCancel,
+}) => {
+  const styles = useStyles()
+  const anchorRef = useRef<HTMLButtonElement>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const id = isOpen ? "action-popover" : undefined
+
+  return (
+    <span className={styles.buttonContainer}>
+      {/* primary workspace CTA */}
+      <span data-testid="primary-cta" className={styles.primaryCta}>
+        {primaryAction}
+      </span>
+      {canCancel && handleCancel ? (
+        <CancelButton handleAction={handleCancel} />
+      ) : (
+        <>
+          {/* popover toggle button */}
+          <Button
+            data-testid="workspace-actions-button"
+            aria-controls="workspace-actions-menu"
+            aria-haspopup="true"
+            className={styles.dropdownButton}
+            ref={anchorRef}
+            disabled={!secondaryActions.length}
+            onClick={() => {
+              setIsOpen(true)
+            }}
+          >
+            {isOpen ? <CloseDropdown /> : <OpenDropdown />}
+          </Button>
+          <Popover
+            classes={{ paper: styles.popoverPaper }}
+            id={id}
+            open={isOpen}
+            anchorEl={anchorRef.current}
+            onClose={() => setIsOpen(false)}
+            onBlur={() => setIsOpen(false)}
+            anchorOrigin={{
+              vertical: "bottom",
+              horizontal: "right",
+            }}
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+          >
+            {/* secondary workspace CTAs */}
+            <DropdownContent secondaryActions={secondaryActions} />
+          </Popover>
+        </>
+      )}
+    </span>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  buttonContainer: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: `${theme.shape.borderRadius}px`,
+    display: "inline-flex",
+  },
+  dropdownButton: {
+    border: "none",
+    borderLeft: `1px solid ${theme.palette.divider}`,
+    borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
+    minWidth: "unset",
+    width: "63px", // matching cancel button so button grouping doesn't grow in size
+    "& .MuiButton-label": {
+      marginRight: "8px",
+    },
+  },
+  primaryCta: {
+    [theme.breakpoints.down("sm")]: {
+      width: "100%",
+
+      "& > *": {
+        width: "100%",
+      },
+    },
+  },
+  popoverPaper: {
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(1)}px`,
+  },
+}))
diff --git a/...tions/DropdownContent/DropdownContent.tsx → ...utton/DropdownContent/DropdownContent.tsx b/...tions/DropdownContent/DropdownContent.tsx → ...utton/DropdownContent/DropdownContent.tsx
@@ -1,24 +1,21 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { FC } from "react"
-import { ButtonMapping, ButtonTypesEnum } from "../constants"
+import { FC, ReactNode } from "react"
 
 export interface DropdownContentProps {
-  secondaryActions: ButtonTypesEnum[]
-  buttonMapping: Partial<ButtonMapping>
+  secondaryActions: Array<{ action: string; button: ReactNode }>
 }
 
 /* secondary workspace CTAs */
 export const DropdownContent: FC<React.PropsWithChildren<DropdownContentProps>> = ({
   secondaryActions,
-  buttonMapping,
 }) => {
   const styles = useStyles()
 
   return (
     <span data-testid="secondary-ctas">
-      {secondaryActions.map((action) => (
+      {secondaryActions.map(({ action, button }) => (
         <div key={action} className={styles.popoverActionButton}>
-          {buttonMapping[action]}
+          {button}
         </div>
       ))}
     </span>

diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -68,20 +68,19 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   const styles = useStyles()
   const navigate = useNavigate()
 
+  const buildError = workspaceErrors[WorkspaceErrors.BUILD_ERROR] ? (
+    <ErrorSummary error={workspaceErrors[WorkspaceErrors.BUILD_ERROR]} dismissible />
+  ) : (
+    <></>
+  )
+  const cancellationError = workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR] ? (
+    <ErrorSummary error={workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR]} dismissible />
+  ) : (
+    <></>
+  )
+
   return (
     <Margins>
-      <Stack spacing={1}>
-        {workspaceErrors[WorkspaceErrors.BUILD_ERROR] ? (
-          <ErrorSummary error={workspaceErrors[WorkspaceErrors.BUILD_ERROR]} dismissible />
-        ) : (
-          <></>
-        )}
-        {workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR] ? (
-          <ErrorSummary error={workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR]} dismissible />
-        ) : (
-          <></>
-        )}
-      </Stack>
       <PageHeader
         actions={
           <Stack direction="row" spacing={1} className={styles.actions}>
@@ -109,39 +108,37 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
         <PageHeaderSubtitle>{workspace.owner_name}</PageHeaderSubtitle>
       </PageHeader>
 
-      <Stack direction="row" spacing={3}>
-        <Stack direction="column" className={styles.firstColumnSpacer} spacing={3}>
-          <WorkspaceScheduleBanner
-            isLoading={bannerProps.isLoading}
-            onExtend={bannerProps.onExtend}
-            workspace={workspace}
-          />
+      <Stack direction="column" className={styles.firstColumnSpacer} spacing={2.5}>
+        {buildError}
+        {cancellationError}
+
+        <WorkspaceScheduleBanner
+          isLoading={bannerProps.isLoading}
+          onExtend={bannerProps.onExtend}
+          workspace={workspace}
+        />
 
-          <WorkspaceDeletedBanner
+        <WorkspaceDeletedBanner workspace={workspace} handleClick={() => navigate(`/templates`)} />
+
+        <WorkspaceStats workspace={workspace} handleUpdate={handleUpdate} />
+
+        {!!resources && !!resources.length && (
+          <Resources
+            resources={resources}
+            getResourcesError={workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]}
             workspace={workspace}
-            handleClick={() => navigate(`/templates`)}
+            canUpdateWorkspace={canUpdateWorkspace}
+            buildInfo={buildInfo}
           />
+        )}
 
-          <WorkspaceStats workspace={workspace} handleUpdate={handleUpdate} />
-
-          {!!resources && !!resources.length && (
-            <Resources
-              resources={resources}
-              getResourcesError={workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]}
-              workspace={workspace}
-              canUpdateWorkspace={canUpdateWorkspace}
-              buildInfo={buildInfo}
-            />
+        <WorkspaceSection title="Logs" contentsProps={{ className: styles.timelineContents }}>
+          {workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR] ? (
+            <ErrorSummary error={workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR]} />
+          ) : (
+            <BuildsTable builds={builds} className={styles.timelineTable} />
           )}
-
-          <WorkspaceSection title="Logs" contentsProps={{ className: styles.timelineContents }}>
-            {workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR] ? (
-              <ErrorSummary error={workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR]} />
-            ) : (
-              <BuildsTable builds={builds} className={styles.timelineTable} />
-            )}
-          </WorkspaceSection>
-        </Stack>
+        </WorkspaceSection>
       </Stack>
     </Margins>
   )

diff --git a/site/src/components/WorkspaceActions/DropdownContent/DropdownContent.stories.tsx b/site/src/components/WorkspaceActions/DropdownContent/DropdownContent.stories.tsx
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.test.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.test.tsx
@@ -2,7 +2,7 @@ import { fireEvent, screen } from "@testing-library/react"
 import { WorkspaceStateEnum } from "util/workspace"
 import * as Mocks from "../../testHelpers/entities"
 import { render } from "../../testHelpers/renderHelpers"
-import { Language } from "./ActionCtas"
+import { Language } from "../DropdownButton/ActionCtas"
 import { WorkspaceActions, WorkspaceActionsProps } from "./WorkspaceActions"
 
 const renderComponent = async (props: Partial<WorkspaceActionsProps> = {}) => {