From cd469fcdccb1eae171ad04f402834b1547122a76 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Fri, 9 Feb 2024 13:40:08 +0100
Subject: [PATCH] feat: Make ui.command to support path and download props
 #2224 (#2262)

---
 py/examples/toolbar.py                        |   2 +-
 py/h2o_lightwave/h2o_lightwave/types.py       |  20 +++
 py/h2o_lightwave/h2o_lightwave/ui.py          |   6 +
 py/h2o_wave/h2o_wave/types.py                 |  20 +++
 py/h2o_wave/h2o_wave/ui.py                    |   6 +
 r/R/ui.R                                      |  12 +-
 .../resources/templates/wave-components.xml   |   4 +-
 .../vscode-extension/component-snippets.json  |   2 +-
 ui/src/button.test.tsx                        |  89 +++++++++++++
 ui/src/card_menu.test.tsx                     |  49 +++++++
 ui/src/card_menu.tsx                          |  39 +++---
 ui/src/link.tsx                               |   2 +-
 ui/src/table.test.tsx                         | 126 +++++++++++++++---
 ui/src/toolbar.test.tsx                       |  40 ++++++
 ui/src/toolbar.tsx                            |  27 ++--
 website/widgets/content/toolbar.md            |   4 +-
 16 files changed, 398 insertions(+), 50 deletions(-)

diff --git a/py/examples/toolbar.py b/py/examples/toolbar.py
index b9ea257526..4e7e6eedd4 100644
--- a/py/examples/toolbar.py
+++ b/py/examples/toolbar.py
@@ -18,7 +18,7 @@ async def serve(q: Q):
             ),
             ui.command(name='upload', label='Upload', icon='Upload'),
             ui.command(name='share', label='Share', icon='Share'),
-            ui.command(name='download', label='Download', icon='Download'),
+            ui.command(name='download', label='Download', icon='Download', path='https://wave.h2o.ai/img/logo.svg', download=True),
         ],
         secondary_items=[
             ui.command(name='tile', caption='Grid View', icon='Tiles'),
diff --git a/py/h2o_lightwave/h2o_lightwave/types.py b/py/h2o_lightwave/h2o_lightwave/types.py
index 8887cc6b1e..28c5125f32 100644
--- a/py/h2o_lightwave/h2o_lightwave/types.py
+++ b/py/h2o_lightwave/h2o_lightwave/types.py
@@ -160,6 +160,8 @@ def __init__(
             icon: Optional[str] = None,
             items: Optional[List['Command']] = None,
             value: Optional[str] = None,
+            path: Optional[str] = None,
+            download: Optional[bool] = None,
     ):
         _guard_scalar('Command.name', name, (str,), True, False, False)
         _guard_scalar('Command.label', label, (str,), False, True, False)
@@ -167,6 +169,8 @@ def __init__(
         _guard_scalar('Command.icon', icon, (str,), False, True, False)
         _guard_vector('Command.items', items, (Command,), False, True, False)
         _guard_scalar('Command.value', value, (str,), False, True, False)
+        _guard_scalar('Command.path', path, (str,), False, True, False)
+        _guard_scalar('Command.download', download, (bool,), False, True, False)
         self.name = name
         """An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed."""
         self.label = label
@@ -179,6 +183,10 @@ def __init__(
         """Sub-commands, if any"""
         self.value = value
         """Data associated with this command, if any."""
+        self.path = path
+        """The path or URL to link to. The 'items' and 'value' props are ignored when specified."""
+        self.download = download
+        """True if the link should prompt the user to save the linked URL instead of navigating to it."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
@@ -188,6 +196,8 @@ def dump(self) -> Dict:
         _guard_scalar('Command.icon', self.icon, (str,), False, True, False)
         _guard_vector('Command.items', self.items, (Command,), False, True, False)
         _guard_scalar('Command.value', self.value, (str,), False, True, False)
+        _guard_scalar('Command.path', self.path, (str,), False, True, False)
+        _guard_scalar('Command.download', self.download, (bool,), False, True, False)
         return _dump(
             name=self.name,
             label=self.label,
@@ -195,6 +205,8 @@ def dump(self) -> Dict:
             icon=self.icon,
             items=None if self.items is None else [__e.dump() for __e in self.items],
             value=self.value,
+            path=self.path,
+            download=self.download,
         )
 
     @staticmethod
@@ -212,12 +224,18 @@ def load(__d: Dict) -> 'Command':
         _guard_vector('Command.items', __d_items, (dict,), False, True, False)
         __d_value: Any = __d.get('value')
         _guard_scalar('Command.value', __d_value, (str,), False, True, False)
+        __d_path: Any = __d.get('path')
+        _guard_scalar('Command.path', __d_path, (str,), False, True, False)
+        __d_download: Any = __d.get('download')
+        _guard_scalar('Command.download', __d_download, (bool,), False, True, False)
         name: str = __d_name
         label: Optional[str] = __d_label
         caption: Optional[str] = __d_caption
         icon: Optional[str] = __d_icon
         items: Optional[List['Command']] = None if __d_items is None else [Command.load(__e) for __e in __d_items]
         value: Optional[str] = __d_value
+        path: Optional[str] = __d_path
+        download: Optional[bool] = __d_download
         return Command(
             name,
             label,
@@ -225,6 +243,8 @@ def load(__d: Dict) -> 'Command':
             icon,
             items,
             value,
+            path,
+            download,
         )
 
 
diff --git a/py/h2o_lightwave/h2o_lightwave/ui.py b/py/h2o_lightwave/h2o_lightwave/ui.py
index 9967255f1d..fc21f8dbbc 100644
--- a/py/h2o_lightwave/h2o_lightwave/ui.py
+++ b/py/h2o_lightwave/h2o_lightwave/ui.py
@@ -58,6 +58,8 @@ def command(
         icon: Optional[str] = None,
         items: Optional[List[Command]] = None,
         value: Optional[str] = None,
+        path: Optional[str] = None,
+        download: Optional[bool] = None,
 ) -> Command:
     """Create a command.
 
@@ -70,6 +72,8 @@ def command(
         icon: The icon to be displayed for this command.
         items: Sub-commands, if any
         value: Data associated with this command, if any.
+        path: The path or URL to link to. The 'items' and 'value' props are ignored when specified.
+        download: True if the link should prompt the user to save the linked URL instead of navigating to it.
     Returns:
         A `h2o_wave.types.Command` instance.
     """
@@ -80,6 +84,8 @@ def command(
         icon,
         items,
         value,
+        path,
+        download,
     )
 
 
diff --git a/py/h2o_wave/h2o_wave/types.py b/py/h2o_wave/h2o_wave/types.py
index 8887cc6b1e..28c5125f32 100644
--- a/py/h2o_wave/h2o_wave/types.py
+++ b/py/h2o_wave/h2o_wave/types.py
@@ -160,6 +160,8 @@ def __init__(
             icon: Optional[str] = None,
             items: Optional[List['Command']] = None,
             value: Optional[str] = None,
+            path: Optional[str] = None,
+            download: Optional[bool] = None,
     ):
         _guard_scalar('Command.name', name, (str,), True, False, False)
         _guard_scalar('Command.label', label, (str,), False, True, False)
@@ -167,6 +169,8 @@ def __init__(
         _guard_scalar('Command.icon', icon, (str,), False, True, False)
         _guard_vector('Command.items', items, (Command,), False, True, False)
         _guard_scalar('Command.value', value, (str,), False, True, False)
+        _guard_scalar('Command.path', path, (str,), False, True, False)
+        _guard_scalar('Command.download', download, (bool,), False, True, False)
         self.name = name
         """An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed."""
         self.label = label
@@ -179,6 +183,10 @@ def __init__(
         """Sub-commands, if any"""
         self.value = value
         """Data associated with this command, if any."""
+        self.path = path
+        """The path or URL to link to. The 'items' and 'value' props are ignored when specified."""
+        self.download = download
+        """True if the link should prompt the user to save the linked URL instead of navigating to it."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
@@ -188,6 +196,8 @@ def dump(self) -> Dict:
         _guard_scalar('Command.icon', self.icon, (str,), False, True, False)
         _guard_vector('Command.items', self.items, (Command,), False, True, False)
         _guard_scalar('Command.value', self.value, (str,), False, True, False)
+        _guard_scalar('Command.path', self.path, (str,), False, True, False)
+        _guard_scalar('Command.download', self.download, (bool,), False, True, False)
         return _dump(
             name=self.name,
             label=self.label,
@@ -195,6 +205,8 @@ def dump(self) -> Dict:
             icon=self.icon,
             items=None if self.items is None else [__e.dump() for __e in self.items],
             value=self.value,
+            path=self.path,
+            download=self.download,
         )
 
     @staticmethod
@@ -212,12 +224,18 @@ def load(__d: Dict) -> 'Command':
         _guard_vector('Command.items', __d_items, (dict,), False, True, False)
         __d_value: Any = __d.get('value')
         _guard_scalar('Command.value', __d_value, (str,), False, True, False)
+        __d_path: Any = __d.get('path')
+        _guard_scalar('Command.path', __d_path, (str,), False, True, False)
+        __d_download: Any = __d.get('download')
+        _guard_scalar('Command.download', __d_download, (bool,), False, True, False)
         name: str = __d_name
         label: Optional[str] = __d_label
         caption: Optional[str] = __d_caption
         icon: Optional[str] = __d_icon
         items: Optional[List['Command']] = None if __d_items is None else [Command.load(__e) for __e in __d_items]
         value: Optional[str] = __d_value
+        path: Optional[str] = __d_path
+        download: Optional[bool] = __d_download
         return Command(
             name,
             label,
@@ -225,6 +243,8 @@ def load(__d: Dict) -> 'Command':
             icon,
             items,
             value,
+            path,
+            download,
         )
 
 
diff --git a/py/h2o_wave/h2o_wave/ui.py b/py/h2o_wave/h2o_wave/ui.py
index 9967255f1d..fc21f8dbbc 100644
--- a/py/h2o_wave/h2o_wave/ui.py
+++ b/py/h2o_wave/h2o_wave/ui.py
@@ -58,6 +58,8 @@ def command(
         icon: Optional[str] = None,
         items: Optional[List[Command]] = None,
         value: Optional[str] = None,
+        path: Optional[str] = None,
+        download: Optional[bool] = None,
 ) -> Command:
     """Create a command.
 
@@ -70,6 +72,8 @@ def command(
         icon: The icon to be displayed for this command.
         items: Sub-commands, if any
         value: Data associated with this command, if any.
+        path: The path or URL to link to. The 'items' and 'value' props are ignored when specified.
+        download: True if the link should prompt the user to save the linked URL instead of navigating to it.
     Returns:
         A `h2o_wave.types.Command` instance.
     """
@@ -80,6 +84,8 @@ def command(
         icon,
         items,
         value,
+        path,
+        download,
     )
 
 
diff --git a/r/R/ui.R b/r/R/ui.R
index 4f603b4053..6809ec908d 100644
--- a/r/R/ui.R
+++ b/r/R/ui.R
@@ -103,6 +103,8 @@ ui_text <- function(
 #' @param icon The icon to be displayed for this command.
 #' @param items Sub-commands, if any
 #' @param value Data associated with this command, if any.
+#' @param path The path or URL to link to. The 'items' and 'value' props are ignored when specified.
+#' @param download True if the link should prompt the user to save the linked URL instead of navigating to it.
 #' @return A Command instance.
 #' @export
 ui_command <- function(
@@ -111,20 +113,26 @@ ui_command <- function(
   caption = NULL,
   icon = NULL,
   items = NULL,
-  value = NULL) {
+  value = NULL,
+  path = NULL,
+  download = NULL) {
   .guard_scalar("name", "character", name)
   .guard_scalar("label", "character", label)
   .guard_scalar("caption", "character", caption)
   .guard_scalar("icon", "character", icon)
   .guard_vector("items", "WaveCommand", items)
   .guard_scalar("value", "character", value)
+  .guard_scalar("path", "character", path)
+  .guard_scalar("download", "logical", download)
   .o <- list(
     name=name,
     label=label,
     caption=caption,
     icon=icon,
     items=items,
-    value=value)
+    value=value,
+    path=path,
+    download=download)
   class(.o) <- append(class(.o), c(.wave_obj, "WaveCommand"))
   return(.o)
 }
diff --git a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
index ae064bd8ab..a0008ad3e7 100644
--- a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
+++ b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
@@ -2680,12 +2680,14 @@
       <option name="Python" value="true"/>
     </context>
   </template>
-  <template name="w_full_command" value="ui.command(name='$name$',label='$label$',caption='$caption$',icon='$icon$',value='$value$',items=[&#10;	$items$	&#10;]),$END$" description="Create Wave Command with full attributes." toReformat="true" toShortenFQNames="true">
+  <template name="w_full_command" value="ui.command(name='$name$',label='$label$',caption='$caption$',icon='$icon$',value='$value$',path='$path$',download=$download$,items=[&#10;	$items$	&#10;]),$END$" description="Create Wave Command with full attributes." toReformat="true" toShortenFQNames="true">
     <variable name="name" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="label" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="caption" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="icon" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="value" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="path" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="download" expression="" defaultValue="&quot;False&quot;" alwaysStopAt="true"/>
     <variable name="items" expression="" defaultValue="" alwaysStopAt="true"/>
     <context>
       <option name="Python" value="true"/>
diff --git a/tools/vscode-extension/component-snippets.json b/tools/vscode-extension/component-snippets.json
index 54abe72085..e5bd7ed62e 100644
--- a/tools/vscode-extension/component-snippets.json
+++ b/tools/vscode-extension/component-snippets.json
@@ -1927,7 +1927,7 @@
   "Wave Full Command": {
     "prefix": "w_full_command",
     "body": [
-      "ui.command(name='$1', label='$2', caption='$3', icon='$4', value='$5', items=[\n\t\t$6\t\t\n]),$0"
+      "ui.command(name='$1', label='$2', caption='$3', icon='$4', value='$5', path='$6', download=${7:False}, items=[\n\t\t$8\t\t\n]),$0"
     ],
     "description": "Create a full Wave Command."
   },
diff --git a/ui/src/button.test.tsx b/ui/src/button.test.tsx
index b6b169074a..2e99f46612 100644
--- a/ui/src/button.test.tsx
+++ b/ui/src/button.test.tsx
@@ -124,6 +124,7 @@ describe('Button.tsx', () => {
   })
 
   describe('Commands button', () => {
+    const path = 'https://wave.h2o.ai/img/logo.svg'
     const buttonProps = {
       items: [{
         button: {
@@ -254,5 +255,93 @@ describe('Button.tsx', () => {
       expect(getByTestId(name)).toHaveClass('ms-Link')
       expect(container.querySelector('i[data-icon-name="ChevronDown"]') as HTMLLIElement).not.toBeInTheDocument()
     })
+
+    it('Does not set args or calls sync on click when command has download link specified', () => {
+      const
+        btnCommandDownloadProps: Buttons = {
+          items: [{
+            button: {
+              name,
+              label: name,
+              commands: [
+                { name: 'command1', label: 'Command 1' },
+                { name: 'command2', label: 'Command 2', path, download: true },
+              ]
+            }
+          }]
+        },
+        { container, getByText } = render(<XButtons model={btnCommandDownloadProps} />),
+        contextMenuButton = container.querySelector('i[data-icon-name="ChevronDown"]') as HTMLLIElement
+
+      expect(wave.args['command1']).toBe(false)
+      fireEvent.click(contextMenuButton)
+      fireEvent.click(getByText('Command 1'))
+      expect(wave.args['command1']).toBe(true)
+
+      expect(pushMock).toHaveBeenCalled()
+      expect(pushMock).toHaveBeenCalledTimes(1)
+
+      expect(wave.args['command2']).toBe(false)
+      fireEvent.click(contextMenuButton)
+      fireEvent.click(getByText('Command 2'))
+      expect(wave.args['command2']).toBe(false)
+
+      expect(pushMock).toHaveBeenCalledTimes(1)
+    })
+
+    it('Ignores items when command has download link specified', () => {
+      const
+        btnCommandDownloadProps: Buttons = {
+          items: [{
+            button: {
+              name,
+              label: name,
+              commands: [
+                { name: 'command1', label: 'Command 1', items: [{ name: 'commandItem1', label: 'Command item 1' }] },
+                { name: 'command2', label: 'Command 2', path, download: true, items: [{ name: 'commandItem2', label: 'Command item 2' }] },
+              ]
+            }
+          }]
+        },
+        { container, queryByText } = render(<XButtons model={btnCommandDownloadProps} />),
+        contextMenuButton = container.querySelector('i[data-icon-name="ChevronDown"]') as HTMLLIElement
+
+      fireEvent.click(contextMenuButton)
+
+      expect(queryByText('Command item 1')).not.toBeInTheDocument()
+      const menuItem1 = document.querySelectorAll('button.ms-ContextualMenu-link')[0] as HTMLButtonElement
+      fireEvent.click(menuItem1)
+      expect(queryByText('Command item 1')).toBeInTheDocument()
+
+      expect(queryByText('Command item 2')).not.toBeInTheDocument()
+      const menuItem2 = document.querySelectorAll('button.ms-ContextualMenu-link')[1] as HTMLButtonElement
+      fireEvent.click(menuItem2)
+      expect(queryByText('Command item 2')).not.toBeInTheDocument()
+    })
+
+    it('Opens link in a new tab when command has path specified', () => {
+      const windowOpenMock = jest.fn()
+      window.open = windowOpenMock
+      const
+        btnCommandDownloadProps: Buttons = {
+          items: [{
+            button: {
+              name,
+              label: name,
+              commands: [
+                { name: 'command', label: 'Command', path },
+              ]
+            }
+          }]
+        },
+        { container, getByText } = render(<XButtons model={btnCommandDownloadProps} />),
+        contextMenuButton = container.querySelector('i[data-icon-name="ChevronDown"]') as HTMLLIElement
+
+      fireEvent.click(contextMenuButton)
+      fireEvent.click(getByText('Command'))
+
+      expect(windowOpenMock).toHaveBeenCalled()
+      expect(windowOpenMock).toHaveBeenCalledWith(path, '_blank')
+    })
   })
 })
\ No newline at end of file
diff --git a/ui/src/card_menu.test.tsx b/ui/src/card_menu.test.tsx
index 3ec54b3388..0e0ffdae6e 100644
--- a/ui/src/card_menu.test.tsx
+++ b/ui/src/card_menu.test.tsx
@@ -16,8 +16,10 @@ import { fireEvent, render } from '@testing-library/react'
 import { Card, box } from './core'
 import React from 'react'
 import { CardMenu } from './card_menu'
+import { wave } from './ui'
 
 const name = 'card'
+const path = 'https://wave.h2o.ai/img/logo.svg'
 let card: Card
 describe('CardMenu.tsx', () => {
   beforeEach(() => {
@@ -28,6 +30,7 @@ describe('CardMenu.tsx', () => {
       id: 'id',
       set: jest.fn(),
     }
+    wave.args[name] = null
   })
   it('Does not render data-test attr', () => {
     // @ts-ignore
@@ -64,4 +67,50 @@ describe('CardMenu.tsx', () => {
 
     expect(window.location.hash).toBe('#card')
   })
+
+  it('Does not set args or calls sync on click when command has download link specified', () => {
+    const pushMock = jest.fn()
+    wave.push = pushMock
+    card.state.commands = [{ name: 'card', download: true, path, value: 'value' }]
+    const { getByTestId, getByText } = render(<CardMenu card={card} />)
+    fireEvent.click(getByTestId(name))
+    fireEvent.click(getByText('card'))
+
+    expect(pushMock).not.toHaveBeenCalled()
+    expect(wave.args[name]).toBeNull()
+  })
+
+  it('Ignores items when command has download link specified', () => {
+    card.state.commands = [
+      { name: 'command1', items: [{ name: 'subcommand1', label: "Subcommand 1" }] },
+      { name: 'command2', path, download: true, items: [{ name: 'subcommand2', label: "Subcommand 2" }] }
+    ]
+    const { container, queryByText } = render(<CardMenu card={card} />)
+
+    const contextMenuButton = container.querySelectorAll('i[data-icon-name="MoreVertical"]')[0] as HTMLLIElement
+    fireEvent.click(contextMenuButton)
+
+    expect(queryByText('Subcommand 1')).not.toBeInTheDocument()
+    const menuItem1 = document.querySelectorAll('button.ms-ContextualMenu-link')[0] as HTMLButtonElement
+    fireEvent.click(menuItem1)
+    expect(queryByText('Subcommand 1')).toBeInTheDocument()
+
+    expect(queryByText('Subcommand 2')).not.toBeInTheDocument()
+    const menuItem2 = document.querySelectorAll('button.ms-ContextualMenu-link')[1] as HTMLButtonElement
+    fireEvent.click(menuItem2)
+    expect(queryByText('Subcommand 2')).not.toBeInTheDocument()
+  })
+
+  it('Opens link in a new tab when command has path specified', () => {
+    const windowOpenMock = jest.fn()
+    window.open = windowOpenMock
+    card.state.commands = [{ name: 'card', path }]
+    const { getByTestId, getByText } = render(<CardMenu card={card} />)
+
+    fireEvent.click(getByTestId(name))
+    fireEvent.click(getByText('card'))
+
+    expect(windowOpenMock).toHaveBeenCalled()
+    expect(windowOpenMock).toHaveBeenCalledWith(path, '_blank')
+  })
 })
\ No newline at end of file
diff --git a/ui/src/card_menu.tsx b/ui/src/card_menu.tsx
index 56898733e8..200de0b6e3 100644
--- a/ui/src/card_menu.tsx
+++ b/ui/src/card_menu.tsx
@@ -21,6 +21,7 @@ import { fixMenuOverflowStyles } from './parts/utils'
 import { clas, cssVar } from './theme'
 import { Command } from './toolbar'
 import { bond, wave } from './ui'
+import { forceFileDownload } from './link'
 
 const
   css = stylesheet({
@@ -55,30 +56,32 @@ const
 const
   editCommand = '__edit__',
   deleteCommand = '__delete__',
-  toContextMenuItem = (c: Command): IContextualMenuItem => {
+  toContextMenuItem = ({ name, label, value, items, caption, icon, download, path }: Command): IContextualMenuItem => {
     const
-      onClick = () => {
-        if (c.name === editCommand) {
-          if (c.value) editCard(c.value)
-          return
+      onClick = (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
+        if (ev && download && path) {
+          ev.preventDefault()
+          forceFileDownload(path)
         }
-        if (c.name === deleteCommand) {
-          if (c.value) deleteCard(c.value)
-          return
+        else if (path) window.open(path, '_blank')
+        else if (name === editCommand) {
+          if (value) editCard(value)
         }
-        if (c.name.startsWith('#')) {
-          window.location.hash = c.name.substring(1)
-          return
+        else if (name === deleteCommand) {
+          if (value) deleteCard(value)
+        }
+        else if (name.startsWith('#')) window.location.hash = name.substring(1)
+        else {
+          wave.args[name] = value ?? true
+          wave.push()
         }
-        wave.args[c.name] = c.value ?? true
-        wave.push()
       }
     return {
-      key: c.name,
-      text: c.label || c.name || 'Untitled',
-      iconProps: c.icon ? { iconName: c.icon } : undefined,
-      title: c.caption || undefined,
-      subMenuProps: c.items ? { items: c.items.map(toContextMenuItem), styles: fixMenuOverflowStyles } : undefined,
+      key: name,
+      text: label || name || 'Untitled',
+      iconProps: icon ? { iconName: icon } : undefined,
+      title: caption || undefined,
+      subMenuProps: items && !path ? { items: items.map(toContextMenuItem), styles: fixMenuOverflowStyles } : undefined,
       onClick,
     }
   }
diff --git a/ui/src/link.tsx b/ui/src/link.tsx
index ef9cf9d4ba..8b72598ccf 100644
--- a/ui/src/link.tsx
+++ b/ui/src/link.tsx
@@ -89,7 +89,7 @@ export interface Links {
   /** The width of the links, e.g. '100px'. */
   width?: S
 }
-const forceFileDownload = (path: S) => {
+export const forceFileDownload = (path: S) => {
   const anchor = document.createElement('a')
   anchor.href = path
   anchor.download = path.split('/').pop()!
diff --git a/ui/src/table.test.tsx b/ui/src/table.test.tsx
index fa8fc305f7..7f26766031 100644
--- a/ui/src/table.test.tsx
+++ b/ui/src/table.test.tsx
@@ -22,6 +22,7 @@ const
   cell11 = 'Quick brown fox.',
   cell21 = 'Jumps over a dog.',
   cell31 = 'Wooo hooo.',
+  path = 'https://wave.h2o.ai/img/logo.svg',
   headerRow = 1,
   groupHeaderRowsCount = 2,
   filteredItem = 1,
@@ -140,6 +141,67 @@ describe('Table.tsx', () => {
     expect(tags3.childElementCount).toBe(0)
   })
 
+  it('Ignores items when menu command has download link specified', () => {
+    tableProps = {
+      ...tableProps,
+      columns: [
+        { name: 'colname1', label: 'Col1' },
+        {
+          name: 'colname2', label: 'Col2', cell_type: {
+            menu: {
+              name: 'commands', commands: [
+                { name: 'command1', label: 'Command 1', items: [{ name: 'commandItem1', label: 'Command item 1' }] },
+                { name: 'command2', label: 'Command 2', path, download: true, items: [{ name: 'commandItem2', label: 'Command item 2' }] },
+              ]
+            }
+          }
+        },
+      ],
+    }
+    const { container, queryByText } = render(<XTable model={tableProps} />)
+    const contextMenuButton = container.querySelectorAll('i[data-icon-name="MoreVertical"]')[0] as HTMLLIElement
+    fireEvent.click(contextMenuButton)
+
+    expect(queryByText('Command item 1')).not.toBeInTheDocument()
+    const menuItem1 = document.querySelectorAll('button.ms-ContextualMenu-link')[0] as HTMLButtonElement
+    fireEvent.click(menuItem1)
+    expect(queryByText('Command item 1')).toBeInTheDocument()
+
+    expect(queryByText('Command item 2')).not.toBeInTheDocument()
+    const menuItem2 = document.querySelectorAll('button.ms-ContextualMenu-link')[1] as HTMLButtonElement
+    fireEvent.click(menuItem2)
+    expect(queryByText('Command item 2')).not.toBeInTheDocument()
+  })
+
+  it('Opens link in a new tab when menu command has path specified', () => {
+    const windowOpenMock = jest.fn()
+    window.open = windowOpenMock
+    tableProps = {
+      ...tableProps,
+      columns: [
+        { name: 'colname1', label: 'Col1' },
+        {
+          name: 'colname2', label: 'Col2', cell_type: {
+            menu: {
+              name: 'commands', commands: [
+                { name: 'command1', label: 'Command 1', path },
+              ]
+            }
+          }
+        },
+      ],
+    }
+    const { container } = render(<XTable model={tableProps} />)
+    const contextMenuButton = container.querySelectorAll('i[data-icon-name="MoreVertical"]')[0] as HTMLLIElement
+
+    fireEvent.click(contextMenuButton)
+    const menuItem = document.querySelectorAll('button.ms-ContextualMenu-link')[0] as HTMLButtonElement
+    fireEvent.click(menuItem)
+
+    expect(windowOpenMock).toHaveBeenCalled()
+    expect(windowOpenMock).toHaveBeenCalledWith(path, '_blank')
+  })
+
   // TODO: Add a test to check that no event is emitted on rows update. Would result in infinite loop.
 
   describe('Height compute', () => {
@@ -422,26 +484,60 @@ describe('Table.tsx', () => {
       expect(wave.args[name]).toMatchObject(['rowname2'])
       expect(pushMock).toHaveBeenCalled()
     })
-  })
 
-  it('Does not click a column - link exlpicitly turned off', () => {
-    tableProps = {
-      ...tableProps,
-      columns: [
-        { name: 'colname1', label: 'Col1', link: false },
-        { name: 'colname2', label: 'Col2' },
-      ]
-    }
-    const pushMock = jest.fn()
-    wave.push = pushMock
+    it('Does not click a column - link exlpicitly turned off', () => {
+      tableProps = {
+        ...tableProps,
+        columns: [
+          { name: 'colname1', label: 'Col1', link: false },
+          { name: 'colname2', label: 'Col2' },
+        ]
+      }
+      const pushMock = jest.fn()
+      wave.push = pushMock
 
-    const { getByText } = render(<XTable model={tableProps} />)
+      const { getByText } = render(<XTable model={tableProps} />)
 
-    fireEvent.click(getByText(cell21))
-    expect(pushMock).not.toHaveBeenCalled()
-    expect(wave.args[name]).toMatchObject([])
+      fireEvent.click(getByText(cell21))
+      expect(pushMock).not.toHaveBeenCalled()
+      expect(wave.args[name]).toMatchObject([])
+    })
+
+    it('Does not set args and calls sync on click when menu command has download link specified', () => {
+      tableProps = {
+        ...tableProps,
+        columns: [
+          { name: 'colname1', label: 'Col1' },
+          {
+            name: 'colname2', label: 'Col2', cell_type: {
+              menu: {
+                name: 'commands', commands: [
+                  { name: 'command1', label: 'Command 1' },
+                  { name: 'command2', label: 'Command 2', path, download: true },
+                ]
+              }
+            }
+          },
+        ],
+      }
+      const { container, queryAllByText } = render(<XTable model={tableProps} />)
+      const contextMenuButton = container.querySelectorAll('i[data-icon-name="MoreVertical"]')[0] as HTMLLIElement
+
+      expect(wave.args['command1']).toBe(false)
+      fireEvent.click(contextMenuButton)
+      fireEvent.click(queryAllByText('Command 1')[1])
+
+      expect(wave.args['command1']).toBe('rowname2')
+
+      expect(wave.args['command2']).toBe(false)
+      fireEvent.click(contextMenuButton)
+      fireEvent.click(queryAllByText('Command 2')[1])
+
+      expect(wave.args['command2']).toBe(false)
+    })
   })
 
+
   describe('sort', () => {
     beforeEach(() => {
       sortTableProps = {
diff --git a/ui/src/toolbar.test.tsx b/ui/src/toolbar.test.tsx
index f6449f1778..b340238d41 100644
--- a/ui/src/toolbar.test.tsx
+++ b/ui/src/toolbar.test.tsx
@@ -21,6 +21,7 @@ import { wave } from './ui'
 const
   name = 'toolbar',
   label = name,
+  path = 'https://wave.h2o.ai/img/logo.svg',
   toolbarProps: Model<any> = {
     name,
     state: { items: [{ name, label }] },
@@ -69,4 +70,43 @@ describe('Toolbar.tsx', () => {
     expect(window.location.hash).toBe(hashName)
   })
 
+  it('Does not set args or calls sync on click when command has download link specified', () => {
+    const value = 'value'
+    const { getByText } = render(<Toolbar {...{ ...toolbarProps, state: { items: [{ name, value, label, path, download: true }] } }} />)
+    fireEvent.click(getByText(label))
+
+    expect(pushMock).not.toHaveBeenCalled()
+    expect(wave.args[name]).toBe(false)
+  })
+
+  it('Ignores items when command has download link specified', () => {
+    const props = {
+      ...toolbarProps, state: {
+        items: [{
+          name,
+          label,
+          path,
+          download: true,
+          items: [{ name: 'item', label: 'item' }]
+        }]
+      }
+    }
+    const { queryByText, getByText } = render(<Toolbar {...props} />)
+
+    expect(queryByText('item')).not.toBeInTheDocument()
+    fireEvent.click(getByText(label))
+
+    expect(queryByText('item')).not.toBeInTheDocument()
+  })
+
+  it('Opens link in a new tab when command has path specified', () => {
+    const windowOpenMock = jest.fn()
+    window.open = windowOpenMock
+    const { getByText } = render(<Toolbar {...{ ...toolbarProps, state: { items: [{ name, label, path }] } }} />)
+
+    fireEvent.click(getByText(label))
+
+    expect(windowOpenMock).toHaveBeenCalled()
+    expect(windowOpenMock).toHaveBeenCalledWith(path, '_blank')
+  })
 })
diff --git a/ui/src/toolbar.tsx b/ui/src/toolbar.tsx
index a4f95b6572..3204358d25 100644
--- a/ui/src/toolbar.tsx
+++ b/ui/src/toolbar.tsx
@@ -14,12 +14,13 @@
 
 import * as Fluent from '@fluentui/react'
 import { ICommandBarItemProps } from '@fluentui/react'
-import { Id, Model, S } from './core'
+import { B, Id, Model, S } from './core'
 import React from 'react'
 import { stylesheet } from 'typestyle'
 import { CardEffect, cards } from './layout'
 import { fixMenuOverflowStyles } from './parts/utils'
 import { bond, wave } from './ui'
+import { forceFileDownload } from './link'
 
 /**
  * Create a command.
@@ -39,6 +40,10 @@ export interface Command {
   items?: Command[]
   /** Data associated with this command, if any. */
   value?: S
+  /** The path or URL to link to. The 'items' and 'value' props are ignored when specified. */
+  path?: S
+  /** True if the link should prompt the user to save the linked URL instead of navigating to it. */
+  download?: B
 }
 
 /** Create a card containing a toolbar. */
@@ -59,15 +64,19 @@ const
       justifyContent: 'center',
     },
   }),
-  toCommand = ({ name, label, caption, icon, items, value }: Command): ICommandBarItemProps => {
+  toCommand = ({ name, path, label, caption, icon, items, value, download }: Command): ICommandBarItemProps => {
     wave.args[name] = false
-    const onClick = () => {
-      if (name.startsWith('#')) {
-        window.location.hash = name.substring(1)
-        return
+    const onClick = (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
+      if (ev && download && path) {
+        ev.preventDefault()
+        forceFileDownload(path)
+      }
+      else if (path) window.open(path, '_blank')
+      else if (name.startsWith('#')) window.location.hash = name.substring(1)
+      else {
+        wave.args[name] = value === undefined || value
+        wave.push()
       }
-      wave.args[name] = value === undefined || value
-      wave.push()
     }
     return {
       key: name,
@@ -76,7 +85,7 @@ const
       title: caption,
       iconOnly: !label,
       iconProps: icon ? { iconName: icon } : undefined,
-      subMenuProps: items ? { items: toCommands(items), styles: fixMenuOverflowStyles } : undefined,
+      subMenuProps: items && !path ? { items: toCommands(items), styles: fixMenuOverflowStyles } : undefined,
       onClick,
     }
   }
diff --git a/website/widgets/content/toolbar.md b/website/widgets/content/toolbar.md
index 6e2fca382a..3f0f9476b1 100644
--- a/website/widgets/content/toolbar.md
+++ b/website/widgets/content/toolbar.md
@@ -19,11 +19,11 @@ q.page['example'] = ui.toolbar_card(
         ),
         ui.command(name='upload', label='Upload', icon='Upload'),
         ui.command(name='share', label='Share', icon='Share'),
-        ui.command(name='download', label='Download', icon='Download'),
+        ui.command(name='download', label='Download', icon='Download', path='https://wave.h2o.ai/img/logo.svg', download=True),
     ],
     secondary_items=[
         ui.command(name='tile', caption='Grid View', icon='Tiles'),
-        ui.command(name='info', caption='Info', icon='Info'),
+        ui.command(name='info', caption='Info', icon='Info', path='https://wave.h2o.ai'),
     ],
     overflow_items=[
         ui.command(name='move', label='Move to...', icon='MoveToFolder'),