Worker insights

.gitignore

@@ -27,4 +27,5 @@ go.work.sum
 .claude/settings.local.json
 .claude/*
 !.claude/skills/
-.sisyphus/*
+.omc
+.sisyphus/*

src/lib/components/lines-and-dots/workflow-details.svelte

@@ -305,7 +305,7 @@
     {/if}
 
     {#if sdk && sdkVersion}
-      <DetailListLabel>SDK</DetailListLabel>
+      <DetailListLabel>{translate('workflows.sdk')}</DetailListLabel>
       <DetailListValue>
         <SdkLogo {sdk} version={sdkVersion} />
       </DetailListValue>

src/lib/components/shared-search-attribute-filter/filter-bar.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Writable } from 'svelte/store';
+
+  import Button from '$lib/holocene/button.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
+  import type { SearchAttributeOption } from '$lib/stores/search-attributes';
+
+  import type { StatusAttribute } from './types.ts';
+
+  import Filter from './filter.svelte';
+  import ManualQuery from './manual-query.svelte';
+
+  interface Props {
+    filters: Writable<SearchAttributeFilter[]>;
+    options: SearchAttributeOption[];
+    id: string;
+    statusAttribute?: StatusAttribute;
+    onManualSearch?: (query: string) => void;
+  }
+
+  let { filters, options, id, statusAttribute, onManualSearch }: Props =
+    $props();
+
+  let viewManualQuery = $state(false);
+</script>
+
+<div>
+  <div
+    class="flex w-full flex-wrap items-center justify-between gap-2 border border-subtle bg-primary p-1.5"
+  >
+    <div class="flex grow items-center justify-start gap-4 px-2">
+      <Icon name="filter-lines" class="text-primary-text h-4 w-4 shrink-0" />
+      <Filter {filters} {options} {id} {statusAttribute} />
+    </div>
+    <div class="flex items-center gap-1">
+      <Tooltip
+        text={viewManualQuery ? 'Hide raw query' : 'View raw query'}
+        left
+      >
+        <Button
+          variant="ghost"
+          size="xs"
+          leadingIcon="json"
+          active={viewManualQuery}
+          data-testid="toggle-manual-query"
+          on:click={() => (viewManualQuery = !viewManualQuery)}
+        />
+      </Tooltip>
+    </div>
+  </div>
+  {#if viewManualQuery}
+    <ManualQuery {filters} {id} onSearch={onManualSearch} />
+  {/if}
+</div>

src/lib/components/standalone-activities/activities-summary-filter-bar/dropdown-filter-list.svelte → src/lib/components/shared-search-attribute-filter/filter-list.svelte

@@ -1,72 +1,84 @@
 <script lang="ts">
+  import type { Writable } from 'svelte/store';
+
   import { getContext } from 'svelte';
 
   import { page } from '$app/state';
 
   import DropdownFilterChip from '$lib/components/workflow/filter-bar/dropdown-filter-chip.svelte';
-  import StatusDropdownFilterChip from '$lib/components/workflow/filter-bar/status-dropdown-filter-chip.svelte';
   import Button from '$lib/holocene/button.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
-  import { activityFilters } from '$lib/stores/filters';
-  import { isStatusFilter } from '$lib/utilities/query/search-attribute-filter';
   import { emptyFilter } from '$lib/utilities/query/to-list-workflow-filters';
   import { updateQueryParamsFromFilter } from '$lib/utilities/query/to-list-workflow-filters';
 
+  import type { StatusAttribute } from './types.ts';
+
   import {
-    ACTIVITY_FILTER_CONTEXT,
-    type ActivityFilterContext,
+    SEARCH_ATTRIBUTE_FILTER_CONTEXT,
+    type SearchAttributeFilterContext,
   } from './filter.svelte';
+  import StatusFilterChip from './status-filter-chip.svelte';
+
+  interface Props {
+    filters: Writable<SearchAttributeFilter[]>;
+    statusAttribute?: StatusAttribute;
+  }
+
+  let { filters, statusAttribute }: Props = $props();
+
+  const isStatusFilter = (f: SearchAttributeFilter) =>
+    statusAttribute ? f.attribute === statusAttribute : false;
 
   const { filter, activeQueryIndex, chipOpenIndex } =
-    getContext<ActivityFilterContext>(ACTIVITY_FILTER_CONTEXT);
+    getContext<SearchAttributeFilterContext>(SEARCH_ATTRIBUTE_FILTER_CONTEXT);
 
   let totalFiltersInView = $state(10);
 
   const firstExecutionStatusIndex = $derived(
-    $activityFilters.findIndex((filter) => isStatusFilter(filter)),
-  );
-  const visibleFilters = $derived(
-    $activityFilters.slice(0, totalFiltersInView),
+    $filters.findIndex((filter) => isStatusFilter(filter)),
   );
-  const executionStatusFilters = $derived(
-    $activityFilters.filter((filter) => filter.attribute === 'ExecutionStatus'),
+  const visibleFilters = $derived($filters.slice(0, totalFiltersInView));
+  const statusFilters = $derived(
+    statusAttribute
+      ? $filters.filter((filter) => filter.attribute === statusAttribute)
+      : [],
   );
   const nonStatusFilters = $derived(
-    $activityFilters.filter((filter) => !isStatusFilter(filter)),
+    $filters.filter((filter) => !isStatusFilter(filter)),
   );
-  const hasMoreFilters = $derived(totalFiltersInView < $activityFilters.length);
+  const hasMoreFilters = $derived(totalFiltersInView < $filters.length);
 
   function updateFilter(index: number, updatedFilter: SearchAttributeFilter) {
-    const next = [...$activityFilters];
+    const next = [...$filters];
     next[index] = updatedFilter;
-    $activityFilters = next;
-    updateQueryParamsFromFilter(page.url, $activityFilters);
+    $filters = next;
+    updateQueryParamsFromFilter(page.url, $filters);
   }
 
   function updateStatusFilters(
     index: number,
     updatedFilters: SearchAttributeFilter[],
   ) {
     if (updatedFilters.length === 0) {
-      $activityFilters = nonStatusFilters;
-      updateQueryParamsFromFilter(page.url, $activityFilters);
+      $filters = nonStatusFilters;
+      updateQueryParamsFromFilter(page.url, $filters);
     } else {
-      const next = [...$activityFilters];
-      next.splice(index, executionStatusFilters.length, ...updatedFilters);
-      $activityFilters = next;
-      updateQueryParamsFromFilter(page.url, $activityFilters);
+      const next = [...$filters];
+      next.splice(index, statusFilters.length, ...updatedFilters);
+      $filters = next;
+      updateQueryParamsFromFilter(page.url, $filters);
     }
   }
 
   function removeFilter(index: number) {
-    const next = [...$activityFilters];
+    const next = [...$filters];
     next.splice(index, 1);
-    $activityFilters = next;
-    updateQueryParamsFromFilter(page.url, $activityFilters);
+    $filters = next;
+    updateQueryParamsFromFilter(page.url, $filters);
 
-    if (index === $activityFilters.length && $activityFilters.length > 0) {
-      const previousQuery = $activityFilters[$activityFilters.length - 1];
+    if (index === $filters.length && $filters.length > 0) {
+      const previousQuery = $filters[$filters.length - 1];
       if (previousQuery) {
         previousQuery.operator = '';
       }
@@ -89,17 +101,19 @@
 
 {#if visibleFilters.length > 0}
   <div class="flex flex-wrap items-center gap-2">
-    {#each visibleFilters as activityFilter, i (activityFilter.attribute + '-' + i)}
-      {#if isStatusFilter(activityFilter) && i === firstExecutionStatusIndex}
-        <StatusDropdownFilterChip
-          filters={executionStatusFilters}
+    {#each visibleFilters as filterItem, i (filterItem.attribute + '-' + i)}
+      {#if statusAttribute && isStatusFilter(filterItem) && i === firstExecutionStatusIndex}
+        <StatusFilterChip
+          attribute={statusAttribute}
+          filters={statusFilters}
           index={i}
           openIndex={$chipOpenIndex}
-          onUpdate={(statusFilters) => updateStatusFilters(i, statusFilters)}
+          onUpdate={(updatedStatusFilters) =>
+            updateStatusFilters(i, updatedStatusFilters)}
         />
-      {:else if !isStatusFilter(activityFilter) && activityFilter.attribute}
+      {:else if !isStatusFilter(filterItem) && filterItem.attribute}
         <DropdownFilterChip
-          filter={activityFilter}
+          filter={filterItem}
           index={i}
           openIndex={$chipOpenIndex}
           onUpdate={(updatedFilter) => updateFilter(i, updatedFilter)}

src/lib/components/standalone-activities/activities-summary-filter-bar/filter.svelte → src/lib/components/shared-search-attribute-filter/filter.svelte

@@ -1,29 +1,45 @@
 <script lang="ts" module>
-  import { writable, type Writable } from 'svelte/store';
+  import type { Writable } from 'svelte/store';
 
-  import { setContext } from 'svelte';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
 
-  export const ACTIVITY_FILTER_CONTEXT = 'activity-filter-context';
+  export const SEARCH_ATTRIBUTE_FILTER_CONTEXT =
+    'search-attribute-filter-context';
 
-  export interface ActivityFilterContext {
+  export interface SearchAttributeFilterContext {
     filter: Writable<SearchAttributeFilter>;
     activeQueryIndex: Writable<number | null>;
     handleSubmit: () => void;
     focusedElementId: Writable<string>;
     resetFilter: () => void;
     chipOpenIndex: Writable<number | null>;
+    id: string;
   }
 </script>
 
 <script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import { setContext } from 'svelte';
+
   import { afterNavigate } from '$app/navigation';
 
-  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
-  import { activityFilters } from '$lib/stores/filters';
+  import type { SearchAttributeOption } from '$lib/stores/search-attributes';
   import { emptyFilter } from '$lib/utilities/query/to-list-workflow-filters';
 
-  import ActivityDropdownFilterList from './dropdown-filter-list.svelte';
-  import ActivitySearchAttributeMenu from './search-attribute-menu.svelte';
+  import type { StatusAttribute } from './types.ts';
+
+  import DropdownFilterList from './filter-list.svelte';
+  import SearchAttributeMenu from './search-attribute-menu.svelte';
+
+  interface Props {
+    filters: Writable<SearchAttributeFilter[]>;
+    options: SearchAttributeOption[];
+    id: string;
+    statusAttribute?: StatusAttribute;
+  }
+
+  let { filters, options, id, statusAttribute }: Props = $props();
 
   const filter = writable<SearchAttributeFilter>(emptyFilter());
   const activeQueryIndex = writable<number | null>(null);
@@ -34,22 +50,23 @@
     chipOpenIndex.set(null);
   });
 
-  setContext<ActivityFilterContext>(ACTIVITY_FILTER_CONTEXT, {
+  setContext<SearchAttributeFilterContext>(SEARCH_ATTRIBUTE_FILTER_CONTEXT, {
     filter,
     activeQueryIndex,
     handleSubmit,
     focusedElementId,
     resetFilter,
     chipOpenIndex,
+    id,
   });
 
   function handleSubmit() {
     if ($activeQueryIndex !== null) {
-      $activityFilters[$activeQueryIndex] = $filter;
+      $filters[$activeQueryIndex] = $filter;
       $activeQueryIndex = null;
     } else {
-      const newIndex = $activityFilters.length;
-      $activityFilters = [...$activityFilters, $filter];
+      const newIndex = $filters.length;
+      $filters = [...$filters, $filter];
       chipOpenIndex.set(newIndex);
     }
     filter.set(emptyFilter());
@@ -62,6 +79,6 @@
 </script>
 
 <div class="flex shrink flex-wrap items-center justify-start gap-2">
-  <ActivityDropdownFilterList />
-  <ActivitySearchAttributeMenu />
+  <DropdownFilterList {filters} {statusAttribute} />
+  <SearchAttributeMenu {options} {filters} {statusAttribute} />
 </div>

src/lib/components/standalone-activities/activities-summary-filter-bar/manual-query.svelte → src/lib/components/shared-search-attribute-filter/manual-query.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
+  import type { Writable } from 'svelte/store';
   import { fade, slide } from 'svelte/transition';
 
   import { page } from '$app/state';
 
   import Button from '$lib/holocene/button.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { activitiesQuery, activityRefresh } from '$lib/stores/activities';
-  import { activityFilters } from '$lib/stores/filters';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
   import { currentPageKey } from '$lib/stores/pagination';
   import { searchAttributes } from '$lib/stores/search-attributes';
   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';
 
+  interface Props {
+    filters: Writable<SearchAttributeFilter[]>;
+    id: string;
+    onSearch?: (query: string) => void;
+  }
+
+  let { filters, id, onSearch }: Props = $props();
+
   let manualSearchString = $state('');
 
   const query = $derived(page.url.searchParams.get('query') ?? '');
@@ -26,23 +34,19 @@
     setManualString(query);
   });
 
-  const onSearch = () => {
+  const handleSearch = () => {
     if (!manualSearchString) {
-      $activityFilters = [];
-      $activitiesQuery = '';
+      $filters = [];
     } else {
       try {
-        $activityFilters = toListWorkflowFilters(
-          manualSearchString,
-          $searchAttributes,
-        );
+        $filters = toListWorkflowFilters(manualSearchString, $searchAttributes);
       } catch (e) {
         console.error(e);
       }
     }
 
     if (manualSearchString && manualSearchString === query) {
-      $activityRefresh = Date.now();
+      onSearch?.(manualSearchString);
     } else {
       updateQueryParameters({
         url: page.url,
@@ -55,12 +59,17 @@
   };
 
   function handleClearInput() {
-    onSearch();
+    handleSearch();
   }
 </script>
 
 <div class="w-full border border-t-0 border-subtle" in:fade>
-  <form onsubmit={onSearch} class="flex gap-0" transition:slide role="search">
+  <form
+    onsubmit={handleSearch}
+    class="flex gap-0"
+    transition:slide
+    role="search"
+  >
     <Input
       id="query"
       type="search"
@@ -78,10 +87,10 @@
       maxLength={MAX_QUERY_LENGTH}
       hideCount={!manualSearchString ||
         manualSearchString.length < MAX_QUERY_LENGTH}
-      data-testid="activity-manual-search-input"
+      data-testid="{id}-manual-search-input"
     />
     <Button
-      data-testid="activity-manual-search-button"
+      data-testid="{id}-manual-search-button"
       variant="ghost"
       type="submit"
     >