From 44d405cc9322794339316b6314b3b6d2dbeeb39d Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 6 Nov 2024 09:44:10 -0700
Subject: [PATCH] Add KeywordList option to SearchAttributeInput

---
 .../schedule-search-attributes.svelte         | 12 +++++--
 .../workflow/add-search-attributes.svelte     |  8 +++--
 .../datetime-input.svelte                     |  2 +-
 .../search-attribute-input/index.svelte       | 11 ++++---
 .../search-attribute-input/list-input.svelte  | 33 +++++++++++++++++++
 .../number-input.svelte                       |  2 +-
 src/lib/services/workflow-service.ts          |  4 +--
 src/lib/stores/search-attributes.ts           |  2 +-
 src/lib/utilities/encode-payload.ts           |  2 +-
 9 files changed, 61 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/workflow/search-attribute-input/list-input.svelte

diff --git a/src/lib/components/schedule/schedule-search-attributes.svelte b/src/lib/components/schedule/schedule-search-attributes.svelte
index 7da235bf7..09945adbe 100644
--- a/src/lib/components/schedule/schedule-search-attributes.svelte
+++ b/src/lib/components/schedule/schedule-search-attributes.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
-  import type { SearchAttribute } from '$lib/types';
+  import type { Payload, SearchAttribute } from '$lib/types';
   import { decodePayloadAttributes } from '$lib/utilities/decode-payload';
   import { pluralize } from '$lib/utilities/pluralize';
 
@@ -11,6 +11,13 @@
   $: indexedFields =
     decodedSearchAttributes?.searchAttributes.indexedFields ?? {};
   $: searchAttributeCount = Object.keys(indexedFields).length;
+
+  const formatValue = (value: Payload) => {
+    if (Array.isArray(value)) {
+      return value.join(', ');
+    }
+    return value;
+  };
 </script>
 
 <Accordion
@@ -23,12 +30,13 @@
   {#if searchAttributeCount}
     <ul class="w-full">
       {#each Object.entries(indexedFields) as [searchAttrName, searchAttrValue]}
+        {@const value = formatValue(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
+            >{value}</span
           >
         </li>
       {/each}
diff --git a/src/lib/components/workflow/add-search-attributes.svelte b/src/lib/components/workflow/add-search-attributes.svelte
index ade23869d..8ec0ef6c5 100644
--- a/src/lib/components/workflow/add-search-attributes.svelte
+++ b/src/lib/components/workflow/add-search-attributes.svelte
@@ -33,7 +33,11 @@
     on:click={addSearchAttribute}
     disabled={!searchAttributes.length ||
       attributesToAdd.length === searchAttributes.length ||
-      attributesToAdd.filter((a) => a.value === '' || a.value === null).length >
-        0}>{translate('workflows.add-search-attribute')}</Button
+      attributesToAdd.filter(
+        (a) =>
+          a.value === '' ||
+          a.value === null ||
+          (Array.isArray(a.value) && a.value.length === 0),
+      ).length > 0}>{translate('workflows.add-search-attribute')}</Button
   >
 </div>
diff --git a/src/lib/components/workflow/search-attribute-input/datetime-input.svelte b/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
index aea2f578c..517fa6da9 100644
--- a/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
+++ b/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
@@ -16,7 +16,7 @@
   let second = '';
 
   onMount(() => {
-    if (value) {
+    if (value && (typeof value === 'string' || typeof value === 'number')) {
       const datetime = new Date(value);
       const utcDate = new Date(
         datetime.getUTCFullYear(),
diff --git a/src/lib/components/workflow/search-attribute-input/index.svelte b/src/lib/components/workflow/search-attribute-input/index.svelte
index b4aa9752d..647381d93 100644
--- a/src/lib/components/workflow/search-attribute-input/index.svelte
+++ b/src/lib/components/workflow/search-attribute-input/index.svelte
@@ -13,6 +13,7 @@
   } from '$lib/types/workflows';
 
   import DatetimeInput from './datetime-input.svelte';
+  import ListInput from './list-input.svelte';
   import NumberInput from './number-input.svelte';
   import TextInput from './text-input.svelte';
 
@@ -22,9 +23,9 @@
   export let onRemove: (attribute: string) => void;
 
   $: type = searchAttributes[attribute.attribute];
-  $: searchAttributesOptions = [...Object.entries(searchAttributes)]
-    .map(([key, value]) => ({ label: key, value: key, type: value }))
-    .filter(({ type }) => type !== 'KeywordList');
+  $: searchAttributesOptions = [...Object.entries(searchAttributes)].map(
+    ([key, value]) => ({ label: key, value: key, type: value }),
+  );
 
   $: isDisabled = (value: string) => {
     return !!attributesToAdd.find((a) => a.attribute === value);
@@ -37,7 +38,7 @@
   };
 </script>
 
-<div class="flex items-start gap-2">
+<div class="flex items-end gap-2">
   <div class="min-w-fit">
     <Select
       id="search-attribute"
@@ -67,6 +68,8 @@
     <DatetimeInput bind:value={attribute.value} />
   {:else if type === SEARCH_ATTRIBUTE_TYPE.INT || type === SEARCH_ATTRIBUTE_TYPE.DOUBLE}
     <NumberInput bind:value={attribute.value} />
+  {:else if type === SEARCH_ATTRIBUTE_TYPE.KEYWORDLIST}
+    <ListInput bind:value={attribute.value} />
   {:else}
     <TextInput bind:value={attribute.value} />
   {/if}
diff --git a/src/lib/components/workflow/search-attribute-input/list-input.svelte b/src/lib/components/workflow/search-attribute-input/list-input.svelte
new file mode 100644
index 000000000..5761438db
--- /dev/null
+++ b/src/lib/components/workflow/search-attribute-input/list-input.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { afterUpdate, onMount } from 'svelte';
+
+  import ChipInput from '$lib/holocene/input/chip-input.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { SearchAttributeInputValue } from '$lib/stores/search-attributes';
+
+  export let value: SearchAttributeInputValue;
+  let _value = [];
+
+  afterUpdate(() => {
+    value = _value;
+  });
+
+  onMount(() => {
+    _value = getInitialValue(value);
+  });
+
+  function getInitialValue(value: SearchAttributeInputValue) {
+    if (!value) return [];
+    if (typeof value === 'string' || typeof value === 'number') return [];
+    return value;
+  }
+</script>
+
+<ChipInput
+  label={translate('common.value')}
+  id="attribute-value"
+  bind:chips={_value}
+  class="w-full"
+  removeChipButtonLabel={(chip) =>
+    translate('workflows.remove-keyword-label', { keyword: chip })}
+/>
diff --git a/src/lib/components/workflow/search-attribute-input/number-input.svelte b/src/lib/components/workflow/search-attribute-input/number-input.svelte
index d7081f24e..d3575b1c1 100644
--- a/src/lib/components/workflow/search-attribute-input/number-input.svelte
+++ b/src/lib/components/workflow/search-attribute-input/number-input.svelte
@@ -12,7 +12,7 @@
     value = _value;
   });
 
-  function getValue(value: number | string) {
+  function getValue(value: SearchAttributeInputValue) {
     const _numValue = Number(value);
     const isZero = value === 0 || value === '0';
     if (_numValue || isZero) return _numValue;
diff --git a/src/lib/services/workflow-service.ts b/src/lib/services/workflow-service.ts
index af748b4dd..b3276b56d 100644
--- a/src/lib/services/workflow-service.ts
+++ b/src/lib/services/workflow-service.ts
@@ -484,9 +484,7 @@ export const setSearchAttributes = (
 
   const searchAttributes: SearchAttribute = {};
   attributes.forEach((attribute) => {
-    searchAttributes[attribute.attribute] = setBase64Payload(
-      String(attribute.value),
-    );
+    searchAttributes[attribute.attribute] = setBase64Payload(attribute.value);
   });
 
   return searchAttributes;
diff --git a/src/lib/stores/search-attributes.ts b/src/lib/stores/search-attributes.ts
index 2df989710..e0c51c180 100644
--- a/src/lib/stores/search-attributes.ts
+++ b/src/lib/stores/search-attributes.ts
@@ -52,7 +52,7 @@ export type SearchAttributeOption = {
   type: SearchAttributeType;
 };
 
-export type SearchAttributeInputValue = string | number;
+export type SearchAttributeInputValue = string | number | string[];
 
 export type SearchAttributeInput = {
   attribute: string;
diff --git a/src/lib/utilities/encode-payload.ts b/src/lib/utilities/encode-payload.ts
index a4bb0910e..e1f5f41e5 100644
--- a/src/lib/utilities/encode-payload.ts
+++ b/src/lib/utilities/encode-payload.ts
@@ -20,7 +20,7 @@ export const getSinglePayload = (decodedValue: string): string => {
   return '';
 };
 
-export const setBase64Payload = (payload: string, encoding = 'json/plain') => {
+export const setBase64Payload = (payload: unknown, encoding = 'json/plain') => {
   return {
     metadata: {
       encoding: btoa(encoding),