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")