diff --git a/ui/src/nav.test.tsx b/ui/src/nav.test.tsx index 20c4f66aa0..b2527d95fb 100644 --- a/ui/src/nav.test.tsx +++ b/ui/src/nav.test.tsx @@ -107,6 +107,18 @@ describe('Nav.tsx', () => { expect(pushMock).toHaveBeenCalledTimes(0) }) + it('Does not set args and calls sync when link is opened in a new window', () => { + const pushMock = jest.fn() + const { getByTitle } = render() + + wave.push = pushMock + + fireEvent.click(getByTitle('Nav 1'), { ctrlKey: true, metaKey: true }) + + expect(wave.args['nav1']).toBeUndefined() + expect(pushMock).not.toHaveBeenCalled() + }) + it('Sets window location hash when name starts with hash', () => { const { getByTitle } = render() fireEvent.click(getByTitle('Nav 1')) diff --git a/ui/src/nav.tsx b/ui/src/nav.tsx index 557866c10e..cfec7310dc 100644 --- a/ui/src/nav.tsx +++ b/ui/src/nav.tsx @@ -72,49 +72,54 @@ export interface State { color?: 'card' | 'primary' } -const css = stylesheet({ - card: { - display: 'flex', - flexDirection: 'column' - }, - title: { - color: cssVar('$themePrimary') - }, - icon: { - fontSize: 56, - display: 'flex', - justifyContent: 'center' - }, - header: { - padding: padding(24, 24, 0), - textAlign: 'center' - }, - img: { - maxHeight: 100 - }, - brand: { - marginBottom: 10 - }, - secondaryItems: { - padding: 24, - }, - persona: { - $nest: { - '.ms-Persona': { - flexDirection: 'column', - height: 'auto', - }, - '.ms-Persona-details': { - alignItems: 'center', - padding: 0 +const + css = stylesheet({ + card: { + display: 'flex', + flexDirection: 'column' + }, + title: { + color: cssVar('$themePrimary') + }, + icon: { + fontSize: 56, + display: 'flex', + justifyContent: 'center' + }, + header: { + padding: padding(24, 24, 0), + textAlign: 'center' + }, + img: { + maxHeight: 100 + }, + brand: { + marginBottom: 10 + }, + secondaryItems: { + padding: 24, + }, + persona: { + $nest: { + '.ms-Persona': { + flexDirection: 'column', + height: 'auto', + }, + '.ms-Persona-details': { + alignItems: 'center', + padding: 0 + }, + '.ms-Persona-primaryText': { + fontWeight: 500, + marginTop: 12, + } }, - '.ms-Persona-primaryText': { - fontWeight: 500, - marginTop: 12, - } }, - }, -}) + }), + getUrl = (name: S) => { + const { origin, pathname } = window.location + return name.startsWith('#') ? origin + pathname + name : '' + } export const XNav = ({ items, hideNav, linksOnly = false, valueB }: State & { hideNav?: () => void, linksOnly?: B, valueB: Box }) => { @@ -131,8 +136,10 @@ export const opacity: disabled ? 0.7 : undefined, marginTop: !linksOnly && idx === 0 && !g.label ? 30 : undefined }, - url: '', - onClick: () => { + url: path || getUrl(name), + onClick: (ev) => { + ev?.preventDefault() + if (ev?.ctrlKey || ev?.metaKey) return valueB(name) if (hideNav) hideNav() if (path) window.open(path, "_blank")