Make href required, use default behavior if metakey is pressed in Link (

#1826)

* Make href required, use default behavior if metakey is pressed

* Fix old workflow filter advanced/basic toggle link for archival

src/lib/holocene/link.svelte

@@ -8,7 +8,7 @@
   import Icon from './icon/icon.svelte';
 
   type $$Props = HTMLAnchorAttributes & {
-    href?: string;
+    href: string;
     active?: boolean;
     newTab?: boolean;
     class?: string;
@@ -19,15 +19,15 @@
 
   let className = '';
   export { className as class };
-  export let href: string = null;
+  export let href: string;
   export let active = false;
   export let newTab = false;
   export let icon: IconName = null;
   export let text: string = '';
 
   const onLinkClick = (e: MouseEvent) => {
     // Skip if middle mouse click or new tab
-    if (e.button === 1 || newTab) return;
+    if (e.button === 1 || newTab || e.metaKey) return;
     e.preventDefault();
     e.stopPropagation();
     goto(href);

src/routes/(app)/namespaces/[namespace]/archival/_workflow-filters.svelte

@@ -38,7 +38,7 @@
     },
   };
 
-  let isAdvancedQuery = $page.url.searchParams.has('query');
+  $: isAdvancedQuery = $page.url.searchParams.has('query');
   let workflowIdFilter = '';
   let workflowTypeFilter = '';
 
@@ -48,35 +48,22 @@
     $page.url.searchParams.set('query', String(query));
     goto($page.url.toString());
   };
-
-  const handleToggle =
-    (searchType: 'basic' | 'advanced') =>
-    (event: Event): void => {
-      const element = event.target as HTMLAnchorElement;
-      isAdvancedQuery = searchType === 'advanced';
-
-      if (!isAdvancedQuery) {
-        $page.url.searchParams.delete('query');
-      }
-
-      goto(element.href);
-    };
 </script>
 
 <section class="flex flex-col gap-2">
   <p class="text-right text-xs">
     {#if isAdvancedQuery}
-      <Link href={$page.url.pathname} on:click={handleToggle('basic')}>
+      <Link href={$page.url.pathname}>
         {translate('workflows.basic-search')}
       </Link>
     {:else}
-      <Link class="text-blue-700" on:click={handleToggle('advanced')}>
+      <Link href={`${$page.url.pathname}?query=`}>
         {translate('workflows.advanced-search')}
       </Link>
     {/if}
   </p>
 
-  {#if !isAdvancedQuery}
+  {#if isAdvancedQuery}
     <Search
       icon
       placeholder={translate('common.search')}