From ef3a8a5a5ce3d38d7c80f569c18440f3331c78f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A5rten=20Svantesson?= <Marten.Svantesson@ticket.se>
Date: Thu, 27 Oct 2022 09:27:56 +0200
Subject: [PATCH] feat: replace opposing filter

---
 ui/src/Components/Labels/FilterInputLabel/index.tsx |  5 +++--
 .../Labels/FilteringCounterBadge/index.tsx          | 13 +++++++++----
 ui/src/Components/Labels/FilteringLabel/index.tsx   | 11 ++++++++---
 ui/src/Components/Labels/LabelWithPercent/index.tsx | 11 ++++++++---
 ui/src/Stores/AlertStore.test.ts                    |  4 ++--
 ui/src/Stores/AlertStore.ts                         |  2 ++
 6 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/ui/src/Components/Labels/FilterInputLabel/index.tsx b/ui/src/Components/Labels/FilterInputLabel/index.tsx
index 58bac1662..e0a7360c4 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.tsx
+++ b/ui/src/Components/Labels/FilterInputLabel/index.tsx
@@ -22,9 +22,10 @@ const FilterInputLabel: FC<{
     // if filter is empty string then remove it
     if (val === "") {
       alertStore.filters.removeFilter(filter.raw);
+    } else {
+      // if not empty replace it
+      alertStore.filters.replaceFilter(filter.raw, val);
     }
-    // if not empty replace it
-    alertStore.filters.replaceFilter(filter.raw, val);
   };
 
   const cs = GetClassAndStyle(
diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.tsx b/ui/src/Components/Labels/FilteringCounterBadge/index.tsx
index 391cfcfd1..5069cbd90 100644
--- a/ui/src/Components/Labels/FilteringCounterBadge/index.tsx
+++ b/ui/src/Components/Labels/FilteringCounterBadge/index.tsx
@@ -38,15 +38,20 @@ const FilteringCounterBadge: FC<{
     (event: MouseEvent) => {
       // left click       => apply foo=bar filter
       // left click + alt => apply foo!=bar filter
-      const operator =
-        event.altKey === true ? QueryOperators.NotEqual : QueryOperators.Equal;
+      let operators = [QueryOperators.Equal, QueryOperators.NotEqual];
+      if (event.altKey) {
+        operators = operators.reverse();
+      }
 
       event.preventDefault();
 
       if (isAppend) {
-        alertStore.filters.addFilter(FormatQuery(name, operator, value));
+        alertStore.filters.replaceFilter(
+          FormatQuery(name, operators[1], value),
+          FormatQuery(name, operators[0], value)
+        );
       } else {
-        alertStore.filters.setFilters([FormatQuery(name, operator, value)]);
+        alertStore.filters.setFilters([FormatQuery(name, operators[0], value)]);
       }
     },
     [alertStore.filters, name, value, isAppend]
diff --git a/ui/src/Components/Labels/FilteringLabel/index.tsx b/ui/src/Components/Labels/FilteringLabel/index.tsx
index b72fa974c..d837570f5 100644
--- a/ui/src/Components/Labels/FilteringLabel/index.tsx
+++ b/ui/src/Components/Labels/FilteringLabel/index.tsx
@@ -27,10 +27,15 @@ const FilteringLabel: FC<{
         return;
       }
 
-      const operator =
-        event.altKey === true ? QueryOperators.NotEqual : QueryOperators.Equal;
+      let operators = [QueryOperators.Equal, QueryOperators.NotEqual];
+      if (event.altKey) {
+        operators = operators.reverse();
+      }
 
-      alertStore.filters.addFilter(FormatQuery(name, operator, value));
+      alertStore.filters.replaceFilter(
+        FormatQuery(name, operators[1], value),
+        FormatQuery(name, operators[0], value)
+      );
     },
     [alertStore.filters, name, value]
   );
diff --git a/ui/src/Components/Labels/LabelWithPercent/index.tsx b/ui/src/Components/Labels/LabelWithPercent/index.tsx
index 8779105d6..de3f2680e 100644
--- a/ui/src/Components/Labels/LabelWithPercent/index.tsx
+++ b/ui/src/Components/Labels/LabelWithPercent/index.tsx
@@ -22,12 +22,17 @@ const LabelWithPercent: FC<{
     (event: MouseEvent) => {
       // left click       => apply foo=bar filter
       // left click + alt => apply foo!=bar filter
-      const operator =
-        event.altKey === true ? QueryOperators.NotEqual : QueryOperators.Equal;
+      let operators = [QueryOperators.Equal, QueryOperators.NotEqual];
+      if (event.altKey) {
+        operators = operators.reverse();
+      }
 
       event.preventDefault();
 
-      alertStore.filters.addFilter(FormatQuery(name, operator, value));
+      alertStore.filters.replaceFilter(
+        FormatQuery(name, operators[1], value),
+        FormatQuery(name, operators[0], value)
+      );
     },
     [alertStore.filters, name, value]
   );
diff --git a/ui/src/Stores/AlertStore.test.ts b/ui/src/Stores/AlertStore.test.ts
index 6a46ad288..a4314043a 100644
--- a/ui/src/Stores/AlertStore.test.ts
+++ b/ui/src/Stores/AlertStore.test.ts
@@ -225,10 +225,10 @@ describe("AlertStore.filters", () => {
     expect(store.filters.values[0]).toMatchObject(NewUnappliedFilter("bar"));
   });
 
-  it("replaceFilter('foo', 'bar') should not replace anything if filter list is empty", () => {
+  it("replaceFilter('foo', 'bar') should add 'bar' in empty list", () => {
     const store = new AlertStore([]);
     store.filters.replaceFilter("foo", "bar");
-    expect(store.filters.values).toHaveLength(0);
+    expect(store.filters.values).toHaveLength(1);
   });
 
   it("replaceFilter('foo', 'new') should replace correct filter", () => {
diff --git a/ui/src/Stores/AlertStore.ts b/ui/src/Stores/AlertStore.ts
index dc1ce5229..5f947647f 100644
--- a/ui/src/Stores/AlertStore.ts
+++ b/ui/src/Stores/AlertStore.ts
@@ -249,6 +249,8 @@ class AlertStore {
               this.values[index] = NewUnappliedFilter(newRaw);
               UpdateLocationSearch({ q: this.values.map((f) => f.raw) });
             }
+          } else {
+            this.addFilter(newRaw);
           }
         },
         setFilters(raws: string[]) {