feat: Add external links to tabs #2243

py/examples/tab.py

@@ -31,6 +31,7 @@ async def serve(q: Q):
                 ui.tab(name='#menu/ham', label='Ham'),
                 ui.tab(name='#menu/eggs', label='Eggs'),
                 ui.tab(name='#about', label='About'),
+                ui.tab(name='#docs', label='Docs', path='https://wave.h2o.ai/docs/getting-started'),
             ],
             value=f'#{location}' if location else None,
         )

py/examples/tabs.py

@@ -8,6 +8,7 @@
     ui.tab(name='email', label='Mail', icon='Mail'),
     ui.tab(name='events', label='Events', icon='Calendar'),
     ui.tab(name='spam', label='Spam'),
+    ui.tab(name='docs', label='Docs', icon='Help', path='https://wave.h2o.ai/docs/getting-started'),
 ]
 
 

py/h2o_lightwave/h2o_lightwave/types.py

@@ -4238,26 +4238,32 @@ def __init__(
             name: str,
             label: Optional[str] = None,
             icon: Optional[str] = None,
+            path: Optional[str] = None,
     ):
         _guard_scalar('Tab.name', name, (str,), True, False, False)
         _guard_scalar('Tab.label', label, (str,), False, True, False)
         _guard_scalar('Tab.icon', icon, (str,), False, True, False)
+        _guard_scalar('Tab.path', path, (str,), False, True, False)
         self.name = name
         """An identifying name for this component."""
         self.label = label
         """The text displayed on the tab."""
         self.icon = icon
         """The icon displayed on the tab."""
+        self.path = path
+        """The path or URL to open in a new browser tab."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
         _guard_scalar('Tab.name', self.name, (str,), True, False, False)
         _guard_scalar('Tab.label', self.label, (str,), False, True, False)
         _guard_scalar('Tab.icon', self.icon, (str,), False, True, False)
+        _guard_scalar('Tab.path', self.path, (str,), False, True, False)
         return _dump(
             name=self.name,
             label=self.label,
             icon=self.icon,
+            path=self.path,
         )
 
     @staticmethod
@@ -4269,13 +4275,17 @@ def load(__d: Dict) -> 'Tab':
         _guard_scalar('Tab.label', __d_label, (str,), False, True, False)
         __d_icon: Any = __d.get('icon')
         _guard_scalar('Tab.icon', __d_icon, (str,), False, True, False)
+        __d_path: Any = __d.get('path')
+        _guard_scalar('Tab.path', __d_path, (str,), False, True, False)
         name: str = __d_name
         label: Optional[str] = __d_label
         icon: Optional[str] = __d_icon
+        path: Optional[str] = __d_path
         return Tab(
             name,
             label,
             icon,
+            path,
         )
 
 

py/h2o_lightwave/h2o_lightwave/ui.py

@@ -1580,20 +1580,23 @@ def tab(
         name: str,
         label: Optional[str] = None,
         icon: Optional[str] = None,
+        path: Optional[str] = None,
 ) -> Tab:
     """Create a tab.
 
     Args:
         name: An identifying name for this component.
         label: The text displayed on the tab.
         icon: The icon displayed on the tab.
+        path: The path or URL to open in a new browser tab.
     Returns:
         A `h2o_wave.types.Tab` instance.
     """
     return Tab(
         name,
         label,
         icon,
+        path,
     )
 
 

py/h2o_wave/h2o_wave/types.py

@@ -4238,26 +4238,32 @@ def __init__(
             name: str,
             label: Optional[str] = None,
             icon: Optional[str] = None,
+            path: Optional[str] = None,
     ):
         _guard_scalar('Tab.name', name, (str,), True, False, False)
         _guard_scalar('Tab.label', label, (str,), False, True, False)
         _guard_scalar('Tab.icon', icon, (str,), False, True, False)
+        _guard_scalar('Tab.path', path, (str,), False, True, False)
         self.name = name
         """An identifying name for this component."""
         self.label = label
         """The text displayed on the tab."""
         self.icon = icon
         """The icon displayed on the tab."""
+        self.path = path
+        """The path or URL to open in a new browser tab."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
         _guard_scalar('Tab.name', self.name, (str,), True, False, False)
         _guard_scalar('Tab.label', self.label, (str,), False, True, False)
         _guard_scalar('Tab.icon', self.icon, (str,), False, True, False)
+        _guard_scalar('Tab.path', self.path, (str,), False, True, False)
         return _dump(
             name=self.name,
             label=self.label,
             icon=self.icon,
+            path=self.path,
         )
 
     @staticmethod
@@ -4269,13 +4275,17 @@ def load(__d: Dict) -> 'Tab':
         _guard_scalar('Tab.label', __d_label, (str,), False, True, False)
         __d_icon: Any = __d.get('icon')
         _guard_scalar('Tab.icon', __d_icon, (str,), False, True, False)
+        __d_path: Any = __d.get('path')
+        _guard_scalar('Tab.path', __d_path, (str,), False, True, False)
         name: str = __d_name
         label: Optional[str] = __d_label
         icon: Optional[str] = __d_icon
+        path: Optional[str] = __d_path
         return Tab(
             name,
             label,
             icon,
+            path,
         )
 
 

py/h2o_wave/h2o_wave/ui.py

@@ -1580,20 +1580,23 @@ def tab(
         name: str,
         label: Optional[str] = None,
         icon: Optional[str] = None,
+        path: Optional[str] = None,
 ) -> Tab:
     """Create a tab.
 
     Args:
         name: An identifying name for this component.
         label: The text displayed on the tab.
         icon: The icon displayed on the tab.
+        path: The path or URL to open in a new browser tab.
     Returns:
         A `h2o_wave.types.Tab` instance.
     """
     return Tab(
         name,
         label,
         icon,
+        path,
     )
 
 

r/R/ui.R

@@ -1853,19 +1853,23 @@ ui_links <- function(
 #' @param name An identifying name for this component.
 #' @param label The text displayed on the tab.
 #' @param icon The icon displayed on the tab.
+#' @param path The path or URL to open in a new browser tab.
 #' @return A Tab instance.
 #' @export
 ui_tab <- function(
   name,
   label = NULL,
-  icon = NULL) {
+  icon = NULL,
+  path = NULL) {
   .guard_scalar("name", "character", name)
   .guard_scalar("label", "character", label)
   .guard_scalar("icon", "character", icon)
+  .guard_scalar("path", "character", path)
   .o <- list(
     name=name,
     label=label,
-    icon=icon)
+    icon=icon,
+    path=path)
   class(.o) <- append(class(.o), c(.wave_obj, "WaveTab"))
   return(.o)
 }

tools/intellij-plugin/src/main/resources/templates/wave-components.xml

@@ -2432,10 +2432,11 @@
       <option name="Python" value="true"/>
     </context>
   </template>
-  <template name="w_full_tab" value="ui.tab(name='$name$',label='$label$',icon='$icon$'),$END$" description="Create Wave Tab with full attributes." toReformat="true" toShortenFQNames="true">
+  <template name="w_full_tab" value="ui.tab(name='$name$',label='$label$',icon='$icon$',path='$path$'),$END$" description="Create Wave Tab with full attributes." toReformat="true" toShortenFQNames="true">
     <variable name="name" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="label" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="icon" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="path" expression="" defaultValue="" alwaysStopAt="true"/>
     <context>
       <option name="Python" value="true"/>
     </context>

tools/vscode-extension/component-snippets.json

@@ -1773,7 +1773,7 @@
   "Wave Full Tab": {
     "prefix": "w_full_tab",
     "body": [
-      "ui.tab(name='$1', label='$2', icon='$3'),$0"
+      "ui.tab(name='$1', label='$2', icon='$3', path='$4'),$0"
     ],
     "description": "Create a full Wave Tab."
   },

ui/src/index.scss

@@ -249,6 +249,7 @@ $tracking in $fontTrackings {
 }
 
 a:link, a:visited, a:hover, a:active { color: var(--wave-themePrimary); }
+a:visited.ms-Pivot-link:hover { color: var(--wave-card) !important; }
 
 /* Default markdown syntax highlighting theme - androidstudio. */
 pre code.hljs {

ui/src/tab.test.tsx

@@ -38,6 +38,7 @@ describe('Tab.tsx', () => {
     wave.args = [] as any
     wave.args[name] = null
     jest.clearAllMocks()
+    jest.restoreAllMocks()
   })
 
   it('Renders data-test attr', () => {
@@ -190,4 +191,20 @@ describe('Tab.tsx', () => {
     expect(getAllByRole('tab')[0]).toHaveClass('is-selected')
   })
 
-})
+  it('Opens link in a new tab when tab has path specified', () => {
+    const path = 'https://wave.h2o.ai/docs/getting-started'
+    const windowOpenMock = jest.spyOn(window, 'open').mockImplementation(() => null)
+    const { getAllByRole } = render(<View {...{ ...getProps(), state: { items: [{ name: 'tab1' }, { name: 'docs', label: 'Docs', path }] } }} />)
+    const link = getAllByRole('tab')[1]
+
+    expect(link.tagName).toBe('A')
+    expect(link).toHaveAttribute('href', path)
+
+    fireEvent.click(link)
+
+    expect(windowOpenMock).toHaveBeenCalledTimes(1)
+    expect(windowOpenMock).toHaveBeenCalledWith(path, '_blank')
+    expect(pushMock).toHaveBeenCalledTimes(0)
+  })
+
+})

ui/src/tab.tsx

@@ -49,6 +49,11 @@ export const
       onLinkClick = (item?: PivotItem) => {
         const name = item?.props.itemKey
         if (!name || valueB() === name) return
+        const tab = state.items.find(t => t.name === name)
+        if (tab?.path) {
+          window.open(tab.path, '_blank')
+          return
+        }
         state.value = name
         valueB(name)
 
@@ -63,8 +68,18 @@ export const
       render = () => {
         const
           linkFormat = state.link ? 'links' : 'tabs',
-          items = state.items.map(({ name, label, icon }) => (
-            <PivotItem key={name} itemKey={name} headerText={label} itemIcon={icon} />
+          items = state.items.map(({ name, label, icon, path }) => (
+            <PivotItem
+              key={name}
+              itemKey={name}
+              headerText={label}
+              itemIcon={icon}
+              headerButtonProps={path ? {
+                href: path,
+                target: '_blank',
+                rel: 'noopener noreferrer',
+              } : undefined}
+            />
           ))
         return (
           <div data-test={name} className={css.card}>

ui/src/tabs.test.tsx

@@ -30,6 +30,7 @@ describe('Tabs.tsx', () => {
     wave.args = [] as any
     wave.args[name] = null
     pushMock.mockReset()
+    jest.restoreAllMocks()
   })
 
   it('Renders data-test attr', () => {
@@ -176,4 +177,20 @@ describe('Tabs.tsx', () => {
     expect(getAllByRole('tab')[0]).toHaveClass('is-selected')
   })
 
-})
+  it('Opens link in a new tab when tab has path specified', () => {
+    const path = 'https://wave.h2o.ai/docs/getting-started'
+    const windowOpenMock = jest.spyOn(window, 'open').mockImplementation(() => null)
+    const { getAllByRole } = render(<XTabs model={{ ...getProps(), items: [{ name: 'tab1' }, { name: 'docs', label: 'Docs', path }] }} />)
+    const link = getAllByRole('tab')[1]
+
+    expect(link.tagName).toBe('A')
+    expect(link).toHaveAttribute('href', path)
+
+    fireEvent.click(link)
+
+    expect(windowOpenMock).toHaveBeenCalledTimes(1)
+    expect(windowOpenMock).toHaveBeenCalledWith(path, '_blank')
+    expect(pushMock).toHaveBeenCalledTimes(0)
+  })
+
+})

ui/src/tabs.tsx

@@ -29,6 +29,8 @@ export interface Tab {
   label?: S
   /** The icon displayed on the tab. */
   icon?: S
+  /** The path or URL to open in a new browser tab. */
+  path?: S
 }
 
 /**
@@ -67,6 +69,11 @@ export const
       onLinkClick = (item?: Fluent.PivotItem) => {
         const name = item?.props.itemKey
         if (!name) return
+        const tab = m.items?.find(t => t.name === name)
+        if (tab?.path) {
+          window.open(tab.path, '_blank')
+          return
+        }
         setSelected(name)
         m.value = name
         if (name.startsWith('#')) {
@@ -83,7 +90,19 @@ export const
           wave.push()
         }
       },
-      tabs = m.items?.map(t => <Fluent.PivotItem key={t.name} itemIcon={t.icon} itemKey={t.name} headerText={t.label} />),
+      tabs = m.items?.map(t => (
+        <Fluent.PivotItem
+          key={t.name}
+          itemIcon={t.icon}
+          itemKey={t.name}
+          headerText={t.label}
+          headerButtonProps={t.path ? {
+            href: t.path,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+          } : undefined}
+        />
+      )),
       [selected, setSelected] = React.useState(m.value || m.items?.[0].name)
 
     useUpdateOnlyEffect(() => setSelected(m.value), [m.value])

website/widgets/content/tabs.md

@@ -44,3 +44,14 @@ q.page['example'] = ui.tab_card( box='1 1 4 1', link=True, value='#about', items
     ]
 )
 ```
+
+## External link tab
+
+Use the `path` attribute to open an external URL in a new browser tab when clicked.
+
+```py
+q.page['example'] = ui.tab_card(box='1 1 4 1', items=[
+        ui.tab(name='#docs', label='Docs', path='https://wave.h2o.ai/docs/getting-started'),
+    ]
+)
+```