Add href prop to Combobox to get reactive hrefs working correctly (#2428)

* Add href prop to Combobox to get reactive hrefs working correctly

* Use correct hrefDisabled prop

Author: Alex-Tideman

Diff for: 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}
+      hrefDisabled={!namespaceExists}
+    />
   </div>
   <div class="flex items-center gap-2">
     <TimezoneSelect position={screenWidth < 768 ? 'left' : 'right'} />

Diff for: 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>