From aa737d2cd41616eebab9818b71401995c1c21c64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 13 Jul 2020 17:01:45 +0100
Subject: [PATCH] fix(ui): replace current filters when clicking on silence id
 filter

---
 .../Labels/FilteringCounterBadge/index.js     | 11 ++++++++--
 .../FilteringCounterBadge/index.test.js       | 22 +++++++++++++++----
 .../ManagedSilence/SilenceComment.js          |  1 +
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.js b/ui/src/Components/Labels/FilteringCounterBadge/index.js
index 33796e20f..e76f66845 100644
--- a/ui/src/Components/Labels/FilteringCounterBadge/index.js
+++ b/ui/src/Components/Labels/FilteringCounterBadge/index.js
@@ -23,6 +23,7 @@ const FilteringCounterBadge = observer(
     themed,
     alwaysVisible,
     defaultColor,
+    isAppend,
   }) => {
     const { ref, props } = useFlashTransition(counter);
 
@@ -37,9 +38,13 @@ const FilteringCounterBadge = observer(
 
         event.preventDefault();
 
-        alertStore.filters.addFilter(FormatQuery(name, operator, value));
+        if (isAppend) {
+          alertStore.filters.addFilter(FormatQuery(name, operator, value));
+        } else {
+          alertStore.filters.setFilters([FormatQuery(name, operator, value)]);
+        }
       },
-      [alertStore.filters, name, value]
+      [alertStore.filters, name, value, isAppend]
     );
 
     if (!alwaysVisible && counter === 0) return null;
@@ -85,9 +90,11 @@ FilteringCounterBadge.propTypes = {
   themed: PropTypes.bool.isRequired,
   alwaysVisible: PropTypes.bool,
   defaultColor: PropTypes.oneOf(["light", "primary"]),
+  isAppend: PropTypes.bool,
 };
 FilteringCounterBadge.defaultProps = {
   defaultColor: "light",
+  isAppend: true,
 };
 
 export { FilteringCounterBadge };
diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.test.js b/ui/src/Components/Labels/FilteringCounterBadge/index.test.js
index 1c1bd477c..eb773f6ec 100644
--- a/ui/src/Components/Labels/FilteringCounterBadge/index.test.js
+++ b/ui/src/Components/Labels/FilteringCounterBadge/index.test.js
@@ -38,7 +38,8 @@ const validateStyle = (value, themed) => {
   expect(tree.find("span").prop("style")).toEqual({});
 };
 
-const validateOnClick = (value, themed, isNegative) => {
+const validateOnClick = (value, themed, isNegative, isAppend) => {
+  alertStore.filters.values = [NewUnappliedFilter("foo=bar")];
   const tree = mount(
     <FilteringCounterBadge
       alertStore={alertStore}
@@ -46,12 +47,18 @@ const validateOnClick = (value, themed, isNegative) => {
       value={value}
       counter={1}
       themed={themed}
+      isAppend={isAppend}
     />
   );
   tree
     .find(".components-label")
     .simulate("click", { altKey: isNegative ? true : false });
-  expect(alertStore.filters.values).toHaveLength(1);
+  expect(alertStore.filters.values).toHaveLength(isAppend ? 2 : 1);
+  if (isAppend) {
+    expect(alertStore.filters.values).toContainEqual(
+      NewUnappliedFilter("foo=bar")
+    );
+  }
   expect(alertStore.filters.values).toContainEqual(
     NewUnappliedFilter(
       `@state${
@@ -100,10 +107,17 @@ describe("<FilteringCounterBadge />", () => {
 
   for (let state of ["unprocessed", "active", "suppressed"]) {
     it(`click on @state=${state} counter badge should add a new filter`, () => {
-      validateOnClick(state, true, false);
+      validateOnClick(state, true, false, true);
     });
     it(`alt+click method on @state=${state} counter badge should add a new negative filter`, () => {
-      validateOnClick(state, true, true);
+      validateOnClick(state, true, true, true);
+    });
+
+    it(`click on @state=${state} counter badge when isAppend=false should replace filters`, () => {
+      validateOnClick(state, true, false, false);
+    });
+    it(`alt+click method on @state=${state} counter badge when isAppend=false should replace filters with a negative one`, () => {
+      validateOnClick(state, true, true, false);
     });
   }
 });
diff --git a/ui/src/Components/ManagedSilence/SilenceComment.js b/ui/src/Components/ManagedSilence/SilenceComment.js
index ac27c4e09..ef8ce4844 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.js
+++ b/ui/src/Components/ManagedSilence/SilenceComment.js
@@ -79,6 +79,7 @@ const SilenceComment = ({
               themed={false}
               alwaysVisible={alertCountAlwaysVisible}
               defaultColor="primary"
+              isAppend={false}
             />
             <ToggleIcon
               isOpen={!collapsed}