diff --git a/web/src/GlobalNav.tsx b/web/src/GlobalNav.tsx index b1e7bd76a2..57df54ae84 100644 --- a/web/src/GlobalNav.tsx +++ b/web/src/GlobalNav.tsx @@ -154,52 +154,38 @@ type GlobalNavProps = { runningBuild: TiltBuild | undefined } +enum NavDialog { + Account = "account", + Help = "help", + Update = "update", +} + +const DIALOG_TO_ANALYTICS_TYPE = { + [NavDialog.Account]: AnalyticsType.Account, + [NavDialog.Help]: AnalyticsType.Shortcut, + [NavDialog.Update]: AnalyticsType.Update, +} + export function GlobalNav(props: GlobalNavProps) { - const shortcutButton = useRef(null as any) - const accountButton = useRef(null as any) - const updateButton = useRef(null as any) - const [helpDialogAnchor, setHelpDialogAnchor] = useState( - null as Element | null - ) - const [accountMenuAnchor, setAccountMenuAnchor] = useState( - null as Element | null - ) - const [updateDialogAnchor, setUpdateDialogAnchor] = useState( - null as Element | null - ) - const helpDialogOpen = !!helpDialogAnchor - const accountMenuOpen = !!accountMenuAnchor - const updateDialogOpen = !!updateDialogAnchor - let isSnapshot = props.isSnapshot - if (isSnapshot) { - return null - } + const helpButton = useRef(null) + const accountButton = useRef(null) + const updateButton = useRef(null) - let toggleAccountMenu = (action: AnalyticsAction) => { - if (!accountMenuOpen) { - incr("ui.web.menu", { type: AnalyticsType.Account, action: action }) - } - setAccountMenuAnchor( - accountMenuOpen ? null : (accountButton.current as Element) - ) - } + const [openDialog, setOpenDialog] = useState(null) - let toggleHelpDialog = (action: AnalyticsAction) => { - if (!helpDialogOpen) { - incr("ui.web.menu", { type: AnalyticsType.Shortcut, action: action }) - } - setHelpDialogAnchor( - helpDialogOpen ? null : (shortcutButton.current as Element) - ) + // Don't display global nav for snapshots + if (props.isSnapshot) { + return null } - let toggleUpdateDialog = (action: AnalyticsAction) => { - if (!updateDialogOpen) { - incr("ui.web.menu", { type: AnalyticsType.Update, action: action }) + function toggleDialog(name: NavDialog, action = AnalyticsAction.Click) { + const dialogIsOpen = openDialog === name + if (!dialogIsOpen) { + incr("ui.web.menu", { type: DIALOG_TO_ANALYTICS_TYPE[name], action }) } - setUpdateDialogAnchor( - updateDialogOpen ? null : (updateButton.current as Element) - ) + + const nextDialogState = dialogIsOpen ? null : name + setOpenDialog(nextDialogState) } let accountMenuHeader = @@ -223,9 +209,9 @@ export function GlobalNav(props: GlobalNavProps) { toggleUpdateDialog(AnalyticsAction.Click)} - data-open={updateDialogOpen} - aria-expanded={updateDialogOpen} + onClick={() => toggleDialog(NavDialog.Update)} + data-open={openDialog === NavDialog.Update} + aria-expanded={openDialog === NavDialog.Update} aria-label={versionButtonLabel} aria-haspopup="true" role="menuitem" @@ -242,10 +228,10 @@ export function GlobalNav(props: GlobalNavProps) { toggleHelpDialog(AnalyticsAction.Click)} - data-open={helpDialogOpen} - aria-expanded={helpDialogOpen} + ref={helpButton} + onClick={() => toggleDialog(NavDialog.Help)} + data-open={openDialog === NavDialog.Help} + aria-expanded={openDialog === NavDialog.Help} aria-label="Help" aria-haspopup="true" role="menuitem" @@ -253,12 +239,13 @@ export function GlobalNav(props: GlobalNavProps) { + toggleAccountMenu(AnalyticsAction.Click)} - data-open={accountMenuOpen} - aria-expanded={accountMenuOpen} + onClick={() => toggleDialog(NavDialog.Account)} + data-open={openDialog === NavDialog.Account} + aria-expanded={openDialog === NavDialog.Account} aria-label="Account" aria-haspopup="true" role="menuitem" @@ -270,27 +257,29 @@ export function GlobalNav(props: GlobalNavProps) { toggleAccountMenu(AnalyticsAction.Close)} + open={openDialog === NavDialog.Account} + anchorEl={accountButton?.current} + onClose={() => toggleDialog(NavDialog.Account)} > {accountMenuContent} toggleHelpDialog(AnalyticsAction.Close)} + open={openDialog === NavDialog.Help} + anchorEl={helpButton?.current} + onClose={() => toggleDialog(NavDialog.Help)} /> toggleUpdateDialog(AnalyticsAction.Close)} + open={openDialog === NavDialog.Update} + anchorEl={updateButton?.current} + onClose={() => toggleDialog(NavDialog.Update)} showUpdate={props.showUpdate} suggestedVersion={props.suggestedVersion} isNewInterface={true} /> toggleHelpDialog(AnalyticsAction.Shortcut)} + toggleHelpDialog={() => + toggleDialog(NavDialog.Help, AnalyticsAction.Shortcut) + } snapshot={props.snapshot} />