Schedule search attributes (#2275)

* Schedule search attributes (#2241)

* Add search attributes to create schedule UI

* Add search attributes to edit schedule UI

* Fix search attribute inputs based on search attribute type

* Add search attributes to schedule view UI

* Use custom datetime input with UTC

* Small UI and copy fixes

* Fix attribute value to always update on attribute change

* Fix label spacing and update custom search attribute table to be list instead

* Update schedule advanced settings to be list

* Fix search attribute view/create/update

* Fix type

* Add expandable prop to search attribute Accordion

---------

Co-authored-by: Alex Tideman <[email protected]>

* Add ability to query schedules (#2272)

* Refactor FilterSearch to component for reuse on Schedules page

* Rename filter search to search attribute filter

* Make schedules table headers configurable

* Add back schedule name search input

* Fix responsiveness

* Only add starts with option to TextFilter if attribute is a Keyword

* Fix empty state

* update testId

* Add onError callback

* Remove schedule name search input

* Add search attribute type map

* Add ScheduleId filter option and rename table header

* Use Input required prop on schedule form

* Add isCloud check for ScheduleId

* Add unspecified search attribute type

---------

Co-authored-by: Alex Tideman <[email protected]>

Author: laurakwhit

Diff for: src/lib/components/schedule/schedule-advanced-settings.svelte

@@ -14,28 +14,47 @@
 
 <ScheduleNotes {notes} />
 <Accordion title={translate('schedules.advanced-settings')}>
-  <p>
-    {translate('schedules.start-time')}
-    {spec?.startTime ?? translate('common.none')}
-  </p>
-  <p>
-    {translate('schedules.end-time')}{spec?.endTime ?? translate('common.none')}
-  </p>
-  <p>
-    {translate('schedules.jitter')}{spec?.jitter ?? translate('common.none')}
-  </p>
-  <p>
-    {translate('schedules.exclusion-calendar')}{spec?.excludeCalendar?.[0] ??
-      translate('common.none')}
-  </p>
-  {#if state?.limitedActions}
-    <p>
-      {translate('schedules.remaining-actions')}{state?.remainingActions ??
-        translate('common.none')}
-    </p>
-  {/if}
-  <p>
-    {translate('schedules.overlap-policy')}{policies?.overlapPolicy ??
-      translate('common.none')}
-  </p>
+  <ul class="settings-list">
+    <li>
+      {translate('schedules.start-time')}
+      <span> {spec?.startTime ?? translate('common.none')}</span>
+    </li>
+    <li>
+      {translate('schedules.end-time')}
+      <span>{spec?.endTime ?? translate('common.none')} </span>
+    </li>
+    <li>
+      {translate('schedules.jitter')}
+      <span>{spec?.jitter ?? translate('common.none')} </span>
+    </li>
+
+    <li>
+      {translate('schedules.exclusion-calendar')}
+      <span> {spec?.excludeCalendar?.[0] ?? translate('common.none')}</span>
+    </li>
+    {#if state?.limitedActions}
+      <li>
+        {translate('schedules.remaining-actions')}
+        <span>{state?.remainingActions ?? translate('common.none')} </span>
+      </li>
+    {/if}
+    <li>
+      {translate('schedules.overlap-policy')}
+      <span>{policies?.overlapPolicy ?? translate('common.none')} </span>
+    </li>
+  </ul>
 </Accordion>
+
+<style lang="postcss">
+  .settings-list {
+    @apply w-full;
+
+    li {
+      @apply flex flex-wrap items-center gap-2 border-b py-2 last-of-type:border-b-0;
+
+      span {
+        @apply surface-subtle select-all rounded-sm p-1 leading-4;
+      }
+    }
+  }
+</style>

Diff for: src/lib/components/schedule/schedule-form-view.svelte

@@ -11,22 +11,28 @@
   import Loading from '$lib/holocene/loading.svelte';
   import { translate } from '$lib/i18n/translate';
   import { error, loading } from '$lib/stores/schedules';
+  import type { SearchAttributeInput } from '$lib/stores/search-attributes';
   import type {
     FullSchedule,
     ScheduleParameters,
     SchedulePreset,
   } from '$lib/types/schedule';
+  import { decodePayloadAttributes } from '$lib/utilities/decode-payload';
   import {
     routeForSchedule,
     routeForSchedules,
   } from '$lib/utilities/route-for';
   import { writeActionsAreAllowed } from '$lib/utilities/write-actions-are-allowed';
 
+  import AddSearchAttributes from '../workflow/add-search-attributes.svelte';
+
   import ScheduleInputPayload from './schedule-input-payload.svelte';
 
-  import type { Schedule } from '$types';
+  import type { Schedule, SearchAttribute } from '$types';
 
   export let schedule: FullSchedule | null = null;
+  export let searchAttributes: SearchAttribute = {};
+
   export let onConfirm: (
     preset: SchedulePreset,
     args: Partial<ScheduleParameters>,
@@ -52,9 +58,17 @@
 
   let errors = {};
   let name = scheduleId ?? '';
-  let workflowType = schedule?.action?.startWorkflow?.workflowType?.name ?? '';
-  let workflowId = schedule?.action?.startWorkflow?.workflowId ?? '';
-  let taskQueue = schedule?.action?.startWorkflow?.taskQueue?.name ?? '';
+  const decodedWorkflow = decodePayloadAttributes(
+    schedule?.action?.startWorkflow,
+  );
+  const decodedSearchAttributes = decodePayloadAttributes({ searchAttributes });
+  const indexedFields =
+    decodedSearchAttributes?.searchAttributes.indexedFields ??
+    ({} as { [k: string]: string });
+
+  let workflowType = decodedWorkflow?.workflowType?.name ?? '';
+  let workflowId = decodedWorkflow?.workflowId ?? '';
+  let taskQueue = decodedWorkflow?.taskQueue?.name ?? '';
   let input = '';
   let daysOfWeek: string[] = [];
   let daysOfMonth: number[] = [];
@@ -65,6 +79,9 @@
   let second = '';
   let phase = '';
   let cronString = '';
+  let searchAttributesInput: SearchAttributeInput[] = Object.entries(
+    indexedFields,
+  ).map(([attribute, value]) => ({ attribute, value }));
 
   const handleConfirm = (preset: SchedulePreset, schedule?: Schedule) => {
     const args: Partial<ScheduleParameters> = {
@@ -82,6 +99,7 @@
       daysOfMonth,
       days,
       months,
+      searchAttributes: searchAttributesInput,
     };
 
     onConfirm(preset, args, schedule);
@@ -145,9 +163,7 @@
       <h1>{title}</h1>
     </header>
     <form class="mb-4 flex w-full flex-col gap-4 md:w-2/3 xl:w-1/2">
-      <Alert intent="error" title="" hidden={!$error}>
-        {$error}
-      </Alert>
+      <Alert intent="error" title={$error} hidden={!$error} />
       <div class="w-full">
         <Input
           id="name"
@@ -158,6 +174,7 @@
           disabled={Boolean(scheduleId)}
           on:input={onInput}
           on:blur={onBlur}
+          required
         />
       </div>
       <div class="w-full">
@@ -168,6 +185,7 @@
           error={errors['workflowType']}
           on:input={onInput}
           on:blur={onBlur}
+          required
         />
       </div>
       <div class="w-full">
@@ -178,6 +196,7 @@
           error={errors['workflowId']}
           on:input={onInput}
           on:blur={onBlur}
+          required
         />
       </div>
       <div class="w-full">
@@ -188,13 +207,18 @@
           error={errors['taskQueue']}
           on:input={onInput}
           on:blur={onBlur}
+          required
         />
       </div>
       <ScheduleInputPayload
         bind:input
         payloads={schedule?.action?.startWorkflow?.input}
         error={errors['input']}
       />
+      <AddSearchAttributes
+        bind:attributesToAdd={searchAttributesInput}
+        class="w-full"
+      />
       <SchedulesCalendarView
         let:preset
         {schedule}

Diff for: src/lib/components/schedule/schedule-search-attributes.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import Accordion from '$lib/holocene/accordion.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { SearchAttribute } from '$lib/types';
+  import { decodePayloadAttributes } from '$lib/utilities/decode-payload';
+  import { pluralize } from '$lib/utilities/pluralize';
+
+  export let searchAttributes: SearchAttribute;
+
+  $: decodedSearchAttributes = decodePayloadAttributes({ searchAttributes });
+  $: indexedFields =
+    decodedSearchAttributes?.searchAttributes.indexedFields ?? {};
+  $: searchAttributeCount = Object.keys(indexedFields).length;
+</script>
+
+<Accordion
+  title={translate('events.custom-search-attributes')}
+  subtitle={`${searchAttributeCount} ${translate(
+    'events.custom-search',
+  )} ${pluralize(translate('events.attribute'), searchAttributeCount)}`}
+  expandable={searchAttributeCount > 0}
+>
+  {#if searchAttributeCount}
+    <ul class="w-full">
+      {#each Object.entries(indexedFields) as [searchAttrName, searchAttrValue]}
+        <li
+          class="flex flex-wrap items-center gap-2 border-b py-2 last-of-type:border-b-0"
+        >
+          <span class="break-all">{searchAttrName}</span>
+          <span class="surface-subtle select-all rounded-sm p-1 leading-4"
+            >{searchAttrValue}</span
+          >
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</Accordion>

Diff for: src/lib/components/schedule/schedules-table-row.svelte

@@ -4,7 +4,9 @@
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
+  import type { ConfigurableTableHeader } from '$lib/stores/configurable-table-columns';
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
+  import { decodePayloadAttributes } from '$lib/utilities/decode-payload';
   import { formatDate } from '$lib/utilities/format-date';
   import {
     routeForEventHistory,
@@ -18,11 +20,14 @@
   let { namespace } = $page.params;
 
   export let schedule: ScheduleListEntry;
+  export let columns: ConfigurableTableHeader[];
 
   $: spec = schedule?.info?.spec;
   $: calendar = spec?.structuredCalendar?.[0];
   $: interval = spec?.interval?.[0];
   $: timezoneName = spec?.timezoneName || 'UTC';
+  $: searchAttributes = schedule?.searchAttributes ?? {};
+  $: decodedAttributes = decodePayloadAttributes({ searchAttributes });
 
   const sortRecentActions = (recentActions: ScheduleActionResult[]) => {
     return (
@@ -43,45 +48,60 @@
 </script>
 
 <tr>
-  <td class="cell">
-    <WorkflowStatus status={schedule?.info?.paused ? 'Paused' : 'Running'} />
-  </td>
-  <td class="cell whitespace-pre-line break-words">
-    <Link href={route}>{schedule.scheduleId}</Link>
-  </td>
-  <td class="cell whitespace-pre-line break-words max-md:hidden">
-    {schedule?.info?.workflowType?.name ?? ''}
-  </td>
-  <td class="cell truncate">
-    {#each sortRecentActions(schedule?.info?.recentActions) as run}
-      <p>
-        <Link
-          href={routeForEventHistory({
-            namespace,
-            workflow: run?.startWorkflowResult?.workflowId,
-            run: run?.startWorkflowResult?.runId,
-          })}
-          >{formatDate(run?.actualTime, $timeFormat, {
-            relative: $relativeTime,
-          })}</Link
-        >
-      </p>
-    {/each}
-  </td>
-  <td class="cell truncate">
-    {#each schedule?.info?.futureActionTimes?.slice(0, 5) ?? [] as run}
-      <div>
-        {formatDate(run, $timeFormat, {
-          relative: $relativeTime,
-          relativeLabel: translate('common.from-now'),
-        })}
-      </div>
-    {/each}
-  </td>
-  <td class="cell">
-    <p>{@html translate('common.timezone', { timezone: timezoneName })}</p>
-    <ScheduleBasicFrequency {calendar} {interval} />
-  </td>
+  {#each columns as { label } (label)}
+    {#if label === translate('common.status')}
+      <td class="cell">
+        <WorkflowStatus
+          status={schedule?.info?.paused ? 'Paused' : 'Running'}
+        />
+      </td>
+    {:else if label === translate('schedules.id')}
+      <td class="cell whitespace-pre-line break-words">
+        <Link href={route}>{schedule.scheduleId}</Link>
+      </td>
+    {:else if label === translate('common.workflow-type')}
+      <td class="cell whitespace-pre-line break-words">
+        {schedule?.info?.workflowType?.name ?? ''}
+      </td>
+    {:else if label === translate('schedules.recent-runs')}
+      <td class="cell truncate">
+        {#each sortRecentActions(schedule?.info?.recentActions) as run}
+          <p>
+            <Link
+              href={routeForEventHistory({
+                namespace,
+                workflow: run?.startWorkflowResult?.workflowId,
+                run: run?.startWorkflowResult?.runId,
+              })}
+              >{formatDate(run?.actualTime, $timeFormat, {
+                relative: $relativeTime,
+              })}</Link
+            >
+          </p>
+        {/each}
+      </td>
+    {:else if label === translate('schedules.upcoming-runs')}
+      <td class="cell truncate">
+        {#each schedule?.info?.futureActionTimes?.slice(0, 5) ?? [] as run}
+          <div>
+            {formatDate(run, $timeFormat, {
+              relative: $relativeTime,
+              relativeLabel: translate('common.from-now'),
+            })}
+          </div>
+        {/each}
+      </td>
+    {:else if label === translate('schedules.schedule-spec')}
+      <td class="cell">
+        <p>{@html translate('common.timezone', { timezone: timezoneName })}</p>
+        <ScheduleBasicFrequency {calendar} {interval} />
+      </td>
+    {:else}
+      <td class="cell">
+        {decodedAttributes?.searchAttributes?.indexedFields?.[label] ?? ''}
+      </td>
+    {/if}
+  {/each}
 </tr>
 
 <style lang="postcss">

Diff for: src/lib/components/workflow/filter-search/boolean-filter.svelte renamed to src/lib/components/search-attribute-filter/boolean-filter.svelte

@@ -33,11 +33,11 @@
   };
 </script>
 
-<ConditionalMenu inputId="duration-filter-search" noBorderLeft>
+<ConditionalMenu inputId="duration-filter" noBorderLeft>
   <Input
     label={$filter.attribute}
     labelHidden
-    id="duration-filter-search"
+    id="duration-filter"
     type="search"
     placeholder={`${translate('common.enter')} ${
       $filter.attribute