Support navigate to link in new tab (#9800)

* Support navigate to link in new tab

* Add dropdown for Navigate To type

* lint

* Remove labels

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/NavigateTo.svelte

@@ -1,22 +1,66 @@
 <script>
-  import { Label, Checkbox } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import { onMount } from "svelte"
+  import { Label, Checkbox, Select } from "@budibase/bbui"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
 
   export let parameters
   export let bindings = []
+
+  $: urlOptions = $store.screens
+    .map(screen => screen.routing?.route)
+    .filter(x => x != null)
+
+  const typeOptions = [
+    {
+      label: "Screen",
+      value: "screen",
+    },
+    {
+      label: "URL",
+      value: "url",
+    },
+  ]
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "screen"
+    }
+  })
 </script>
 
 <div class="root">
-  <Label small>Screen</Label>
+  <Label small>Destination</Label>
-  <DrawerBindableInput
+  <Select
-    title="Destination URL"
+    placeholder={null}
-    placeholder="/screen"
+    bind:value={parameters.type}
-    value={parameters.url}
+    options={typeOptions}
-    on:change={value => (parameters.url = value.detail)}
+    on:change={() => (parameters.url = "")}
-    {bindings}
   />
-  <div />
+  {#if parameters.type === "screen"}
-  <Checkbox text="Open screen in modal" bind:value={parameters.peek} />
+    <DrawerBindableCombobox
+      title="Destination"
+      placeholder="/screen"
+      value={parameters.url}
+      on:change={value => (parameters.url = value.detail)}
+      {bindings}
+      options={urlOptions}
+      appendBindingsAsOptions={false}
+    />
+    <div />
+    <Checkbox text="Open screen in modal" bind:value={parameters.peek} />
+  {:else}
+    <DrawerBindableInput
+      title="Destination"
+      placeholder="/url"
+      value={parameters.url}
+      on:change={value => (parameters.url = value.detail)}
+      {bindings}
+    />
+    <div />
+    <Checkbox text="New Tab" bind:value={parameters.externalNewTab} />
+  {/if}
 </div>
 
 <style>
@@ -24,7 +68,7 @@
     display: grid;
     align-items: center;
     gap: var(--spacing-m);
-    grid-template-columns: auto 1fr;
+    grid-template-columns: auto;
     max-width: 400px;
     margin: 0 auto;
   }

packages/client/src/stores/routes.js

@@ -66,22 +66,27 @@ const createRouteStore = () => {
       return state
     })
   }
-  const navigate = (url, peek) => {
+  const navigate = (url, peek, externalNewTab) => {
     if (get(builderStore).inBuilder) {
       return
     }
     if (url) {
       // If we're already peeking, don't peek again
       const isPeeking = get(store).queryParams?.peek
-      if (peek && !isPeeking) {
+      const external = !url.startsWith("/")
+      if (peek && !isPeeking && !external) {
         peekStore.actions.showPeek(url)
-      } else {
+      } else if (external) {
-        const external = !url.startsWith("/")
+        if (url.startsWith("www")) {
-        if (external) {
+          url = `https://${url}`
-          window.location.href = url
-        } else {
-          push(url)
         }
+        if (externalNewTab) {
+          window.open(url, "_blank")
+        } else {
+          window.location.href = url
+        }
+      } else {
+        push(url)
       }
     }
   }

packages/client/src/utils/buttonActions.js

@@ -140,8 +140,8 @@ const triggerAutomationHandler = async action => {
 }
 
 const navigationHandler = action => {
-  const { url, peek } = action.parameters
+  const { url, peek, externalNewTab } = action.parameters
-  routeStore.actions.navigate(url, peek)
+  routeStore.actions.navigate(url, peek, externalNewTab)
 }
 
 const queryExecutionHandler = async action => {