From 2a1e8b748ba3fec0d021171889c30d8bc5be24c9 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 7 Sep 2023 11:55:29 -0600
Subject: [PATCH] UI updates to WorkflowFilterSearch (#1613)

* Remove on:blur from TextFilter

* Add close button button to filters

* Update DatetimeFilter UI

* Update TimePicker to allow for 24 hour clock

* Disabled Apply when invalid or unspecified relative time

* Add check for selected prop to MenuItem

* Refactor SearchAttributeMenu

* Use close icon and ghost variant for close filter button

* Use IconButton for CloseFilter

* Update snapshot

* fix icon button so it stays rounded

* Disable relative vs absolute inputs

---------

Co-authored-by: Ross Edfort <rossedfort@gmail.com>
---
 .../filter-search/boolean-filter.svelte       |   7 +-
 .../filter-search/close-filter-button.svelte  |  17 ++
 .../filter-search/datetime-filter.svelte      | 281 ++++++++++--------
 .../workflow/filter-search/index.svelte       |  96 +-----
 .../filter-search/number-filter.svelte        |   1 +
 .../search-attribute-menu.svelte              | 114 +++++++
 .../workflow/filter-search/text-filter.svelte |   4 +-
 .../table-header-cell.test.ts.snap            |   2 +-
 src/lib/holocene/date-picker.svelte           |   2 +
 src/lib/holocene/icon-button.svelte           |  15 +-
 src/lib/holocene/menu/menu-item.svelte        |  20 +-
 src/lib/holocene/time-picker.svelte           |  25 +-
 12 files changed, 343 insertions(+), 241 deletions(-)
 create mode 100644 src/lib/components/workflow/filter-search/close-filter-button.svelte
 create mode 100644 src/lib/components/workflow/filter-search/search-attribute-menu.svelte

diff --git a/src/lib/components/workflow/filter-search/boolean-filter.svelte b/src/lib/components/workflow/filter-search/boolean-filter.svelte
index 6690cd784..eb80f2623 100644
--- a/src/lib/components/workflow/filter-search/boolean-filter.svelte
+++ b/src/lib/components/workflow/filter-search/boolean-filter.svelte
@@ -23,7 +23,12 @@
 </script>
 
 <MenuContainer>
-  <MenuButton unroundLeft class="!border-l-0" id="boolean-filter" controls="boolean-filter-menu">
+  <MenuButton
+    unroundLeft
+    class="!border-l-0"
+    id="boolean-filter"
+    controls="boolean-filter-menu"
+  >
     {selectedLabel}
   </MenuButton>
   <Menu id="boolean-filter-menu">
diff --git a/src/lib/components/workflow/filter-search/close-filter-button.svelte b/src/lib/components/workflow/filter-search/close-filter-button.svelte
new file mode 100644
index 000000000..860bec117
--- /dev/null
+++ b/src/lib/components/workflow/filter-search/close-filter-button.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+
+  import IconButton from '$lib/holocene/icon-button.svelte';
+  import { translate } from '$lib/i18n/translate';
+
+  import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
+
+  const { resetFilter } = getContext<FilterContext>(FILTER_CONTEXT);
+</script>
+
+<IconButton
+  label={translate('close')}
+  icon="close"
+  on:click={resetFilter}
+  class="ml-1"
+/>
diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
index fdde145a5..e88558cef 100644
--- a/src/lib/components/workflow/filter-search/datetime-filter.svelte
+++ b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  
-  
   import {
     addHours,
     addMinutes,
@@ -9,7 +7,7 @@
     startOfDay,
   } from 'date-fns';
   import { getContext } from 'svelte';
-  
+
   import Button from '$lib/holocene/button.svelte';
   import DatePicker from '$lib/holocene/date-picker.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
@@ -40,19 +38,23 @@
   let startHour = '';
   let startMinute = '';
   let startSecond = '';
-  let startHalf: 'AM' | 'PM' = 'AM';
 
   let endHour = '';
   let endMinute = '';
   let endSecond = '';
-  let endHalf: 'AM' | 'PM' = 'AM';
 
   const TIME_UNIT_OPTIONS = ['minutes', 'hours', 'days'];
 
   let timeUnit = TIME_UNIT_OPTIONS[0];
   let relativeTime = '';
 
+  let type: 'relative' | 'absolute' = 'relative';
+
   $: useBetweenDateTimeQuery = isTimeRange || !$supportsAdvancedVisibility;
+  $: disabled =
+    type === 'relative' &&
+    !useBetweenDateTimeQuery &&
+    (!relativeTime || error(relativeTime));
 
   const onStartDateChange = (d: CustomEvent) => {
     startDate = startOfDay(d.detail);
@@ -74,60 +76,44 @@
     return _date;
   };
 
-  const setHours = (hour: string, half: 'AM' | 'PM') => {
-    if (hour) {
-      if (hour === '12') {
-        return half === 'AM' ? '00' : '12';
-      } else if (half === 'PM') {
-        return (parseInt(hour) + 12).toString();
-      } else {
-        return hour;
-      }
-    } else {
-      hour = '';
-    }
-  };
-
   const onApply = () => {
-    let startDateWithTime = applyTimeChanges(startDate, {
-      hour: setHours(startHour, startHalf),
-      minute: startMinute,
-      second: startSecond,
-    });
-    let endDateWithTime = applyTimeChanges(endDate, {
-      hour: setHours(endHour, endHalf),
-      minute: endMinute,
-      second: endSecond,
-    });
+    if (type === 'relative' && !useBetweenDateTimeQuery) {
+      if (!relativeTime) return;
+      $filter.value = toDate(`${relativeTime} ${timeUnit}`);
+      $filter.customDate = false;
+    } else {
+      let startDateWithTime = applyTimeChanges(startDate, {
+        hour: startHour,
+        minute: startMinute,
+        second: startSecond,
+      });
+      let endDateWithTime = applyTimeChanges(endDate, {
+        hour: endHour,
+        minute: endMinute,
+        second: endSecond,
+      });
 
-    const value = useBetweenDateTimeQuery
-      ? `BETWEEN "${formatISO(startDateWithTime)}" AND "${formatISO(
-          endDateWithTime,
-        )}"`
-      : formatISO(startDateWithTime);
+      const value = useBetweenDateTimeQuery
+        ? `BETWEEN "${formatISO(startDateWithTime)}" AND "${formatISO(
+            endDateWithTime,
+          )}"`
+        : formatISO(startDateWithTime);
 
-    $filter.value = value;
+      $filter.value = value;
 
-    if (isTimeRange) {
-      $filter.customDate = true;
-      $filter.conditional = '';
-    } else {
-      $filter.customDate = false;
+      if (isTimeRange) {
+        $filter.customDate = true;
+        $filter.conditional = '';
+      } else {
+        $filter.customDate = false;
+      }
     }
 
     handleSubmit();
   };
 
-  const onApplyRelativeTime = () => {
-    if (!relativeTime) return;
-    $filter.value = toDate(`${relativeTime} ${timeUnit}`);
-    $filter.customDate = false;
-
-    handleSubmit();
-  };
-
   const error = (x: string) => {
-    if (x) return isNaN(parseInt(x));
+    if (x) return isNaN(Number(x)) || isNaN(parseFloat(x));
     return false;
   };
 </script>
@@ -136,9 +122,9 @@
   <ConditionalMenu
     inputId="time-range-filter"
     options={[
-      { value: '<=', label: translate('before').toUpperCase() },
-      { value: 'BETWEEN', label: translate('between').toUpperCase() },
-      { value: '>=', label: translate('after').toUpperCase() },
+      { value: '<=', label: translate('before') },
+      { value: 'BETWEEN', label: translate('between') },
+      { value: '>=', label: translate('after') },
     ]}
   />
   <MenuContainer>
@@ -155,80 +141,10 @@
       class="w-[25rem] !overflow-visible"
     >
       {#if isTimeRange}
-        <div class="flex flex-col gap-2 p-2">
-          <DatePicker
-            label={translate('start')}
-            on:datechange={onStartDateChange}
-            selected={startDate}
-            todayLabel={translate('today')}
-            closeLabel={translate('close')}
-            clearLabel={translate('clear-input-button-label')}
-          />
-          <TimePicker
-            bind:hour={startHour}
-            bind:minute={startMinute}
-            bind:second={startSecond}
-            bind:half={startHalf}
-          />
-          <DatePicker
-            label={translate('end')}
-            on:datechange={onEndDateChange}
-            selected={endDate}
-            todayLabel={translate('today')}
-            closeLabel={translate('close')}
-            clearLabel={translate('clear-input-button-label')}
-          />
-          <TimePicker
-            bind:hour={endHour}
-            bind:minute={endMinute}
-            bind:second={endSecond}
-            bind:half={endHalf}
-          />
-          <div class="flex justify-end">
-            <Button variant="ghost" on:click={onApply}
-              >{translate('apply')}</Button
-            >
-          </div>
-        </div>
-      {:else}
-        <div class="flex flex-col gap-2">
-          <div class="p-2">
-            <p class="text-sm font-semibold">{translate('relative')}</p>
-            <div class="flex justify-between items-center gap-2">
-              <div class="flex gap-0">
-                <Input
-                  label={translate('relative')}
-                  labelHidden
-                  id="relative-datetime-input"
-                  bind:value={relativeTime}
-                  placeholder="00"
-                  error={error(relativeTime)}
-                  unroundRight
-                  class="h-10"
-                />
-                <Select
-                  unroundLeft
-                  bind:value={timeUnit}
-                  id="relative-datetime-unit-input"
-                  label={translate('time-unit')}
-                  labelHidden
-                >
-                  {#each TIME_UNIT_OPTIONS as unit}
-                    <Option value={unit}>{unit} {translate('ago')}</Option>
-                  {/each}
-                </Select>
-              </div>
-              <Button
-                variant="ghost"
-                disabled={error(relativeTime)}
-                on:click={onApplyRelativeTime}>{translate('apply')}</Button
-              >
-            </div>
-          </div>
-          <MenuDivider />
-          <div class="p-2 flex flex-col gap-2">
+        <MenuItem>
+          <div class="flex flex-col gap-2">
             <DatePicker
-              label={translate('absolute')}
+              label={translate('start')}
               on:datechange={onStartDateChange}
               selected={startDate}
               todayLabel={translate('today')}
@@ -239,18 +155,121 @@
               bind:hour={startHour}
               bind:minute={startMinute}
               bind:second={startSecond}
-              bind:half={startHalf}
+              twelveHourClock={false}
             />
-            <div class="flex justify-end">
-              <Button variant="ghost" on:click={onApply}
-                >{translate('apply')}</Button
+          </div>
+        </MenuItem>
+        <MenuDivider />
+        <MenuItem>
+          <div class="flex flex-col gap-2">
+            <DatePicker
+              label={translate('end')}
+              on:datechange={onEndDateChange}
+              selected={endDate}
+              todayLabel={translate('today')}
+              closeLabel={translate('close')}
+              clearLabel={translate('clear-input-button-label')}
+            />
+            <TimePicker
+              bind:hour={endHour}
+              bind:minute={endMinute}
+              bind:second={endSecond}
+              twelveHourClock={false}
+            />
+          </div>
+        </MenuItem>
+      {:else}
+        <MenuItem on:click={() => (type = 'relative')}>
+          <div class="flex flex-col">
+            <label
+              class="flex flex-row items-center gap-2 cursor-pointer"
+              for="relative-time"
+            >
+              <input
+                on:click|stopPropagation={() => {
+                  type = 'relative';
+                }}
+                class="w-4 h-4 accent-gray-900"
+                type="radio"
+                checked={type === 'relative'}
+                id="relative-time"
+                tabindex="-1"
+              />
+              {translate('relative')}
+            </label>
+            <div class="ml-6 pt-2 flex gap-0">
+              <Input
+                label={translate('relative')}
+                labelHidden
+                id="relative-datetime-input"
+                bind:value={relativeTime}
+                placeholder="00"
+                error={error(relativeTime)}
+                unroundRight
+                class="h-10"
+                disabled={type !== 'relative'}
+              />
+              <Select
+                unroundLeft
+                bind:value={timeUnit}
+                id="relative-datetime-unit-input"
+                label={translate('time-unit')}
+                labelHidden
+                disabled={type !== 'relative'}
               >
+                {#each TIME_UNIT_OPTIONS as unit}
+                  <Option value={unit}>{unit} {translate('ago')}</Option>
+                {/each}
+              </Select>
+            </div>
+          </div>
+        </MenuItem>
+        <MenuDivider />
+        <MenuItem on:click={() => (type = 'absolute')}>
+          <div class="flex flex-col gap-2">
+            <label
+              class="flex flex-row items-center gap-2 cursor-pointer"
+              for="absolute-time"
+            >
+              <input
+                on:click|stopPropagation={() => (type = 'absolute')}
+                class="w-4 h-4 accent-gray-900"
+                type="radio"
+                checked={type === 'absolute'}
+                id="absolute-time"
+                tabindex="-1"
+              />
+              {translate('absolute')}
+            </label>
+            <div class="flex flex-col ml-6 gap-2">
+              <DatePicker
+                label={''}
+                labelHidden
+                on:datechange={onStartDateChange}
+                selected={startDate}
+                todayLabel={translate('today')}
+                closeLabel={translate('close')}
+                clearLabel={translate('clear-input-button-label')}
+                disabled={type !== 'absolute'}
+              />
+              <TimePicker
+                bind:hour={startHour}
+                bind:minute={startMinute}
+                bind:second={startSecond}
+                twelveHourClock={false}
+                disabled={type !== 'absolute'}
+              />
             </div>
           </div>
-        </div>
+        </MenuItem>
       {/if}
       <MenuDivider />
-      <MenuItem centered disabled>
+      <div class="p-2 flex items-center">
+        <Button size="xs" style="width: 100%" on:click={onApply} {disabled}
+          >{translate('apply')}</Button
+        >
+      </div>
+      <MenuItem centered disabled class="!pt-0">
         <Icon name="clock" aria-hidden="true" />
         {translate('based-on-time-preface')}
         {localTime}
diff --git a/src/lib/components/workflow/filter-search/index.svelte b/src/lib/components/workflow/filter-search/index.svelte
index 60885b203..1ce44c184 100644
--- a/src/lib/components/workflow/filter-search/index.svelte
+++ b/src/lib/components/workflow/filter-search/index.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-  import { afterUpdate, noop } from 'svelte/internal';
+  import { afterUpdate } from 'svelte/internal';
   import { writable, type Writable } from 'svelte/store';
   import { fly } from 'svelte/transition';
 
@@ -21,19 +21,10 @@
 
   import WorkflowAdvancedSearch from '$lib/components/workflow/workflow-advanced-search.svelte';
   import Button from '$lib/holocene/button.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
-import Input from '$lib/holocene/input/input.svelte';
-  import {
-    Menu,
-    MenuButton,
-    MenuContainer,
-    MenuItem,
-  } from '$lib/holocene/menu';
   import ToggleSwitch from '$lib/holocene/toggle-switch.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { WorkflowFilter } from '$lib/models/workflow-filters';
   import { workflowFilters } from '$lib/stores/filters';
-  import { sortedSearchAttributeOptions } from '$lib/stores/search-attributes';
   import { refresh } from '$lib/stores/workflows';
   import {
     isBooleanFilter,
@@ -51,12 +42,13 @@ import Input from '$lib/holocene/input/input.svelte';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
   import BooleanFilter from './boolean-filter.svelte';
+  import CloseFilter from './close-filter-button.svelte';
   import DateTimeFilter from './datetime-filter.svelte';
   import FilterList from './filter-list.svelte';
   import NumberFilter from './number-filter.svelte';
+  import SearchAttributeMenu from './search-attribute-menu.svelte';
   import StatusFilter from './status-filter.svelte';
   import TextFilter from './text-filter.svelte';
-
   const filter = writable<WorkflowFilter>(emptyFilter());
   const activeQueryIndex = writable<number>(null);
   const focusedElementId = writable<string>('');
@@ -99,7 +91,6 @@ import Input from '$lib/holocene/input/input.svelte';
       $workflowFilters = [...$workflowFilters, $filter];
     }
     filter.set(emptyFilter());
-    searchAttributeValue = '';
     onSearch();
   }
 
@@ -123,17 +114,6 @@ import Input from '$lib/holocene/input/input.svelte';
     return '';
   }
 
-  function isOptionDisabled(value: string, filters: WorkflowFilter[]) {
-    return filters.some(
-      (filter) => filter.conditional === '=' && filter.attribute === value,
-    );
-  }
-
-  function handleNewQuery(value: string) {
-    filter.set({ ...emptyFilter(), attribute: value, conditional: '=' });
-    $focusedElementId = getFocusedElementId(value);
-  }
-
   function updateFocusedElementId() {
     if ($activeQueryIndex !== null) {
       $focusedElementId = getFocusedElementId($filter.attribute);
@@ -142,18 +122,6 @@ import Input from '$lib/holocene/input/input.svelte';
 
   $: $activeQueryIndex, updateFocusedElementId();
 
-  let searchAttributeValue = '';
-  //  TODO: Add KeywordList support
-  $: options = $sortedSearchAttributeOptions.filter(
-    (option) => !isListFilter(option.value),
-  );
-
-  $: filteredOptions = !searchAttributeValue
-    ? options
-    : options.filter((option) =>
-        option.value.toLowerCase().includes(searchAttributeValue.toLowerCase()),
-      );
-
   function updateFocus() {
     if ($focusedElementId) {
       const element = document.getElementById($focusedElementId);
@@ -173,7 +141,6 @@ import Input from '$lib/holocene/input/input.svelte';
   function resetFilter() {
     activeQueryIndex.set(null);
     filter.set(emptyFilter());
-    searchAttributeValue = '';
   }
 
   function handleKeyUp(event: KeyboardEvent) {
@@ -189,59 +156,21 @@ import Input from '$lib/holocene/input/input.svelte';
       <WorkflowAdvancedSearch />
     {:else}
       <div
-        class="flex"
+        class="flex items-center"
         class:filter={!showClearAllButton}
         on:keyup={handleKeyUp}
       >
         {#if isStatusFilter($filter.attribute)}
           <StatusFilter />
+          <CloseFilter />
         {:else}
-          <MenuContainer>
-            <MenuButton
-              controls="search-attribute-menu"
-              unroundRight={Boolean($filter.attribute)}
-              disabled={$activeQueryIndex !== null}
-              count={$filter.attribute ? 0 : $workflowFilters.length}
-            >
-              <svelte:fragment slot="leading">
-                {#if !$filter.attribute}
-                  <Icon name="filter" />
-                {/if}
-              </svelte:fragment>
-              {$filter.attribute || translate('workflows', 'filter')}
-            </MenuButton>
-            <Menu id="search-attribute-menu">
-              <Input
-                label={translate('search')}
-                labelHidden
-                id="filter-search"
-                noBorder
-                bind:value={searchAttributeValue}
-                icon="search"
-                placeholder={translate('search')}
-                class="mb-1"
-              />
-
-              {#each filteredOptions as { value, label }}
-                {@const disabled = isOptionDisabled(value, $workflowFilters)}
-                <MenuItem
-                  on:click={() => {
-                    handleNewQuery(value);
-                  }}
-                  {disabled}
-                >
-                  {label}
-                </MenuItem>
-              {:else}
-                <MenuItem on:click={noop}>{translate('no-results')}</MenuItem>
-              {/each}
-            </Menu>
-          </MenuContainer>
+          <SearchAttributeMenu />
         {/if}
 
         {#if isTextFilter($filter.attribute)}
-          <div class="w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full items-center" in:fly={{ x: -100, duration: 150 }}>
             <TextFilter />
+            <CloseFilter />
           </div>
           <!-- TODO: Add KeywordList support -->
           <!-- {:else if isListFilter($filter.attribute)}
@@ -249,16 +178,19 @@ import Input from '$lib/holocene/input/input.svelte';
           <ListFilter />
         </div> -->
         {:else if isNumberFilter($filter.attribute)}
-          <div class="w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full items-center" in:fly={{ x: -100, duration: 150 }}>
             <NumberFilter />
+            <CloseFilter />
           </div>
         {:else if isDateTimeFilter($filter.attribute)}
-          <div class="w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full items-center" in:fly={{ x: -100, duration: 150 }}>
             <DateTimeFilter />
+            <CloseFilter />
           </div>
         {:else if isBooleanFilter($filter.attribute)}
-          <div class="w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full items-center" in:fly={{ x: -100, duration: 150 }}>
             <BooleanFilter />
+            <CloseFilter />
           </div>
         {/if}
       </div>
diff --git a/src/lib/components/workflow/filter-search/number-filter.svelte b/src/lib/components/workflow/filter-search/number-filter.svelte
index 8babd97b6..aeaa7eac7 100644
--- a/src/lib/components/workflow/filter-search/number-filter.svelte
+++ b/src/lib/components/workflow/filter-search/number-filter.svelte
@@ -35,5 +35,6 @@
     on:keydown={handleKeydown}
     unroundLeft
     search
+    class="-mr-2"
   />
 </div>
diff --git a/src/lib/components/workflow/filter-search/search-attribute-menu.svelte b/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
new file mode 100644
index 000000000..d64b8cb1a
--- /dev/null
+++ b/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
+  import {
+    Menu,
+    MenuButton,
+    MenuContainer,
+    MenuItem,
+  } from '$lib/holocene/menu';
+  import { translate } from '$lib/i18n/translate';
+  import type { WorkflowFilter } from '$lib/models/workflow-filters';
+  import { workflowFilters } from '$lib/stores/filters';
+  import { sortedSearchAttributeOptions } from '$lib/stores/search-attributes';
+  import {
+    isBooleanFilter,
+    isDateTimeFilter,
+    isListFilter,
+    isNumberFilter,
+    isStatusFilter,
+    isTextFilter,
+  } from '$lib/utilities/query/filter-search';
+  import { emptyFilter } from '$lib/utilities/query/to-list-workflow-filters';
+
+  import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
+
+  const { filter, activeQueryIndex, focusedElementId } =
+    getContext<FilterContext>(FILTER_CONTEXT);
+
+  function getFocusedElementId(attribute: string) {
+    if (isStatusFilter(attribute)) return 'status-filter';
+
+    if (isTextFilter(attribute)) return 'text-filter-search';
+
+    if (isListFilter(attribute)) return 'list-filter-search';
+
+    if (isNumberFilter(attribute) || isDateTimeFilter(attribute))
+      return 'conditional-menu-button';
+
+    if (isBooleanFilter(attribute)) return 'boolean-filter';
+
+    return '';
+  }
+
+  function isOptionDisabled(value: string, filters: WorkflowFilter[]) {
+    return filters.some(
+      (filter) => filter.conditional === '=' && filter.attribute === value,
+    );
+  }
+
+  function handleNewQuery(value: string) {
+    searchAttributeValue = '';
+    filter.set({ ...emptyFilter(), attribute: value, conditional: '=' });
+    $focusedElementId = getFocusedElementId(value);
+  }
+
+  let searchAttributeValue = '';
+  //  TODO: Add KeywordList support
+  $: options = $sortedSearchAttributeOptions.filter(
+    (option) => !isListFilter(option.value),
+  );
+
+  $: filteredOptions = !searchAttributeValue
+    ? options
+    : options.filter((option) =>
+        option.value.toLowerCase().includes(searchAttributeValue.toLowerCase()),
+      );
+</script>
+
+<MenuContainer>
+  <MenuButton
+    controls="search-attribute-menu"
+    unroundRight={Boolean($filter.attribute)}
+    disabled={$activeQueryIndex !== null}
+    count={$filter.attribute ? 0 : $workflowFilters.length}
+    on:click={() => (searchAttributeValue = '')}
+  >
+    <svelte:fragment slot="leading">
+      {#if !$filter.attribute}
+        <Icon name="filter" />
+      {/if}
+    </svelte:fragment>
+    {$filter.attribute || translate('workflows', 'filter')}
+  </MenuButton>
+  <Menu id="search-attribute-menu">
+    <Input
+      label={translate('search')}
+      labelHidden
+      id="filter-search"
+      noBorder
+      bind:value={searchAttributeValue}
+      icon="search"
+      placeholder={translate('search')}
+      class="mb-1"
+    />
+
+    {#each filteredOptions as { value, label }}
+      {@const disabled = isOptionDisabled(value, $workflowFilters)}
+      <MenuItem
+        on:click={() => {
+          handleNewQuery(value);
+        }}
+        {disabled}
+      >
+        {label}
+      </MenuItem>
+    {:else}
+      <MenuItem class="whitespace-nowrap" disabled
+        >{translate('no-results')}</MenuItem
+      >
+    {/each}
+  </Menu>
+</MenuContainer>
diff --git a/src/lib/components/workflow/filter-search/text-filter.svelte b/src/lib/components/workflow/filter-search/text-filter.svelte
index 981b2b0d4..1b914dc08 100644
--- a/src/lib/components/workflow/filter-search/text-filter.svelte
+++ b/src/lib/components/workflow/filter-search/text-filter.svelte
@@ -6,8 +6,7 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  const { filter, handleSubmit, resetFilter } =
-    getContext<FilterContext>(FILTER_CONTEXT);
+  const { filter, handleSubmit } = getContext<FilterContext>(FILTER_CONTEXT);
 
   let value = $filter.value;
 
@@ -31,5 +30,4 @@
   unroundLeft
   bind:value
   on:keydown={handleKeydown}
-  on:blur={resetFilter}
 />
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
index 51dd426b9..45d4e4f57 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
@@ -18,7 +18,7 @@ exports[`Table_header_cell$ > Start renders 1`] = `"<th class=\\"workflows-summa
 
 exports[`Table_header_cell$ > State Transitions renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-State Transitions\\">State Transitions</th>"`;
 
-exports[`Table_header_cell$ > Status renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Status\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"execution-status-filter\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-4tb2vr\\" data-testid=\\"execution-status-filter-button\\"> <div class=\\"flex items-center grow\\">Status</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left hidden svelte-1paw7hc\\" aria-labelledby=\\"execution-status-filter\\" tabindex=\\"-1\\" id=\\"execution-status-filter\\"><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">All</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"absolute top-0 left-0 h-4 w-4\\" role=\\"img\\"><title>checkmark</title><path d=\\"M19.6992 7.60938L10.1367 17.1719C10.0312 17.2773 9.89062 17.3125 9.75 17.3125C9.57422 17.3125 9.43359 17.2773 9.32812 17.1719L4.26562 12.1094C4.05469 11.8984 4.05469 11.5117 4.26562 11.3008C4.47656 11.0898 4.86328 11.0898 5.07422 11.3008L9.75 15.9766L18.8906 6.80078C19.1016 6.58984 19.4883 6.58984 19.6992 6.80078C19.9102 7.01172 19.9102 7.39844 19.6992 7.60938Z\\" fill=\\"currentcolor\\"></path></svg></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\">All Statuses  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Running</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-blue-100 text-blue-700\\">Running <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">TimedOut</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-orange-100 text-orange-700\\">Timed Out </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Completed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-green-100 text-green-700\\">Completed </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Failed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Failed </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">ContinuedAsNew</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-gray-200 text-gray-900\\">Continued as New </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Canceled</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-yellow-100 text-yellow-900\\">Canceled </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Terminated</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Terminated </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li></ul></div></th>"`;
+exports[`Table_header_cell$ > Status renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Status\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"execution-status-filter\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-4tb2vr\\" data-testid=\\"execution-status-filter-button\\"> <div class=\\"flex items-center grow\\">Status</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left hidden svelte-1paw7hc\\" aria-labelledby=\\"execution-status-filter\\" tabindex=\\"-1\\" id=\\"execution-status-filter\\"><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">All</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"absolute top-0 left-0 h-4 w-4\\" role=\\"img\\"><title>checkmark</title><path d=\\"M19.6992 7.60938L10.1367 17.1719C10.0312 17.2773 9.89062 17.3125 9.75 17.3125C9.57422 17.3125 9.43359 17.2773 9.32812 17.1719L4.26562 12.1094C4.05469 11.8984 4.05469 11.5117 4.26562 11.3008C4.47656 11.0898 4.86328 11.0898 5.07422 11.3008L9.75 15.9766L18.8906 6.80078C19.1016 6.58984 19.4883 6.58984 19.6992 6.80078C19.9102 7.01172 19.9102 7.39844 19.6992 7.60938Z\\" fill=\\"currentcolor\\"></path></svg></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\">All Statuses  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Running</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-blue-100 text-blue-700\\">Running <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">TimedOut</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-orange-100 text-orange-700\\">Timed Out </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Completed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-green-100 text-green-700\\">Completed </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Failed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Failed </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">ContinuedAsNew</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-gray-200 text-gray-900\\">Continued as New </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Canceled</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-yellow-100 text-yellow-900\\">Canceled </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Terminated</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Terminated </span></div>  </div> </li></ul></div></th>"`;
 
 exports[`Table_header_cell$ > Task Queue renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Task Queue\\">Task Queue</th>"`;
 
diff --git a/src/lib/holocene/date-picker.svelte b/src/lib/holocene/date-picker.svelte
index f2ab0064e..d2c37bd66 100644
--- a/src/lib/holocene/date-picker.svelte
+++ b/src/lib/holocene/date-picker.svelte
@@ -17,6 +17,7 @@
   export let todayLabel: string;
   export let closeLabel: string;
   export let clearLabel: string;
+  export let disabled = false;
 
   let month: number | undefined;
   let year: number | undefined;
@@ -88,6 +89,7 @@
     value={selected.toDateString()}
     clearable
     clearButtonLabel={clearLabel}
+    {disabled}
   />
   {#if showDatePicker}
     <div
diff --git a/src/lib/holocene/icon-button.svelte b/src/lib/holocene/icon-button.svelte
index a16ae7493..b57b8b34b 100644
--- a/src/lib/holocene/icon-button.svelte
+++ b/src/lib/holocene/icon-button.svelte
@@ -16,17 +16,22 @@
   export let label = '';
 </script>
 
-<button type="button" class="icon-button {className}" on:click aria-label={label} {...$$restProps}>
-  <Icon name={icon} class="h-auto" />
+<button
+  type="button"
+  class="icon-button {className}"
+  on:click
+  aria-label={label}
+  {...$$restProps}
+>
+  <Icon name={icon} />
 </button>
 
-
 <style lang="postcss">
   .icon-button {
-    @apply p-1 inline-block rounded-full border-2 border-[transparent];
+    @apply shrink-0 inline-flex items-center justify-center h-9 w-9 rounded-full border-2 border-[transparent];
 
     &:not(:disabled) {
-      @apply bg-gradient-to-br hover:text-gray-900 hover:border-indigo-600 hover:shadow-focus hover:shadow-blue-600/50 hover:from-blue-100 hover:to-purple-100 focus-visible:text-gray-900 focus-visible:outline-none focus-visible:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100
+      @apply bg-gradient-to-br hover:text-gray-900 hover:border-indigo-600 hover:shadow-focus hover:shadow-blue-600/50 hover:from-blue-100 hover:to-purple-100 focus-visible:text-gray-900 focus-visible:outline-none focus-visible:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100;
     }
 
     &:disabled {
diff --git a/src/lib/holocene/menu/menu-item.svelte b/src/lib/holocene/menu/menu-item.svelte
index 6c29dac37..34b91d949 100644
--- a/src/lib/holocene/menu/menu-item.svelte
+++ b/src/lib/holocene/menu/menu-item.svelte
@@ -5,11 +5,11 @@
 
 <script lang="ts">
   import type { HTMLLiAttributes } from 'svelte/elements';
-  
+
   import { createEventDispatcher, getContext } from 'svelte';
-  
+
   import Icon from '$lib/holocene/icon/icon.svelte';
-  
+
   import { MENU_CONTEXT, type MenuContext } from './menu-container.svelte';
 
   type ExtendedLIEvent = KeyboardEvent & {
@@ -33,7 +33,7 @@
 
   let className = '';
   export { className as class };
-  export let selected = false;
+  export let selected = undefined;
   export let destructive = false;
   export let disabled = false;
   export let href = null;
@@ -140,11 +140,13 @@
       {:else}
         <slot />
       {/if}
-      <div class="flex w-6 h-6 shrink-0">
-        {#if selected}
-          <Icon name="checkmark" />
-        {/if}
-      </div>
+      {#if selected !== undefined}
+        <div class="flex w-6 h-6 shrink-0">
+          {#if selected}
+            <Icon name="checkmark" />
+          {/if}
+        </div>
+      {/if}
     </div>
     <slot name="trailing" />
   </li>
diff --git a/src/lib/holocene/time-picker.svelte b/src/lib/holocene/time-picker.svelte
index 2ebb24e4a..f78965ff3 100644
--- a/src/lib/holocene/time-picker.svelte
+++ b/src/lib/holocene/time-picker.svelte
@@ -7,6 +7,8 @@
   export let minute = '';
   export let second = '';
   export let half: 'AM' | 'PM' = 'AM';
+  export let twelveHourClock = true;
+  export let disabled = false;
 </script>
 
 <div class="flex gap-2">
@@ -18,7 +20,8 @@
     placeholder="00"
     suffix="hrs"
     maxLength={2}
-    error={Boolean(parseInt(hour) > 12)}
+    error={twelveHourClock ? parseInt(hour) > 12 : parseInt(hour) > 23}
+    {disabled}
   />
   <Input
     id="minute"
@@ -30,6 +33,7 @@
     suffix="min"
     maxLength={2}
     error={Boolean(parseInt(hour) > 59)}
+    {disabled}
   />
   <Input
     id="second"
@@ -40,13 +44,16 @@
     suffix="sec"
     maxLength={2}
     error={Boolean(parseInt(hour) > 59)}
+    {disabled}
   />
-  <ToggleButtons>
-    <ToggleButton active={half === 'AM'} on:click={() => (half = 'AM')}
-      >AM</ToggleButton
-    >
-    <ToggleButton active={half === 'PM'} on:click={() => (half = 'PM')}
-      >PM</ToggleButton
-    >
-  </ToggleButtons>
+  {#if twelveHourClock}
+    <ToggleButtons>
+      <ToggleButton active={half === 'AM'} on:click={() => (half = 'AM')}
+        >AM</ToggleButton
+      >
+      <ToggleButton active={half === 'PM'} on:click={() => (half = 'PM')}
+        >PM</ToggleButton
+      >
+    </ToggleButtons>
+  {/if}
 </div>