From 7b4aef27b669f3e6af54cd2ebd460299bd5271fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 19 Oct 2021 18:09:30 +0100
Subject: [PATCH] fix(tests): reformat snapshots

---
 .../__snapshots__/index.test.tsx.snap         |   15 +-
 .../__snapshots__/index.test.tsx.snap         |  350 +++--
 .../Alert/__snapshots__/index.test.tsx.snap   |  230 +--
 .../__snapshots__/index.test.tsx.snap         |   75 +-
 .../__snapshots__/index.test.tsx.snap         |  196 +--
 .../__snapshots__/Silences.test.tsx.snap      |   46 +-
 .../__snapshots__/index.test.tsx.snap         |   22 +-
 .../__snapshots__/index.test.tsx.snap         |   22 +-
 .../__snapshots__/index.test.tsx.snap         |   44 +-
 .../__snapshots__/index.test.tsx.snap         |   44 +-
 .../__snapshots__/index.test.tsx.snap         |   76 +-
 ...rtGroupCollapseConfiguration.test.tsx.snap |   53 +-
 .../AlertGroupConfiguration.test.tsx.snap     |   22 +-
 .../AlertGroupSortConfiguration.test.tsx.snap |   53 +-
 .../AlertGroupTitleBarColor.test.tsx.snap     |   12 +-
 ...AlertGroupWidthConfiguration.test.tsx.snap |   22 +-
 .../AnimationsConfiguration.test.tsx.snap     |   14 +-
 .../FetchConfiguration.test.tsx.snap          |   22 +-
 .../FilterBarConfiguration.test.tsx.snap      |   14 +-
 .../MultiGridConfiguration.test.tsx.snap      |   65 +-
 .../ThemeConfiguration.test.tsx.snap          |   53 +-
 .../__snapshots__/index.test.tsx.snap         |  370 +++--
 .../__snapshots__/Help.test.tsx.snap          |   59 +-
 .../MainModalContent.test.tsx.snap            |  375 +++--
 .../SilenceComment.test.tsx.snap              |  210 +--
 .../__snapshots__/index.test.tsx.snap         |  317 ++--
 .../__snapshots__/index.test.tsx.snap         |  270 ++--
 .../OverviewModalContent.test.tsx.snap        |  344 +++--
 .../__snapshots__/index.test.tsx.snap         |   97 +-
 .../__snapshots__/index.test.tsx.snap         | 1362 +++++++++--------
 .../__snapshots__/index.test.tsx.snap         |   50 +-
 .../LabelNameInput.test.tsx.snap              |   53 +-
 .../LabelValueInput.test.tsx.snap             |  106 +-
 .../__snapshots__/MatchCounter.test.tsx.snap  |    7 +-
 .../__snapshots__/index.test.tsx.snap         |  133 +-
 .../SilenceModalContent.test.tsx.snap         |   32 +-
 .../__snapshots__/ReactSelect.test.tsx.snap   |  353 +++--
 .../__snapshots__/AppToasts.test.tsx.snap     |  269 ++--
 .../__snapshots__/ToastMessages.test.tsx.snap |   39 +-
 .../__snapshots__/index.test.tsx.snap         |   48 +-
 .../__snapshots__/index.test.tsx.snap         |   22 +-
 .../__snapshots__/ErrorBoundary.test.tsx.snap |   40 +-
 42 files changed, 3315 insertions(+), 2691 deletions(-)

diff --git a/ui/src/Components/Accordion/__snapshots__/index.test.tsx.snap b/ui/src/Components/Accordion/__snapshots__/index.test.tsx.snap
index c7fb20db4..98123d8ab 100644
--- a/ui/src/Components/Accordion/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Accordion/__snapshots__/index.test.tsx.snap
@@ -5,8 +5,9 @@ exports[`<Accordion /> matches snapshot 1`] = `
 <div class=\\"accordion\\">
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button collapsed\\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button collapsed\\"
+        type=\\"button\\"
       >
         title 1
       </button>
@@ -16,8 +17,9 @@ exports[`<Accordion /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         title 2
       </button>
@@ -30,8 +32,9 @@ exports[`<Accordion /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button collapsed\\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button collapsed\\"
+        type=\\"button\\"
       >
         title 1
       </button>
diff --git a/ui/src/Components/AlertHistory/__snapshots__/index.test.tsx.snap b/ui/src/Components/AlertHistory/__snapshots__/index.test.tsx.snap
index df2bb416f..2cc6cc381 100644
--- a/ui/src/Components/AlertHistory/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/AlertHistory/__snapshots__/index.test.tsx.snap
@@ -6,9 +6,10 @@ exports[`<AlertHistory /> handles fetch errors 1`] = `
   <div class=\\"w-100 d-flex justify-content-between align-self-center\\">
     <div class=\\"alert-history-tooltip tooltip-trigger\\">
       <svg class=\\"alert-history\\">
-        <rect rx=\\"2\\"
-              ry=\\"2\\"
-              class=\\"error\\"
+        <rect
+          rx=\\"2\\"
+          ry=\\"2\\"
+          class=\\"error\\"
         >
         </rect>
       </svg>
@@ -24,9 +25,10 @@ exports[`<AlertHistory /> handles reponses with errors 1`] = `
   <div class=\\"w-100 d-flex justify-content-between align-self-center\\">
     <div class=\\"alert-history-tooltip tooltip-trigger\\">
       <svg class=\\"alert-history\\">
-        <rect rx=\\"2\\"
-              ry=\\"2\\"
-              class=\\"error\\"
+        <rect
+          rx=\\"2\\"
+          ry=\\"2\\"
+          class=\\"error\\"
         >
         </rect>
       </svg>
@@ -41,170 +43,194 @@ exports[`<AlertHistory /> matches snapshot with empty response 1`] = `
 <div class=\\"w-100 d-flex\\">
   <div class=\\"w-100 d-flex justify-content-between align-self-center\\">
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
@@ -218,170 +244,194 @@ exports[`<AlertHistory /> matches snapshot with rainbow response 1`] = `
 <div class=\\"w-100 d-flex\\">
   <div class=\\"w-100 d-flex justify-content-between align-self-center\\">
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-1\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-1\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-2\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-2\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-3\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-3\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-4\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-4\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-5\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-5\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-1\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-1\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-2\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-2\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-3\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-3\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-4\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-4\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-5\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-5\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-1\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-1\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-2\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-2\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-3\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-3\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-4\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-4\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-5\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-5\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"inactive\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"inactive\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-1\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-1\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-2\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-2\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-3\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-3\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-4\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-4\\"
       >
       </rect>
     </svg>
     <svg class=\\"alert-history\\">
-      <rect rx=\\"2\\"
-            ry=\\"2\\"
-            class=\\"firing firing-5\\"
+      <rect
+        rx=\\"2\\"
+        ry=\\"2\\"
+        class=\\"firing firing-5\\"
       >
       </rect>
     </svg>
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap
index 60c224b4f..6e85727aa 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap
@@ -7,17 +7,19 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <span class=\\"cursor-pointer\\">
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"search-minus\\"
-               class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 512 512\\"
+          <svg
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            data-prefix=\\"fas\\"
+            data-icon=\\"search-minus\\"
+            class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
+            role=\\"img\\"
+            xmlns=\\"http://www.w3.org/2000/svg\\"
+            viewbox=\\"0 0 512 512\\"
           >
-            <path fill=\\"currentColor\\"
-                  d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+            <path
+              fill=\\"currentColor\\"
+              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
             >
             </path>
           </svg>
@@ -34,17 +36,19 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     </div>
     <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"search-plus\\"
-             class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 512 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"search-plus\\"
+          class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 512 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
           >
           </path>
         </svg>
@@ -53,21 +57,24 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     </div>
   </div>
   <span>
-    <span class=\\"components-label components-label-with-hover px-1 me-1 badge bg-secondary cursor-pointer\\"
-          data-toggle=\\"dropdown\\"
+    <span
+      class=\\"components-label components-label-with-hover px-1 me-1 badge bg-secondary cursor-pointer\\"
+      data-toggle=\\"dropdown\\"
     >
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"caret-down\\"
-           class=\\"svg-inline--fa fa-caret-down fa-w-10 pe-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 320 512\\"
-           style=\\"width: 0.8rem;\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"caret-down\\"
+        class=\\"svg-inline--fa fa-caret-down fa-w-10 pe-1\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 320 512\\"
+        style=\\"width: 0.8rem;\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
         >
         </path>
       </svg>
@@ -76,17 +83,19 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
   </span>
   <div class=\\" tooltip-trigger\\">
     <span class=\\"badge bg-light components-label components-label-with-hover cursor-pointer\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"volume-mute\\"
-           class=\\"svg-inline--fa fa-volume-mute fa-w-16 text-success\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"volume-mute\\"
+        class=\\"svg-inline--fa fa-volume-mute fa-w-16 text-success\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 512 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z\\"
         >
         </path>
       </svg>
@@ -112,22 +121,25 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
       </span>
     </span>
   </div>
-  <a href=\\"http://localhost\\"
-     target=\\"_blank\\"
-     rel=\\"noopener noreferrer\\"
-     class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
+  <a
+    href=\\"http://localhost\\"
+    target=\\"_blank\\"
+    rel=\\"noopener noreferrer\\"
+    class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
   >
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"external-link-alt\\"
-         class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 512 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"external-link-alt\\"
+      class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 512 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
       >
       </path>
     </svg>
@@ -144,17 +156,19 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
     <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <span class=\\"cursor-pointer\\">
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"search-minus\\"
-               class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 512 512\\"
+          <svg
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            data-prefix=\\"fas\\"
+            data-icon=\\"search-minus\\"
+            class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
+            role=\\"img\\"
+            xmlns=\\"http://www.w3.org/2000/svg\\"
+            viewbox=\\"0 0 512 512\\"
           >
-            <path fill=\\"currentColor\\"
-                  d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+            <path
+              fill=\\"currentColor\\"
+              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
             >
             </path>
           </svg>
@@ -171,17 +185,19 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
     </div>
     <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"search-plus\\"
-             class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 512 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"search-plus\\"
+          class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 512 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
           >
           </path>
         </svg>
@@ -190,21 +206,24 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
     </div>
   </div>
   <span>
-    <span class=\\"components-label components-label-with-hover px-1 me-1 badge bg-secondary cursor-pointer\\"
-          data-toggle=\\"dropdown\\"
+    <span
+      class=\\"components-label components-label-with-hover px-1 me-1 badge bg-secondary cursor-pointer\\"
+      data-toggle=\\"dropdown\\"
     >
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"caret-down\\"
-           class=\\"svg-inline--fa fa-caret-down fa-w-10 pe-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 320 512\\"
-           style=\\"width: 0.8rem;\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"caret-down\\"
+        class=\\"svg-inline--fa fa-caret-down fa-w-10 pe-1\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 320 512\\"
+        style=\\"width: 0.8rem;\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
         >
         </path>
       </svg>
@@ -231,22 +250,25 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
       </span>
     </span>
   </div>
-  <a href=\\"http://localhost\\"
-     target=\\"_blank\\"
-     rel=\\"noopener noreferrer\\"
-     class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
+  <a
+    href=\\"http://localhost\\"
+    target=\\"_blank\\"
+    rel=\\"noopener noreferrer\\"
+    class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
   >
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"external-link-alt\\"
-         class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 512 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"external-link-alt\\"
+      class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 512 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
       >
       </path>
     </svg>
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.tsx.snap
index fb7f97618..a7c893a5c 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.tsx.snap
@@ -2,22 +2,25 @@
 
 exports[`<RenderLinkAnnotation /> matches snapshot 1`] = `
 "
-<a href=\\"http://localhost/foo\\"
-   target=\\"_blank\\"
-   rel=\\"noopener noreferrer\\"
-   class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
+<a
+  href=\\"http://localhost/foo\\"
+  target=\\"_blank\\"
+  rel=\\"noopener noreferrer\\"
+  class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
 >
-  <svg aria-hidden=\\"true\\"
-       focusable=\\"false\\"
-       data-prefix=\\"fas\\"
-       data-icon=\\"external-link-alt\\"
-       class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
-       role=\\"img\\"
-       xmlns=\\"http://www.w3.org/2000/svg\\"
-       viewbox=\\"0 0 512 512\\"
+  <svg
+    aria-hidden=\\"true\\"
+    focusable=\\"false\\"
+    data-prefix=\\"fas\\"
+    data-icon=\\"external-link-alt\\"
+    class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
+    role=\\"img\\"
+    xmlns=\\"http://www.w3.org/2000/svg\\"
+    viewbox=\\"0 0 512 512\\"
   >
-    <path fill=\\"currentColor\\"
-          d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
+    <path
+      fill=\\"currentColor\\"
+      d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
     >
     </path>
   </svg>
@@ -30,17 +33,19 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
 "
 <div class=\\" tooltip-trigger\\">
   <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"search-plus\\"
-         class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 512 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"search-plus\\"
+      class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 512 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
       >
       </path>
     </svg>
@@ -55,17 +60,19 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
 <div class=\\" tooltip-trigger\\">
   <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
     <span class=\\"cursor-pointer\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"search-minus\\"
-           class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"search-minus\\"
+        class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 512 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
         >
         </path>
       </svg>
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap
index b6956751c..05ea20c11 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap
@@ -7,17 +7,19 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <span class=\\"cursor-pointer\\">
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"search-minus\\"
-               class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 512 512\\"
+          <svg
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            data-prefix=\\"fas\\"
+            data-icon=\\"search-minus\\"
+            class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
+            role=\\"img\\"
+            xmlns=\\"http://www.w3.org/2000/svg\\"
+            viewbox=\\"0 0 512 512\\"
           >
-            <path fill=\\"currentColor\\"
-                  d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+            <path
+              fill=\\"currentColor\\"
+              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
             >
             </path>
           </svg>
@@ -34,17 +36,19 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     </div>
     <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"search-plus\\"
-             class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 512 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"search-plus\\"
+          class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 512 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
           >
           </path>
         </svg>
@@ -92,22 +96,25 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
       </span>
     </span>
   </div>
-  <a href=\\"http://link.example.com\\"
-     target=\\"_blank\\"
-     rel=\\"noopener noreferrer\\"
-     class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
+  <a
+    href=\\"http://link.example.com\\"
+    target=\\"_blank\\"
+    rel=\\"noopener noreferrer\\"
+    class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
   >
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"external-link-alt\\"
-         class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 512 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"external-link-alt\\"
+      class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 512 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
       >
       </path>
     </svg>
@@ -124,17 +131,19 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <span class=\\"cursor-pointer\\">
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"search-minus\\"
-               class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 512 512\\"
+          <svg
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            data-prefix=\\"fas\\"
+            data-icon=\\"search-minus\\"
+            class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
+            role=\\"img\\"
+            xmlns=\\"http://www.w3.org/2000/svg\\"
+            viewbox=\\"0 0 512 512\\"
           >
-            <path fill=\\"currentColor\\"
-                  d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+            <path
+              fill=\\"currentColor\\"
+              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
             >
             </path>
           </svg>
@@ -151,17 +160,19 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     </div>
     <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"search-plus\\"
-             class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 512 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"search-plus\\"
+          class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 512 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
           >
           </path>
         </svg>
@@ -209,22 +220,25 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
       </span>
     </span>
   </div>
-  <a href=\\"http://link.example.com\\"
-     target=\\"_blank\\"
-     rel=\\"noopener noreferrer\\"
-     class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
+  <a
+    href=\\"http://link.example.com\\"
+    target=\\"_blank\\"
+    rel=\\"noopener noreferrer\\"
+    class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
   >
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"external-link-alt\\"
-         class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 512 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"external-link-alt\\"
+      class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 512 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
       >
       </path>
     </svg>
@@ -235,17 +249,19 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
       <div class=\\"card-header rounded-0 border-bottom-0 px-2\\">
         <div class=\\"d-flex flex-row\\">
           <div class=\\"flex-shrink-0 flex-grow-0\\">
-            <svg aria-hidden=\\"true\\"
-                 focusable=\\"false\\"
-                 data-prefix=\\"fas\\"
-                 data-icon=\\"bell-slash\\"
-                 class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
-                 role=\\"img\\"
-                 xmlns=\\"http://www.w3.org/2000/svg\\"
-                 viewbox=\\"0 0 640 512\\"
+            <svg
+              aria-hidden=\\"true\\"
+              focusable=\\"false\\"
+              data-prefix=\\"fas\\"
+              data-icon=\\"bell-slash\\"
+              class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
+              role=\\"img\\"
+              xmlns=\\"http://www.w3.org/2000/svg\\"
+              viewbox=\\"0 0 640 512\\"
             >
-              <path fill=\\"currentColor\\"
-                    d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+              <path
+                fill=\\"currentColor\\"
+                d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
               >
               </path>
             </svg>
@@ -266,18 +282,20 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
           <div class=\\"flex-shrink-0 flex-grow-0\\">
             <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
               <span class=\\"badge components-label with-click\\">
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"chevron-down\\"
-                     class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 448 512\\"
-                     style=\\"transition: transform 0.25s ease-in-out;\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"chevron-down\\"
+                  class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 448 512\\"
+                  style=\\"transition: transform 0.25s ease-in-out;\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
                   >
                   </path>
                 </svg>
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap
index f4b11f5b2..04c2012f7 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap
@@ -6,17 +6,19 @@ exports[`<RenderSilence /> renders ManagedSilence if silence is present in Alert
   <div class=\\"card-header rounded-0 border-bottom-0 px-2\\">
     <div class=\\"d-flex flex-row\\">
       <div class=\\"flex-shrink-0 flex-grow-0\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"bell-slash\\"
-             class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 640 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"bell-slash\\"
+          class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 640 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
           >
           </path>
         </svg>
@@ -37,18 +39,20 @@ exports[`<RenderSilence /> renders ManagedSilence if silence is present in Alert
       <div class=\\"flex-shrink-0 flex-grow-0\\">
         <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
           <span class=\\"badge components-label with-click\\">
-            <svg aria-hidden=\\"true\\"
-                 focusable=\\"false\\"
-                 data-prefix=\\"fas\\"
-                 data-icon=\\"chevron-down\\"
-                 class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
-                 role=\\"img\\"
-                 xmlns=\\"http://www.w3.org/2000/svg\\"
-                 viewbox=\\"0 0 448 512\\"
-                 style=\\"transition: transform 0.25s ease-in-out;\\"
+            <svg
+              aria-hidden=\\"true\\"
+              focusable=\\"false\\"
+              data-prefix=\\"fas\\"
+              data-icon=\\"chevron-down\\"
+              class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
+              role=\\"img\\"
+              xmlns=\\"http://www.w3.org/2000/svg\\"
+              viewbox=\\"0 0 448 512\\"
+              style=\\"transition: transform 0.25s ease-in-out;\\"
             >
-              <path fill=\\"currentColor\\"
-                    d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+              <path
+                fill=\\"currentColor\\"
+                d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
               >
               </path>
             </svg>
diff --git a/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.tsx.snap
index 83c5063f8..c41cc4589 100644
--- a/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.tsx.snap
@@ -3,17 +3,19 @@
 exports[`<EmptyGrid /> matches snapshot 1`] = `
 "
 <h1 class=\\"display-1 text-placeholder screen-center\\">
-  <svg aria-hidden=\\"true\\"
-       focusable=\\"false\\"
-       data-prefix=\\"fas\\"
-       data-icon=\\"mug-hot\\"
-       class=\\"svg-inline--fa fa-mug-hot fa-w-16 screen-center-icon-big text-placeholder\\"
-       role=\\"img\\"
-       xmlns=\\"http://www.w3.org/2000/svg\\"
-       viewbox=\\"0 0 512 512\\"
+  <svg
+    aria-hidden=\\"true\\"
+    focusable=\\"false\\"
+    data-prefix=\\"fas\\"
+    data-icon=\\"mug-hot\\"
+    class=\\"svg-inline--fa fa-mug-hot fa-w-16 screen-center-icon-big text-placeholder\\"
+    role=\\"img\\"
+    xmlns=\\"http://www.w3.org/2000/svg\\"
+    viewbox=\\"0 0 512 512\\"
   >
-    <path fill=\\"currentColor\\"
-          d=\\"M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0 63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zm112 0c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C223.8 5.9 217 0 208.8 0h-16.4c-9.8 0-17.5 8.5-16.3 18 3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zM400 192H32c-17.7 0-32 14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48z\\"
+    <path
+      fill=\\"currentColor\\"
+      d=\\"M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0 63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zm112 0c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C223.8 5.9 217 0 208.8 0h-16.4c-9.8 0-17.5 8.5-16.3 18 3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zM400 192H32c-17.7 0-32 14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48z\\"
     >
     </path>
   </svg>
diff --git a/ui/src/Components/Grid/FatalError/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/FatalError/__snapshots__/index.test.tsx.snap
index ff7b85610..80184d2a0 100644
--- a/ui/src/Components/Grid/FatalError/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/FatalError/__snapshots__/index.test.tsx.snap
@@ -4,17 +4,19 @@ exports[`<FatalError /> matches snapshot 1`] = `
 "
 <h1 class=\\"display-1 text-placeholder screen-center\\">
   <div class=\\"container-fluid text-center\\">
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"exclamation-circle\\"
-         class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 screen-center-icon-big text-danger mb-4\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 512 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"exclamation-circle\\"
+      class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 screen-center-icon-big text-danger mb-4\\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 512 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
       >
       </path>
     </svg>
diff --git a/ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.tsx.snap
index 8fa22c9e2..e6642c874 100644
--- a/ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.tsx.snap
@@ -4,32 +4,36 @@ exports[`<ReloadNeeded /> matches snapshot 1`] = `
 "
 <h1 class=\\"display-1 text-placeholder screen-center\\">
   <div class=\\"container-fluid text-center\\">
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"exclamation-circle\\"
-         class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 screen-center-icon-big text-danger mb-4\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 512 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"exclamation-circle\\"
+      class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 screen-center-icon-big text-danger mb-4\\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 512 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
       >
       </path>
     </svg>
     <p class=\\"lead text-white bg-secondary p-3 rounded text-wrap text-break\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"spinner\\"
-           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin me-2\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"spinner\\"
+        class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin me-2\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 512 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
         >
         </path>
       </svg>
diff --git a/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.tsx.snap
index a702ac40d..3b2e01100 100644
--- a/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.tsx.snap
@@ -5,33 +5,37 @@ exports[`<UpgradeNeeded /> matches snapshot 1`] = `
 <h1 class=\\"display-1 text-placeholder screen-center\\">
   <div class=\\"container-fluid text-center\\">
     <div class=\\"shake-slow shake-constant mb-4\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"rocket\\"
-           class=\\"svg-inline--fa fa-rocket fa-w-16 screen-center-icon-big text-success\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"rocket\\"
+        class=\\"svg-inline--fa fa-rocket fa-w-16 screen-center-icon-big text-success\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 512 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,40.02322,40.02322,0,0,1,384.04033,168Z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,40.02322,40.02322,0,0,1,384.04033,168Z\\"
         >
         </path>
       </svg>
     </div>
     <p class=\\"lead text-muted\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"spinner\\"
-           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin me-2\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"spinner\\"
+        class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin me-2\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 512 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
         >
         </path>
       </svg>
diff --git a/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.tsx.snap b/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.tsx.snap
index 2c9c9ae3e..f1e07b125 100644
--- a/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.tsx.snap
@@ -15,29 +15,32 @@ exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
         bar
       </span>
     </span>
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"times\\"
-         class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 352 512\\"
-         style=\\"font-size: 100%;\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"times\\"
+      class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 352 512\\"
+      style=\\"font-size: 100%;\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
       >
       </path>
     </svg>
   </span>
   <div class=\\"progress components-labelWithPercent-progress me-1\\">
-    <div class=\\"progress-bar bg-warning\\"
-         role=\\"progressbar\\"
-         style=\\"width: 50%;\\"
-         aria-valuenow=\\"50\\"
-         aria-valuemin=\\"0\\"
-         aria-valuemax=\\"100\\"
+    <div
+      class=\\"progress-bar bg-warning\\"
+      role=\\"progressbar\\"
+      style=\\"width: 50%;\\"
+      aria-valuenow=\\"50\\"
+      aria-valuemin=\\"0\\"
+      aria-valuemax=\\"100\\"
     >
     </div>
   </div>
@@ -62,12 +65,13 @@ exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
     </span>
   </span>
   <div class=\\"progress components-labelWithPercent-progress me-1\\">
-    <div class=\\"progress-bar bg-warning\\"
-         role=\\"progressbar\\"
-         style=\\"width: 50%;\\"
-         aria-valuenow=\\"50\\"
-         aria-valuemin=\\"0\\"
-         aria-valuemax=\\"100\\"
+    <div
+      class=\\"progress-bar bg-warning\\"
+      role=\\"progressbar\\"
+      style=\\"width: 50%;\\"
+      aria-valuenow=\\"50\\"
+      aria-valuemin=\\"0\\"
+      aria-valuemax=\\"100\\"
     >
     </div>
   </div>
@@ -92,20 +96,22 @@ exports[`<LabelWithPercent /> matches snapshot with offset=25 1`] = `
     </span>
   </span>
   <div class=\\"progress components-labelWithPercent-progress me-1\\">
-    <div class=\\"progress-bar bg-transparent\\"
-         role=\\"progressbar\\"
-         style=\\"width: 25%;\\"
-         aria-valuenow=\\"25\\"
-         aria-valuemin=\\"0\\"
-         aria-valuemax=\\"100\\"
+    <div
+      class=\\"progress-bar bg-transparent\\"
+      role=\\"progressbar\\"
+      style=\\"width: 25%;\\"
+      aria-valuenow=\\"25\\"
+      aria-valuemin=\\"0\\"
+      aria-valuemax=\\"100\\"
     >
     </div>
-    <div class=\\"progress-bar bg-warning\\"
-         role=\\"progressbar\\"
-         style=\\"width: 50%;\\"
-         aria-valuenow=\\"50\\"
-         aria-valuemin=\\"0\\"
-         aria-valuemax=\\"100\\"
+    <div
+      class=\\"progress-bar bg-warning\\"
+      role=\\"progressbar\\"
+      style=\\"width: 50%;\\"
+      aria-valuenow=\\"50\\"
+      aria-valuemin=\\"0\\"
+      aria-valuemax=\\"100\\"
     >
     </div>
   </div>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap
index fb95bbdbb..499f6a81e 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap
@@ -4,10 +4,11 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
 "
 <div class=\\"mb-0\\">
   <div class=\\" css-2b097c-container\\">
-    <span aria-live=\\"polite\\"
-          aria-atomic=\\"false\\"
-          aria-relevant=\\"additions text\\"
-          class=\\"css-1f43avz-a11yText-A11yText\\"
+    <span
+      aria-live=\\"polite\\"
+      aria-atomic=\\"false\\"
+      aria-relevant=\\"additions text\\"
+      class=\\"css-1f43avz-a11yText-A11yText\\"
     >
     </span>
     <div class=\\"react-select__control css-cat782-control\\">
@@ -16,19 +17,21 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
           Collapse on mobile
         </div>
         <div class=\\"css-ps6ina-Input\\">
-          <div class=\\"react-select__input\\"
-               style=\\"display: inline-block;\\"
+          <div
+            class=\\"react-select__input\\"
+            style=\\"display: inline-block;\\"
           >
-            <input autocapitalize=\\"none\\"
-                   autocomplete=\\"off\\"
-                   autocorrect=\\"off\\"
-                   id=\\"react-select-configuration-collapse-input\\"
-                   spellcheck=\\"false\\"
-                   tabindex=\\"0\\"
-                   type=\\"text\\"
-                   aria-autocomplete=\\"list\\"
-                   style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                   value
+            <input
+              autocapitalize=\\"none\\"
+              autocomplete=\\"off\\"
+              autocorrect=\\"off\\"
+              id=\\"react-select-configuration-collapse-input\\"
+              spellcheck=\\"false\\"
+              tabindex=\\"0\\"
+              type=\\"text\\"
+              aria-autocomplete=\\"list\\"
+              style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+              value
             >
             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
             </div>
@@ -38,15 +41,17 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
       <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
         <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
         </span>
-        <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-             aria-hidden=\\"true\\"
+        <div
+          class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+          aria-hidden=\\"true\\"
         >
-          <svg height=\\"20\\"
-               width=\\"20\\"
-               viewbox=\\"0 0 20 20\\"
-               aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               class=\\"css-tj5bde-Svg\\"
+          <svg
+            height=\\"20\\"
+            width=\\"20\\"
+            viewbox=\\"0 0 20 20\\"
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            class=\\"css-tj5bde-Svg\\"
           >
             <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
             </path>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap
index 4ba19d359..41baf72c4 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap
@@ -3,17 +3,19 @@
 exports[`<AlertGroupConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"p-3 text-center\\">
-  <div class=\\"input-range-track\\"
-       style=\\"transform: scale(1); cursor: pointer;\\"
+  <div
+    class=\\"input-range-track\\"
+    style=\\"transform: scale(1); cursor: pointer;\\"
   >
-    <div class=\\"input-range-thumb\\"
-         style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-         tabindex=\\"0\\"
-         aria-valuemax=\\"10\\"
-         aria-valuemin=\\"1\\"
-         aria-valuenow=\\"5\\"
-         draggable=\\"false\\"
-         role=\\"slider\\"
+    <div
+      class=\\"input-range-thumb\\"
+      style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+      tabindex=\\"0\\"
+      aria-valuemax=\\"10\\"
+      aria-valuemin=\\"1\\"
+      aria-valuenow=\\"5\\"
+      draggable=\\"false\\"
+      role=\\"slider\\"
     >
       5
     </div>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap
index 9b6f17ddf..f7da31413 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap
@@ -6,10 +6,11 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
   <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
     <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
       <div class=\\" css-2b097c-container\\">
-        <span aria-live=\\"polite\\"
-              aria-atomic=\\"false\\"
-              aria-relevant=\\"additions text\\"
-              class=\\"css-1f43avz-a11yText-A11yText\\"
+        <span
+          aria-live=\\"polite\\"
+          aria-atomic=\\"false\\"
+          aria-relevant=\\"additions text\\"
+          class=\\"css-1f43avz-a11yText-A11yText\\"
         >
         </span>
         <div class=\\"react-select__control css-cat782-control\\">
@@ -18,19 +19,21 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
               Use defaults from karma config file
             </div>
             <div class=\\"css-ps6ina-Input\\">
-              <div class=\\"react-select__input\\"
-                   style=\\"display: inline-block;\\"
+              <div
+                class=\\"react-select__input\\"
+                style=\\"display: inline-block;\\"
               >
-                <input autocapitalize=\\"none\\"
-                       autocomplete=\\"off\\"
-                       autocorrect=\\"off\\"
-                       id=\\"react-select-configuration-sort-order-input\\"
-                       spellcheck=\\"false\\"
-                       tabindex=\\"0\\"
-                       type=\\"text\\"
-                       aria-autocomplete=\\"list\\"
-                       style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                       value
+                <input
+                  autocapitalize=\\"none\\"
+                  autocomplete=\\"off\\"
+                  autocorrect=\\"off\\"
+                  id=\\"react-select-configuration-sort-order-input\\"
+                  spellcheck=\\"false\\"
+                  tabindex=\\"0\\"
+                  type=\\"text\\"
+                  aria-autocomplete=\\"list\\"
+                  style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                  value
                 >
                 <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                 </div>
@@ -40,15 +43,17 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
           <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
             <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
             </span>
-            <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                 aria-hidden=\\"true\\"
+            <div
+              class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+              aria-hidden=\\"true\\"
             >
-              <svg height=\\"20\\"
-                   width=\\"20\\"
-                   viewbox=\\"0 0 20 20\\"
-                   aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   class=\\"css-tj5bde-Svg\\"
+              <svg
+                height=\\"20\\"
+                width=\\"20\\"
+                viewbox=\\"0 0 20 20\\"
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                class=\\"css-tj5bde-Svg\\"
               >
                 <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
                 </path>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.tsx.snap
index 8ca5ea3f5..8eeb44e67 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.tsx.snap
@@ -5,12 +5,14 @@ exports[`<AlertGroupTitleBarColor /> matches snapshot with default values 1`] =
 <div class=\\"mb-0\\">
   <div class=\\"form-check form-check-inline mx-0 px-0\\">
     <span class=\\"form-check form-switch\\">
-      <input id=\\"configuration-colortitlebar\\"
-             class=\\"form-check-input\\"
-             type=\\"checkbox\\"
+      <input
+        id=\\"configuration-colortitlebar\\"
+        class=\\"form-check-input\\"
+        type=\\"checkbox\\"
       >
-      <label class=\\"form-check-label cursor-pointer me-3\\"
-             for=\\"configuration-colortitlebar\\"
+      <label
+        class=\\"form-check-label cursor-pointer me-3\\"
+        for=\\"configuration-colortitlebar\\"
       >
         Color group titlebar
       </label>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap
index e8072f663..13e0dd305 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap
@@ -3,17 +3,19 @@
 exports[`<AlertGroupWidthConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"p-3 text-center\\">
-  <div class=\\"input-range-track\\"
-       style=\\"transform: scale(1); cursor: pointer;\\"
+  <div
+    class=\\"input-range-track\\"
+    style=\\"transform: scale(1); cursor: pointer;\\"
   >
-    <div class=\\"input-range-thumb\\"
-         style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-         tabindex=\\"0\\"
-         aria-valuemax=\\"800\\"
-         aria-valuemin=\\"300\\"
-         aria-valuenow=\\"420\\"
-         draggable=\\"false\\"
-         role=\\"slider\\"
+    <div
+      class=\\"input-range-thumb\\"
+      style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+      tabindex=\\"0\\"
+      aria-valuemax=\\"800\\"
+      aria-valuemin=\\"300\\"
+      aria-valuenow=\\"420\\"
+      draggable=\\"false\\"
+      role=\\"slider\\"
     >
       420
     </div>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AnimationsConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AnimationsConfiguration.test.tsx.snap
index dd456a19c..7a9d47fdb 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AnimationsConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AnimationsConfiguration.test.tsx.snap
@@ -5,13 +5,15 @@ exports[`<AnimationsConfiguration /> matches snapshot with default values 1`] =
 <div class=\\"mb-0\\">
   <div class=\\"form-check form-check-inline mx-0 px-0\\">
     <span class=\\"form-check form-switch\\">
-      <input id=\\"configuration-animations\\"
-             class=\\"form-check-input\\"
-             type=\\"checkbox\\"
-             checked
+      <input
+        id=\\"configuration-animations\\"
+        class=\\"form-check-input\\"
+        type=\\"checkbox\\"
+        checked
       >
-      <label class=\\"form-check-label cursor-pointer me-3\\"
-             for=\\"configuration-animations\\"
+      <label
+        class=\\"form-check-label cursor-pointer me-3\\"
+        for=\\"configuration-animations\\"
       >
         Enable animations
       </label>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap
index 48da34679..79ec0cd0f 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap
@@ -3,17 +3,19 @@
 exports[`<FetchConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"p-3 text-center\\">
-  <div class=\\"input-range-track\\"
-       style=\\"transform: scale(1); cursor: pointer;\\"
+  <div
+    class=\\"input-range-track\\"
+    style=\\"transform: scale(1); cursor: pointer;\\"
   >
-    <div class=\\"input-range-thumb\\"
-         style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-         tabindex=\\"0\\"
-         aria-valuemax=\\"120\\"
-         aria-valuemin=\\"10\\"
-         aria-valuenow=\\"30\\"
-         draggable=\\"false\\"
-         role=\\"slider\\"
+    <div
+      class=\\"input-range-thumb\\"
+      style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+      tabindex=\\"0\\"
+      aria-valuemax=\\"120\\"
+      aria-valuemin=\\"10\\"
+      aria-valuenow=\\"30\\"
+      draggable=\\"false\\"
+      role=\\"slider\\"
     >
       30s
     </div>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.tsx.snap
index 56d9ae124..104f532a2 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.tsx.snap
@@ -4,13 +4,15 @@ exports[`<FilterBarConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"form-check form-check-inline px-0 mx-0\\">
   <span class=\\"form-check form-switch\\">
-    <input id=\\"configuration-autohide\\"
-           class=\\"form-check-input\\"
-           type=\\"checkbox\\"
-           checked
+    <input
+      id=\\"configuration-autohide\\"
+      class=\\"form-check-input\\"
+      type=\\"checkbox\\"
+      checked
     >
-    <label class=\\"form-check-label cursor-pointer me-3\\"
-           for=\\"configuration-autohide\\"
+    <label
+      class=\\"form-check-label cursor-pointer me-3\\"
+      for=\\"configuration-autohide\\"
     >
       Hide filter bar and alert details when idle
     </label>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap
index 9b3f837f2..7b5904c7d 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap
@@ -6,10 +6,11 @@ exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
   <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
     <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0\\">
       <div class=\\" css-2b097c-container\\">
-        <span aria-live=\\"polite\\"
-              aria-atomic=\\"false\\"
-              aria-relevant=\\"additions text\\"
-              class=\\"css-1f43avz-a11yText-A11yText\\"
+        <span
+          aria-live=\\"polite\\"
+          aria-atomic=\\"false\\"
+          aria-relevant=\\"additions text\\"
+          class=\\"css-1f43avz-a11yText-A11yText\\"
         >
         </span>
         <div class=\\"react-select__control css-cat782-control\\">
@@ -18,19 +19,21 @@ exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
               Disable multi-grid
             </div>
             <div class=\\"css-ps6ina-Input\\">
-              <div class=\\"react-select__input\\"
-                   style=\\"display: inline-block;\\"
+              <div
+                class=\\"react-select__input\\"
+                style=\\"display: inline-block;\\"
               >
-                <input autocapitalize=\\"none\\"
-                       autocomplete=\\"off\\"
-                       autocorrect=\\"off\\"
-                       id=\\"react-select-configuration-grid-label-input\\"
-                       spellcheck=\\"false\\"
-                       tabindex=\\"0\\"
-                       type=\\"text\\"
-                       aria-autocomplete=\\"list\\"
-                       style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                       value
+                <input
+                  autocapitalize=\\"none\\"
+                  autocomplete=\\"off\\"
+                  autocorrect=\\"off\\"
+                  id=\\"react-select-configuration-grid-label-input\\"
+                  spellcheck=\\"false\\"
+                  tabindex=\\"0\\"
+                  type=\\"text\\"
+                  aria-autocomplete=\\"list\\"
+                  style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                  value
                 >
                 <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                 </div>
@@ -40,15 +43,17 @@ exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
           <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
             <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
             </span>
-            <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                 aria-hidden=\\"true\\"
+            <div
+              class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+              aria-hidden=\\"true\\"
             >
-              <svg height=\\"20\\"
-                   width=\\"20\\"
-                   viewbox=\\"0 0 20 20\\"
-                   aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   class=\\"css-tj5bde-Svg\\"
+              <svg
+                height=\\"20\\"
+                width=\\"20\\"
+                viewbox=\\"0 0 20 20\\"
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                class=\\"css-tj5bde-Svg\\"
               >
                 <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
                 </path>
@@ -60,12 +65,14 @@ exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
     </div>
     <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0\\">
       <span class=\\"form-check form-switch\\">
-        <input id=\\"configuration-multigrid-sort-reverse\\"
-               class=\\"form-check-input\\"
-               type=\\"checkbox\\"
+        <input
+          id=\\"configuration-multigrid-sort-reverse\\"
+          class=\\"form-check-input\\"
+          type=\\"checkbox\\"
         >
-        <label class=\\"form-check-label cursor-pointer\\"
-               for=\\"configuration-multigrid-sort-reverse\\"
+        <label
+          class=\\"form-check-label cursor-pointer\\"
+          for=\\"configuration-multigrid-sort-reverse\\"
         >
           Reverse order
         </label>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap
index f7151de6a..246fd4069 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap
@@ -4,10 +4,11 @@ exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"mb-2\\">
   <div class=\\" css-2b097c-container\\">
-    <span aria-live=\\"polite\\"
-          aria-atomic=\\"false\\"
-          aria-relevant=\\"additions text\\"
-          class=\\"css-1f43avz-a11yText-A11yText\\"
+    <span
+      aria-live=\\"polite\\"
+      aria-atomic=\\"false\\"
+      aria-relevant=\\"additions text\\"
+      class=\\"css-1f43avz-a11yText-A11yText\\"
     >
     </span>
     <div class=\\"react-select__control css-cat782-control\\">
@@ -16,19 +17,21 @@ exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
           Automatic theme, follow browser preference
         </div>
         <div class=\\"css-ps6ina-Input\\">
-          <div class=\\"react-select__input\\"
-               style=\\"display: inline-block;\\"
+          <div
+            class=\\"react-select__input\\"
+            style=\\"display: inline-block;\\"
           >
-            <input autocapitalize=\\"none\\"
-                   autocomplete=\\"off\\"
-                   autocorrect=\\"off\\"
-                   id=\\"react-select-configuration-theme-input\\"
-                   spellcheck=\\"false\\"
-                   tabindex=\\"0\\"
-                   type=\\"text\\"
-                   aria-autocomplete=\\"list\\"
-                   style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                   value
+            <input
+              autocapitalize=\\"none\\"
+              autocomplete=\\"off\\"
+              autocorrect=\\"off\\"
+              id=\\"react-select-configuration-theme-input\\"
+              spellcheck=\\"false\\"
+              tabindex=\\"0\\"
+              type=\\"text\\"
+              aria-autocomplete=\\"list\\"
+              style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+              value
             >
             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
             </div>
@@ -38,15 +41,17 @@ exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
       <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
         <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
         </span>
-        <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-             aria-hidden=\\"true\\"
+        <div
+          class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+          aria-hidden=\\"true\\"
         >
-          <svg height=\\"20\\"
-               width=\\"20\\"
-               viewbox=\\"0 0 20 20\\"
-               aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               class=\\"css-tj5bde-Svg\\"
+          <svg
+            height=\\"20\\"
+            width=\\"20\\"
+            viewbox=\\"0 0 20 20\\"
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            class=\\"css-tj5bde-Svg\\"
           >
             <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
             </path>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap
index b3ce95255..631108a4d 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap
@@ -5,8 +5,9 @@ exports[`<Configuration /> matches snapshot 1`] = `
 <div class=\\"accordion\\">
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Refresh interval
       </button>
@@ -14,17 +15,19 @@ exports[`<Configuration /> matches snapshot 1`] = `
     <div class=\\"accordion-collapse show\\">
       <div class=\\"accordion-body\\">
         <div class=\\"p-3 text-center\\">
-          <div class=\\"input-range-track\\"
-               style=\\"transform: scale(1); cursor: pointer;\\"
+          <div
+            class=\\"input-range-track\\"
+            style=\\"transform: scale(1); cursor: pointer;\\"
           >
-            <div class=\\"input-range-thumb\\"
-                 style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-                 tabindex=\\"0\\"
-                 aria-valuemax=\\"120\\"
-                 aria-valuemin=\\"10\\"
-                 aria-valuenow=\\"30\\"
-                 draggable=\\"false\\"
-                 role=\\"slider\\"
+            <div
+              class=\\"input-range-thumb\\"
+              style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+              tabindex=\\"0\\"
+              aria-valuemax=\\"120\\"
+              aria-valuemin=\\"10\\"
+              aria-valuenow=\\"30\\"
+              draggable=\\"false\\"
+              role=\\"slider\\"
             >
               30s
             </div>
@@ -35,8 +38,9 @@ exports[`<Configuration /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Filter bar configuration
       </button>
@@ -45,13 +49,15 @@ exports[`<Configuration /> matches snapshot 1`] = `
       <div class=\\"accordion-body\\">
         <div class=\\"form-check form-check-inline px-0 mx-0\\">
           <span class=\\"form-check form-switch\\">
-            <input id=\\"configuration-autohide\\"
-                   class=\\"form-check-input\\"
-                   type=\\"checkbox\\"
-                   checked
+            <input
+              id=\\"configuration-autohide\\"
+              class=\\"form-check-input\\"
+              type=\\"checkbox\\"
+              checked
             >
-            <label class=\\"form-check-label cursor-pointer me-3\\"
-                   for=\\"configuration-autohide\\"
+            <label
+              class=\\"form-check-label cursor-pointer me-3\\"
+              for=\\"configuration-autohide\\"
             >
               Hide filter bar and alert details when idle
             </label>
@@ -62,8 +68,9 @@ exports[`<Configuration /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Theme
       </button>
@@ -72,10 +79,11 @@ exports[`<Configuration /> matches snapshot 1`] = `
       <div class=\\"accordion-body\\">
         <div class=\\"mb-2\\">
           <div class=\\" css-2b097c-container\\">
-            <span aria-live=\\"polite\\"
-                  aria-atomic=\\"false\\"
-                  aria-relevant=\\"additions text\\"
-                  class=\\"css-1f43avz-a11yText-A11yText\\"
+            <span
+              aria-live=\\"polite\\"
+              aria-atomic=\\"false\\"
+              aria-relevant=\\"additions text\\"
+              class=\\"css-1f43avz-a11yText-A11yText\\"
             >
             </span>
             <div class=\\"react-select__control css-cat782-control\\">
@@ -84,19 +92,21 @@ exports[`<Configuration /> matches snapshot 1`] = `
                   Automatic theme, follow browser preference
                 </div>
                 <div class=\\"css-ps6ina-Input\\">
-                  <div class=\\"react-select__input\\"
-                       style=\\"display: inline-block;\\"
+                  <div
+                    class=\\"react-select__input\\"
+                    style=\\"display: inline-block;\\"
                   >
-                    <input autocapitalize=\\"none\\"
-                           autocomplete=\\"off\\"
-                           autocorrect=\\"off\\"
-                           id=\\"react-select-configuration-theme-input\\"
-                           spellcheck=\\"false\\"
-                           tabindex=\\"0\\"
-                           type=\\"text\\"
-                           aria-autocomplete=\\"list\\"
-                           style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                           value
+                    <input
+                      autocapitalize=\\"none\\"
+                      autocomplete=\\"off\\"
+                      autocorrect=\\"off\\"
+                      id=\\"react-select-configuration-theme-input\\"
+                      spellcheck=\\"false\\"
+                      tabindex=\\"0\\"
+                      type=\\"text\\"
+                      aria-autocomplete=\\"list\\"
+                      style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                      value
                     >
                     <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                     </div>
@@ -106,15 +116,17 @@ exports[`<Configuration /> matches snapshot 1`] = `
               <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                 <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                 </span>
-                <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                     aria-hidden=\\"true\\"
+                <div
+                  class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                  aria-hidden=\\"true\\"
                 >
-                  <svg height=\\"20\\"
-                       width=\\"20\\"
-                       viewbox=\\"0 0 20 20\\"
-                       aria-hidden=\\"true\\"
-                       focusable=\\"false\\"
-                       class=\\"css-tj5bde-Svg\\"
+                  <svg
+                    height=\\"20\\"
+                    width=\\"20\\"
+                    viewbox=\\"0 0 20 20\\"
+                    aria-hidden=\\"true\\"
+                    focusable=\\"false\\"
+                    class=\\"css-tj5bde-Svg\\"
                   >
                     <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
                     </path>
@@ -127,12 +139,14 @@ exports[`<Configuration /> matches snapshot 1`] = `
         <div class=\\"mb-0\\">
           <div class=\\"form-check form-check-inline mx-0 px-0\\">
             <span class=\\"form-check form-switch\\">
-              <input id=\\"configuration-colortitlebar\\"
-                     class=\\"form-check-input\\"
-                     type=\\"checkbox\\"
+              <input
+                id=\\"configuration-colortitlebar\\"
+                class=\\"form-check-input\\"
+                type=\\"checkbox\\"
               >
-              <label class=\\"form-check-label cursor-pointer me-3\\"
-                     for=\\"configuration-colortitlebar\\"
+              <label
+                class=\\"form-check-label cursor-pointer me-3\\"
+                for=\\"configuration-colortitlebar\\"
               >
                 Color group titlebar
               </label>
@@ -142,13 +156,15 @@ exports[`<Configuration /> matches snapshot 1`] = `
         <div class=\\"mb-0\\">
           <div class=\\"form-check form-check-inline mx-0 px-0\\">
             <span class=\\"form-check form-switch\\">
-              <input id=\\"configuration-animations\\"
-                     class=\\"form-check-input\\"
-                     type=\\"checkbox\\"
-                     checked
+              <input
+                id=\\"configuration-animations\\"
+                class=\\"form-check-input\\"
+                type=\\"checkbox\\"
+                checked
               >
-              <label class=\\"form-check-label cursor-pointer me-3\\"
-                     for=\\"configuration-animations\\"
+              <label
+                class=\\"form-check-label cursor-pointer me-3\\"
+                for=\\"configuration-animations\\"
               >
                 Enable animations
               </label>
@@ -160,8 +176,9 @@ exports[`<Configuration /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Minimal alert group width
       </button>
@@ -169,17 +186,19 @@ exports[`<Configuration /> matches snapshot 1`] = `
     <div class=\\"accordion-collapse show\\">
       <div class=\\"accordion-body\\">
         <div class=\\"p-3 text-center\\">
-          <div class=\\"input-range-track\\"
-               style=\\"transform: scale(1); cursor: pointer;\\"
+          <div
+            class=\\"input-range-track\\"
+            style=\\"transform: scale(1); cursor: pointer;\\"
           >
-            <div class=\\"input-range-thumb\\"
-                 style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-                 tabindex=\\"0\\"
-                 aria-valuemax=\\"800\\"
-                 aria-valuemin=\\"300\\"
-                 aria-valuenow=\\"420\\"
-                 draggable=\\"false\\"
-                 role=\\"slider\\"
+            <div
+              class=\\"input-range-thumb\\"
+              style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+              tabindex=\\"0\\"
+              aria-valuemax=\\"800\\"
+              aria-valuemin=\\"300\\"
+              aria-valuenow=\\"420\\"
+              draggable=\\"false\\"
+              role=\\"slider\\"
             >
               420
             </div>
@@ -190,8 +209,9 @@ exports[`<Configuration /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Default number of alerts to show per group
       </button>
@@ -199,17 +219,19 @@ exports[`<Configuration /> matches snapshot 1`] = `
     <div class=\\"accordion-collapse show\\">
       <div class=\\"accordion-body\\">
         <div class=\\"p-3 text-center\\">
-          <div class=\\"input-range-track\\"
-               style=\\"transform: scale(1); cursor: pointer;\\"
+          <div
+            class=\\"input-range-track\\"
+            style=\\"transform: scale(1); cursor: pointer;\\"
           >
-            <div class=\\"input-range-thumb\\"
-                 style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-                 tabindex=\\"0\\"
-                 aria-valuemax=\\"10\\"
-                 aria-valuemin=\\"1\\"
-                 aria-valuenow=\\"5\\"
-                 draggable=\\"false\\"
-                 role=\\"slider\\"
+            <div
+              class=\\"input-range-thumb\\"
+              style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+              tabindex=\\"0\\"
+              aria-valuemax=\\"10\\"
+              aria-valuemin=\\"1\\"
+              aria-valuenow=\\"5\\"
+              draggable=\\"false\\"
+              role=\\"slider\\"
             >
               5
             </div>
@@ -220,8 +242,9 @@ exports[`<Configuration /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Default alert group display
       </button>
@@ -230,10 +253,11 @@ exports[`<Configuration /> matches snapshot 1`] = `
       <div class=\\"accordion-body\\">
         <div class=\\"mb-0\\">
           <div class=\\" css-2b097c-container\\">
-            <span aria-live=\\"polite\\"
-                  aria-atomic=\\"false\\"
-                  aria-relevant=\\"additions text\\"
-                  class=\\"css-1f43avz-a11yText-A11yText\\"
+            <span
+              aria-live=\\"polite\\"
+              aria-atomic=\\"false\\"
+              aria-relevant=\\"additions text\\"
+              class=\\"css-1f43avz-a11yText-A11yText\\"
             >
             </span>
             <div class=\\"react-select__control css-cat782-control\\">
@@ -242,19 +266,21 @@ exports[`<Configuration /> matches snapshot 1`] = `
                   Collapse on mobile
                 </div>
                 <div class=\\"css-ps6ina-Input\\">
-                  <div class=\\"react-select__input\\"
-                       style=\\"display: inline-block;\\"
+                  <div
+                    class=\\"react-select__input\\"
+                    style=\\"display: inline-block;\\"
                   >
-                    <input autocapitalize=\\"none\\"
-                           autocomplete=\\"off\\"
-                           autocorrect=\\"off\\"
-                           id=\\"react-select-configuration-collapse-input\\"
-                           spellcheck=\\"false\\"
-                           tabindex=\\"0\\"
-                           type=\\"text\\"
-                           aria-autocomplete=\\"list\\"
-                           style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                           value
+                    <input
+                      autocapitalize=\\"none\\"
+                      autocomplete=\\"off\\"
+                      autocorrect=\\"off\\"
+                      id=\\"react-select-configuration-collapse-input\\"
+                      spellcheck=\\"false\\"
+                      tabindex=\\"0\\"
+                      type=\\"text\\"
+                      aria-autocomplete=\\"list\\"
+                      style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                      value
                     >
                     <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                     </div>
@@ -264,15 +290,17 @@ exports[`<Configuration /> matches snapshot 1`] = `
               <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                 <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                 </span>
-                <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                     aria-hidden=\\"true\\"
+                <div
+                  class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                  aria-hidden=\\"true\\"
                 >
-                  <svg height=\\"20\\"
-                       width=\\"20\\"
-                       viewbox=\\"0 0 20 20\\"
-                       aria-hidden=\\"true\\"
-                       focusable=\\"false\\"
-                       class=\\"css-tj5bde-Svg\\"
+                  <svg
+                    height=\\"20\\"
+                    width=\\"20\\"
+                    viewbox=\\"0 0 20 20\\"
+                    aria-hidden=\\"true\\"
+                    focusable=\\"false\\"
+                    class=\\"css-tj5bde-Svg\\"
                   >
                     <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
                     </path>
@@ -287,8 +315,9 @@ exports[`<Configuration /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Grid sort order
       </button>
@@ -299,10 +328,11 @@ exports[`<Configuration /> matches snapshot 1`] = `
           <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
             <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
               <div class=\\" css-2b097c-container\\">
-                <span aria-live=\\"polite\\"
-                      aria-atomic=\\"false\\"
-                      aria-relevant=\\"additions text\\"
-                      class=\\"css-1f43avz-a11yText-A11yText\\"
+                <span
+                  aria-live=\\"polite\\"
+                  aria-atomic=\\"false\\"
+                  aria-relevant=\\"additions text\\"
+                  class=\\"css-1f43avz-a11yText-A11yText\\"
                 >
                 </span>
                 <div class=\\"react-select__control css-cat782-control\\">
@@ -311,19 +341,21 @@ exports[`<Configuration /> matches snapshot 1`] = `
                       Use defaults from karma config file
                     </div>
                     <div class=\\"css-ps6ina-Input\\">
-                      <div class=\\"react-select__input\\"
-                           style=\\"display: inline-block;\\"
+                      <div
+                        class=\\"react-select__input\\"
+                        style=\\"display: inline-block;\\"
                       >
-                        <input autocapitalize=\\"none\\"
-                               autocomplete=\\"off\\"
-                               autocorrect=\\"off\\"
-                               id=\\"react-select-configuration-sort-order-input\\"
-                               spellcheck=\\"false\\"
-                               tabindex=\\"0\\"
-                               type=\\"text\\"
-                               aria-autocomplete=\\"list\\"
-                               style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                               value
+                        <input
+                          autocapitalize=\\"none\\"
+                          autocomplete=\\"off\\"
+                          autocorrect=\\"off\\"
+                          id=\\"react-select-configuration-sort-order-input\\"
+                          spellcheck=\\"false\\"
+                          tabindex=\\"0\\"
+                          type=\\"text\\"
+                          aria-autocomplete=\\"list\\"
+                          style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                          value
                         >
                         <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                         </div>
@@ -333,15 +365,17 @@ exports[`<Configuration /> matches snapshot 1`] = `
                   <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                     <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                     </span>
-                    <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                         aria-hidden=\\"true\\"
+                    <div
+                      class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                      aria-hidden=\\"true\\"
                     >
-                      <svg height=\\"20\\"
-                           width=\\"20\\"
-                           viewbox=\\"0 0 20 20\\"
-                           aria-hidden=\\"true\\"
-                           focusable=\\"false\\"
-                           class=\\"css-tj5bde-Svg\\"
+                      <svg
+                        height=\\"20\\"
+                        width=\\"20\\"
+                        viewbox=\\"0 0 20 20\\"
+                        aria-hidden=\\"true\\"
+                        focusable=\\"false\\"
+                        class=\\"css-tj5bde-Svg\\"
                       >
                         <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
                         </path>
@@ -358,8 +392,9 @@ exports[`<Configuration /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Multi-grid source label
       </button>
@@ -370,10 +405,11 @@ exports[`<Configuration /> matches snapshot 1`] = `
           <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
             <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0\\">
               <div class=\\" css-2b097c-container\\">
-                <span aria-live=\\"polite\\"
-                      aria-atomic=\\"false\\"
-                      aria-relevant=\\"additions text\\"
-                      class=\\"css-1f43avz-a11yText-A11yText\\"
+                <span
+                  aria-live=\\"polite\\"
+                  aria-atomic=\\"false\\"
+                  aria-relevant=\\"additions text\\"
+                  class=\\"css-1f43avz-a11yText-A11yText\\"
                 >
                 </span>
                 <div class=\\"react-select__control css-cat782-control\\">
@@ -382,19 +418,21 @@ exports[`<Configuration /> matches snapshot 1`] = `
                       Disable multi-grid
                     </div>
                     <div class=\\"css-ps6ina-Input\\">
-                      <div class=\\"react-select__input\\"
-                           style=\\"display: inline-block;\\"
+                      <div
+                        class=\\"react-select__input\\"
+                        style=\\"display: inline-block;\\"
                       >
-                        <input autocapitalize=\\"none\\"
-                               autocomplete=\\"off\\"
-                               autocorrect=\\"off\\"
-                               id=\\"react-select-configuration-grid-label-input\\"
-                               spellcheck=\\"false\\"
-                               tabindex=\\"0\\"
-                               type=\\"text\\"
-                               aria-autocomplete=\\"list\\"
-                               style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                               value
+                        <input
+                          autocapitalize=\\"none\\"
+                          autocomplete=\\"off\\"
+                          autocorrect=\\"off\\"
+                          id=\\"react-select-configuration-grid-label-input\\"
+                          spellcheck=\\"false\\"
+                          tabindex=\\"0\\"
+                          type=\\"text\\"
+                          aria-autocomplete=\\"list\\"
+                          style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                          value
                         >
                         <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                         </div>
@@ -404,15 +442,17 @@ exports[`<Configuration /> matches snapshot 1`] = `
                   <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                     <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                     </span>
-                    <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                         aria-hidden=\\"true\\"
+                    <div
+                      class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                      aria-hidden=\\"true\\"
                     >
-                      <svg height=\\"20\\"
-                           width=\\"20\\"
-                           viewbox=\\"0 0 20 20\\"
-                           aria-hidden=\\"true\\"
-                           focusable=\\"false\\"
-                           class=\\"css-tj5bde-Svg\\"
+                      <svg
+                        height=\\"20\\"
+                        width=\\"20\\"
+                        viewbox=\\"0 0 20 20\\"
+                        aria-hidden=\\"true\\"
+                        focusable=\\"false\\"
+                        class=\\"css-tj5bde-Svg\\"
                       >
                         <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
                         </path>
@@ -424,12 +464,14 @@ exports[`<Configuration /> matches snapshot 1`] = `
             </div>
             <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0\\">
               <span class=\\"form-check form-switch\\">
-                <input id=\\"configuration-multigrid-sort-reverse\\"
-                       class=\\"form-check-input\\"
-                       type=\\"checkbox\\"
+                <input
+                  id=\\"configuration-multigrid-sort-reverse\\"
+                  class=\\"form-check-input\\"
+                  type=\\"checkbox\\"
                 >
-                <label class=\\"form-check-label cursor-pointer\\"
-                       for=\\"configuration-multigrid-sort-reverse\\"
+                <label
+                  class=\\"form-check-label cursor-pointer\\"
+                  for=\\"configuration-multigrid-sort-reverse\\"
                 >
                   Reverse order
                 </label>
diff --git a/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap b/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap
index 65f2f3d40..c08beae4e 100644
--- a/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap
+++ b/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap
@@ -5,8 +5,9 @@ exports[`<Help /> matches snapshot 1`] = `
 <div class=\\"accordion\\">
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Fiter operators
       </button>
@@ -146,8 +147,9 @@ exports[`<Help /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Filtering using alert labels
       </button>
@@ -318,8 +320,9 @@ exports[`<Help /> matches snapshot 1`] = `
   </div>
   <div class=\\"accordion-item\\">
     <h2 class=\\"accordion-header\\">
-      <button class=\\"accordion-button \\"
-              type=\\"button\\"
+      <button
+        class=\\"accordion-button \\"
+        type=\\"button\\"
       >
         Filtering alerts using special filters
       </button>
@@ -760,17 +763,19 @@ exports[`<Help /> matches snapshot 1`] = `
               </kbd>
             </div>
             <div class=\\"my-1 alert alert-secondary p-2\\">
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"info-circle\\"
-                   class=\\"svg-inline--fa fa-info-circle fa-w-16 me-1\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 512 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"info-circle\\"
+                class=\\"svg-inline--fa fa-info-circle fa-w-16 me-1\\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 512 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\\"
                 >
                 </path>
               </svg>
@@ -835,17 +840,19 @@ exports[`<Help /> matches snapshot 1`] = `
               </kbd>
             </div>
             <div class=\\"my-1 alert alert-secondary p-2\\">
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"info-circle\\"
-                   class=\\"svg-inline--fa fa-info-circle fa-w-16 me-1\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 512 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"info-circle\\"
+                class=\\"svg-inline--fa fa-info-circle fa-w-16 me-1\\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 512 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\\"
                 >
                 </path>
               </svg>
diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap
index 4842e8864..a91c5a840 100644
--- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap
+++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap
@@ -11,8 +11,9 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
       <span class=\\"nav-item nav-link cursor-pointer mx-1 px-2 components-tab-inactive\\">
         Help
       </span>
-      <button type=\\"button\\"
-              class=\\"btn-close my-auto\\"
+      <button
+        type=\\"button\\"
+        class=\\"btn-close my-auto\\"
       >
       </button>
     </nav>
@@ -21,8 +22,9 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
     <div class=\\"accordion\\">
       <div class=\\"accordion-item\\">
         <h2 class=\\"accordion-header\\">
-          <button class=\\"accordion-button \\"
-                  type=\\"button\\"
+          <button
+            class=\\"accordion-button \\"
+            type=\\"button\\"
           >
             Refresh interval
           </button>
@@ -30,17 +32,19 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
         <div class=\\"accordion-collapse show\\">
           <div class=\\"accordion-body\\">
             <div class=\\"p-3 text-center\\">
-              <div class=\\"input-range-track\\"
-                   style=\\"transform: scale(1); cursor: pointer;\\"
+              <div
+                class=\\"input-range-track\\"
+                style=\\"transform: scale(1); cursor: pointer;\\"
               >
-                <div class=\\"input-range-thumb\\"
-                     style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-                     tabindex=\\"0\\"
-                     aria-valuemax=\\"120\\"
-                     aria-valuemin=\\"10\\"
-                     aria-valuenow=\\"30\\"
-                     draggable=\\"false\\"
-                     role=\\"slider\\"
+                <div
+                  class=\\"input-range-thumb\\"
+                  style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                  tabindex=\\"0\\"
+                  aria-valuemax=\\"120\\"
+                  aria-valuemin=\\"10\\"
+                  aria-valuenow=\\"30\\"
+                  draggable=\\"false\\"
+                  role=\\"slider\\"
                 >
                   30s
                 </div>
@@ -51,8 +55,9 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
       </div>
       <div class=\\"accordion-item\\">
         <h2 class=\\"accordion-header\\">
-          <button class=\\"accordion-button \\"
-                  type=\\"button\\"
+          <button
+            class=\\"accordion-button \\"
+            type=\\"button\\"
           >
             Filter bar configuration
           </button>
@@ -61,13 +66,15 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
           <div class=\\"accordion-body\\">
             <div class=\\"form-check form-check-inline px-0 mx-0\\">
               <span class=\\"form-check form-switch\\">
-                <input id=\\"configuration-autohide\\"
-                       class=\\"form-check-input\\"
-                       type=\\"checkbox\\"
-                       checked
+                <input
+                  id=\\"configuration-autohide\\"
+                  class=\\"form-check-input\\"
+                  type=\\"checkbox\\"
+                  checked
                 >
-                <label class=\\"form-check-label cursor-pointer me-3\\"
-                       for=\\"configuration-autohide\\"
+                <label
+                  class=\\"form-check-label cursor-pointer me-3\\"
+                  for=\\"configuration-autohide\\"
                 >
                   Hide filter bar and alert details when idle
                 </label>
@@ -78,8 +85,9 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
       </div>
       <div class=\\"accordion-item\\">
         <h2 class=\\"accordion-header\\">
-          <button class=\\"accordion-button \\"
-                  type=\\"button\\"
+          <button
+            class=\\"accordion-button \\"
+            type=\\"button\\"
           >
             Theme
           </button>
@@ -88,10 +96,11 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
           <div class=\\"accordion-body\\">
             <div class=\\"mb-2\\">
               <div class=\\" css-2b097c-container\\">
-                <span aria-live=\\"polite\\"
-                      aria-atomic=\\"false\\"
-                      aria-relevant=\\"additions text\\"
-                      class=\\"css-1f43avz-a11yText-A11yText\\"
+                <span
+                  aria-live=\\"polite\\"
+                  aria-atomic=\\"false\\"
+                  aria-relevant=\\"additions text\\"
+                  class=\\"css-1f43avz-a11yText-A11yText\\"
                 >
                 </span>
                 <div class=\\"react-select__control css-cat782-control\\">
@@ -100,19 +109,21 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                       Automatic theme, follow browser preference
                     </div>
                     <div class=\\"css-ps6ina-Input\\">
-                      <div class=\\"react-select__input\\"
-                           style=\\"display: inline-block;\\"
+                      <div
+                        class=\\"react-select__input\\"
+                        style=\\"display: inline-block;\\"
                       >
-                        <input autocapitalize=\\"none\\"
-                               autocomplete=\\"off\\"
-                               autocorrect=\\"off\\"
-                               id=\\"react-select-configuration-theme-input\\"
-                               spellcheck=\\"false\\"
-                               tabindex=\\"0\\"
-                               type=\\"text\\"
-                               aria-autocomplete=\\"list\\"
-                               style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                               value
+                        <input
+                          autocapitalize=\\"none\\"
+                          autocomplete=\\"off\\"
+                          autocorrect=\\"off\\"
+                          id=\\"react-select-configuration-theme-input\\"
+                          spellcheck=\\"false\\"
+                          tabindex=\\"0\\"
+                          type=\\"text\\"
+                          aria-autocomplete=\\"list\\"
+                          style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                          value
                         >
                         <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                         </div>
@@ -122,15 +133,17 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                     <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                     </span>
-                    <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                         aria-hidden=\\"true\\"
+                    <div
+                      class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                      aria-hidden=\\"true\\"
                     >
-                      <svg height=\\"20\\"
-                           width=\\"20\\"
-                           viewbox=\\"0 0 20 20\\"
-                           aria-hidden=\\"true\\"
-                           focusable=\\"false\\"
-                           class=\\"css-tj5bde-Svg\\"
+                      <svg
+                        height=\\"20\\"
+                        width=\\"20\\"
+                        viewbox=\\"0 0 20 20\\"
+                        aria-hidden=\\"true\\"
+                        focusable=\\"false\\"
+                        class=\\"css-tj5bde-Svg\\"
                       >
                         <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
                         </path>
@@ -143,12 +156,14 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
             <div class=\\"mb-0\\">
               <div class=\\"form-check form-check-inline mx-0 px-0\\">
                 <span class=\\"form-check form-switch\\">
-                  <input id=\\"configuration-colortitlebar\\"
-                         class=\\"form-check-input\\"
-                         type=\\"checkbox\\"
+                  <input
+                    id=\\"configuration-colortitlebar\\"
+                    class=\\"form-check-input\\"
+                    type=\\"checkbox\\"
                   >
-                  <label class=\\"form-check-label cursor-pointer me-3\\"
-                         for=\\"configuration-colortitlebar\\"
+                  <label
+                    class=\\"form-check-label cursor-pointer me-3\\"
+                    for=\\"configuration-colortitlebar\\"
                   >
                     Color group titlebar
                   </label>
@@ -158,13 +173,15 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
             <div class=\\"mb-0\\">
               <div class=\\"form-check form-check-inline mx-0 px-0\\">
                 <span class=\\"form-check form-switch\\">
-                  <input id=\\"configuration-animations\\"
-                         class=\\"form-check-input\\"
-                         type=\\"checkbox\\"
-                         checked
+                  <input
+                    id=\\"configuration-animations\\"
+                    class=\\"form-check-input\\"
+                    type=\\"checkbox\\"
+                    checked
                   >
-                  <label class=\\"form-check-label cursor-pointer me-3\\"
-                         for=\\"configuration-animations\\"
+                  <label
+                    class=\\"form-check-label cursor-pointer me-3\\"
+                    for=\\"configuration-animations\\"
                   >
                     Enable animations
                   </label>
@@ -176,8 +193,9 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
       </div>
       <div class=\\"accordion-item\\">
         <h2 class=\\"accordion-header\\">
-          <button class=\\"accordion-button \\"
-                  type=\\"button\\"
+          <button
+            class=\\"accordion-button \\"
+            type=\\"button\\"
           >
             Minimal alert group width
           </button>
@@ -185,17 +203,19 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
         <div class=\\"accordion-collapse show\\">
           <div class=\\"accordion-body\\">
             <div class=\\"p-3 text-center\\">
-              <div class=\\"input-range-track\\"
-                   style=\\"transform: scale(1); cursor: pointer;\\"
+              <div
+                class=\\"input-range-track\\"
+                style=\\"transform: scale(1); cursor: pointer;\\"
               >
-                <div class=\\"input-range-thumb\\"
-                     style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-                     tabindex=\\"0\\"
-                     aria-valuemax=\\"800\\"
-                     aria-valuemin=\\"300\\"
-                     aria-valuenow=\\"420\\"
-                     draggable=\\"false\\"
-                     role=\\"slider\\"
+                <div
+                  class=\\"input-range-thumb\\"
+                  style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                  tabindex=\\"0\\"
+                  aria-valuemax=\\"800\\"
+                  aria-valuemin=\\"300\\"
+                  aria-valuenow=\\"420\\"
+                  draggable=\\"false\\"
+                  role=\\"slider\\"
                 >
                   420
                 </div>
@@ -206,8 +226,9 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
       </div>
       <div class=\\"accordion-item\\">
         <h2 class=\\"accordion-header\\">
-          <button class=\\"accordion-button \\"
-                  type=\\"button\\"
+          <button
+            class=\\"accordion-button \\"
+            type=\\"button\\"
           >
             Default number of alerts to show per group
           </button>
@@ -215,17 +236,19 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
         <div class=\\"accordion-collapse show\\">
           <div class=\\"accordion-body\\">
             <div class=\\"p-3 text-center\\">
-              <div class=\\"input-range-track\\"
-                   style=\\"transform: scale(1); cursor: pointer;\\"
+              <div
+                class=\\"input-range-track\\"
+                style=\\"transform: scale(1); cursor: pointer;\\"
               >
-                <div class=\\"input-range-thumb\\"
-                     style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-                     tabindex=\\"0\\"
-                     aria-valuemax=\\"10\\"
-                     aria-valuemin=\\"1\\"
-                     aria-valuenow=\\"5\\"
-                     draggable=\\"false\\"
-                     role=\\"slider\\"
+                <div
+                  class=\\"input-range-thumb\\"
+                  style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                  tabindex=\\"0\\"
+                  aria-valuemax=\\"10\\"
+                  aria-valuemin=\\"1\\"
+                  aria-valuenow=\\"5\\"
+                  draggable=\\"false\\"
+                  role=\\"slider\\"
                 >
                   5
                 </div>
@@ -236,8 +259,9 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
       </div>
       <div class=\\"accordion-item\\">
         <h2 class=\\"accordion-header\\">
-          <button class=\\"accordion-button \\"
-                  type=\\"button\\"
+          <button
+            class=\\"accordion-button \\"
+            type=\\"button\\"
           >
             Default alert group display
           </button>
@@ -246,10 +270,11 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
           <div class=\\"accordion-body\\">
             <div class=\\"mb-0\\">
               <div class=\\" css-2b097c-container\\">
-                <span aria-live=\\"polite\\"
-                      aria-atomic=\\"false\\"
-                      aria-relevant=\\"additions text\\"
-                      class=\\"css-1f43avz-a11yText-A11yText\\"
+                <span
+                  aria-live=\\"polite\\"
+                  aria-atomic=\\"false\\"
+                  aria-relevant=\\"additions text\\"
+                  class=\\"css-1f43avz-a11yText-A11yText\\"
                 >
                 </span>
                 <div class=\\"react-select__control css-cat782-control\\">
@@ -258,19 +283,21 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                       Collapse on mobile
                     </div>
                     <div class=\\"css-ps6ina-Input\\">
-                      <div class=\\"react-select__input\\"
-                           style=\\"display: inline-block;\\"
+                      <div
+                        class=\\"react-select__input\\"
+                        style=\\"display: inline-block;\\"
                       >
-                        <input autocapitalize=\\"none\\"
-                               autocomplete=\\"off\\"
-                               autocorrect=\\"off\\"
-                               id=\\"react-select-configuration-collapse-input\\"
-                               spellcheck=\\"false\\"
-                               tabindex=\\"0\\"
-                               type=\\"text\\"
-                               aria-autocomplete=\\"list\\"
-                               style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                               value
+                        <input
+                          autocapitalize=\\"none\\"
+                          autocomplete=\\"off\\"
+                          autocorrect=\\"off\\"
+                          id=\\"react-select-configuration-collapse-input\\"
+                          spellcheck=\\"false\\"
+                          tabindex=\\"0\\"
+                          type=\\"text\\"
+                          aria-autocomplete=\\"list\\"
+                          style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                          value
                         >
                         <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                         </div>
@@ -280,15 +307,17 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                     <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                     </span>
-                    <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                         aria-hidden=\\"true\\"
+                    <div
+                      class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                      aria-hidden=\\"true\\"
                     >
-                      <svg height=\\"20\\"
-                           width=\\"20\\"
-                           viewbox=\\"0 0 20 20\\"
-                           aria-hidden=\\"true\\"
-                           focusable=\\"false\\"
-                           class=\\"css-tj5bde-Svg\\"
+                      <svg
+                        height=\\"20\\"
+                        width=\\"20\\"
+                        viewbox=\\"0 0 20 20\\"
+                        aria-hidden=\\"true\\"
+                        focusable=\\"false\\"
+                        class=\\"css-tj5bde-Svg\\"
                       >
                         <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
                         </path>
@@ -303,8 +332,9 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
       </div>
       <div class=\\"accordion-item\\">
         <h2 class=\\"accordion-header\\">
-          <button class=\\"accordion-button \\"
-                  type=\\"button\\"
+          <button
+            class=\\"accordion-button \\"
+            type=\\"button\\"
           >
             Grid sort order
           </button>
@@ -315,10 +345,11 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
               <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
                 <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
                   <div class=\\" css-2b097c-container\\">
-                    <span aria-live=\\"polite\\"
-                          aria-atomic=\\"false\\"
-                          aria-relevant=\\"additions text\\"
-                          class=\\"css-1f43avz-a11yText-A11yText\\"
+                    <span
+                      aria-live=\\"polite\\"
+                      aria-atomic=\\"false\\"
+                      aria-relevant=\\"additions text\\"
+                      class=\\"css-1f43avz-a11yText-A11yText\\"
                     >
                     </span>
                     <div class=\\"react-select__control css-cat782-control\\">
@@ -327,19 +358,21 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                           Use defaults from karma config file
                         </div>
                         <div class=\\"css-ps6ina-Input\\">
-                          <div class=\\"react-select__input\\"
-                               style=\\"display: inline-block;\\"
+                          <div
+                            class=\\"react-select__input\\"
+                            style=\\"display: inline-block;\\"
                           >
-                            <input autocapitalize=\\"none\\"
-                                   autocomplete=\\"off\\"
-                                   autocorrect=\\"off\\"
-                                   id=\\"react-select-configuration-sort-order-input\\"
-                                   spellcheck=\\"false\\"
-                                   tabindex=\\"0\\"
-                                   type=\\"text\\"
-                                   aria-autocomplete=\\"list\\"
-                                   style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                                   value
+                            <input
+                              autocapitalize=\\"none\\"
+                              autocomplete=\\"off\\"
+                              autocorrect=\\"off\\"
+                              id=\\"react-select-configuration-sort-order-input\\"
+                              spellcheck=\\"false\\"
+                              tabindex=\\"0\\"
+                              type=\\"text\\"
+                              aria-autocomplete=\\"list\\"
+                              style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                              value
                             >
                             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                             </div>
@@ -349,15 +382,17 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                       <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                         <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                         </span>
-                        <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                             aria-hidden=\\"true\\"
+                        <div
+                          class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                          aria-hidden=\\"true\\"
                         >
-                          <svg height=\\"20\\"
-                               width=\\"20\\"
-                               viewbox=\\"0 0 20 20\\"
-                               aria-hidden=\\"true\\"
-                               focusable=\\"false\\"
-                               class=\\"css-tj5bde-Svg\\"
+                          <svg
+                            height=\\"20\\"
+                            width=\\"20\\"
+                            viewbox=\\"0 0 20 20\\"
+                            aria-hidden=\\"true\\"
+                            focusable=\\"false\\"
+                            class=\\"css-tj5bde-Svg\\"
                           >
                             <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
                             </path>
@@ -374,8 +409,9 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
       </div>
       <div class=\\"accordion-item\\">
         <h2 class=\\"accordion-header\\">
-          <button class=\\"accordion-button \\"
-                  type=\\"button\\"
+          <button
+            class=\\"accordion-button \\"
+            type=\\"button\\"
           >
             Multi-grid source label
           </button>
@@ -386,10 +422,11 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
               <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
                 <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0\\">
                   <div class=\\" css-2b097c-container\\">
-                    <span aria-live=\\"polite\\"
-                          aria-atomic=\\"false\\"
-                          aria-relevant=\\"additions text\\"
-                          class=\\"css-1f43avz-a11yText-A11yText\\"
+                    <span
+                      aria-live=\\"polite\\"
+                      aria-atomic=\\"false\\"
+                      aria-relevant=\\"additions text\\"
+                      class=\\"css-1f43avz-a11yText-A11yText\\"
                     >
                     </span>
                     <div class=\\"react-select__control css-cat782-control\\">
@@ -398,19 +435,21 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                           Disable multi-grid
                         </div>
                         <div class=\\"css-ps6ina-Input\\">
-                          <div class=\\"react-select__input\\"
-                               style=\\"display: inline-block;\\"
+                          <div
+                            class=\\"react-select__input\\"
+                            style=\\"display: inline-block;\\"
                           >
-                            <input autocapitalize=\\"none\\"
-                                   autocomplete=\\"off\\"
-                                   autocorrect=\\"off\\"
-                                   id=\\"react-select-configuration-grid-label-input\\"
-                                   spellcheck=\\"false\\"
-                                   tabindex=\\"0\\"
-                                   type=\\"text\\"
-                                   aria-autocomplete=\\"list\\"
-                                   style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                                   value
+                            <input
+                              autocapitalize=\\"none\\"
+                              autocomplete=\\"off\\"
+                              autocorrect=\\"off\\"
+                              id=\\"react-select-configuration-grid-label-input\\"
+                              spellcheck=\\"false\\"
+                              tabindex=\\"0\\"
+                              type=\\"text\\"
+                              aria-autocomplete=\\"list\\"
+                              style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                              value
                             >
                             <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                             </div>
@@ -420,15 +459,17 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                       <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                         <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                         </span>
-                        <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                             aria-hidden=\\"true\\"
+                        <div
+                          class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                          aria-hidden=\\"true\\"
                         >
-                          <svg height=\\"20\\"
-                               width=\\"20\\"
-                               viewbox=\\"0 0 20 20\\"
-                               aria-hidden=\\"true\\"
-                               focusable=\\"false\\"
-                               class=\\"css-tj5bde-Svg\\"
+                          <svg
+                            height=\\"20\\"
+                            width=\\"20\\"
+                            viewbox=\\"0 0 20 20\\"
+                            aria-hidden=\\"true\\"
+                            focusable=\\"false\\"
+                            class=\\"css-tj5bde-Svg\\"
                           >
                             <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
                             </path>
@@ -440,12 +481,14 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                 </div>
                 <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0\\">
                   <span class=\\"form-check form-switch\\">
-                    <input id=\\"configuration-multigrid-sort-reverse\\"
-                           class=\\"form-check-input\\"
-                           type=\\"checkbox\\"
+                    <input
+                      id=\\"configuration-multigrid-sort-reverse\\"
+                      class=\\"form-check-input\\"
+                      type=\\"checkbox\\"
                     >
-                    <label class=\\"form-check-label cursor-pointer\\"
-                           for=\\"configuration-multigrid-sort-reverse\\"
+                    <label
+                      class=\\"form-check-label cursor-pointer\\"
+                      for=\\"configuration-multigrid-sort-reverse\\"
                     >
                       Reverse order
                     </label>
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap
index 417c03982..6dbaab09e 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap
@@ -4,17 +4,19 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
 "
 <div class=\\"d-flex flex-row\\">
   <div class=\\"flex-shrink-0 flex-grow-0\\">
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"bell-slash\\"
-         class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 640 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"bell-slash\\"
+      class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 640 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
       >
       </path>
     </svg>
@@ -30,12 +32,13 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
       <span class=\\"badge bg-light nmb-05 align-text-bottom p-1\\">
         Expires in 30 minutes
         <div class=\\"progress silence-progress\\">
-          <div class=\\"progress-bar bg-success\\"
-               role=\\"progressbar\\"
-               style=\\"width: 50%;\\"
-               aria-valuenow=\\"50\\"
-               aria-valuemin=\\"0\\"
-               aria-valuemax=\\"100\\"
+          <div
+            class=\\"progress-bar bg-success\\"
+            role=\\"progressbar\\"
+            style=\\"width: 50%;\\"
+            aria-valuenow=\\"50\\"
+            aria-valuemin=\\"0\\"
+            aria-valuemax=\\"100\\"
           >
           </div>
         </div>
@@ -50,18 +53,20 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
         </span>
       </div>
       <span class=\\"badge components-label with-click\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"chevron-down\\"
-             class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 448 512\\"
-             style=\\"transition: transform 0.25s ease-in-out;\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"chevron-down\\"
+          class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 448 512\\"
+          style=\\"transition: transform 0.25s ease-in-out;\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
           >
           </path>
         </svg>
@@ -76,17 +81,19 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
 "
 <div class=\\"d-flex flex-row\\">
   <div class=\\"flex-shrink-0 flex-grow-0\\">
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"bell-slash\\"
-         class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 640 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"bell-slash\\"
+      class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 640 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
       >
       </path>
     </svg>
@@ -105,12 +112,13 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
       <span class=\\"badge bg-light nmb-05 align-text-bottom p-1\\">
         Expires in 30 minutes
         <div class=\\"progress silence-progress\\">
-          <div class=\\"progress-bar bg-success\\"
-               role=\\"progressbar\\"
-               style=\\"width: 50%;\\"
-               aria-valuenow=\\"50\\"
-               aria-valuemin=\\"0\\"
-               aria-valuemax=\\"100\\"
+          <div
+            class=\\"progress-bar bg-success\\"
+            role=\\"progressbar\\"
+            style=\\"width: 50%;\\"
+            aria-valuenow=\\"50\\"
+            aria-valuemin=\\"0\\"
+            aria-valuemax=\\"100\\"
           >
           </div>
         </div>
@@ -125,18 +133,20 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
         </span>
       </div>
       <span class=\\"badge components-label with-click\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"chevron-down\\"
-             class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 448 512\\"
-             style=\\"transition: transform 0.25s ease-in-out;\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"chevron-down\\"
+          class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 448 512\\"
+          style=\\"transition: transform 0.25s ease-in-out;\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
           >
           </path>
         </svg>
@@ -151,17 +161,19 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
 "
 <div class=\\"d-flex flex-row\\">
   <div class=\\"flex-shrink-0 flex-grow-0\\">
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"bell-slash\\"
-         class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 640 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"bell-slash\\"
+      class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 640 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
       >
       </path>
     </svg>
@@ -184,18 +196,20 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
         </span>
       </div>
       <span class=\\"badge components-label with-click\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"chevron-down\\"
-             class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 448 512\\"
-             style=\\"transition: transform 0.25s ease-in-out;\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"chevron-down\\"
+          class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 448 512\\"
+          style=\\"transition: transform 0.25s ease-in-out;\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
           >
           </path>
         </svg>
@@ -210,17 +224,19 @@ exports[`<SilenceComment /> Matches snapshot when expanded and multiple clusters
 "
 <div class=\\"d-flex flex-row\\">
   <div class=\\"flex-shrink-0 flex-grow-0\\">
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"bell-slash\\"
-         class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 640 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"bell-slash\\"
+      class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 640 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
       >
       </path>
     </svg>
@@ -243,18 +259,20 @@ exports[`<SilenceComment /> Matches snapshot when expanded and multiple clusters
         </span>
       </div>
       <span class=\\"badge components-label with-click\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"chevron-down\\"
-             class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 448 512\\"
-             style=\\"transition: transform 0.25s ease-in-out;\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"chevron-down\\"
+          class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 448 512\\"
+          style=\\"transition: transform 0.25s ease-in-out;\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
           >
           </path>
         </svg>
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
index 4552595fd..bc9cc7345 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
@@ -6,17 +6,19 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
   <div class=\\"card-header rounded-0 border-bottom-0 px-2\\">
     <div class=\\"d-flex flex-row\\">
       <div class=\\"flex-shrink-0 flex-grow-0\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"bell-slash\\"
-             class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 640 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"bell-slash\\"
+          class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 640 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
           >
           </path>
         </svg>
@@ -32,12 +34,13 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
           <span class=\\"badge bg-light nmb-05 align-text-bottom p-1\\">
             Expires in 30 minutes
             <div class=\\"progress silence-progress\\">
-              <div class=\\"progress-bar bg-success\\"
-                   role=\\"progressbar\\"
-                   style=\\"width: 50%;\\"
-                   aria-valuenow=\\"50\\"
-                   aria-valuemin=\\"0\\"
-                   aria-valuemax=\\"100\\"
+              <div
+                class=\\"progress-bar bg-success\\"
+                role=\\"progressbar\\"
+                style=\\"width: 50%;\\"
+                aria-valuenow=\\"50\\"
+                aria-valuemin=\\"0\\"
+                aria-valuemax=\\"100\\"
               >
               </div>
             </div>
@@ -52,18 +55,20 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
             </span>
           </div>
           <span class=\\"badge components-label with-click\\">
-            <svg aria-hidden=\\"true\\"
-                 focusable=\\"false\\"
-                 data-prefix=\\"fas\\"
-                 data-icon=\\"chevron-down\\"
-                 class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
-                 role=\\"img\\"
-                 xmlns=\\"http://www.w3.org/2000/svg\\"
-                 viewbox=\\"0 0 448 512\\"
-                 style=\\"transition: transform 0.25s ease-in-out;\\"
+            <svg
+              aria-hidden=\\"true\\"
+              focusable=\\"false\\"
+              data-prefix=\\"fas\\"
+              data-icon=\\"chevron-down\\"
+              class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
+              role=\\"img\\"
+              xmlns=\\"http://www.w3.org/2000/svg\\"
+              viewbox=\\"0 0 448 512\\"
+              style=\\"transition: transform 0.25s ease-in-out;\\"
             >
-              <path fill=\\"currentColor\\"
-                    d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+              <path
+                fill=\\"currentColor\\"
+                d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
               >
               </path>
             </svg>
@@ -82,17 +87,19 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
   <div class=\\"card-header rounded-0 border-bottom-0 px-2\\">
     <div class=\\"d-flex flex-row\\">
       <div class=\\"flex-shrink-0 flex-grow-0\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"bell-slash\\"
-             class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 640 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"bell-slash\\"
+          class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 640 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
           >
           </path>
         </svg>
@@ -115,18 +122,20 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             </span>
           </div>
           <span class=\\"badge components-label with-click\\">
-            <svg aria-hidden=\\"true\\"
-                 focusable=\\"false\\"
-                 data-prefix=\\"fas\\"
-                 data-icon=\\"chevron-down\\"
-                 class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
-                 role=\\"img\\"
-                 xmlns=\\"http://www.w3.org/2000/svg\\"
-                 viewbox=\\"0 0 448 512\\"
-                 style=\\"transition: transform 0.25s ease-in-out;\\"
+            <svg
+              aria-hidden=\\"true\\"
+              focusable=\\"false\\"
+              data-prefix=\\"fas\\"
+              data-icon=\\"chevron-down\\"
+              class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
+              role=\\"img\\"
+              xmlns=\\"http://www.w3.org/2000/svg\\"
+              viewbox=\\"0 0 448 512\\"
+              style=\\"transition: transform 0.25s ease-in-out;\\"
             >
-              <path fill=\\"currentColor\\"
-                    d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+              <path
+                fill=\\"currentColor\\"
+                d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
               >
               </path>
             </svg>
@@ -141,34 +150,38 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
         <div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\">
           <div>
             <span class=\\"badge px-1 me-1 components-label silence-detail\\">
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"calendar-check\\"
-                   class=\\"svg-inline--fa fa-calendar-check fa-w-14 fa-fw text-muted me-1\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"calendar-check\\"
+                class=\\"svg-inline--fa fa-calendar-check fa-w-14 fa-fw text-muted me-1\\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 448 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M436 160H12c-6.627 0-12-5.373-12-12v-36c0-26.51 21.49-48 48-48h48V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h128V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h48c26.51 0 48 21.49 48 48v36c0 6.627-5.373 12-12 12zM12 192h424c6.627 0 12 5.373 12 12v260c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V204c0-6.627 5.373-12 12-12zm333.296 95.947l-28.169-28.398c-4.667-4.705-12.265-4.736-16.97-.068L194.12 364.665l-45.98-46.352c-4.667-4.705-12.266-4.736-16.971-.068l-28.397 28.17c-4.705 4.667-4.736 12.265-.068 16.97l82.601 83.269c4.667 4.705 12.265 4.736 16.97.068l142.953-141.805c4.705-4.667 4.736-12.265.068-16.97z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M436 160H12c-6.627 0-12-5.373-12-12v-36c0-26.51 21.49-48 48-48h48V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h128V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h48c26.51 0 48 21.49 48 48v36c0 6.627-5.373 12-12 12zM12 192h424c6.627 0 12 5.373 12 12v260c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V204c0-6.627 5.373-12 12-12zm333.296 95.947l-28.169-28.398c-4.667-4.705-12.265-4.736-16.97-.068L194.12 364.665l-45.98-46.352c-4.667-4.705-12.266-4.736-16.971-.068l-28.397 28.17c-4.705 4.667-4.736 12.265-.068 16.97l82.601 83.269c4.667 4.705 12.265 4.736 16.97.068l142.953-141.805c4.705-4.667 4.736-12.265.068-16.97z\\"
                 >
                 </path>
               </svg>
               Started 30 minutes ago
             </span>
             <span class=\\"badge  px-1 me-1 components-label silence-detail\\">
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"calendar-times\\"
-                   class=\\"svg-inline--fa fa-calendar-times fa-w-14 fa-fw text-muted me-1\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"calendar-times\\"
+                class=\\"svg-inline--fa fa-calendar-times fa-w-14 fa-fw text-muted me-1\\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 448 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M436 160H12c-6.6 0-12-5.4-12-12v-36c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48v36c0 6.6-5.4 12-12 12zM12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm257.3 160l48.1-48.1c4.7-4.7 4.7-12.3 0-17l-28.3-28.3c-4.7-4.7-12.3-4.7-17 0L224 306.7l-48.1-48.1c-4.7-4.7-12.3-4.7-17 0l-28.3 28.3c-4.7 4.7-4.7 12.3 0 17l48.1 48.1-48.1 48.1c-4.7 4.7-4.7 12.3 0 17l28.3 28.3c4.7 4.7 12.3 4.7 17 0l48.1-48.1 48.1 48.1c4.7 4.7 12.3 4.7 17 0l28.3-28.3c4.7-4.7 4.7-12.3 0-17L269.3 352z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M436 160H12c-6.6 0-12-5.4-12-12v-36c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48v36c0 6.6-5.4 12-12 12zM12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm257.3 160l48.1-48.1c4.7-4.7 4.7-12.3 0-17l-28.3-28.3c-4.7-4.7-12.3-4.7-17 0L224 306.7l-48.1-48.1c-4.7-4.7-12.3-4.7-17 0l-28.3 28.3c-4.7 4.7-4.7 12.3 0 17l48.1 48.1-48.1 48.1c-4.7 4.7-4.7 12.3 0 17l28.3 28.3c4.7 4.7 12.3 4.7 17 0l48.1-48.1 48.1 48.1c4.7 4.7 12.3 4.7 17 0l28.3-28.3c4.7-4.7 4.7-12.3 0-17L269.3 352z\\"
                 >
                 </path>
               </svg>
@@ -177,17 +190,19 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
           </div>
           <div class=\\"my-1 d-flex flex-row\\">
             <span class=\\"badge px-1 me-1 components-label silence-detail flex-grow-0 flex-shrink-0\\">
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"fingerprint\\"
-                   class=\\"svg-inline--fa fa-fingerprint fa-w-16 fa-fw text-muted me-1\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 512 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"fingerprint\\"
+                class=\\"svg-inline--fa fa-fingerprint fa-w-16 fa-fw text-muted me-1\\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 512 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M256.12 245.96c-13.25 0-24 10.74-24 24 1.14 72.25-8.14 141.9-27.7 211.55-2.73 9.72 2.15 30.49 23.12 30.49 10.48 0 20.11-6.92 23.09-17.52 13.53-47.91 31.04-125.41 29.48-224.52.01-13.25-10.73-24-23.99-24zm-.86-81.73C194 164.16 151.25 211.3 152.1 265.32c.75 47.94-3.75 95.91-13.37 142.55-2.69 12.98 5.67 25.69 18.64 28.36 13.05 2.67 25.67-5.66 28.36-18.64 10.34-50.09 15.17-101.58 14.37-153.02-.41-25.95 19.92-52.49 54.45-52.34 31.31.47 57.15 25.34 57.62 55.47.77 48.05-2.81 96.33-10.61 143.55-2.17 13.06 6.69 25.42 19.76 27.58 19.97 3.33 26.81-15.1 27.58-19.77 8.28-50.03 12.06-101.21 11.27-152.11-.88-55.8-47.94-101.88-104.91-102.72zm-110.69-19.78c-10.3-8.34-25.37-6.8-33.76 3.48-25.62 31.5-39.39 71.28-38.75 112 .59 37.58-2.47 75.27-9.11 112.05-2.34 13.05 6.31 25.53 19.36 27.89 20.11 3.5 27.07-14.81 27.89-19.36 7.19-39.84 10.5-80.66 9.86-121.33-.47-29.88 9.2-57.88 28-80.97 8.35-10.28 6.79-25.39-3.49-33.76zm109.47-62.33c-15.41-.41-30.87 1.44-45.78 4.97-12.89 3.06-20.87 15.98-17.83 28.89 3.06 12.89 16 20.83 28.89 17.83 11.05-2.61 22.47-3.77 34-3.69 75.43 1.13 137.73 61.5 138.88 134.58.59 37.88-1.28 76.11-5.58 113.63-1.5 13.17 7.95 25.08 21.11 26.58 16.72 1.95 25.51-11.88 26.58-21.11a929.06 929.06 0 0 0 5.89-119.85c-1.56-98.75-85.07-180.33-186.16-181.83zm252.07 121.45c-2.86-12.92-15.51-21.2-28.61-18.27-12.94 2.86-21.12 15.66-18.26 28.61 4.71 21.41 4.91 37.41 4.7 61.6-.11 13.27 10.55 24.09 23.8 24.2h.2c13.17 0 23.89-10.61 24-23.8.18-22.18.4-44.11-5.83-72.34zm-40.12-90.72C417.29 43.46 337.6 1.29 252.81.02 183.02-.82 118.47 24.91 70.46 72.94 24.09 119.37-.9 181.04.14 246.65l-.12 21.47c-.39 13.25 10.03 24.31 23.28 24.69.23.02.48.02.72.02 12.92 0 23.59-10.3 23.97-23.3l.16-23.64c-.83-52.5 19.16-101.86 56.28-139 38.76-38.8 91.34-59.67 147.68-58.86 69.45 1.03 134.73 35.56 174.62 92.39 7.61 10.86 22.56 13.45 33.42 5.86 10.84-7.62 13.46-22.59 5.84-33.43z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M256.12 245.96c-13.25 0-24 10.74-24 24 1.14 72.25-8.14 141.9-27.7 211.55-2.73 9.72 2.15 30.49 23.12 30.49 10.48 0 20.11-6.92 23.09-17.52 13.53-47.91 31.04-125.41 29.48-224.52.01-13.25-10.73-24-23.99-24zm-.86-81.73C194 164.16 151.25 211.3 152.1 265.32c.75 47.94-3.75 95.91-13.37 142.55-2.69 12.98 5.67 25.69 18.64 28.36 13.05 2.67 25.67-5.66 28.36-18.64 10.34-50.09 15.17-101.58 14.37-153.02-.41-25.95 19.92-52.49 54.45-52.34 31.31.47 57.15 25.34 57.62 55.47.77 48.05-2.81 96.33-10.61 143.55-2.17 13.06 6.69 25.42 19.76 27.58 19.97 3.33 26.81-15.1 27.58-19.77 8.28-50.03 12.06-101.21 11.27-152.11-.88-55.8-47.94-101.88-104.91-102.72zm-110.69-19.78c-10.3-8.34-25.37-6.8-33.76 3.48-25.62 31.5-39.39 71.28-38.75 112 .59 37.58-2.47 75.27-9.11 112.05-2.34 13.05 6.31 25.53 19.36 27.89 20.11 3.5 27.07-14.81 27.89-19.36 7.19-39.84 10.5-80.66 9.86-121.33-.47-29.88 9.2-57.88 28-80.97 8.35-10.28 6.79-25.39-3.49-33.76zm109.47-62.33c-15.41-.41-30.87 1.44-45.78 4.97-12.89 3.06-20.87 15.98-17.83 28.89 3.06 12.89 16 20.83 28.89 17.83 11.05-2.61 22.47-3.77 34-3.69 75.43 1.13 137.73 61.5 138.88 134.58.59 37.88-1.28 76.11-5.58 113.63-1.5 13.17 7.95 25.08 21.11 26.58 16.72 1.95 25.51-11.88 26.58-21.11a929.06 929.06 0 0 0 5.89-119.85c-1.56-98.75-85.07-180.33-186.16-181.83zm252.07 121.45c-2.86-12.92-15.51-21.2-28.61-18.27-12.94 2.86-21.12 15.66-18.26 28.61 4.71 21.41 4.91 37.41 4.7 61.6-.11 13.27 10.55 24.09 23.8 24.2h.2c13.17 0 23.89-10.61 24-23.8.18-22.18.4-44.11-5.83-72.34zm-40.12-90.72C417.29 43.46 337.6 1.29 252.81.02 183.02-.82 118.47 24.91 70.46 72.94 24.09 119.37-.9 181.04.14 246.65l-.12 21.47c-.39 13.25 10.03 24.31 23.28 24.69.23.02.48.02.72.02 12.92 0 23.59-10.3 23.97-23.3l.16-23.64c-.83-52.5 19.16-101.86 56.28-139 38.76-38.8 91.34-59.67 147.68-58.86 69.45 1.03 134.73 35.56 174.62 92.39 7.61 10.86 22.56 13.45 33.42 5.86 10.84-7.62 13.46-22.59 5.84-33.43z\\"
                 >
                 </path>
               </svg>
@@ -198,17 +213,19 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             </span>
             <div class=\\" tooltip-trigger\\">
               <span class=\\"badge bg-secondary px-1 me-1 components-label cursor-pointer\\">
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"copy\\"
-                     class=\\"svg-inline--fa fa-copy fa-w-14 \\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 448 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"copy\\"
+                  class=\\"svg-inline--fa fa-copy fa-w-14 \\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 448 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z\\"
                   >
                   </path>
                 </svg>
@@ -217,38 +234,43 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
           </div>
           <div class=\\"my-1\\">
             <span class=\\"badge px-1 me-1 components-label silence-detail\\">
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"home\\"
-                   class=\\"svg-inline--fa fa-home fa-w-18 fa-fw text-muted me-1\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 576 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"home\\"
+                class=\\"svg-inline--fa fa-home fa-w-18 fa-fw text-muted me-1\\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 576 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z\\"
                 >
                 </path>
               </svg>
               View in Alertmanager:
             </span>
-            <a href=\\"http://example.com/#/silences/04d37636-2350-4878-b382-e0b50353230f\\"
-               target=\\"_blank\\"
-               rel=\\"noopener noreferrer\\"
-               class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
+            <a
+              href=\\"http://example.com/#/silences/04d37636-2350-4878-b382-e0b50353230f\\"
+              target=\\"_blank\\"
+              rel=\\"noopener noreferrer\\"
+              class=\\"components-label components-label-with-hover badge components-grid-annotation-link\\"
             >
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"external-link-alt\\"
-                   class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 512 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"external-link-alt\\"
+                class=\\"svg-inline--fa fa-external-link-alt fa-w-16 \\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 512 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\\"
                 >
                 </path>
               </svg>
@@ -258,25 +280,28 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
           <div class=\\"d-flex flex-row\\">
             <div class=\\"flex-shrink-0 flex-grow-0\\">
               <span class=\\"badge px-1 me-1 components-label silence-detail\\">
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"filter\\"
-                     class=\\"svg-inline--fa fa-filter fa-w-16 fa-fw text-muted me-1\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 512 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"filter\\"
+                  class=\\"svg-inline--fa fa-filter fa-w-16 fa-fw text-muted me-1\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 512 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z\\"
                   >
                   </path>
                 </svg>
                 Matchers:
               </span>
             </div>
-            <div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\"
-                 style=\\"min-width: 0px;\\"
+            <div
+              class=\\"flex-shrink-1 flex-grow-1 mw-1p\\"
+              style=\\"min-width: 0px;\\"
             >
               <span class=\\"badge silence-matcher-equal px-1 me-1 components-label\\">
                 regex=~\\"equal\\"
@@ -296,34 +321,38 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
         <div class=\\"flex-shrink-0 flex-grow-0 mt-lg-0 mt-2 ml-lg-2 ms-0\\">
           <div class=\\"d-flex flex-fill flex-lg-column flex-row justify-content-around\\">
             <button class=\\"btn btn-primary btn-sm mb-lg-2 mb-0\\">
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"edit\\"
-                   class=\\"svg-inline--fa fa-edit fa-w-18 me-1 d-none d-sm-inline-block\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 576 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"edit\\"
+                class=\\"svg-inline--fa fa-edit fa-w-18 me-1 d-none d-sm-inline-block\\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 576 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z\\"
                 >
                 </path>
               </svg>
               Edit
             </button>
             <button class=\\"btn btn-danger btn-sm\\">
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"trash\\"
-                   class=\\"svg-inline--fa fa-trash fa-w-14 me-1 d-none d-sm-inline-block\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"trash\\"
+                class=\\"svg-inline--fa fa-trash fa-w-14 me-1 d-none d-sm-inline-block\\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 448 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z\\"
                 >
                 </path>
               </svg>
diff --git a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
index 8f4459497..d7119d467 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
@@ -4,63 +4,71 @@ exports[`<FilterInput /> matches snapshot with no filters 1`] = `
 "
 <div class=\\"input-group w-100 me-2 components-filterinput-outer bg-transparent\\">
   <div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
-    <div class=\\"autosuggest d-inline-block mw-100\\"
-         role=\\"combobox\\"
-         aria-haspopup=\\"listbox\\"
-         aria-owns=\\"downshift-0-menu\\"
-         aria-expanded=\\"false\\"
+    <div
+      class=\\"autosuggest d-inline-block mw-100\\"
+      role=\\"combobox\\"
+      aria-haspopup=\\"listbox\\"
+      aria-owns=\\"downshift-0-menu\\"
+      aria-expanded=\\"false\\"
     >
       <span class=\\"input-group-text text-muted d-inline-block me-2 border-0 bg-inherit px-1\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"search\\"
-             class=\\"svg-inline--fa fa-search fa-w-16 \\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 512 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"search\\"
+          class=\\"svg-inline--fa fa-search fa-w-16 \\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 512 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
           >
           </path>
         </svg>
       </span>
-      <input class=\\"components-filterinput-wrapper text-white mw-100\\"
-             size=\\"1\\"
-             id=\\"downshift-0-input\\"
-             aria-autocomplete=\\"list\\"
-             aria-controls=\\"downshift-0-menu\\"
-             aria-labelledby=\\"downshift-0-label\\"
-             autocomplete=\\"off\\"
-             value
+      <input
+        class=\\"components-filterinput-wrapper text-white mw-100\\"
+        size=\\"1\\"
+        id=\\"downshift-0-input\\"
+        aria-autocomplete=\\"list\\"
+        aria-controls=\\"downshift-0-menu\\"
+        aria-labelledby=\\"downshift-0-label\\"
+        autocomplete=\\"off\\"
+        value
       >
     </div>
-    <span class=\\"dropdown\\"
-          id=\\"downshift-0-menu\\"
-          role=\\"listbox\\"
-          aria-labelledby=\\"downshift-0-label\\"
+    <span
+      class=\\"dropdown\\"
+      id=\\"downshift-0-menu\\"
+      role=\\"listbox\\"
+      aria-labelledby=\\"downshift-0-label\\"
     >
     </span>
   </div>
   <span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
-    <button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
-            type=\\"button\\"
-            data-toggle=\\"dropdown\\"
-            aria-haspopup=\\"true\\"
-            aria-expanded=\\"true\\"
+    <button
+      class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
+      type=\\"button\\"
+      data-toggle=\\"dropdown\\"
+      aria-haspopup=\\"true\\"
+      aria-expanded=\\"true\\"
     >
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"caret-down\\"
-           class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 320 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"caret-down\\"
+        class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 320 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
         >
         </path>
       </svg>
@@ -74,125 +82,143 @@ exports[`<FilterInput /> matches snapshot with some filters 1`] = `
 "
 <div class=\\"input-group w-100 me-2 components-filterinput-outer bg-transparent\\">
   <div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
-    <button type=\\"button\\"
-            class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
+    <button
+      type=\\"button\\"
+      class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
     >
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"spinner\\"
-           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"spinner\\"
+        class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 512 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
         >
         </path>
       </svg>
       <div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ms-1 tooltip-trigger\\">
-        <span tabindex=\\"0\\"
-              class=\\"cursor-text px-1\\"
+        <span
+          tabindex=\\"0\\"
+          class=\\"cursor-text px-1\\"
         >
           foo=bar
         </span>
       </div>
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"times\\"
-           class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 352 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"times\\"
+        class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 352 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
         >
         </path>
       </svg>
     </button>
-    <button type=\\"button\\"
-            class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
+    <button
+      type=\\"button\\"
+      class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
     >
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"spinner\\"
-           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"spinner\\"
+        class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 512 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
         >
         </path>
       </svg>
       <div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ms-1 tooltip-trigger\\">
-        <span tabindex=\\"0\\"
-              class=\\"cursor-text px-1\\"
+        <span
+          tabindex=\\"0\\"
+          class=\\"cursor-text px-1\\"
         >
           baz!=bar
         </span>
       </div>
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"times\\"
-           class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 352 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"times\\"
+        class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 352 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
         >
         </path>
       </svg>
     </button>
-    <div class=\\"autosuggest d-inline-block mw-100\\"
-         role=\\"combobox\\"
-         aria-haspopup=\\"listbox\\"
-         aria-owns=\\"downshift-1-menu\\"
-         aria-expanded=\\"false\\"
+    <div
+      class=\\"autosuggest d-inline-block mw-100\\"
+      role=\\"combobox\\"
+      aria-haspopup=\\"listbox\\"
+      aria-owns=\\"downshift-1-menu\\"
+      aria-expanded=\\"false\\"
     >
-      <input class=\\"components-filterinput-wrapper text-white mw-100\\"
-             size=\\"1\\"
-             id=\\"downshift-1-input\\"
-             aria-autocomplete=\\"list\\"
-             aria-controls=\\"downshift-1-menu\\"
-             aria-labelledby=\\"downshift-1-label\\"
-             autocomplete=\\"off\\"
-             value
+      <input
+        class=\\"components-filterinput-wrapper text-white mw-100\\"
+        size=\\"1\\"
+        id=\\"downshift-1-input\\"
+        aria-autocomplete=\\"list\\"
+        aria-controls=\\"downshift-1-menu\\"
+        aria-labelledby=\\"downshift-1-label\\"
+        autocomplete=\\"off\\"
+        value
       >
     </div>
-    <span class=\\"dropdown\\"
-          id=\\"downshift-1-menu\\"
-          role=\\"listbox\\"
-          aria-labelledby=\\"downshift-1-label\\"
+    <span
+      class=\\"dropdown\\"
+      id=\\"downshift-1-menu\\"
+      role=\\"listbox\\"
+      aria-labelledby=\\"downshift-1-label\\"
     >
     </span>
   </div>
   <span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
-    <button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
-            type=\\"button\\"
-            data-toggle=\\"dropdown\\"
-            aria-haspopup=\\"true\\"
-            aria-expanded=\\"true\\"
+    <button
+      class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
+      type=\\"button\\"
+      data-toggle=\\"dropdown\\"
+      aria-haspopup=\\"true\\"
+      aria-expanded=\\"true\\"
     >
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"caret-down\\"
-           class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 320 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"caret-down\\"
+        class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 320 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
         >
         </path>
       </svg>
diff --git a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap
index 88a333a3f..daac29a07 100644
--- a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap
+++ b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap
@@ -7,19 +7,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
     <h5 class=\\"modal-title\\">
       Overview
     </h5>
-    <button type=\\"button\\"
-            class=\\"btn-close\\"
+    <button
+      type=\\"button\\"
+      class=\\"btn-close\\"
     >
     </button>
   </div>
   <div class=\\"modal-body\\">
-    <table class=\\"table table-borderless top-labels\\"
-           style=\\"table-layout: fixed;\\"
+    <table
+      class=\\"table table-borderless top-labels\\"
+      style=\\"table-layout: fixed;\\"
     >
       <tbody class=\\"mw-100\\">
         <tr>
-          <td width=\\"25%\\"
-              class=\\"text-nowrap mw-100 p-1\\"
+          <td
+            width=\\"25%\\"
+            class=\\"text-nowrap mw-100 p-1\\"
           >
             <span class=\\"badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start\\">
               <span class=\\"bg-primary text-white me-1 px-1 components-labelWithPercent-percent\\">
@@ -28,8 +31,9 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               foo
             </span>
           </td>
-          <td width=\\"75%\\"
-              class=\\"mw-100 p-1\\"
+          <td
+            width=\\"75%\\"
+            class=\\"mw-100 p-1\\"
           >
             <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
@@ -46,12 +50,13 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-warning\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 50%;\\"
-                     aria-valuenow=\\"50\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-warning\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 50%;\\"
+                  aria-valuenow=\\"50\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -71,20 +76,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-transparent\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 50%;\\"
-                     aria-valuenow=\\"50\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-transparent\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 50%;\\"
+                  aria-valuenow=\\"50\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 25%;\\"
-                     aria-valuenow=\\"25\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 25%;\\"
+                  aria-valuenow=\\"25\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -104,20 +111,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-transparent\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 75%;\\"
-                     aria-valuenow=\\"75\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-transparent\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 75%;\\"
+                  aria-valuenow=\\"75\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 25%;\\"
-                     aria-valuenow=\\"25\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 25%;\\"
+                  aria-valuenow=\\"25\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -125,8 +134,9 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
           </td>
         </tr>
         <tr>
-          <td width=\\"25%\\"
-              class=\\"text-nowrap mw-100 p-1\\"
+          <td
+            width=\\"25%\\"
+            class=\\"text-nowrap mw-100 p-1\\"
           >
             <span class=\\"badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start\\">
               <span class=\\"bg-primary text-white me-1 px-1 components-labelWithPercent-percent\\">
@@ -135,8 +145,9 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               bar
             </span>
           </td>
-          <td width=\\"75%\\"
-              class=\\"mw-100 p-1\\"
+          <td
+            width=\\"75%\\"
+            class=\\"mw-100 p-1\\"
           >
             <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
@@ -153,12 +164,13 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 5%;\\"
-                     aria-valuenow=\\"5\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 5%;\\"
+                  aria-valuenow=\\"5\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -178,20 +190,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-transparent\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 5%;\\"
-                     aria-valuenow=\\"5\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-transparent\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 5%;\\"
+                  aria-valuenow=\\"5\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 5%;\\"
-                     aria-valuenow=\\"5\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 5%;\\"
+                  aria-valuenow=\\"5\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -211,20 +225,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-transparent\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 10%;\\"
-                     aria-valuenow=\\"10\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-transparent\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 10%;\\"
+                  aria-valuenow=\\"10\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 5%;\\"
-                     aria-valuenow=\\"5\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 5%;\\"
+                  aria-valuenow=\\"5\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -244,20 +260,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-transparent\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 15%;\\"
-                     aria-valuenow=\\"15\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-transparent\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 15%;\\"
+                  aria-valuenow=\\"15\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 5%;\\"
-                     aria-valuenow=\\"5\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 5%;\\"
+                  aria-valuenow=\\"5\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -277,20 +295,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-transparent\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 20%;\\"
-                     aria-valuenow=\\"20\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-transparent\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 20%;\\"
+                  aria-valuenow=\\"20\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 5%;\\"
-                     aria-valuenow=\\"5\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 5%;\\"
+                  aria-valuenow=\\"5\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -310,20 +330,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-transparent\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 25%;\\"
-                     aria-valuenow=\\"25\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-transparent\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 25%;\\"
+                  aria-valuenow=\\"25\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 5%;\\"
-                     aria-valuenow=\\"5\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 5%;\\"
+                  aria-valuenow=\\"5\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -343,20 +365,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-transparent\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 30%;\\"
-                     aria-valuenow=\\"30\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-transparent\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 30%;\\"
+                  aria-valuenow=\\"30\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 5%;\\"
-                     aria-valuenow=\\"5\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 5%;\\"
+                  aria-valuenow=\\"5\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -376,20 +400,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-transparent\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 35%;\\"
-                     aria-valuenow=\\"35\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-transparent\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 35%;\\"
+                  aria-valuenow=\\"35\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 5%;\\"
-                     aria-valuenow=\\"5\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 5%;\\"
+                  aria-valuenow=\\"5\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -409,20 +435,22 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-transparent\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 40%;\\"
-                     aria-valuenow=\\"40\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-transparent\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 40%;\\"
+                  aria-valuenow=\\"40\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 5%;\\"
-                     aria-valuenow=\\"5\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-success\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 5%;\\"
+                  aria-valuenow=\\"5\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -433,8 +461,9 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
           </td>
         </tr>
         <tr>
-          <td width=\\"25%\\"
-              class=\\"text-nowrap mw-100 p-1\\"
+          <td
+            width=\\"25%\\"
+            class=\\"text-nowrap mw-100 p-1\\"
           >
             <span class=\\"badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start\\">
               <span class=\\"bg-primary text-white me-1 px-1 components-labelWithPercent-percent\\">
@@ -443,8 +472,9 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               alertname
             </span>
           </td>
-          <td width=\\"75%\\"
-              class=\\"mw-100 p-1\\"
+          <td
+            width=\\"75%\\"
+            class=\\"mw-100 p-1\\"
           >
             <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge bg-dark components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
@@ -461,12 +491,13 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress me-1\\">
-                <div class=\\"progress-bar bg-danger\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 100%;\\"
-                     aria-valuenow=\\"100\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+                <div
+                  class=\\"progress-bar bg-danger\\"
+                  role=\\"progressbar\\"
+                  style=\\"width: 100%;\\"
+                  aria-valuenow=\\"100\\"
+                  aria-valuemin=\\"0\\"
+                  aria-valuemax=\\"100\\"
                 >
                 </div>
               </div>
@@ -487,8 +518,9 @@ exports[`<OverviewModalContent /> matches snapshot with no labels to show 1`] =
     <h5 class=\\"modal-title\\">
       Overview
     </h5>
-    <button type=\\"button\\"
-            class=\\"btn-close\\"
+    <button
+      type=\\"button\\"
+      class=\\"btn-close\\"
     >
     </button>
   </div>
diff --git a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap
index 0407b7d44..2c81cc8b4 100644
--- a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap
@@ -3,10 +3,11 @@
 exports[`<AlertManagerInput /> matches snapshot 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <span aria-live=\\"polite\\"
-        aria-atomic=\\"false\\"
-        aria-relevant=\\"additions text\\"
-        class=\\"css-1f43avz-a11yText-A11yText\\"
+  <span
+    aria-live=\\"polite\\"
+    aria-atomic=\\"false\\"
+    aria-relevant=\\"additions text\\"
+    class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
   <div class=\\"react-select__control css-cat782-control\\">
@@ -16,12 +17,13 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
           Cluster: HA
         </div>
         <div class=\\"css-1ucqin4 react-select__multi-value__remove\\">
-          <svg height=\\"14\\"
-               width=\\"14\\"
-               viewbox=\\"0 0 20 20\\"
-               aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               class=\\"css-tj5bde-Svg\\"
+          <svg
+            height=\\"14\\"
+            width=\\"14\\"
+            viewbox=\\"0 0 20 20\\"
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            class=\\"css-tj5bde-Svg\\"
           >
             <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
             </path>
@@ -33,12 +35,13 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
           am3
         </div>
         <div class=\\"css-1ucqin4 react-select__multi-value__remove\\">
-          <svg height=\\"14\\"
-               width=\\"14\\"
-               viewbox=\\"0 0 20 20\\"
-               aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               class=\\"css-tj5bde-Svg\\"
+          <svg
+            height=\\"14\\"
+            width=\\"14\\"
+            viewbox=\\"0 0 20 20\\"
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            class=\\"css-tj5bde-Svg\\"
           >
             <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
             </path>
@@ -46,19 +49,21 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
         </div>
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
-             style=\\"display: inline-block;\\"
+        <div
+          class=\\"react-select__input\\"
+          style=\\"display: inline-block;\\"
         >
-          <input autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-silence-input-alertmanagers-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
+          <input
+            autocapitalize=\\"none\\"
+            autocomplete=\\"off\\"
+            autocorrect=\\"off\\"
+            id=\\"react-select-silence-input-alertmanagers-input\\"
+            spellcheck=\\"false\\"
+            tabindex=\\"0\\"
+            type=\\"text\\"
+            aria-autocomplete=\\"list\\"
+            style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+            value
           >
           <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
@@ -66,15 +71,17 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
       </div>
     </div>
     <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-      <div class=\\"react-select__indicator react-select__clear-indicator css-tlfecz-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\"react-select__indicator react-select__clear-indicator css-tlfecz-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
           </path>
@@ -82,15 +89,17 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
       </div>
       <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
       </span>
-      <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
           </path>
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap
index 4c71637bf..d69eeeb9c 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap
@@ -42,17 +42,19 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
           <tr>
             <td class=\\"w-50 text-center with-click px-2\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-up\\"
-                     class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-up\\"
+                  class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
                   >
                   </path>
                 </svg>
@@ -76,17 +78,19 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
           <tr>
             <td class=\\"w-50 text-center with-click px-2\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-down\\"
-                     class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-down\\"
+                  class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
                   >
                   </path>
                 </svg>
@@ -104,17 +108,19 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
           <tr>
             <td class=\\"w-50 text-center with-click px-2\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-up\\"
-                     class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-up\\"
+                  class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
                   >
                   </path>
                 </svg>
@@ -138,17 +144,19 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
           <tr>
             <td class=\\"w-50 text-center with-click px-2\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-down\\"
-                     class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-down\\"
+                  class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
                   >
                   </path>
                 </svg>
@@ -166,17 +174,19 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
           <tr>
             <td class=\\"w-50 text-center with-click px-2\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-up\\"
-                     class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-up\\"
+                  class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
                   >
                   </path>
                 </svg>
@@ -200,17 +210,19 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
           <tr>
             <td class=\\"w-50 text-center with-click px-2\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-down\\"
-                     class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-down\\"
+                  class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
                   >
                   </path>
                 </svg>
@@ -264,88 +276,103 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
 <div class=\\"tab-content mb-3\\">
   <div class=\\"d-flex flex-sm-row flex-column justify-content-around mx-3 mt-2\\">
     <div class=\\"d-flex justify-content-center align-items-center\\">
-      <div class=\\"DayPicker components-date-range\\"
-           lang=\\"en\\"
+      <div
+        class=\\"DayPicker components-date-range\\"
+        lang=\\"en\\"
       >
-        <div class=\\"DayPicker-wrapper\\"
-             tabindex=\\"0\\"
+        <div
+          class=\\"DayPicker-wrapper\\"
+          tabindex=\\"0\\"
         >
           <div class=\\"DayPicker-NavBar\\">
-            <span tabindex=\\"0\\"
-                  role=\\"button\\"
-                  aria-label=\\"Previous Month\\"
-                  class=\\"DayPicker-NavButton DayPicker-NavButton--prev\\"
+            <span
+              tabindex=\\"0\\"
+              role=\\"button\\"
+              aria-label=\\"Previous Month\\"
+              class=\\"DayPicker-NavButton DayPicker-NavButton--prev\\"
             >
             </span>
-            <span tabindex=\\"0\\"
-                  role=\\"button\\"
-                  aria-label=\\"Next Month\\"
-                  class=\\"DayPicker-NavButton DayPicker-NavButton--next\\"
+            <span
+              tabindex=\\"0\\"
+              role=\\"button\\"
+              aria-label=\\"Next Month\\"
+              class=\\"DayPicker-NavButton DayPicker-NavButton--next\\"
             >
             </span>
           </div>
           <div class=\\"DayPicker-Months\\">
-            <div class=\\"DayPicker-Month\\"
-                 role=\\"grid\\"
+            <div
+              class=\\"DayPicker-Month\\"
+              role=\\"grid\\"
             >
-              <div class=\\"DayPicker-Caption\\"
-                   role=\\"heading\\"
-                   aria-live=\\"polite\\"
+              <div
+                class=\\"DayPicker-Caption\\"
+                role=\\"heading\\"
+                aria-live=\\"polite\\"
               >
                 <div>
                   February 2061
                 </div>
               </div>
-              <div class=\\"DayPicker-Weekdays\\"
-                   role=\\"rowgroup\\"
+              <div
+                class=\\"DayPicker-Weekdays\\"
+                role=\\"rowgroup\\"
               >
-                <div class=\\"DayPicker-WeekdaysRow\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-WeekdaysRow\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Sunday\\">
                       Su
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Monday\\">
                       Mo
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Tuesday\\">
                       Tu
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Wednesday\\">
                       We
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Thursday\\">
                       Th
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Friday\\">
                       Fr
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Saturday\\">
                       Sa
@@ -353,306 +380,347 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                   </div>
                 </div>
               </div>
-              <div class=\\"DayPicker-Body\\"
-                   role=\\"rowgroup\\"
+              <div
+                class=\\"DayPicker-Body\\"
+                role=\\"rowgroup\\"
               >
-                <div class=\\"DayPicker-Week\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-Week\\"
+                  role=\\"row\\"
                 >
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--end DayPicker-Day--selected\\"
-                       tabindex=\\"0\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Tue Feb 01 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--end DayPicker-Day--selected\\"
+                    tabindex=\\"0\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Tue Feb 01 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     1
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Wed Feb 02 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Wed Feb 02 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     2
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Thu Feb 03 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Thu Feb 03 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     3
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Fri Feb 04 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Fri Feb 04 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     4
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sat Feb 05 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sat Feb 05 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     5
                   </div>
                 </div>
-                <div class=\\"DayPicker-Week\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-Week\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sun Feb 06 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sun Feb 06 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     6
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Mon Feb 07 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Mon Feb 07 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     7
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Tue Feb 08 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Tue Feb 08 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     8
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Wed Feb 09 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Wed Feb 09 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     9
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Thu Feb 10 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Thu Feb 10 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     10
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Fri Feb 11 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Fri Feb 11 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     11
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sat Feb 12 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sat Feb 12 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     12
                   </div>
                 </div>
-                <div class=\\"DayPicker-Week\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-Week\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sun Feb 13 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sun Feb 13 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     13
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Mon Feb 14 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Mon Feb 14 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     14
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Tue Feb 15 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Tue Feb 15 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     15
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Wed Feb 16 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Wed Feb 16 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     16
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Thu Feb 17 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Thu Feb 17 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     17
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Fri Feb 18 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Fri Feb 18 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     18
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sat Feb 19 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sat Feb 19 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     19
                   </div>
                 </div>
-                <div class=\\"DayPicker-Week\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-Week\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sun Feb 20 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sun Feb 20 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     20
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Mon Feb 21 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Mon Feb 21 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     21
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Tue Feb 22 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Tue Feb 22 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     22
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Wed Feb 23 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Wed Feb 23 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     23
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Thu Feb 24 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Thu Feb 24 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     24
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Fri Feb 25 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Fri Feb 25 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     25
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sat Feb 26 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sat Feb 26 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     26
                   </div>
                 </div>
-                <div class=\\"DayPicker-Week\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-Week\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sun Feb 27 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sun Feb 27 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     27
                   </div>
-                  <div class=\\"DayPicker-Day\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Mon Feb 28 2061\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"false\\"
+                  <div
+                    class=\\"DayPicker-Day\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Mon Feb 28 2061\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"false\\"
                   >
                     28
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--outside\\"
                   >
                   </div>
                 </div>
@@ -660,10 +728,11 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
             </div>
           </div>
           <div class=\\"DayPicker-Footer\\">
-            <button type=\\"button\\"
-                    tabindex=\\"0\\"
-                    class=\\"DayPicker-TodayButton\\"
-                    aria-label=\\"Today\\"
+            <button
+              type=\\"button\\"
+              tabindex=\\"0\\"
+              class=\\"DayPicker-TodayButton\\"
+              aria-label=\\"Today\\"
             >
               Today
             </button>
@@ -677,17 +746,19 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
           <tr>
             <td class=\\"components-hour-up with-click\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-up\\"
-                     class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-up\\"
+                  class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
                   >
                   </path>
                 </svg>
@@ -697,17 +768,19 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
             </td>
             <td class=\\"components-minute-up with-click\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-up\\"
-                     class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-up\\"
+                  class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
                   >
                   </path>
                 </svg>
@@ -734,17 +807,19 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
           <tr>
             <td class=\\"components-hour-down with-click\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-down\\"
-                     class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-down\\"
+                  class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
                   >
                   </path>
                 </svg>
@@ -754,17 +829,19 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
             </td>
             <td class=\\"components-minute-down with-click\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-down\\"
-                     class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-down\\"
+                  class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
                   >
                   </path>
                 </svg>
@@ -816,88 +893,103 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
 <div class=\\"tab-content mb-3\\">
   <div class=\\"d-flex flex-sm-row flex-column justify-content-around mx-3 mt-2\\">
     <div class=\\"d-flex justify-content-center align-items-center\\">
-      <div class=\\"DayPicker components-date-range\\"
-           lang=\\"en\\"
+      <div
+        class=\\"DayPicker components-date-range\\"
+        lang=\\"en\\"
       >
-        <div class=\\"DayPicker-wrapper\\"
-             tabindex=\\"0\\"
+        <div
+          class=\\"DayPicker-wrapper\\"
+          tabindex=\\"0\\"
         >
           <div class=\\"DayPicker-NavBar\\">
-            <span tabindex=\\"0\\"
-                  role=\\"button\\"
-                  aria-label=\\"Previous Month\\"
-                  class=\\"DayPicker-NavButton DayPicker-NavButton--prev\\"
+            <span
+              tabindex=\\"0\\"
+              role=\\"button\\"
+              aria-label=\\"Previous Month\\"
+              class=\\"DayPicker-NavButton DayPicker-NavButton--prev\\"
             >
             </span>
-            <span tabindex=\\"0\\"
-                  role=\\"button\\"
-                  aria-label=\\"Next Month\\"
-                  class=\\"DayPicker-NavButton DayPicker-NavButton--next\\"
+            <span
+              tabindex=\\"0\\"
+              role=\\"button\\"
+              aria-label=\\"Next Month\\"
+              class=\\"DayPicker-NavButton DayPicker-NavButton--next\\"
             >
             </span>
           </div>
           <div class=\\"DayPicker-Months\\">
-            <div class=\\"DayPicker-Month\\"
-                 role=\\"grid\\"
+            <div
+              class=\\"DayPicker-Month\\"
+              role=\\"grid\\"
             >
-              <div class=\\"DayPicker-Caption\\"
-                   role=\\"heading\\"
-                   aria-live=\\"polite\\"
+              <div
+                class=\\"DayPicker-Caption\\"
+                role=\\"heading\\"
+                aria-live=\\"polite\\"
               >
                 <div>
                   February 2060
                 </div>
               </div>
-              <div class=\\"DayPicker-Weekdays\\"
-                   role=\\"rowgroup\\"
+              <div
+                class=\\"DayPicker-Weekdays\\"
+                role=\\"rowgroup\\"
               >
-                <div class=\\"DayPicker-WeekdaysRow\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-WeekdaysRow\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Sunday\\">
                       Su
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Monday\\">
                       Mo
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Tuesday\\">
                       Tu
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Wednesday\\">
                       We
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Thursday\\">
                       Th
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Friday\\">
                       Fr
                     </abbr>
                   </div>
-                  <div class=\\"DayPicker-Weekday\\"
-                       role=\\"columnheader\\"
+                  <div
+                    class=\\"DayPicker-Weekday\\"
+                    role=\\"columnheader\\"
                   >
                     <abbr title=\\"Saturday\\">
                       Sa
@@ -905,311 +997,352 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
                   </div>
                 </div>
               </div>
-              <div class=\\"DayPicker-Body\\"
-                   role=\\"rowgroup\\"
+              <div
+                class=\\"DayPicker-Body\\"
+                role=\\"rowgroup\\"
               >
-                <div class=\\"DayPicker-Week\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-Week\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Day DayPicker-Day--start DayPicker-Day--selected DayPicker-Day--today\\"
-                       tabindex=\\"0\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sun Feb 01 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--start DayPicker-Day--selected DayPicker-Day--today\\"
+                    tabindex=\\"0\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sun Feb 01 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     1
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Mon Feb 02 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Mon Feb 02 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     2
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Tue Feb 03 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Tue Feb 03 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     3
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Wed Feb 04 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Wed Feb 04 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     4
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Thu Feb 05 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Thu Feb 05 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     5
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Fri Feb 06 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Fri Feb 06 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     6
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sat Feb 07 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sat Feb 07 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     7
                   </div>
                 </div>
-                <div class=\\"DayPicker-Week\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-Week\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sun Feb 08 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sun Feb 08 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     8
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Mon Feb 09 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Mon Feb 09 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     9
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Tue Feb 10 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Tue Feb 10 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     10
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Wed Feb 11 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Wed Feb 11 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     11
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Thu Feb 12 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Thu Feb 12 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     12
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Fri Feb 13 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Fri Feb 13 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     13
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sat Feb 14 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sat Feb 14 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     14
                   </div>
                 </div>
-                <div class=\\"DayPicker-Week\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-Week\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sun Feb 15 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sun Feb 15 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     15
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Mon Feb 16 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Mon Feb 16 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     16
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Tue Feb 17 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Tue Feb 17 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     17
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Wed Feb 18 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Wed Feb 18 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     18
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Thu Feb 19 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Thu Feb 19 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     19
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Fri Feb 20 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Fri Feb 20 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     20
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sat Feb 21 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sat Feb 21 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     21
                   </div>
                 </div>
-                <div class=\\"DayPicker-Week\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-Week\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sun Feb 22 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sun Feb 22 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     22
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Mon Feb 23 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Mon Feb 23 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     23
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Tue Feb 24 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Tue Feb 24 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     24
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Wed Feb 25 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Wed Feb 25 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     25
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Thu Feb 26 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Thu Feb 26 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     26
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Fri Feb 27 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Fri Feb 27 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     27
                   </div>
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sat Feb 28 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sat Feb 28 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     28
                   </div>
                 </div>
-                <div class=\\"DayPicker-Week\\"
-                     role=\\"row\\"
+                <div
+                  class=\\"DayPicker-Week\\"
+                  role=\\"row\\"
                 >
-                  <div class=\\"DayPicker-Day DayPicker-Day--selected\\"
-                       tabindex=\\"-1\\"
-                       role=\\"gridcell\\"
-                       aria-label=\\"Sun Feb 29 2060\\"
-                       aria-disabled=\\"false\\"
-                       aria-selected=\\"true\\"
+                  <div
+                    class=\\"DayPicker-Day DayPicker-Day--selected\\"
+                    tabindex=\\"-1\\"
+                    role=\\"gridcell\\"
+                    aria-label=\\"Sun Feb 29 2060\\"
+                    aria-disabled=\\"false\\"
+                    aria-selected=\\"true\\"
                   >
                     29
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
                   >
                   </div>
-                  <div aria-disabled=\\"true\\"
-                       class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
+                  <div
+                    aria-disabled=\\"true\\"
+                    class=\\"DayPicker-Day DayPicker-Day--selected DayPicker-Day--outside\\"
                   >
                   </div>
                 </div>
@@ -1217,10 +1350,11 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
             </div>
           </div>
           <div class=\\"DayPicker-Footer\\">
-            <button type=\\"button\\"
-                    tabindex=\\"0\\"
-                    class=\\"DayPicker-TodayButton\\"
-                    aria-label=\\"Today\\"
+            <button
+              type=\\"button\\"
+              tabindex=\\"0\\"
+              class=\\"DayPicker-TodayButton\\"
+              aria-label=\\"Today\\"
             >
               Today
             </button>
@@ -1234,17 +1368,19 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
           <tr>
             <td class=\\"components-hour-up with-click\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-up\\"
-                     class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-up\\"
+                  class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
                   >
                   </path>
                 </svg>
@@ -1254,17 +1390,19 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
             </td>
             <td class=\\"components-minute-up with-click\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-up\\"
-                     class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-up\\"
+                  class=\\"svg-inline--fa fa-angle-up fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z\\"
                   >
                   </path>
                 </svg>
@@ -1291,17 +1429,19 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
           <tr>
             <td class=\\"components-hour-down with-click\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-down\\"
-                     class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-down\\"
+                  class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
                   >
                   </path>
                 </svg>
@@ -1311,17 +1451,19 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
             </td>
             <td class=\\"components-minute-down with-click\\">
               <span>
-                <svg aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     data-prefix=\\"fas\\"
-                     data-icon=\\"angle-down\\"
-                     class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
-                     role=\\"img\\"
-                     xmlns=\\"http://www.w3.org/2000/svg\\"
-                     viewbox=\\"0 0 320 512\\"
+                <svg
+                  aria-hidden=\\"true\\"
+                  focusable=\\"false\\"
+                  data-prefix=\\"fas\\"
+                  data-icon=\\"angle-down\\"
+                  class=\\"svg-inline--fa fa-angle-down fa-w-10 fa-2x text-muted cursor-pointer\\"
+                  role=\\"img\\"
+                  xmlns=\\"http://www.w3.org/2000/svg\\"
+                  viewbox=\\"0 0 320 512\\"
                 >
-                  <path fill=\\"currentColor\\"
-                        d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
+                  <path
+                    fill=\\"currentColor\\"
+                    d=\\"M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\\"
                   >
                   </path>
                 </svg>
diff --git a/ui/src/Components/SilenceModal/PayloadPreview/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/PayloadPreview/__snapshots__/index.test.tsx.snap
index 8b7b776d7..2463da741 100644
--- a/ui/src/Components/SilenceModal/PayloadPreview/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/PayloadPreview/__snapshots__/index.test.tsx.snap
@@ -2,65 +2,75 @@
 
 exports[`<PayloadPreview /> matches snapshot 1`] = `
 "
-<pre class=\\"rounded p-1\\"
-     style=\\"line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;\\"
+<pre
+  class=\\"rounded p-1\\"
+  style=\\"line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;\\"
 >
   {
   \\"
-  <span class=\\"__json-key__\\"
-        style=\\"color:#f92672;\\"
+  <span
+    class=\\"__json-key__\\"
+    style=\\"color:#f92672;\\"
   >
     matchers
   </span>
   \\": [],
   \\"
-  <span class=\\"__json-key__\\"
-        style=\\"color:#f92672;\\"
+  <span
+    class=\\"__json-key__\\"
+    style=\\"color:#f92672;\\"
   >
     startsAt
   </span>
   \\":
-  <span class=\\"__json-string__\\"
-        style=\\"color:#fd971f;\\"
+  <span
+    class=\\"__json-string__\\"
+    style=\\"color:#fd971f;\\"
   >
     \\"2000-02-01T00:00:00.000Z\\"
   </span>
   ,
   \\"
-  <span class=\\"__json-key__\\"
-        style=\\"color:#f92672;\\"
+  <span
+    class=\\"__json-key__\\"
+    style=\\"color:#f92672;\\"
   >
     endsAt
   </span>
   \\":
-  <span class=\\"__json-string__\\"
-        style=\\"color:#fd971f;\\"
+  <span
+    class=\\"__json-string__\\"
+    style=\\"color:#fd971f;\\"
   >
     \\"2000-02-01T01:00:00.000Z\\"
   </span>
   ,
   \\"
-  <span class=\\"__json-key__\\"
-        style=\\"color:#f92672;\\"
+  <span
+    class=\\"__json-key__\\"
+    style=\\"color:#f92672;\\"
   >
     createdBy
   </span>
   \\":
-  <span class=\\"__json-string__\\"
-        style=\\"color:#fd971f;\\"
+  <span
+    class=\\"__json-string__\\"
+    style=\\"color:#fd971f;\\"
   >
     \\"me@example.com\\"
   </span>
   ,
   \\"
-  <span class=\\"__json-key__\\"
-        style=\\"color:#f92672;\\"
+  <span
+    class=\\"__json-key__\\"
+    style=\\"color:#f92672;\\"
   >
     comment
   </span>
   \\":
-  <span class=\\"__json-string__\\"
-        style=\\"color:#fd971f;\\"
+  <span
+    class=\\"__json-string__\\"
+    style=\\"color:#fd971f;\\"
   >
     \\"PayloadPreview test\\"
   </span>
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap
index 6d9533ffb..109f91ce5 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap
@@ -3,10 +3,11 @@
 exports[`<LabelNameInput /> matches snapshot 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <span aria-live=\\"polite\\"
-        aria-atomic=\\"false\\"
-        aria-relevant=\\"additions text\\"
-        class=\\"css-1f43avz-a11yText-A11yText\\"
+  <span
+    aria-live=\\"polite\\"
+    aria-atomic=\\"false\\"
+    aria-relevant=\\"additions text\\"
+    class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
   <div class=\\"react-select__control css-cat782-control\\">
@@ -15,19 +16,21 @@ exports[`<LabelNameInput /> matches snapshot 1`] = `
         cluster
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
-             style=\\"display: inline-block;\\"
+        <div
+          class=\\"react-select__input\\"
+          style=\\"display: inline-block;\\"
         >
-          <input autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-silence-input-label-name-1-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
+          <input
+            autocapitalize=\\"none\\"
+            autocomplete=\\"off\\"
+            autocorrect=\\"off\\"
+            id=\\"react-select-silence-input-label-name-1-input\\"
+            spellcheck=\\"false\\"
+            tabindex=\\"0\\"
+            type=\\"text\\"
+            aria-autocomplete=\\"list\\"
+            style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+            value
           >
           <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
@@ -37,15 +40,17 @@ exports[`<LabelNameInput /> matches snapshot 1`] = `
     <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
       <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
       </span>
-      <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
           </path>
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap
index e9cf5401c..c58a48702 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap
@@ -3,10 +3,11 @@
 exports[`<LabelValueInput /> fetches suggestions on mount 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <span aria-live=\\"polite\\"
-        aria-atomic=\\"false\\"
-        aria-relevant=\\"additions text\\"
-        class=\\"css-1f43avz-a11yText-A11yText\\"
+  <span
+    aria-live=\\"polite\\"
+    aria-atomic=\\"false\\"
+    aria-relevant=\\"additions text\\"
+    class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
   <div class=\\"react-select__control css-cat782-control\\">
@@ -17,19 +18,21 @@ exports[`<LabelValueInput /> fetches suggestions on mount 1`] = `
         </div>
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
-             style=\\"display: inline-block;\\"
+        <div
+          class=\\"react-select__input\\"
+          style=\\"display: inline-block;\\"
         >
-          <input autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-silence-input-label-value-2-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
+          <input
+            autocapitalize=\\"none\\"
+            autocomplete=\\"off\\"
+            autocorrect=\\"off\\"
+            id=\\"react-select-silence-input-label-value-2-input\\"
+            spellcheck=\\"false\\"
+            tabindex=\\"0\\"
+            type=\\"text\\"
+            aria-autocomplete=\\"list\\"
+            style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+            value
           >
           <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
@@ -39,15 +42,17 @@ exports[`<LabelValueInput /> fetches suggestions on mount 1`] = `
     <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
       <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
       </span>
-      <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
           </path>
@@ -62,10 +67,11 @@ exports[`<LabelValueInput /> fetches suggestions on mount 1`] = `
 exports[`<LabelValueInput /> matches snapshot 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <span aria-live=\\"polite\\"
-        aria-atomic=\\"false\\"
-        aria-relevant=\\"additions text\\"
-        class=\\"css-1f43avz-a11yText-A11yText\\"
+  <span
+    aria-live=\\"polite\\"
+    aria-atomic=\\"false\\"
+    aria-relevant=\\"additions text\\"
+    class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
   <div class=\\"react-select__control css-cat782-control\\">
@@ -76,19 +82,21 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
         </div>
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class=\\"react-select__input\\"
-             style=\\"display: inline-block;\\"
+        <div
+          class=\\"react-select__input\\"
+          style=\\"display: inline-block;\\"
         >
-          <input autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-silence-input-label-value-1-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
+          <input
+            autocapitalize=\\"none\\"
+            autocomplete=\\"off\\"
+            autocorrect=\\"off\\"
+            id=\\"react-select-silence-input-label-value-1-input\\"
+            spellcheck=\\"false\\"
+            tabindex=\\"0\\"
+            type=\\"text\\"
+            aria-autocomplete=\\"list\\"
+            style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+            value
           >
           <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
@@ -98,15 +106,17 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
     <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
       <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
       </span>
-      <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
           </path>
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.tsx.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.tsx.snap
index 6e51122e3..267a5e036 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.tsx.snap
@@ -3,9 +3,10 @@
 exports[`<MatchCounter /> matches snapshot 1`] = `
 "
 <div class=\\" tooltip-trigger\\">
-  <span class=\\"badge bg-light rounded-pill d-block\\"
-        style=\\"font-size: 85%; line-height: 1rem;\\"
-        data-am=\\"0\\"
+  <span
+    class=\\"badge bg-light rounded-pill d-block\\"
+    style=\\"font-size: 85%; line-height: 1rem;\\"
+    data-am=\\"0\\"
   >
     25
   </span>
diff --git a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap
index 69440a95a..af48fd83d 100644
--- a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap
@@ -15,66 +15,75 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
       <div class=\\"mt-3\\">
         <ul class=\\"pagination justify-content-center\\">
           <li class=\\"page-item disabled\\">
-            <a class=\\"page-link\\"
-               href=\\"#\\"
-               aria-label=\\"Go to previous page\\"
+            <a
+              class=\\"page-link\\"
+              href=\\"#\\"
+              aria-label=\\"Go to previous page\\"
             >
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"angle-left\\"
-                   class=\\"svg-inline--fa fa-angle-left fa-w-8 \\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 256 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"angle-left\\"
+                class=\\"svg-inline--fa fa-angle-left fa-w-8 \\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 256 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z\\"
                 >
                 </path>
               </svg>
             </a>
           </li>
           <li class=\\"page-item active\\">
-            <a class=\\"page-link font-weight-bold\\"
-               href=\\"#\\"
-               aria-label=\\"Go to page number 1\\"
+            <a
+              class=\\"page-link font-weight-bold\\"
+              href=\\"#\\"
+              aria-label=\\"Go to page number 1\\"
             >
               1
             </a>
           </li>
           <li class=\\"page-item\\">
-            <a class=\\"page-link\\"
-               href=\\"#\\"
-               aria-label=\\"Go to page number 2\\"
+            <a
+              class=\\"page-link\\"
+              href=\\"#\\"
+              aria-label=\\"Go to page number 2\\"
             >
               2
             </a>
           </li>
           <li class=\\"page-item\\">
-            <a class=\\"page-link\\"
-               href=\\"#\\"
-               aria-label=\\"Go to page number 3\\"
+            <a
+              class=\\"page-link\\"
+              href=\\"#\\"
+              aria-label=\\"Go to page number 3\\"
             >
               3
             </a>
           </li>
           <li class=\\"page-item\\">
-            <a class=\\"page-link\\"
-               href=\\"#\\"
-               aria-label=\\"Go to next page\\"
+            <a
+              class=\\"page-link\\"
+              href=\\"#\\"
+              aria-label=\\"Go to next page\\"
             >
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"angle-right\\"
-                   class=\\"svg-inline--fa fa-angle-right fa-w-8 \\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 256 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"angle-right\\"
+                class=\\"svg-inline--fa fa-angle-right fa-w-8 \\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 256 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\\"
                 >
                 </path>
               </svg>
@@ -86,39 +95,45 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
   </div>
 </div>
 <div class=\\"d-flex flex-row-reverse\\">
-  <button type=\\"button\\"
-          class=\\"btn btn-primary\\"
+  <button
+    type=\\"button\\"
+    class=\\"btn btn-primary\\"
   >
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"check-circle\\"
-         class=\\"svg-inline--fa fa-check-circle fa-w-16 pe-1\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 512 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"check-circle\\"
+      class=\\"svg-inline--fa fa-check-circle fa-w-16 pe-1\\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 512 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z\\"
       >
       </path>
     </svg>
     Submit
   </button>
-  <button type=\\"button\\"
-          class=\\"btn btn-danger me-2\\"
+  <button
+    type=\\"button\\"
+    class=\\"btn btn-danger me-2\\"
   >
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"arrow-left\\"
-         class=\\"svg-inline--fa fa-arrow-left fa-w-14 pe-1\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 448 512\\"
+    <svg
+      aria-hidden=\\"true\\"
+      focusable=\\"false\\"
+      data-prefix=\\"fas\\"
+      data-icon=\\"arrow-left\\"
+      class=\\"svg-inline--fa fa-arrow-left fa-w-14 pe-1\\"
+      role=\\"img\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+      viewbox=\\"0 0 448 512\\"
     >
-      <path fill=\\"currentColor\\"
-            d=\\"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z\\"
+      <path
+        fill=\\"currentColor\\"
+        d=\\"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z\\"
       >
       </path>
     </svg>
diff --git a/ui/src/Components/SilenceModal/__snapshots__/SilenceModalContent.test.tsx.snap b/ui/src/Components/SilenceModal/__snapshots__/SilenceModalContent.test.tsx.snap
index ace456f5a..4c8704fe6 100644
--- a/ui/src/Components/SilenceModal/__snapshots__/SilenceModalContent.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/__snapshots__/SilenceModalContent.test.tsx.snap
@@ -10,8 +10,9 @@ exports[`<SilenceModalContent /> Editor renders SilenceSubmitController when sil
     <span class=\\"nav-item nav-link cursor-pointer mx-1 px-2 components-tab-inactive\\">
       Browse
     </span>
-    <button type=\\"button\\"
-            class=\\"btn-close my-auto\\"
+    <button
+      type=\\"button\\"
+      class=\\"btn-close my-auto\\"
     >
     </button>
   </nav>
@@ -24,20 +25,23 @@ exports[`<SilenceModalContent /> Editor renders SilenceSubmitController when sil
     </table>
   </div>
   <div class=\\"d-flex flex-row-reverse\\">
-    <button type=\\"button\\"
-            class=\\"btn btn-primary\\"
+    <button
+      type=\\"button\\"
+      class=\\"btn btn-primary\\"
     >
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"arrow-left\\"
-           class=\\"svg-inline--fa fa-arrow-left fa-w-14 pe-1\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 448 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"arrow-left\\"
+        class=\\"svg-inline--fa fa-arrow-left fa-w-14 pe-1\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 448 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z\\"
         >
         </path>
       </svg>
diff --git a/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap b/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap
index 9bada79b3..5dc002200 100644
--- a/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap
+++ b/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap
@@ -3,10 +3,11 @@
 exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <span aria-live=\\"polite\\"
-        aria-atomic=\\"false\\"
-        aria-relevant=\\"additions text\\"
-        class=\\"css-1f43avz-a11yText-A11yText\\"
+  <span
+    aria-live=\\"polite\\"
+    aria-atomic=\\"false\\"
+    aria-relevant=\\"additions text\\"
+    class=\\"css-1f43avz-a11yText-A11yText\\"
   >
     <span id=\\"aria-selection\\">
     </span>
@@ -20,19 +21,21 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
         Select...
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class
-             style=\\"display: inline-block;\\"
+        <div
+          class
+          style=\\"display: inline-block;\\"
         >
-          <input autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-3-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
+          <input
+            autocapitalize=\\"none\\"
+            autocomplete=\\"off\\"
+            autocorrect=\\"off\\"
+            id=\\"react-select-3-input\\"
+            spellcheck=\\"false\\"
+            tabindex=\\"0\\"
+            type=\\"text\\"
+            aria-autocomplete=\\"list\\"
+            style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+            value
           >
           <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
@@ -42,15 +45,17 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
     <div class=\\" css-vcwr3k-IndicatorsContainer\\">
       <span class=\\" css-1okebmr-indicatorSeparator\\">
       </span>
-      <div class=\\" css-1ij327q-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\" css-1ij327q-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
           </path>
@@ -65,10 +70,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
 exports[`<WrappedCustomMultiSelect /> matches snapshot when focused and disabled 1`] = `
 "
 <div class=\\" css-14jk2my-container\\">
-  <span aria-live=\\"polite\\"
-        aria-atomic=\\"false\\"
-        aria-relevant=\\"additions text\\"
-        class=\\"css-1f43avz-a11yText-A11yText\\"
+  <span
+    aria-live=\\"polite\\"
+    aria-atomic=\\"false\\"
+    aria-relevant=\\"additions text\\"
+    class=\\"css-1f43avz-a11yText-A11yText\\"
   >
     <span id=\\"aria-selection\\">
     </span>
@@ -82,20 +88,22 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused and disabled
         Select...
       </div>
       <div class=\\"css-1h1cjkp-Input\\">
-        <div class
-             style=\\"display: inline-block;\\"
+        <div
+          class
+          style=\\"display: inline-block;\\"
         >
-          <input disabled
-                 autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-4-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
+          <input
+            disabled
+            autocapitalize=\\"none\\"
+            autocomplete=\\"off\\"
+            autocorrect=\\"off\\"
+            id=\\"react-select-4-input\\"
+            spellcheck=\\"false\\"
+            tabindex=\\"0\\"
+            type=\\"text\\"
+            aria-autocomplete=\\"list\\"
+            style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+            value
           >
           <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
@@ -105,15 +113,17 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused and disabled
     <div class=\\" css-15bdmde-IndicatorsContainer\\">
       <span class=\\" css-109onse-indicatorSeparator\\">
       </span>
-      <div class=\\" css-1ij327q-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\" css-1ij327q-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
           </path>
@@ -128,10 +138,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused and disabled
 exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <span aria-live=\\"polite\\"
-        aria-atomic=\\"false\\"
-        aria-relevant=\\"additions text\\"
-        class=\\"css-1f43avz-a11yText-A11yText\\"
+  <span
+    aria-live=\\"polite\\"
+    aria-atomic=\\"false\\"
+    aria-relevant=\\"additions text\\"
+    class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
   <div class=\\" css-cat782-control\\">
@@ -140,19 +151,21 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
         foo
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class
-             style=\\"display: inline-block;\\"
+        <div
+          class
+          style=\\"display: inline-block;\\"
         >
-          <input autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-5-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
+          <input
+            autocapitalize=\\"none\\"
+            autocomplete=\\"off\\"
+            autocorrect=\\"off\\"
+            id=\\"react-select-5-input\\"
+            spellcheck=\\"false\\"
+            tabindex=\\"0\\"
+            type=\\"text\\"
+            aria-autocomplete=\\"list\\"
+            style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+            value
           >
           <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
@@ -162,15 +175,17 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
     <div class=\\" css-vcwr3k-IndicatorsContainer\\">
       <span class=\\" css-1okebmr-indicatorSeparator\\">
       </span>
-      <div class=\\" css-tlfecz-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\" css-tlfecz-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
           </path>
@@ -185,10 +200,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
 exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
 "
 <div class=\\" css-14jk2my-container\\">
-  <span aria-live=\\"polite\\"
-        aria-atomic=\\"false\\"
-        aria-relevant=\\"additions text\\"
-        class=\\"css-1f43avz-a11yText-A11yText\\"
+  <span
+    aria-live=\\"polite\\"
+    aria-atomic=\\"false\\"
+    aria-relevant=\\"additions text\\"
+    class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
   <div class=\\" css-j5h6r7-control\\">
@@ -197,20 +213,22 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
         foo
       </div>
       <div class=\\"css-1h1cjkp-Input\\">
-        <div class
-             style=\\"display: inline-block;\\"
+        <div
+          class
+          style=\\"display: inline-block;\\"
         >
-          <input disabled
-                 autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-7-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
+          <input
+            disabled
+            autocapitalize=\\"none\\"
+            autocomplete=\\"off\\"
+            autocorrect=\\"off\\"
+            id=\\"react-select-7-input\\"
+            spellcheck=\\"false\\"
+            tabindex=\\"0\\"
+            type=\\"text\\"
+            aria-autocomplete=\\"list\\"
+            style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+            value
           >
           <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
@@ -220,15 +238,17 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
     <div class=\\" css-15bdmde-IndicatorsContainer\\">
       <span class=\\" css-109onse-indicatorSeparator\\">
       </span>
-      <div class=\\" css-tlfecz-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\" css-tlfecz-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
           </path>
@@ -243,10 +263,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
 exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <span aria-live=\\"polite\\"
-        aria-atomic=\\"false\\"
-        aria-relevant=\\"additions text\\"
-        class=\\"css-1f43avz-a11yText-A11yText\\"
+  <span
+    aria-live=\\"polite\\"
+    aria-atomic=\\"false\\"
+    aria-relevant=\\"additions text\\"
+    class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
   <div class=\\" css-cat782-control\\">
@@ -255,19 +276,21 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
         Select...
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class
-             style=\\"display: inline-block;\\"
+        <div
+          class
+          style=\\"display: inline-block;\\"
         >
-          <input autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-2-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
+          <input
+            autocapitalize=\\"none\\"
+            autocomplete=\\"off\\"
+            autocorrect=\\"off\\"
+            id=\\"react-select-2-input\\"
+            spellcheck=\\"false\\"
+            tabindex=\\"0\\"
+            type=\\"text\\"
+            aria-autocomplete=\\"list\\"
+            style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+            value
           >
           <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
@@ -277,15 +300,17 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
     <div class=\\" css-vcwr3k-IndicatorsContainer\\">
       <span class=\\" css-1okebmr-indicatorSeparator\\">
       </span>
-      <div class=\\" css-tlfecz-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\" css-tlfecz-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
           </path>
@@ -300,10 +325,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
 exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a value 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
-  <span aria-live=\\"polite\\"
-        aria-atomic=\\"false\\"
-        aria-relevant=\\"additions text\\"
-        class=\\"css-1f43avz-a11yText-A11yText\\"
+  <span
+    aria-live=\\"polite\\"
+    aria-atomic=\\"false\\"
+    aria-relevant=\\"additions text\\"
+    class=\\"css-1f43avz-a11yText-A11yText\\"
   >
   </span>
   <div class=\\" css-cat782-control\\">
@@ -313,12 +339,13 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
           foo
         </div>
         <div class=\\"css-1ucqin4\\">
-          <svg height=\\"14\\"
-               width=\\"14\\"
-               viewbox=\\"0 0 20 20\\"
-               aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               class=\\"css-tj5bde-Svg\\"
+          <svg
+            height=\\"14\\"
+            width=\\"14\\"
+            viewbox=\\"0 0 20 20\\"
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            class=\\"css-tj5bde-Svg\\"
           >
             <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
             </path>
@@ -326,19 +353,21 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
         </div>
       </div>
       <div class=\\"css-ps6ina-Input\\">
-        <div class
-             style=\\"display: inline-block;\\"
+        <div
+          class
+          style=\\"display: inline-block;\\"
         >
-          <input autocapitalize=\\"none\\"
-                 autocomplete=\\"off\\"
-                 autocorrect=\\"off\\"
-                 id=\\"react-select-6-input\\"
-                 spellcheck=\\"false\\"
-                 tabindex=\\"0\\"
-                 type=\\"text\\"
-                 aria-autocomplete=\\"list\\"
-                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                 value
+          <input
+            autocapitalize=\\"none\\"
+            autocomplete=\\"off\\"
+            autocorrect=\\"off\\"
+            id=\\"react-select-6-input\\"
+            spellcheck=\\"false\\"
+            tabindex=\\"0\\"
+            type=\\"text\\"
+            aria-autocomplete=\\"list\\"
+            style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+            value
           >
           <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
@@ -346,15 +375,17 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
       </div>
     </div>
     <div class=\\" css-vcwr3k-IndicatorsContainer\\">
-      <div class=\\" css-tlfecz-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\" css-tlfecz-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
           </path>
@@ -362,15 +393,17 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
       </div>
       <span class=\\" css-1okebmr-indicatorSeparator\\">
       </span>
-      <div class=\\" css-tlfecz-indicatorContainer\\"
-           aria-hidden=\\"true\\"
+      <div
+        class=\\" css-tlfecz-indicatorContainer\\"
+        aria-hidden=\\"true\\"
       >
-        <svg height=\\"20\\"
-             width=\\"20\\"
-             viewbox=\\"0 0 20 20\\"
-             aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             class=\\"css-tj5bde-Svg\\"
+        <svg
+          height=\\"20\\"
+          width=\\"20\\"
+          viewbox=\\"0 0 20 20\\"
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          class=\\"css-tj5bde-Svg\\"
         >
           <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
           </path>
diff --git a/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap b/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap
index 04052949a..3ebe65026 100644
--- a/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap
+++ b/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap
@@ -4,20 +4,23 @@ exports[`<AppToasts /> renders UpgradeToastMessage when alertStore.info.upgradeR
 "
 <li class=\\"nav-item components-navbar-button ml-auto\\">
   <div class=\\" tooltip-trigger\\">
-    <span id=\\"components-notifications\\"
-          class=\\"nav-link cursor-pointer\\"
+    <span
+      id=\\"components-notifications\\"
+      class=\\"nav-link cursor-pointer\\"
     >
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"info-circle\\"
-           class=\\"svg-inline--fa fa-info-circle fa-w-16 fa-fw \\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"info-circle\\"
+        class=\\"svg-inline--fa fa-info-circle fa-w-16 fa-fw \\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 512 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\\"
         >
         </path>
       </svg>
@@ -28,31 +31,35 @@ exports[`<AppToasts /> renders UpgradeToastMessage when alertStore.info.upgradeR
   <div class=\\"m-1 bg-toast text-white rounded shadow components-animation-fade-appear components-animation-fade-appear-active\\">
     <div class=\\"d-flex flex-row p-1\\">
       <div class=\\"flex-shrink-0 flex-grow-0 align-self-center fa-stack fa-2x\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"circle\\"
-             class=\\"svg-inline--fa fa-circle fa-w-16 fa-stack-2x text-success\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 512 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"circle\\"
+          class=\\"svg-inline--fa fa-circle fa-w-16 fa-stack-2x text-success\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 512 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\\"
           >
           </path>
         </svg>
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"arrow-up\\"
-             class=\\"svg-inline--fa fa-arrow-up fa-w-14 fa-stack-1x text-white\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 448 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"arrow-up\\"
+          class=\\"svg-inline--fa fa-arrow-up fa-w-14 fa-stack-1x text-white\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 448 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z\\"
           >
           </path>
         </svg>
@@ -68,32 +75,37 @@ exports[`<AppToasts /> renders UpgradeToastMessage when alertStore.info.upgradeR
             </code>
           </div>
           <div class=\\"d-flex flex-row-reverse\\">
-            <button type=\\"button\\"
-                    class=\\"btn btn-sm btn-light\\"
+            <button
+              type=\\"button\\"
+              class=\\"btn btn-sm btn-light\\"
             >
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"stop\\"
-                   class=\\"svg-inline--fa fa-stop fa-w-14 me-2\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
+              <svg
+                aria-hidden=\\"true\\"
+                focusable=\\"false\\"
+                data-prefix=\\"fas\\"
+                data-icon=\\"stop\\"
+                class=\\"svg-inline--fa fa-stop fa-w-14 me-2\\"
+                role=\\"img\\"
+                xmlns=\\"http://www.w3.org/2000/svg\\"
+                viewbox=\\"0 0 448 512\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z\\"
+                <path
+                  fill=\\"currentColor\\"
+                  d=\\"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z\\"
                 >
                 </path>
               </svg>
               Stop auto-reload
             </button>
           </div>
-          <div class=\\"mt-2 progress bg-dark\\"
-               style=\\"height: 2px;\\"
+          <div
+            class=\\"mt-2 progress bg-dark\\"
+            style=\\"height: 2px;\\"
           >
-            <div class=\\"progress-bar bg-white toast-upgrade-progressbar\\"
-                 role=\\"progressbar\\"
-                 style=\\"width: 100px;\\"
+            <div
+              class=\\"progress-bar bg-white toast-upgrade-progressbar\\"
+              role=\\"progressbar\\"
+              style=\\"width: 100px;\\"
             >
             </div>
           </div>
@@ -109,20 +121,23 @@ exports[`<AppToasts /> renders upstream error toasts for each unhealthy upstream
 "
 <li class=\\"nav-item components-navbar-button ml-auto\\">
   <div class=\\" tooltip-trigger\\">
-    <span id=\\"components-notifications\\"
-          class=\\"nav-link cursor-pointer\\"
+    <span
+      id=\\"components-notifications\\"
+      class=\\"nav-link cursor-pointer\\"
     >
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"info-circle\\"
-           class=\\"svg-inline--fa fa-info-circle fa-w-16 fa-fw \\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"info-circle\\"
+        class=\\"svg-inline--fa fa-info-circle fa-w-16 fa-fw \\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 512 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\\"
         >
         </path>
       </svg>
@@ -133,31 +148,35 @@ exports[`<AppToasts /> renders upstream error toasts for each unhealthy upstream
   <div class=\\"m-1 bg-toast text-white rounded shadow components-animation-fade-appear components-animation-fade-appear-active\\">
     <div class=\\"d-flex flex-row p-1\\">
       <div class=\\"flex-shrink-0 flex-grow-0 align-self-center fa-stack fa-2x\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"circle\\"
-             class=\\"svg-inline--fa fa-circle fa-w-16 fa-stack-2x text-danger\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 512 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"circle\\"
+          class=\\"svg-inline--fa fa-circle fa-w-16 fa-stack-2x text-danger\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 512 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\\"
           >
           </path>
         </svg>
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"exclamation\\"
-             class=\\"svg-inline--fa fa-exclamation fa-w-6 fa-stack-1x text-white\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 192 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"exclamation\\"
+          class=\\"svg-inline--fa fa-exclamation fa-w-6 fa-stack-1x text-white\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 192 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z\\"
           >
           </path>
         </svg>
@@ -176,17 +195,19 @@ exports[`<AppToasts /> renders upstream error toasts for each unhealthy upstream
       </div>
       <div class=\\"flex-shrink-0 flex-grow-0 align-self-top\\">
         <span class=\\"badge components-label cursor-pointer with-click with-click-dark\\">
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"times\\"
-               class=\\"svg-inline--fa fa-times fa-w-11 \\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 352 512\\"
+          <svg
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            data-prefix=\\"fas\\"
+            data-icon=\\"times\\"
+            class=\\"svg-inline--fa fa-times fa-w-11 \\"
+            role=\\"img\\"
+            xmlns=\\"http://www.w3.org/2000/svg\\"
+            viewbox=\\"0 0 352 512\\"
           >
-            <path fill=\\"currentColor\\"
-                  d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
+            <path
+              fill=\\"currentColor\\"
+              d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
             >
             </path>
           </svg>
@@ -197,31 +218,35 @@ exports[`<AppToasts /> renders upstream error toasts for each unhealthy upstream
   <div class=\\"m-1 bg-toast text-white rounded shadow components-animation-fade-appear components-animation-fade-appear-active\\">
     <div class=\\"d-flex flex-row p-1\\">
       <div class=\\"flex-shrink-0 flex-grow-0 align-self-center fa-stack fa-2x\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"circle\\"
-             class=\\"svg-inline--fa fa-circle fa-w-16 fa-stack-2x text-danger\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 512 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"circle\\"
+          class=\\"svg-inline--fa fa-circle fa-w-16 fa-stack-2x text-danger\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 512 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\\"
           >
           </path>
         </svg>
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"exclamation\\"
-             class=\\"svg-inline--fa fa-exclamation fa-w-6 fa-stack-1x text-white\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 192 512\\"
+        <svg
+          aria-hidden=\\"true\\"
+          focusable=\\"false\\"
+          data-prefix=\\"fas\\"
+          data-icon=\\"exclamation\\"
+          class=\\"svg-inline--fa fa-exclamation fa-w-6 fa-stack-1x text-white\\"
+          role=\\"img\\"
+          xmlns=\\"http://www.w3.org/2000/svg\\"
+          viewbox=\\"0 0 192 512\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z\\"
+          <path
+            fill=\\"currentColor\\"
+            d=\\"M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z\\"
           >
           </path>
         </svg>
@@ -240,17 +265,19 @@ exports[`<AppToasts /> renders upstream error toasts for each unhealthy upstream
       </div>
       <div class=\\"flex-shrink-0 flex-grow-0 align-self-top\\">
         <span class=\\"badge components-label cursor-pointer with-click with-click-dark\\">
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"times\\"
-               class=\\"svg-inline--fa fa-times fa-w-11 \\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 352 512\\"
+          <svg
+            aria-hidden=\\"true\\"
+            focusable=\\"false\\"
+            data-prefix=\\"fas\\"
+            data-icon=\\"times\\"
+            class=\\"svg-inline--fa fa-times fa-w-11 \\"
+            role=\\"img\\"
+            xmlns=\\"http://www.w3.org/2000/svg\\"
+            viewbox=\\"0 0 352 512\\"
           >
-            <path fill=\\"currentColor\\"
-                  d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
+            <path
+              fill=\\"currentColor\\"
+              d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
             >
             </path>
           </svg>
diff --git a/ui/src/Components/Toast/__snapshots__/ToastMessages.test.tsx.snap b/ui/src/Components/Toast/__snapshots__/ToastMessages.test.tsx.snap
index 59edebdbb..435334826 100644
--- a/ui/src/Components/Toast/__snapshots__/ToastMessages.test.tsx.snap
+++ b/ui/src/Components/Toast/__snapshots__/ToastMessages.test.tsx.snap
@@ -29,32 +29,37 @@ exports[`<UpgradeToastMessage /> matches snapshot 1`] = `
     </code>
   </div>
   <div class=\\"d-flex flex-row-reverse\\">
-    <button type=\\"button\\"
-            class=\\"btn btn-sm btn-light\\"
+    <button
+      type=\\"button\\"
+      class=\\"btn btn-sm btn-light\\"
     >
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"stop\\"
-           class=\\"svg-inline--fa fa-stop fa-w-14 me-2\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 448 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"stop\\"
+        class=\\"svg-inline--fa fa-stop fa-w-14 me-2\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 448 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z\\"
         >
         </path>
       </svg>
       Stop auto-reload
     </button>
   </div>
-  <div class=\\"mt-2 progress bg-dark\\"
-       style=\\"height: 2px;\\"
+  <div
+    class=\\"mt-2 progress bg-dark\\"
+    style=\\"height: 2px;\\"
   >
-    <div class=\\"progress-bar bg-white toast-upgrade-progressbar\\"
-         role=\\"progressbar\\"
-         style=\\"width: 100px;\\"
+    <div
+      class=\\"progress-bar bg-white toast-upgrade-progressbar\\"
+      role=\\"progressbar\\"
+      style=\\"width: 100px;\\"
     >
     </div>
   </div>
diff --git a/ui/src/Components/ToggleIcon/__snapshots__/index.test.tsx.snap b/ui/src/Components/ToggleIcon/__snapshots__/index.test.tsx.snap
index f2eb75cd8..2859b9b67 100644
--- a/ui/src/Components/ToggleIcon/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/ToggleIcon/__snapshots__/index.test.tsx.snap
@@ -2,18 +2,20 @@
 
 exports[`<ToggleIcon /> matches snapshot when closed 1`] = `
 "
-<svg aria-hidden=\\"true\\"
-     focusable=\\"false\\"
-     data-prefix=\\"fas\\"
-     data-icon=\\"chevron-down\\"
-     class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 \\"
-     role=\\"img\\"
-     xmlns=\\"http://www.w3.org/2000/svg\\"
-     viewbox=\\"0 0 448 512\\"
-     style=\\"transition:transform 0.25s ease-in-out\\"
+<svg
+  aria-hidden=\\"true\\"
+  focusable=\\"false\\"
+  data-prefix=\\"fas\\"
+  data-icon=\\"chevron-down\\"
+  class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 \\"
+  role=\\"img\\"
+  xmlns=\\"http://www.w3.org/2000/svg\\"
+  viewbox=\\"0 0 448 512\\"
+  style=\\"transition:transform 0.25s ease-in-out\\"
 >
-  <path fill=\\"currentColor\\"
-        d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+  <path
+    fill=\\"currentColor\\"
+    d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
   >
   </path>
 </svg>
@@ -22,18 +24,20 @@ exports[`<ToggleIcon /> matches snapshot when closed 1`] = `
 
 exports[`<ToggleIcon /> matches snapshot when open 1`] = `
 "
-<svg aria-hidden=\\"true\\"
-     focusable=\\"false\\"
-     data-prefix=\\"fas\\"
-     data-icon=\\"chevron-down\\"
-     class=\\"svg-inline--fa fa-chevron-down fa-w-14 \\"
-     role=\\"img\\"
-     xmlns=\\"http://www.w3.org/2000/svg\\"
-     viewbox=\\"0 0 448 512\\"
-     style=\\"transition:transform 0.25s ease-in-out\\"
+<svg
+  aria-hidden=\\"true\\"
+  focusable=\\"false\\"
+  data-prefix=\\"fas\\"
+  data-icon=\\"chevron-down\\"
+  class=\\"svg-inline--fa fa-chevron-down fa-w-14 \\"
+  role=\\"img\\"
+  xmlns=\\"http://www.w3.org/2000/svg\\"
+  viewbox=\\"0 0 448 512\\"
+  style=\\"transition:transform 0.25s ease-in-out\\"
 >
-  <path fill=\\"currentColor\\"
-        d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+  <path
+    fill=\\"currentColor\\"
+    d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
   >
   </path>
 </svg>
diff --git a/ui/src/Components/ValidationError/__snapshots__/index.test.tsx.snap b/ui/src/Components/ValidationError/__snapshots__/index.test.tsx.snap
index e4f938d0e..823ae8fe1 100644
--- a/ui/src/Components/ValidationError/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/ValidationError/__snapshots__/index.test.tsx.snap
@@ -3,17 +3,19 @@
 exports[`<ValidationError /> matches snapshot 1`] = `
 "
 <span class=\\"text-danger\\">
-  <svg aria-hidden=\\"true\\"
-       focusable=\\"false\\"
-       data-prefix=\\"fas\\"
-       data-icon=\\"exclamation-circle\\"
-       class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 \\"
-       role=\\"img\\"
-       xmlns=\\"http://www.w3.org/2000/svg\\"
-       viewbox=\\"0 0 512 512\\"
+  <svg
+    aria-hidden=\\"true\\"
+    focusable=\\"false\\"
+    data-prefix=\\"fas\\"
+    data-icon=\\"exclamation-circle\\"
+    class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 \\"
+    role=\\"img\\"
+    xmlns=\\"http://www.w3.org/2000/svg\\"
+    viewbox=\\"0 0 512 512\\"
   >
-    <path fill=\\"currentColor\\"
-          d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
+    <path
+      fill=\\"currentColor\\"
+      d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
     >
     </path>
   </svg>
diff --git a/ui/src/__snapshots__/ErrorBoundary.test.tsx.snap b/ui/src/__snapshots__/ErrorBoundary.test.tsx.snap
index f4fbddce0..ab54e8f74 100644
--- a/ui/src/__snapshots__/ErrorBoundary.test.tsx.snap
+++ b/ui/src/__snapshots__/ErrorBoundary.test.tsx.snap
@@ -5,17 +5,19 @@ exports[`<ErrorBoundary /> matches snapshot 1`] = `
 <div class=\\"text-placeholder screen-center\\">
   <div class=\\"container-fluid text-center\\">
     <h1 class=\\"display-1\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"bomb\\"
-           class=\\"svg-inline--fa fa-bomb fa-w-16 text-danger me-4\\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+      <svg
+        aria-hidden=\\"true\\"
+        focusable=\\"false\\"
+        data-prefix=\\"fas\\"
+        data-icon=\\"bomb\\"
+        class=\\"svg-inline--fa fa-bomb fa-w-16 text-danger me-4\\"
+        role=\\"img\\"
+        xmlns=\\"http://www.w3.org/2000/svg\\"
+        viewbox=\\"0 0 512 512\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M440.5 88.5l-52 52L415 167c9.4 9.4 9.4 24.6 0 33.9l-17.4 17.4c11.8 26.1 18.4 55.1 18.4 85.6 0 114.9-93.1 208-208 208S0 418.9 0 304 93.1 96 208 96c30.5 0 59.5 6.6 85.6 18.4L311 97c9.4-9.4 24.6-9.4 33.9 0l26.5 26.5 52-52 17.1 17zM500 60h-24c-6.6 0-12 5.4-12 12s5.4 12 12 12h24c6.6 0 12-5.4 12-12s-5.4-12-12-12zM440 0c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12s12-5.4 12-12V12c0-6.6-5.4-12-12-12zm33.9 55l17-17c4.7-4.7 4.7-12.3 0-17-4.7-4.7-12.3-4.7-17 0l-17 17c-4.7 4.7-4.7 12.3 0 17 4.8 4.7 12.4 4.7 17 0zm-67.8 0c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17zm67.8 34c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17zM112 272c0-35.3 28.7-64 64-64 8.8 0 16-7.2 16-16s-7.2-16-16-16c-52.9 0-96 43.1-96 96 0 8.8 7.2 16 16 16s16-7.2 16-16z\\"
+        <path
+          fill=\\"currentColor\\"
+          d=\\"M440.5 88.5l-52 52L415 167c9.4 9.4 9.4 24.6 0 33.9l-17.4 17.4c11.8 26.1 18.4 55.1 18.4 85.6 0 114.9-93.1 208-208 208S0 418.9 0 304 93.1 96 208 96c30.5 0 59.5 6.6 85.6 18.4L311 97c9.4-9.4 24.6-9.4 33.9 0l26.5 26.5 52-52 17.1 17zM500 60h-24c-6.6 0-12 5.4-12 12s5.4 12 12 12h24c6.6 0 12-5.4 12-12s-5.4-12-12-12zM440 0c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12s12-5.4 12-12V12c0-6.6-5.4-12-12-12zm33.9 55l17-17c4.7-4.7 4.7-12.3 0-17-4.7-4.7-12.3-4.7-17 0l-17 17c-4.7 4.7-4.7 12.3 0 17 4.8 4.7 12.4 4.7 17 0zm-67.8 0c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17zm67.8 34c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17zM112 272c0-35.3 28.7-64 64-64 8.8 0 16-7.2 16-16s-7.2-16-16-16c-52.9 0-96 43.1-96 96 0 8.8 7.2 16 16 16s16-7.2 16-16z\\"
         >
         </path>
       </svg>
@@ -28,15 +30,17 @@ exports[`<ErrorBoundary /> matches snapshot 1`] = `
     </p>
     <p class=\\"text-muted d-inline-block\\">
       This page will auto refresh in 60s
-      <span class=\\"progress bg-secondary mx-auto\\"
-            style=\\"height: 2px;\\"
+      <span
+        class=\\"progress bg-secondary mx-auto\\"
+        style=\\"height: 2px;\\"
       >
-        <span class=\\"progress-bar bg-info\\"
-              role=\\"progressbar\\"
-              style=\\"width: 100%;\\"
-              aria-valuenow=\\"100\\"
-              aria-valuemin=\\"0\\"
-              aria-valuemax=\\"100\\"
+        <span
+          class=\\"progress-bar bg-info\\"
+          role=\\"progressbar\\"
+          style=\\"width: 100%;\\"
+          aria-valuenow=\\"100\\"
+          aria-valuemin=\\"0\\"
+          aria-valuemax=\\"100\\"
         >
         </span>
       </span>