Merge branch 'main' into issue/h2oai#2047

7460m · Oct 28, 2023 · e9788b4 · e9788b4
2 parents bd12dad + af8b8b3
commit e9788b4
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 43 deletions.
diff --git 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(<View {...navProps} />)
+
+    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(<View {...navPropsHash} />)
     fireEvent.click(getByTitle('Nav 1'))

diff --git 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<S | undefined> }) => {
@@ -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")