From c469227d1920134a90b0f7b47dd409dbc12c3cb1 Mon Sep 17 00:00:00 2001
From: Filippo Giunchedi <filippo@wikimedia.org>
Date: Tue, 20 Jul 2021 08:29:39 +0200
Subject: [PATCH] fix(ui): add example to filter on non-existent label

Fixes #3353
---
 ui/src/Components/MainModal/Help.tsx               |  3 +++
 .../MainModal/__snapshots__/Help.test.tsx.snap     | 14 ++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/ui/src/Components/MainModal/Help.tsx b/ui/src/Components/MainModal/Help.tsx
index 51531ec80..af1bc35a9 100644
--- a/ui/src/Components/MainModal/Help.tsx
+++ b/ui/src/Components/MainModal/Help.tsx
@@ -130,6 +130,9 @@ const Help: FC<{ defaultIsOpen: boolean }> = ({ defaultIsOpen }) => (
               Match alerts with label <code>service</code> matching regular
               expression <code>/.*apache.*/</code>.
             </FilterExample>
+            <FilterExample example="service!~.+">
+              Match alerts without any value for label <code>service</code>.
+            </FilterExample>
             <FilterExample example="service=~apache[1-3]">
               Match alerts with label <code>service</code> matching regular
               expression <code>/.*apache[1-3].*/</code>.
diff --git a/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap b/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap
index 352841fd7..65f2f3d40 100644
--- a/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap
+++ b/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap
@@ -256,6 +256,20 @@ exports[`<Help /> matches snapshot 1`] = `
                   .
                 </div>
               </li>
+              <li>
+                <div>
+                  <span class=\\"badge bg-info\\">
+                    service!~.+
+                  </span>
+                </div>
+                <div>
+                  Match alerts without any value for label
+                  <code>
+                    service
+                  </code>
+                  .
+                </div>
+              </li>
               <li>
                 <div>
                   <span class=\\"badge bg-info\\">