From eee7fab68219af2c969d23d0a8d7b88063544f55 Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 14:35:49 -0400
Subject: [PATCH 01/11] Improve styling and layout in Add Vault page

---
 gui/src/components/Icon.svelte             |  4 ++++
 gui/src/components/icon/glyphs/Add.svelte  |  3 +--
 gui/src/components/icon/glyphs/Lock.svelte | 12 ++++++++++++
 gui/src/pages/WorkspaceAddVault.svelte     | 11 +++++++----
 4 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 gui/src/components/icon/glyphs/Lock.svelte

diff --git a/gui/src/components/Icon.svelte b/gui/src/components/Icon.svelte
index ae35130a2..b796dddea 100644
--- a/gui/src/components/Icon.svelte
+++ b/gui/src/components/Icon.svelte
@@ -16,6 +16,7 @@
     | 'Home'
     | 'Layers'
     | 'LeftUp'
+    | 'Lock'
     | 'LogoDeno'
     | 'LogoDiscord'
     | 'LogoDjango'
@@ -60,6 +61,7 @@
   import HomeGlyph from './icon/glyphs/Home.svelte';
   import LayersGlyph from './icon/glyphs/Layers.svelte';
   import LeftUpGlyph from './icon/glyphs/LeftUp.svelte';
+  import LockGlyph from './icon/glyphs/Lock.svelte';
   import LogoDenoGlyph from './icon/glyphs/LogoDeno.svelte';
   import LogoDiscordGlyph from './icon/glyphs/LogoDiscord.svelte';
   import LogoDjangoGlyph from './icon/glyphs/LogoDjango.svelte';
@@ -117,6 +119,8 @@
   <LayersGlyph />
 {:else if glyph === 'LeftUp'}
   <LeftUpGlyph />
+{:else if glyph === 'Lock'}
+  <LockGlyph />
 {:else if glyph === 'LogoDeno'}
   <LogoDenoGlyph />
 {:else if glyph === 'LogoDiscord'}
diff --git a/gui/src/components/icon/glyphs/Add.svelte b/gui/src/components/icon/glyphs/Add.svelte
index 22b76a956..64c033713 100644
--- a/gui/src/components/icon/glyphs/Add.svelte
+++ b/gui/src/components/icon/glyphs/Add.svelte
@@ -1,5 +1,5 @@
 <svg
-  fill="none"
+  fill="currentColor"
   viewBox="0 0 24 24"
   height="24"
   width="24"
@@ -8,6 +8,5 @@
   <path
     xmlns="http://www.w3.org/2000/svg"
     d="M12 4C12.5523 4 13 4.44772 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44772 11.4477 4 12 4Z"
-    fill="#0D0D0D"
   />
 </svg>
diff --git a/gui/src/components/icon/glyphs/Lock.svelte b/gui/src/components/icon/glyphs/Lock.svelte
new file mode 100644
index 000000000..fc66604ed
--- /dev/null
+++ b/gui/src/components/icon/glyphs/Lock.svelte
@@ -0,0 +1,12 @@
+<svg
+  fill="currentColor"
+  viewBox="0 0 24 24"
+  height="24"
+  width="24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    xmlns="http://www.w3.org/2000/svg"
+    d="M12 4C13.6477 4 15 5.35228 15 7V10H9V7C9 5.35228 10.3523 4 12 4ZM17 10V7C17 4.24772 14.7523 2 12 2C9.24771 2 7 4.24772 7 7V10H6C4.89543 10 4 10.8954 4 12V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V12C20 10.8954 19.1046 10 18 10H17ZM6 12H18V20H6V12Z"
+  />
+</svg>
diff --git a/gui/src/pages/WorkspaceAddVault.svelte b/gui/src/pages/WorkspaceAddVault.svelte
index f1ed554fe..46a1fd357 100644
--- a/gui/src/pages/WorkspaceAddVault.svelte
+++ b/gui/src/pages/WorkspaceAddVault.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
   import * as router from 'svelte-spa-router';
-  import Panel from '../components/Panel.svelte';
+  import Icon from '../components/Icon.svelte';
   import Layout from '../components/Layout.svelte';
   import Textbox from '../components/Textbox.svelte';
   import WorkspaceNav from '../components/WorkspaceNav.svelte';
+  import SubmitButton from '../components/form/SubmitButton.svelte';
+  import CenterFormPanel from '../components/form/CenterFormPanel.svelte';
   import { api } from '../lib/api';
 
   export let params = { workspace: '' };
@@ -20,7 +22,8 @@
 
 <Layout>
   <WorkspaceNav {workspaceId} active="Variables" slot="navbar" />
-  <Panel title="Workspace Variables" backRoute={workspaceRoute}>
+  <CenterFormPanel title="Add Vault" backRoute={workspaceRoute}>
+    <h1><Icon glyph="Lock" /> Add Vault</h1>
     <form
       on:submit={async () => {
         await workspace.addVault({
@@ -34,10 +37,10 @@
     >
       <p>Enter a URL for your vault:</p>
       <Textbox bind:value={vaultUrl} --input-width="100%" autofocus />
-      <button type="submit">Add</button>
+      <SubmitButton>Add Vault</SubmitButton>
     </form>
 
     <h2>Need a vault?</h2>
     <a href={esvUrl}>Create one with Exo Secrets</a>
-  </Panel>
+  </CenterFormPanel>
 </Layout>

From 384517db1710e7a2170fd42fbe420f50222a77ef Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 14:46:29 -0400
Subject: [PATCH 02/11] Improve styling of ESV section in WorkspaceVariables
 page

---
 gui/src/pages/WorkspaceVariables.svelte | 96 ++++++++++++++-----------
 1 file changed, 54 insertions(+), 42 deletions(-)

diff --git a/gui/src/pages/WorkspaceVariables.svelte b/gui/src/pages/WorkspaceVariables.svelte
index a41a21884..d55ae3a2a 100644
--- a/gui/src/pages/WorkspaceVariables.svelte
+++ b/gui/src/pages/WorkspaceVariables.svelte
@@ -37,57 +37,69 @@
     {#await requests}
       <Spinner />
     {:then [variables, vaults]}
+      <div class="vaults-title">
+        <h2>Vaults</h2>
+        <Button
+          on:click={() => router.push(`${workspaceRoute}/add-vault`)}
+          small
+        >
+          Add vault
+        </Button>
+      </div>
+      {#if vaults.length}
+        <CheckeredTableWrapper>
+          <table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>URL</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {#each vaults as vault}
+                <tr>
+                  <td>{vault.name}</td>
+                  <td>{vault.url}</td>
+                  <td>
+                    {#if vault.connected}
+                      <a href={`${vault.url}/create-secret`} target="_blank"
+                        >Create secret</a
+                      >
+                    {:else if vault.needsAuth}
+                      <Button on:click={authEsv}>Authenticate</Button>
+                    {:else}
+                      Bad vault URL
+                    {/if}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </CheckeredTableWrapper>
+      {:else}
+        <div>No vaults linked to this workspace.</div>
+      {/if}
       {#if Object.keys(variables).length === 0}
         <div>Empty Environment</div>
       {:else}
+        <hr />
+        <h2>Variables</h2>
         <EnvironmentTable {variables} />
       {/if}
-      <h2>Vaults</h2>
-      <CheckeredTableWrapper>
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>URL</th>
-              <th />
-            </tr>
-          </thead>
-          <tbody>
-            {#each vaults as vault}
-              <tr>
-                <td>{vault.name}</td>
-                <td>{vault.url}</td>
-                <td>
-                  {#if vault.connected}
-                    <a href={`${vault.url}/create-secret`} target="_blank"
-                      >Create secret</a
-                    >
-                  {:else if vault.needsAuth}
-                    <Button on:click={authEsv}>Authenticate</Button>
-                  {:else}
-                    Bad vault URL
-                  {/if}
-                </td>
-              </tr>
-            {/each}
-            <tr>
-              <td colspan="3">
-                <Button
-                  on:click={() => router.push(`${workspaceRoute}/add-vault`)}
-                >
-                  Add vault
-                </Button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </CheckeredTableWrapper>
     {/await}
   </Panel>
 </Layout>
 
 <style>
-  h2 {
-    margin-top: 1.5em;
+  .vaults-title {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    margin-bottom: 24px;
+  }
+
+  .vaults-title h2 {
+    margin: 0;
   }
 </style>

From 0552b08876d1cb04a5ec1b4235a5af41bef1e242 Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 14:46:36 -0400
Subject: [PATCH 03/11] Fix backlink in Add Vault page

---
 gui/src/pages/WorkspaceAddVault.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/gui/src/pages/WorkspaceAddVault.svelte b/gui/src/pages/WorkspaceAddVault.svelte
index 46a1fd357..26dd6e6cf 100644
--- a/gui/src/pages/WorkspaceAddVault.svelte
+++ b/gui/src/pages/WorkspaceAddVault.svelte
@@ -12,7 +12,7 @@
 
   const workspaceId = params.workspace;
   const workspace = api.workspace(workspaceId);
-  const workspaceRoute = `/workspaces/${encodeURIComponent(workspaceId)}`;
+  const backRoute = `/workspaces/${encodeURIComponent(workspaceId)}/variables`;
 
   // TODO: inject this.
   const esvUrl = 'https://secrets.deref.io/organizations';
@@ -22,7 +22,7 @@
 
 <Layout>
   <WorkspaceNav {workspaceId} active="Variables" slot="navbar" />
-  <CenterFormPanel title="Add Vault" backRoute={workspaceRoute}>
+  <CenterFormPanel title="Add Vault" {backRoute}>
     <h1><Icon glyph="Lock" /> Add Vault</h1>
     <form
       on:submit={async () => {

From 792feffee7bb3e6077df06806f27d1bce6e56d9d Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 14:52:47 -0400
Subject: [PATCH 04/11] Style table headings in CheckeredTableWrapper

---
 gui/src/components/CheckeredTableWrapper.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/gui/src/components/CheckeredTableWrapper.svelte b/gui/src/components/CheckeredTableWrapper.svelte
index ce0756c9e..1c13e1899 100644
--- a/gui/src/components/CheckeredTableWrapper.svelte
+++ b/gui/src/components/CheckeredTableWrapper.svelte
@@ -25,6 +25,12 @@
     overflow: hidden;
   }
 
+  div :global(th) {
+    font-size: 0.85em;
+    font-weight: 450;
+    color: var(--grey-5-color);
+  }
+
   div :global(td),
   div :global(th) {
     text-align: left;

From 7084aa8bf485ca11fcb47dc94c2cbd9edcb109f9 Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 15:00:50 -0400
Subject: [PATCH 05/11] Use proper small buttons with added `href` handling in
 Workspace Variables.

---
 gui/src/components/Button.svelte        | 30 ++++++++++++++++++++++++-
 gui/src/pages/WorkspaceVariables.svelte |  8 +++----
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/gui/src/components/Button.svelte b/gui/src/components/Button.svelte
index 81fcd94ea..af6d0890f 100644
--- a/gui/src/components/Button.svelte
+++ b/gui/src/components/Button.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
+  import * as router from 'svelte-spa-router';
+  import { createEventDispatcher } from 'svelte';
+
   export let type: string | undefined = undefined;
+  export let href: string | undefined = undefined;
 
   export let small: boolean = false;
 
@@ -8,9 +12,33 @@
   export let inset: boolean = false;
 
   export let disabled = false;
+
+  const dispatch = createEventDispatcher();
+
+  const handleClick = (e: MouseEvent) => {
+    if (href) {
+      if (href.startsWith('#')) {
+        // Handle internal routes.
+        router.push(href);
+        return;
+      }
+      // Handle external routes (open in new tab).
+      window.open(href, '_blank')?.focus();
+      return;
+    }
+    // No-href default handling.
+    dispatch('click', e);
+  };
 </script>
 
-<button {disabled} class:small class:danger class:inset on:click {type}>
+<button
+  {disabled}
+  class:small
+  class:danger
+  class:inset
+  on:click|preventDefault={handleClick}
+  {type}
+>
   <slot />
 </button>
 
diff --git a/gui/src/pages/WorkspaceVariables.svelte b/gui/src/pages/WorkspaceVariables.svelte
index d55ae3a2a..033b610b4 100644
--- a/gui/src/pages/WorkspaceVariables.svelte
+++ b/gui/src/pages/WorkspaceVariables.svelte
@@ -63,11 +63,11 @@
                   <td>{vault.url}</td>
                   <td>
                     {#if vault.connected}
-                      <a href={`${vault.url}/create-secret`} target="_blank"
-                        >Create secret</a
-                      >
+                      <Button href={`${vault.url}/create-secret`} small>
+                        Create secret
+                      </Button>
                     {:else if vault.needsAuth}
-                      <Button on:click={authEsv}>Authenticate</Button>
+                      <Button on:click={authEsv} small>Authenticate</Button>
                     {:else}
                       Bad vault URL
                     {/if}

From a07371eeaaafd43cb415842867d871b09d1d1288 Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 15:04:10 -0400
Subject: [PATCH 06/11] Use `href` in Button to add new vault

---
 gui/src/pages/WorkspaceVariables.svelte | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/gui/src/pages/WorkspaceVariables.svelte b/gui/src/pages/WorkspaceVariables.svelte
index 033b610b4..0e090d985 100644
--- a/gui/src/pages/WorkspaceVariables.svelte
+++ b/gui/src/pages/WorkspaceVariables.svelte
@@ -13,7 +13,7 @@
 
   const workspaceId = params.workspace;
   const workspace = api.workspace(workspaceId);
-  const workspaceRoute = `/workspaces/${encodeURIComponent(workspaceId)}`;
+  const workspaceRoute = `#/workspaces/${encodeURIComponent(workspaceId)}`;
 
   const makeRequests = () =>
     Promise.all([workspace.describeEnvironment(), workspace.describeVaults()]);
@@ -39,12 +39,7 @@
     {:then [variables, vaults]}
       <div class="vaults-title">
         <h2>Vaults</h2>
-        <Button
-          on:click={() => router.push(`${workspaceRoute}/add-vault`)}
-          small
-        >
-          Add vault
-        </Button>
+        <Button href={`${workspaceRoute}/add-vault`} small>Add vault</Button>
       </div>
       {#if vaults.length}
         <CheckeredTableWrapper>

From 9c82a93a1d062f35bcdc43dced4332064a2558af Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 16:41:10 -0400
Subject: [PATCH 07/11] Use intuitive ">" to handle empty lists in
 WorkspaceVariables

---
 gui/src/pages/WorkspaceVariables.svelte | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/gui/src/pages/WorkspaceVariables.svelte b/gui/src/pages/WorkspaceVariables.svelte
index 0e090d985..a874793c2 100644
--- a/gui/src/pages/WorkspaceVariables.svelte
+++ b/gui/src/pages/WorkspaceVariables.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import * as router from 'svelte-spa-router';
   import Panel from '../components/Panel.svelte';
   import Button from '../components/Button.svelte';
   import Layout from '../components/Layout.svelte';
@@ -41,7 +40,7 @@
         <h2>Vaults</h2>
         <Button href={`${workspaceRoute}/add-vault`} small>Add vault</Button>
       </div>
-      {#if vaults.length}
+      {#if vaults.length > 0}
         <CheckeredTableWrapper>
           <table>
             <thead>
@@ -75,12 +74,12 @@
       {:else}
         <div>No vaults linked to this workspace.</div>
       {/if}
-      {#if Object.keys(variables).length === 0}
-        <div>Empty Environment</div>
-      {:else}
+      {#if Object.keys(variables).length > 0}
         <hr />
         <h2>Variables</h2>
         <EnvironmentTable {variables} />
+      {:else}
+        <div>Empty environment, no variables found.</div>
       {/if}
     {/await}
   </Panel>

From 900b186de01b68e81ed5a416fff3872a997d70ce Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 16:44:09 -0400
Subject: [PATCH 08/11] Use "Secrets Vault" terminology over "Vault" when space
 available

---
 gui/src/pages/WorkspaceAddVault.svelte  | 6 +++---
 gui/src/pages/WorkspaceVariables.svelte | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/gui/src/pages/WorkspaceAddVault.svelte b/gui/src/pages/WorkspaceAddVault.svelte
index 26dd6e6cf..eee553775 100644
--- a/gui/src/pages/WorkspaceAddVault.svelte
+++ b/gui/src/pages/WorkspaceAddVault.svelte
@@ -23,7 +23,7 @@
 <Layout>
   <WorkspaceNav {workspaceId} active="Variables" slot="navbar" />
   <CenterFormPanel title="Add Vault" {backRoute}>
-    <h1><Icon glyph="Lock" /> Add Vault</h1>
+    <h1><Icon glyph="Lock" /> Add Secrets Vault</h1>
     <form
       on:submit={async () => {
         await workspace.addVault({
@@ -37,10 +37,10 @@
     >
       <p>Enter a URL for your vault:</p>
       <Textbox bind:value={vaultUrl} --input-width="100%" autofocus />
-      <SubmitButton>Add Vault</SubmitButton>
+      <SubmitButton>Add Secrets Vault</SubmitButton>
     </form>
 
     <h2>Need a vault?</h2>
-    <a href={esvUrl}>Create one with Exo Secrets</a>
+    <a href={esvUrl}>Create one with Exo Secrets Vault</a>
   </CenterFormPanel>
 </Layout>
diff --git a/gui/src/pages/WorkspaceVariables.svelte b/gui/src/pages/WorkspaceVariables.svelte
index a874793c2..b1421144d 100644
--- a/gui/src/pages/WorkspaceVariables.svelte
+++ b/gui/src/pages/WorkspaceVariables.svelte
@@ -37,7 +37,7 @@
       <Spinner />
     {:then [variables, vaults]}
       <div class="vaults-title">
-        <h2>Vaults</h2>
+        <h2>Secrets Vaults</h2>
         <Button href={`${workspaceRoute}/add-vault`} small>Add vault</Button>
       </div>
       {#if vaults.length > 0}
@@ -58,7 +58,7 @@
                   <td>
                     {#if vault.connected}
                       <Button href={`${vault.url}/create-secret`} small>
-                        Create secret
+                        Add new secret
                       </Button>
                     {:else if vault.needsAuth}
                       <Button on:click={authEsv} small>Authenticate</Button>

From 30becbc264c9dd757e3520e05da63a4cf6825b92 Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 16:44:47 -0400
Subject: [PATCH 09/11] Use "+ New secret" label for add secret button in
 Workspace Variables

---
 gui/src/pages/WorkspaceVariables.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gui/src/pages/WorkspaceVariables.svelte b/gui/src/pages/WorkspaceVariables.svelte
index b1421144d..220347f5e 100644
--- a/gui/src/pages/WorkspaceVariables.svelte
+++ b/gui/src/pages/WorkspaceVariables.svelte
@@ -58,7 +58,7 @@
                   <td>
                     {#if vault.connected}
                       <Button href={`${vault.url}/create-secret`} small>
-                        Add new secret
+                        + New secret
                       </Button>
                     {:else if vault.needsAuth}
                       <Button on:click={authEsv} small>Authenticate</Button>

From 9909c9df79d92fd5c64707d6c1da7a6e5405166f Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 16:45:32 -0400
Subject: [PATCH 10/11] Improve add vault button label

---
 gui/src/pages/WorkspaceVariables.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gui/src/pages/WorkspaceVariables.svelte b/gui/src/pages/WorkspaceVariables.svelte
index 220347f5e..9859bbea1 100644
--- a/gui/src/pages/WorkspaceVariables.svelte
+++ b/gui/src/pages/WorkspaceVariables.svelte
@@ -38,7 +38,7 @@
     {:then [variables, vaults]}
       <div class="vaults-title">
         <h2>Secrets Vaults</h2>
-        <Button href={`${workspaceRoute}/add-vault`} small>Add vault</Button>
+        <Button href={`${workspaceRoute}/add-vault`} small>+ Add vault</Button>
       </div>
       {#if vaults.length > 0}
         <CheckeredTableWrapper>

From a3c1c69a7fb1da879754da9664ef224ecb7ab7de Mon Sep 17 00:00:00 2001
From: John <51100181+jwmza@users.noreply.github.com>
Date: Fri, 15 Oct 2021 16:51:54 -0400
Subject: [PATCH 11/11] Use absolute URL regex with `https?://` instead of
 checking for `"#"`

---
 gui/src/components/Button.svelte        | 3 ++-
 gui/src/components/Link.svelte          | 3 ++-
 gui/src/lib/regex.ts                    | 1 +
 gui/src/pages/WorkspaceVariables.svelte | 2 +-
 4 files changed, 6 insertions(+), 3 deletions(-)
 create mode 100644 gui/src/lib/regex.ts

diff --git a/gui/src/components/Button.svelte b/gui/src/components/Button.svelte
index af6d0890f..fc7f4d41d 100644
--- a/gui/src/components/Button.svelte
+++ b/gui/src/components/Button.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import * as router from 'svelte-spa-router';
   import { createEventDispatcher } from 'svelte';
+  import { absoluteUrl } from '../lib/regex';
 
   export let type: string | undefined = undefined;
   export let href: string | undefined = undefined;
@@ -17,7 +18,7 @@
 
   const handleClick = (e: MouseEvent) => {
     if (href) {
-      if (href.startsWith('#')) {
+      if (!absoluteUrl.test(href)) {
         // Handle internal routes.
         router.push(href);
         return;
diff --git a/gui/src/components/Link.svelte b/gui/src/components/Link.svelte
index ec476d072..0839b54ba 100644
--- a/gui/src/components/Link.svelte
+++ b/gui/src/components/Link.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import * as router from 'svelte-spa-router';
+  import { absoluteUrl } from '../lib/regex';
 
   export let href: string;
 </script>
@@ -7,7 +8,7 @@
 <a
   {href}
   on:click={(event) => {
-    if (href.startsWith('#')) {
+    if (!absoluteUrl.test(href)) {
       router.push(href);
       event.preventDefault();
     }
diff --git a/gui/src/lib/regex.ts b/gui/src/lib/regex.ts
new file mode 100644
index 000000000..cc3081206
--- /dev/null
+++ b/gui/src/lib/regex.ts
@@ -0,0 +1 @@
+export const absoluteUrl = /^https?:\/\//i;
diff --git a/gui/src/pages/WorkspaceVariables.svelte b/gui/src/pages/WorkspaceVariables.svelte
index 9859bbea1..0086b3264 100644
--- a/gui/src/pages/WorkspaceVariables.svelte
+++ b/gui/src/pages/WorkspaceVariables.svelte
@@ -12,7 +12,7 @@
 
   const workspaceId = params.workspace;
   const workspace = api.workspace(workspaceId);
-  const workspaceRoute = `#/workspaces/${encodeURIComponent(workspaceId)}`;
+  const workspaceRoute = `/workspaces/${encodeURIComponent(workspaceId)}`;
 
   const makeRequests = () =>
     Promise.all([workspace.describeEnvironment(), workspace.describeVaults()]);