Skip to content

Commit 90db85d

Browse files
presleyppresleyp
committed
Format
1 parent a07a5c4 commit 90db85d

File tree

5 files changed

+65
-57
lines changed

5 files changed

+65
-57
lines changed

‎site/src/components/DropdownButton/DropdownButton.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { action } from "@storybook/addon-actions"
22
import { Story } from "@storybook/react"
33
import { WorkspaceStateEnum } from "util/workspace"
4-
import { DeleteButton, UpdateButton, StartButton, DisabledButton } from "./ActionCtas"
4+
import { DeleteButton, DisabledButton, StartButton, UpdateButton } from "./ActionCtas"
55
import { DropdownButton, DropdownButtonProps } from "./DropdownButton"
66

77
export default {
@@ -16,15 +16,15 @@ WithDropdown.args = {
1616
primaryAction: <StartButton handleAction={action("start")} />,
1717
secondaryActions: [
1818
{ action: "update", button: <UpdateButton handleAction={action("update")} /> },
19-
{ action: "delete", button: <DeleteButton handleAction={action("delete")} /> }
19+
{ action: "delete", button: <DeleteButton handleAction={action("delete")} /> },
2020
],
21-
canCancel: false
21+
canCancel: false,
2222
}
2323

2424
export const WithCancel = Template.bind({})
2525
WithCancel.args = {
2626
primaryAction: <DisabledButton workspaceState={WorkspaceStateEnum.deleting} />,
2727
secondaryActions: [],
2828
canCancel: true,
29-
handleCancel: action("cancel")
29+
handleCancel: action("cancel"),
3030
}

‎site/src/components/DropdownButton/DropdownButton.tsx

Lines changed: 50 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,22 @@ import Popover from "@material-ui/core/Popover"
33
import { makeStyles } from "@material-ui/core/styles"
44
import { CloseDropdown, OpenDropdown } from "components/DropdownArrows/DropdownArrows"
55
import { DropdownContent } from "components/DropdownButton/DropdownContent/DropdownContent"
6-
import { FC, ReactNode, useRef, useState, useEffect } from "react"
6+
import { FC, ReactNode, useEffect, useRef, useState } from "react"
77
import { CancelButton } from "./ActionCtas"
88

99
export interface DropdownButtonProps {
1010
primaryAction: ReactNode
11-
secondaryActions: Array<{ action: string, button: ReactNode }>
11+
secondaryActions: Array<{ action: string; button: ReactNode }>
1212
canCancel: boolean
1313
handleCancel?: () => void
1414
}
1515

16-
export const DropdownButton: FC<DropdownButtonProps> = ({ primaryAction, secondaryActions, canCancel, handleCancel }) => {
16+
export const DropdownButton: FC<DropdownButtonProps> = ({
17+
primaryAction,
18+
secondaryActions,
19+
canCancel,
20+
handleCancel,
21+
}) => {
1722
const styles = useStyles()
1823
const anchorRef = useRef<HTMLButtonElement>(null)
1924
const [isOpen, setIsOpen] = useState(false)
@@ -31,48 +36,48 @@ export const DropdownButton: FC<DropdownButtonProps> = ({ primaryAction, seconda
3136

3237
return (
3338
<span className={styles.buttonContainer}>
34-
{/* primary workspace CTA */}
35-
<span data-testid="primary-cta" className={styles.primaryCta}>
36-
{primaryAction}
37-
</span>
38-
{canCancel && handleCancel ? (
39-
<CancelButton handleAction={handleCancel} />
40-
) : (
41-
<>
42-
{/* popover toggle button */}
43-
<Button
44-
data-testid="workspace-actions-button"
45-
aria-controls="workspace-actions-menu"
46-
aria-haspopup="true"
47-
className={styles.dropdownButton}
48-
ref={anchorRef}
49-
disabled={!secondaryActions.length}
50-
onClick={() => {
51-
setIsOpen(true)
52-
}}
53-
>
54-
{isOpen ? <CloseDropdown /> : <OpenDropdown />}
55-
</Button>
56-
<Popover
57-
classes={{ paper: styles.popoverPaper }}
58-
id={id}
59-
open={isOpen}
60-
anchorEl={anchorRef.current}
61-
onClose={() => setIsOpen(false)}
62-
anchorOrigin={{
63-
vertical: "bottom",
64-
horizontal: "right",
65-
}}
66-
transformOrigin={{
67-
vertical: "top",
68-
horizontal: "right",
69-
}}
70-
>
71-
{/* secondary workspace CTAs */}
72-
<DropdownContent secondaryActions={secondaryActions} />
73-
</Popover>
74-
</>
75-
)}
39+
{/* primary workspace CTA */}
40+
<span data-testid="primary-cta" className={styles.primaryCta}>
41+
{primaryAction}
42+
</span>
43+
{canCancel && handleCancel ? (
44+
<CancelButton handleAction={handleCancel} />
45+
) : (
46+
<>
47+
{/* popover toggle button */}
48+
<Button
49+
data-testid="workspace-actions-button"
50+
aria-controls="workspace-actions-menu"
51+
aria-haspopup="true"
52+
className={styles.dropdownButton}
53+
ref={anchorRef}
54+
disabled={!secondaryActions.length}
55+
onClick={() => {
56+
setIsOpen(true)
57+
}}
58+
>
59+
{isOpen ? <CloseDropdown /> : <OpenDropdown />}
60+
</Button>
61+
<Popover
62+
classes={{ paper: styles.popoverPaper }}
63+
id={id}
64+
open={isOpen}
65+
anchorEl={anchorRef.current}
66+
onClose={() => setIsOpen(false)}
67+
anchorOrigin={{
68+
vertical: "bottom",
69+
horizontal: "right",
70+
}}
71+
transformOrigin={{
72+
vertical: "top",
73+
horizontal: "right",
74+
}}
75+
>
76+
{/* secondary workspace CTAs */}
77+
<DropdownContent secondaryActions={secondaryActions} />
78+
</Popover>
79+
</>
80+
)}
7681
</span>
7782
)
7883
}

‎site/src/components/DropdownButton/DropdownContent/DropdownContent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
22
import { FC, ReactNode } from "react"
33

44
export interface DropdownContentProps {
5-
secondaryActions: Array<{ action: string, button: ReactNode }>
5+
secondaryActions: Array<{ action: string; button: ReactNode }>
66
}
77

88
/* secondary workspace CTAs */

‎site/src/components/WorkspaceActions/WorkspaceActions.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
3939
handleUpdate,
4040
handleCancel,
4141
}) => {
42-
4342
const workspaceStatus: keyof typeof WorkspaceStateEnum = getWorkspaceStatus(
4443
workspace.latest_build,
4544
)
@@ -84,9 +83,10 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
8483
primaryAction={buttonMapping[actions.primary]}
8584
canCancel={actions.canCancel}
8685
handleCancel={handleCancel}
87-
secondaryActions={actions.secondary.map((action) => ({ action, button: buttonMapping[action] }))}
86+
secondaryActions={actions.secondary.map((action) => ({
87+
action,
88+
button: buttonMapping[action],
89+
}))}
8890
/>
8991
)
9092
}
91-
92-

‎site/src/pages/TemplatePage/TemplatePageView.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
4646
activeTemplateVersion,
4747
templateResources,
4848
templateVersions,
49-
handleDeleteTemplate
49+
handleDeleteTemplate,
5050
}) => {
5151
const styles = useStyles()
5252
const readme = frontMatter(activeTemplateVersion.readme)
@@ -82,10 +82,13 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
8282
</Link>
8383
}
8484
secondaryActions={[
85-
{ action: "delete", button: <DeleteButton handleAction={() => handleDeleteTemplate(template.id)} /> }
85+
{
86+
action: "delete",
87+
button: <DeleteButton handleAction={() => handleDeleteTemplate(template.id)} />,
88+
},
8689
]}
8790
canCancel={false}
88-
/>
91+
/>
8992
</Stack>
9093
}
9194
>

0 commit comments

Comments
 (0)