Format

coder · presleyp · Sep 1, 2022 · Aug 26, 2022 · Aug 26, 2022 · Aug 26, 2022
commit 90db85d1a0394c938fc6aae4113e4960ff199e37
diff --git a/site/src/components/DropdownButton/DropdownButton.stories.tsx b/site/src/components/DropdownButton/DropdownButton.stories.tsx
@@ -1,7 +1,7 @@
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import { WorkspaceStateEnum } from "util/workspace"
-import { DeleteButton, UpdateButton, StartButton, DisabledButton } from "./ActionCtas"
+import { DeleteButton, DisabledButton, StartButton, UpdateButton } from "./ActionCtas"
 import { DropdownButton, DropdownButtonProps } from "./DropdownButton"
 
 export default {
@@ -16,15 +16,15 @@ WithDropdown.args = {
   primaryAction: <StartButton handleAction={action("start")} />,
   secondaryActions: [
     { action: "update", button: <UpdateButton handleAction={action("update")} /> },
-    { action: "delete", button: <DeleteButton handleAction={action("delete")} /> }
+    { action: "delete", button: <DeleteButton handleAction={action("delete")} /> },
   ],
-  canCancel: false
+  canCancel: false,
 }
 
 export const WithCancel = Template.bind({})
 WithCancel.args = {
   primaryAction: <DisabledButton workspaceState={WorkspaceStateEnum.deleting} />,
   secondaryActions: [],
   canCancel: true,
-  handleCancel: action("cancel")
+  handleCancel: action("cancel"),
 }
diff --git a/site/src/components/DropdownButton/DropdownButton.tsx b/site/src/components/DropdownButton/DropdownButton.tsx
@@ -3,17 +3,22 @@ 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, useEffect } from "react"
+import { FC, ReactNode, useEffect, useRef, useState } from "react"
 import { CancelButton } from "./ActionCtas"
 
 export interface DropdownButtonProps {
   primaryAction: ReactNode
-  secondaryActions: Array<{ action: string, button: ReactNode }>
+  secondaryActions: Array<{ action: string; button: ReactNode }>
   canCancel: boolean
   handleCancel?: () => void
 }
 
-export const DropdownButton: FC<DropdownButtonProps> = ({ primaryAction, secondaryActions, canCancel, handleCancel }) => {
+export const DropdownButton: FC<DropdownButtonProps> = ({
+  primaryAction,
+  secondaryActions,
+  canCancel,
+  handleCancel,
+}) => {
   const styles = useStyles()
   const anchorRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(false)
@@ -31,48 +36,48 @@ export const DropdownButton: FC<DropdownButtonProps> = ({ primaryAction, seconda
 
   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)}
-          anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "right",
-          }}
-          transformOrigin={{
-            vertical: "top",
-            horizontal: "right",
-          }}
-        >
-          {/* secondary workspace CTAs */}
-          <DropdownContent secondaryActions={secondaryActions} />
-        </Popover>
-      </>
-    )}
+      {/* 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)}
+            anchorOrigin={{
+              vertical: "bottom",
+              horizontal: "right",
+            }}
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+          >
+            {/* secondary workspace CTAs */}
+            <DropdownContent secondaryActions={secondaryActions} />
+          </Popover>
+        </>
+      )}
     </span>
   )
 }

diff --git a/site/src/components/DropdownButton/DropdownContent/DropdownContent.tsx b/site/src/components/DropdownButton/DropdownContent/DropdownContent.tsx
@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { FC, ReactNode } from "react"
 
 export interface DropdownContentProps {
-  secondaryActions: Array<{ action: string, button: ReactNode }>
+  secondaryActions: Array<{ action: string; button: ReactNode }>
 }
 
 /* secondary workspace CTAs */

diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -39,7 +39,6 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   handleUpdate,
   handleCancel,
 }) => {
-
   const workspaceStatus: keyof typeof WorkspaceStateEnum = getWorkspaceStatus(
     workspace.latest_build,
   )
@@ -84,9 +83,10 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
       primaryAction={buttonMapping[actions.primary]}
       canCancel={actions.canCancel}
       handleCancel={handleCancel}
-      secondaryActions={actions.secondary.map((action) => ({ action, button: buttonMapping[action] }))}
+      secondaryActions={actions.secondary.map((action) => ({
+        action,
+        button: buttonMapping[action],
+      }))}
     />
   )
 }
-
-
diff --git a/site/src/pages/TemplatePage/TemplatePageView.tsx b/site/src/pages/TemplatePage/TemplatePageView.tsx
@@ -46,7 +46,7 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
   activeTemplateVersion,
   templateResources,
   templateVersions,
-  handleDeleteTemplate
+  handleDeleteTemplate,
 }) => {
   const styles = useStyles()
   const readme = frontMatter(activeTemplateVersion.readme)
@@ -82,10 +82,13 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
                 </Link>
               }
               secondaryActions={[
-                { action: "delete", button: <DeleteButton handleAction={() => handleDeleteTemplate(template.id)} /> }
+                {
+                  action: "delete",
+                  button: <DeleteButton handleAction={() => handleDeleteTemplate(template.id)} />,
+                },
               ]}
               canCancel={false}
-             />
+            />
           </Stack>
         }
       >