Add "Not equal to" option to Text filter search (#1652)

* Add Not equal to option for text filter

* Update and refactor getFocusedElementId

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={() => {

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

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);

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

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,
     );
   }
 

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

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;

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 '';
+}