From 1b5cb10debc580f79dc3384ec108ec594d49266e Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Mon, 18 Nov 2024 11:56:53 -0600
Subject: [PATCH 1/2] Add href prop to Combobox to get reactive hrefs working
 correctly

---
 src/lib/components/top-nav.svelte         | 14 +++---------
 src/lib/holocene/combobox/combobox.svelte | 27 +++++++++++++++++++++++
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/top-nav.svelte b/src/lib/components/top-nav.svelte
index 99cc3f2ff..aeeca75ea 100644
--- a/src/lib/components/top-nav.svelte
+++ b/src/lib/components/top-nav.svelte
@@ -3,7 +3,6 @@
 
   import DataEncoderStatus from '$lib/components/data-encoder-status.svelte';
   import TimezoneSelect from '$lib/components/timezone-select.svelte';
-  import Button from '$lib/holocene/button.svelte';
   import Combobox from '$lib/holocene/combobox/combobox.svelte';
   import { translate } from '$lib/i18n/translate';
   import { lastUsedNamespace } from '$lib/stores/namespaces';
@@ -48,16 +47,9 @@
       on:change={handleNamespaceSelect}
       minSize={32}
       actionTooltip={translate('namespaces.go-to-namespace')}
-    >
-      <Button
-        slot="action"
-        variant="ghost"
-        size="xs"
-        {href}
-        disabled={!namespaceExists}
-        leadingIcon="external-link"
-      />
-    </Combobox>
+      {href}
+      disabled={!namespaceExists}
+    />
   </div>
   <div class="flex items-center gap-2">
     <TimezoneSelect position={screenWidth < 768 ? 'left' : 'right'} />
diff --git a/src/lib/holocene/combobox/combobox.svelte b/src/lib/holocene/combobox/combobox.svelte
index 897cff387..9250fa860 100644
--- a/src/lib/holocene/combobox/combobox.svelte
+++ b/src/lib/holocene/combobox/combobox.svelte
@@ -11,6 +11,7 @@
   import Menu from '$lib/holocene/menu/menu.svelte';
 
   import Badge from '../badge.svelte';
+  import Button from '../button.svelte';
   import Chip from '../chip.svelte';
   import type { IconName } from '../icon';
   import Icon from '../icon/icon.svelte';
@@ -45,6 +46,8 @@
     error?: string;
     valid?: boolean;
     actionTooltip?: string;
+    href?: string;
+    hrefDisabled?: boolean;
   }
 
   type MultiSelectProps = {
@@ -109,6 +112,8 @@
   export let deselectAllLabel = 'Deselect All';
   export let removeChipLabel = 'Remove Option';
   export let actionTooltip = '';
+  export let href = '';
+  export let hrefDisabled = false;
 
   export let numberOfItemsSelectedLabel = (count: number) =>
     `${count} option${count > 1 ? 's' : ''} selected`;
@@ -402,6 +407,28 @@
           <slot name="action" />
         {/if}
       </div>
+    {:else if href}
+      <div class="ml-1 flex h-full items-center border-l-2 border-subtle p-0.5">
+        {#if actionTooltip}
+          <Tooltip text={actionTooltip} right>
+            <Button
+              variant="ghost"
+              size="xs"
+              {href}
+              disabled={hrefDisabled}
+              leadingIcon="external-link"
+            />
+          </Tooltip>
+        {:else}
+          <Button
+            variant="ghost"
+            size="xs"
+            {href}
+            disabled={hrefDisabled}
+            leadingIcon="external-link"
+          />
+        {/if}
+      </div>
     {/if}
   </div>
 

From dd708a00aeefdfed0bf05d73a4bfb2cefd4f5854 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Mon, 18 Nov 2024 11:59:43 -0600
Subject: [PATCH 2/2] Use correct hrefDisabled prop

---
 src/lib/components/top-nav.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/top-nav.svelte b/src/lib/components/top-nav.svelte
index aeeca75ea..1f909ba8e 100644
--- a/src/lib/components/top-nav.svelte
+++ b/src/lib/components/top-nav.svelte
@@ -48,7 +48,7 @@
       minSize={32}
       actionTooltip={translate('namespaces.go-to-namespace')}
       {href}
-      disabled={!namespaceExists}
+      hrefDisabled={!namespaceExists}
     />
   </div>
   <div class="flex items-center gap-2">