From 97bdaa0a7720aecb58460924bd2500219d81651e Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 28 Sep 2023 09:17:11 -0600
Subject: [PATCH] Add "Not equal to" option to Text filter search (#1652)

* Add Not equal to option for text filter

* Update and refactor getFocusedElementId
---
 .../filter-search/conditional-menu.svelte     | 23 ++++++++++++-----
 .../filter-search/datetime-filter.svelte      |  2 ++
 .../workflow/filter-search/index.svelte       | 17 +------------
 .../filter-search/number-filter.svelte        |  2 +-
 .../search-attribute-menu.svelte              | 25 +++----------------
 .../workflow/filter-search/text-filter.svelte |  9 +++++++
 src/lib/i18n/locales/en/common.ts             |  2 ++
 src/lib/utilities/query/filter-search.ts      | 17 +++++++++++++
 8 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/workflow/filter-search/conditional-menu.svelte b/src/lib/components/workflow/filter-search/conditional-menu.svelte
index 5e5561ca4..1c52f7b67 100644
--- a/src/lib/components/workflow/filter-search/conditional-menu.svelte
+++ b/src/lib/components/workflow/filter-search/conditional-menu.svelte
@@ -24,25 +24,36 @@
     defaultConditionOptions;
   export let disabled = false;
   export let inputId: string;
+  export let noBorderLeft = false;
+  export let noBorderRight = false;
 
-  $: options, ($filter.conditional = options[0].value);
-
-  $: selectedOption =
-    options.find((o) => o.value === $filter.conditional) ?? options[0];
+  $: filterConditionalOption = options.find(
+    (o) => o.value === $filter.conditional,
+  );
+  $: options, updateFilterConditional();
+  $: selectedOption = filterConditionalOption ?? options[0];
   $: selectedLabel = selectedOption?.label ?? selectedOption?.value;
+
+  function updateFilterConditional() {
+    if (!filterConditionalOption) {
+      $filter.conditional = options[0].value;
+    }
+  }
 </script>
 
 <MenuContainer>
   <MenuButton
     unround
-    class="!border-l-0 !border-r-0"
+    class="{noBorderRight ? '!border-r-0' : ''} {noBorderLeft
+      ? '!border-l-0'
+      : ''} whitespace-nowrap"
     id="conditional-menu-button"
     controls="conditional-menu"
     {disabled}
   >
     {selectedLabel}
   </MenuButton>
-  <Menu id="conditional-menu">
+  <Menu id="conditional-menu" class="whitespace-nowrap">
     {#each options as { value, label }}
       <MenuItem
         on:click={() => {
diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
index 6593dea08..605e8085f 100644
--- a/src/lib/components/workflow/filter-search/datetime-filter.svelte
+++ b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -126,6 +126,8 @@
       { value: 'BETWEEN', label: translate('between') },
       { value: '>=', label: translate('after') },
     ]}
+    noBorderLeft
+    noBorderRight
   />
   <MenuContainer>
     <MenuButton
diff --git a/src/lib/components/workflow/filter-search/index.svelte b/src/lib/components/workflow/filter-search/index.svelte
index a027696b8..e4cc0853a 100644
--- a/src/lib/components/workflow/filter-search/index.svelte
+++ b/src/lib/components/workflow/filter-search/index.svelte
@@ -27,9 +27,9 @@
   import { workflowFilters } from '$lib/stores/filters';
   import { refresh } from '$lib/stores/workflows';
   import {
+    getFocusedElementId,
     isBooleanFilter,
     isDateTimeFilter,
-    isListFilter,
     isNumberFilter,
     isStatusFilter,
     isTextFilter,
@@ -99,21 +99,6 @@
     onSearch();
   }
 
-  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 updateFocusedElementId() {
     if ($activeQueryIndex !== null) {
       $focusedElementId = getFocusedElementId($filter.attribute);
diff --git a/src/lib/components/workflow/filter-search/number-filter.svelte b/src/lib/components/workflow/filter-search/number-filter.svelte
index aeaa7eac7..95e9dc0fb 100644
--- a/src/lib/components/workflow/filter-search/number-filter.svelte
+++ b/src/lib/components/workflow/filter-search/number-filter.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <div class="flex items-center">
-  <ConditionalMenu inputId="number-filter-search" />
+  <ConditionalMenu inputId="number-filter-search" noBorderLeft noBorderRight />
   <NumberInput
     label={translate('number-input-placeholder')}
     labelHidden
diff --git a/src/lib/components/workflow/filter-search/search-attribute-menu.svelte b/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
index d64b8cb1a..a6e167dd8 100644
--- a/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
+++ b/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
@@ -14,12 +14,8 @@
   import { workflowFilters } from '$lib/stores/filters';
   import { sortedSearchAttributeOptions } from '$lib/stores/search-attributes';
   import {
-    isBooleanFilter,
-    isDateTimeFilter,
+    getFocusedElementId,
     isListFilter,
-    isNumberFilter,
-    isStatusFilter,
-    isTextFilter,
   } from '$lib/utilities/query/filter-search';
   import { emptyFilter } from '$lib/utilities/query/to-list-workflow-filters';
 
@@ -28,24 +24,11 @@
   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,
+      (filter) =>
+        (filter.conditional === '=' || filter.conditional === '!=') &&
+        filter.attribute === value,
     );
   }
 
diff --git a/src/lib/components/workflow/filter-search/text-filter.svelte b/src/lib/components/workflow/filter-search/text-filter.svelte
index 1b914dc08..a83e1f9af 100644
--- a/src/lib/components/workflow/filter-search/text-filter.svelte
+++ b/src/lib/components/workflow/filter-search/text-filter.svelte
@@ -4,6 +4,7 @@
   import Input from '$lib/holocene/input/input.svelte';
   import { translate } from '$lib/i18n/translate';
 
+  import ConditionalMenu from './conditional-menu.svelte';
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
   const { filter, handleSubmit } = getContext<FilterContext>(FILTER_CONTEXT);
@@ -19,6 +20,14 @@
   }
 </script>
 
+<ConditionalMenu
+  options={[
+    { value: '=', label: translate('equal-to') },
+    { value: '!=', label: translate('not-equal-to') },
+  ]}
+  inputId="text-filter-search"
+  noBorderLeft
+/>
 <Input
   label={$filter.attribute}
   labelHidden
diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts
index e95a3bf41..d35e72181 100644
--- a/src/lib/i18n/locales/en/common.ts
+++ b/src/lib/i18n/locales/en/common.ts
@@ -134,4 +134,6 @@ export const Strings = {
   'based-on-time-preface': 'Based on',
   'download-json': 'Download JSON',
   'skip-nav': 'Skip to Main Content',
+  'equal-to': 'Equal to',
+  'not-equal-to': 'Not equal to',
 } as const;
diff --git a/src/lib/utilities/query/filter-search.ts b/src/lib/utilities/query/filter-search.ts
index 3c64d057b..8c48d5a04 100644
--- a/src/lib/utilities/query/filter-search.ts
+++ b/src/lib/utilities/query/filter-search.ts
@@ -40,3 +40,20 @@ export function isBooleanFilter(
   const searchAttributeType = get(attributes)[attribute];
   return searchAttributeType === 'Bool';
 }
+
+export function getFocusedElementId(attribute: string) {
+  if (isStatusFilter(attribute)) return 'status-filter';
+
+  if (
+    isTextFilter(attribute) ||
+    isNumberFilter(attribute) ||
+    isDateTimeFilter(attribute)
+  )
+    return 'conditional-menu-button';
+
+  if (isListFilter(attribute)) return 'list-filter-search';
+
+  if (isBooleanFilter(attribute)) return 'boolean-filter';
+
+  return '';
+}