Limit workflow execution query length to 15k characters

src/lib/components/search-attribute-filter/search-attribute-menu.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { getContext } from 'svelte';
 
+  import { page } from '$app/stores';
+
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import {
@@ -20,6 +22,7 @@
   import { workflowRoutePattern } from '$lib/utilities/namespace-url-pattern';
   import { getFocusedElementId } from '$lib/utilities/query/search-attribute-filter';
   import { emptyFilter } from '$lib/utilities/query/to-list-workflow-filters';
+  import { MAX_QUERY_LENGTH } from '$lib/utilities/request-from-api';
 
   import IsTemporalServerVersionGuard from '../is-temporal-server-version-guard.svelte';
 
@@ -55,13 +58,14 @@
       );
 
   $: workflowsPage = workflowRoutePattern.match(window?.location?.pathname);
+  $: query = $page.url.searchParams.get('query');
 </script>
 
 <MenuContainer>
   <MenuButton
     id="search-attribute-filter-button"
     controls="search-attribute-menu"
-    disabled={$activeQueryIndex !== null}
+    disabled={$activeQueryIndex !== null || query?.length >= MAX_QUERY_LENGTH}
     count={$filter.attribute ? 0 : filters.length}
     on:click={() => (searchAttributeValue = '')}
     class="text-nowrap"

src/lib/components/workflow/workflow-advanced-search.svelte

@@ -12,6 +12,7 @@
   import { searchAttributes } from '$lib/stores/search-attributes';
   import { refresh, workflowsQuery } from '$lib/stores/workflows';
   import { toListWorkflowFilters } from '$lib/utilities/query/to-list-workflow-filters';
+  import { MAX_QUERY_LENGTH } from '$lib/utilities/request-from-api';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
   let manualSearchString = '';
@@ -62,7 +63,7 @@
 <div class="w-full" in:fade>
   <form
     on:submit|preventDefault={onSearch}
-    class="flex items-center gap-0"
+    class="flex gap-0"
     in:fly={{ x: -100, duration: 150 }}
     role="search"
   >
@@ -78,6 +79,8 @@
       clearButtonLabel={translate('common.clear-input-button-label')}
       on:clear={handleClearInput}
       bind:value={manualSearchString}
+      maxLength={MAX_QUERY_LENGTH}
+      hideCount={manualSearchString?.length < MAX_QUERY_LENGTH}
     />
     <Button data-testid="manual-search-button" variant="primary" type="submit">
       {translate('common.search')}

src/lib/holocene/button.svelte

@@ -140,7 +140,7 @@
     <slot />
     {#if trailingIcon || loading}
       <span class:animate-spin={loading}>
-        <Icon name={loading ? 'spinner-solid' : trailingIcon} />
+        <Icon name={loading ? 'spinner' : trailingIcon} />
       </span>
     {/if}
     {#if count > 0}
@@ -176,7 +176,7 @@
 
     {#if trailingIcon || loading}
       <span class:animate-spin={loading}>
-        <Icon name={loading ? 'spinner-solid' : trailingIcon} />
+        <Icon name={loading ? 'spinner' : trailingIcon} />
       </span>
     {/if}
     {#if count > 0}

src/lib/holocene/icon/paths.ts

@@ -97,7 +97,6 @@ import search from './svg/search.svelte';
 import settings from './svg/settings.svelte';
 import signal from './svg/signal.svelte';
 import sliders from './svg/sliders.svelte';
-import spinnerSolid from './svg/spinner-solid.svelte';
 import spinner from './svg/spinner.svelte';
 import starEmpty from './svg/star-empty.svelte';
 import starFilled from './svg/star-filled.svelte';
@@ -234,7 +233,6 @@ export const icons = {
   sun,
   summary,
   support,
-  'spinner-solid': spinnerSolid,
   table,
   tag,
   target,

src/lib/holocene/icon/svg/spinner.svelte

@@ -5,45 +5,10 @@
 
 <Svg {...props}>
   <path
-    d="M11.5 3.5C11.5 3.77614 11.7239 4 12 4C12.2761 4 12.5 3.77614 12.5 3.5C12.5 3.22386 12.2761 3 12 3C11.7239 3 11.5 3.22386 11.5 3.5Z"
+    d="M12 3C16.9706 3 21 7.02944 21 12C21 14.4853 19.9926 16.7353 18.364 18.364"
     stroke="currentcolor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M5.5 6C5.5 6.27614 5.72386 6.5 6 6.5C6.27614 6.5 6.5 6.27614 6.5 6C6.5 5.72386 6.27614 5.5 6 5.5C5.72386 5.5 5.5 5.72386 5.5 6Z"
-    stroke="currentcolor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M3 12C3 12.2761 3.22386 12.5 3.5 12.5C3.77614 12.5 4 12.2761 4 12C4 11.7239 3.77614 11.5 3.5 11.5C3.22386 11.5 3 11.7239 3 12Z"
-    stroke="currentcolor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M5.5 18C5.5 18.2761 5.72386 18.5 6 18.5C6.27614 18.5 6.5 18.2761 6.5 18C6.5 17.7239 6.27614 17.5 6 17.5C5.72386 17.5 5.5 17.7239 5.5 18Z"
-    stroke="currentcolor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M11.5 20.5C11.5 20.7761 11.7239 21 12 21C12.2761 21 12.5 20.7761 12.5 20.5C12.5 20.2239 12.2761 20 12 20C11.7239 20 11.5 20.2239 11.5 20.5Z"
-    stroke="currentcolor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M17.5 18C17.5 18.2761 17.7239 18.5 18 18.5C18.2761 18.5 18.5 18.2761 18.5 18C18.5 17.7239 18.2761 17.5 18 17.5C17.7239 17.5 17.5 17.7239 17.5 18Z"
-    stroke="currentcolor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M20 12C20 12.2761 20.2239 12.5 20.5 12.5C20.7761 12.5 21 12.2761 21 12C21 11.7239 20.7761 11.5 20.5 11.5C20.2239 11.5 20 11.7239 20 12Z"
-    stroke="currentcolor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
+    stroke-width="3"
+    stroke-linecap="square"
+    stroke-linejoin="miter"
   />
 </Svg>

src/lib/holocene/input/input.svelte

@@ -87,7 +87,7 @@
   $: disabled = disabled || copyable;
 </script>
 
-<div class={merge('flex flex-col gap-1', className)}>
+<div class={merge('group flex flex-col gap-1', className)}>
   <Label {required} {label} hidden={labelHidden} for={id} />
   <div class="input-group flex">
     <slot name="before-input" {disabled} />
@@ -155,15 +155,6 @@
           />
         </div>
       {/if}
-      {#if maxLength && !disabled && !hideCount}
-        <span class="count">
-          <span
-            class:ok={maxLength - value.length > 5}
-            class:warn={maxLength - value.length <= 5}
-            class:error={maxLength === value.length}>{value.length}</span
-          >/{maxLength}
-        </span>
-      {/if}
       {#if suffix}
         <div class="suffix">
           {suffix}
@@ -173,15 +164,34 @@
     <slot name="after-input" {disabled} />
   </div>
 
-  <span
-    class="hint-text inline-block"
-    class:invalid={!valid}
-    class:error
-    class:hidden={!hintText}
-    role={error ? 'alert' : null}
+  <div
+    class="flex justify-between gap-2"
+    class:hidden={!hintText && (!maxLength || disabled || hideCount)}
   >
-    {hintText}
-  </span>
+    <span
+      class="hint-text inline-block"
+      class:invalid={!valid}
+      class:error
+      role={error ? 'alert' : null}
+    >
+      {hintText}
+    </span>
+    {#if maxLength && !disabled && !hideCount}
+      <span
+        class="invisible text-right text-sm font-medium tracking-widest group-focus-within:visible"
+      >
+        <span
+          class={merge(
+            maxLength - value?.length > 5 && 'text-success',
+            maxLength - value?.length <= 5 && 'text-warning',
+            maxLength === value?.length && 'text-danger',
+          )}
+        >
+          {value?.length ?? 0}
+        </span>/{maxLength}
+      </span>
+    {/if}
+  </div>
 </div>
 
 <style lang="postcss">
@@ -233,26 +243,6 @@
     @apply mr-2 flex w-6 cursor-pointer items-center justify-center;
   }
 
-  .count {
-    @apply mx-2 hidden text-sm font-medium tracking-widest;
-
-    > .ok {
-      @apply text-success;
-    }
-
-    > .warn {
-      @apply text-warning;
-    }
-
-    > .error {
-      @apply text-danger;
-    }
-  }
-
-  .input:focus ~ .count {
-    @apply block;
-  }
-
   .hint-text {
     @apply text-xs text-primary;
 

src/lib/utilities/request-from-api.ts

@@ -38,6 +38,8 @@ type RequestFromAPIOptions = {
   signal?: AbortController['signal'];
 };
 
+export const MAX_QUERY_LENGTH = 15000;
+
 export const isTemporalAPIError = (obj: unknown): obj is TemporalAPIError =>
   (obj as TemporalAPIError)?.message !== undefined &&
   typeof (obj as TemporalAPIError)?.message === 'string';
@@ -88,7 +90,13 @@ export const requestFromAPI = async <T>(
       options = await withAuth(options, isBrowser);
     }
 
-    const response = await request(url, options);
+    const queryIsTooLong = query.toString().length > MAX_QUERY_LENGTH;
+    const response = queryIsTooLong
+      ? new Response(JSON.stringify({ message: 'Query string is too long' }), {
+          status: 414,
+          statusText: 'URI Too Long',
+        })
+      : await request(url, options);
     const body = await response.json();
 
     const { status, statusText } = response;