From 0bfda409122ed6837e13cf7f5418b093bf3ef97b Mon Sep 17 00:00:00 2001
From: Manuel Zedel <manuel.zedel@northern.tech>
Date: Wed, 16 Oct 2024 13:31:16 +0200
Subject: [PATCH] feat(gui): extended webhook event details

Ticket: MEN-7574
Changelog: Title
Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>
---
 .../__snapshots__/webhooks.test.js.snap       | 2091 ++++++++---------
 .../components/settings/webhooks/activity.js  |  158 --
 .../components/settings/webhooks/activity.tsx |   70 +
 .../settings/webhooks/eventdetails.tsx        |   83 +
 .../settings/webhooks/management.js           |  149 +-
 5 files changed, 1230 insertions(+), 1321 deletions(-)
 delete mode 100644 frontend/src/js/components/settings/webhooks/activity.js
 create mode 100644 frontend/src/js/components/settings/webhooks/activity.tsx
 create mode 100644 frontend/src/js/components/settings/webhooks/eventdetails.tsx

diff --git a/frontend/src/js/components/settings/webhooks/__snapshots__/webhooks.test.js.snap b/frontend/src/js/components/settings/webhooks/__snapshots__/webhooks.test.js.snap
index 8fe3499d..28d7d998 100644
--- a/frontend/src/js/components/settings/webhooks/__snapshots__/webhooks.test.js.snap
+++ b/frontend/src/js/components/settings/webhooks/__snapshots__/webhooks.test.js.snap
@@ -1,25 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Webhooks Component renders correctly 1`] = `
-<div>
-  <h2>
-    Webhooks
-  </h2>
-  <div
-    class="flexbox centered"
-  >
-    No webhooks are configured yet. Learn more about webhooks in our 
-    <a
-      class=""
-      href="https://docs.mender.io/development/server-integration"
-      rel=""
-      target="_blank"
-    >
-      documentation
-    </a>
-  </div>
-</div>
-`;
+exports[`Webhooks Component renders correctly 1`] = `null`;
 
 exports[`Webhooks Component renders correctly with entries  1`] = `
 .emotion-0 {
@@ -114,6 +95,10 @@ exports[`Webhooks Component renders correctly with entries  1`] = `
 }
 
 .emotion-11 {
+  white-space: nowrap;
+}
+
+.emotion-12 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -127,10 +112,11 @@ exports[`Webhooks Component renders correctly with entries  1`] = `
   -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   fill: currentColor;
-  font-size: 1.3929rem;
+  font-size: 1.1607rem;
+  margin-left: 8px;
 }
 
-.emotion-11 iconButton {
+.emotion-12 iconButton {
   margin-right: 8px;
 }
 
@@ -157,7 +143,7 @@ exports[`Webhooks Component renders correctly with entries  1`] = `
           class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium columnHeader nonSortable emotion-3"
           scope="col"
         >
-          Status
+          Description
         </th>
         <th
           class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium columnHeader nonSortable emotion-3"
@@ -180,26 +166,23 @@ exports[`Webhooks Component renders correctly with entries  1`] = `
         </td>
         <td
           class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-8"
-        >
-          enabled
-        </td>
+        />
         <td
           class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-8"
         >
           <div
-            class="bold flexbox center-aligned link-color margin-right-small uppercased"
-            style="white-space: nowrap;"
+            class="bold flexbox center-aligned link-color emotion-11 "
           >
-            view details 
+            View details
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-11"
-              data-testid="ArrowRightAltIcon"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall  emotion-12"
+              data-testid="ArrowForwardIcon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <path
-                d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"
+                d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
               />
             </svg>
           </div>
@@ -579,9 +562,38 @@ exports[`Webhooks Component static components renders WebhookActivity correctly
                   <div
                     class="MuiAccordionDetails-root emotion-10"
                   >
-                    <code>
-                      {"id":"1","status":"accepted"}
-                    </code>
+                    <section
+                      style="display: flex; position: relative; text-align: initial; width: 100%; height: 600px;"
+                    >
+                      <div
+                        style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+                      >
+                        <div
+                          class="loaderContainer"
+                        >
+                          <div
+                            class="  loader"
+                          >
+                            <span
+                              class="dot dot_1"
+                            />
+                            <span
+                              class="dot dot_2"
+                            />
+                            <span
+                              class="dot dot_3"
+                            />
+                            <span
+                              class="dot dot_4"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="editor modified"
+                        style="width: 100%; display: none;"
+                      />
+                    </section>
                   </div>
                 </div>
               </div>
@@ -667,9 +679,38 @@ exports[`Webhooks Component static components renders WebhookActivity correctly
                   <div
                     class="MuiAccordionDetails-root emotion-10"
                   >
-                    <code>
-                      {"id":"3","status":"accepted"}
-                    </code>
+                    <section
+                      style="display: flex; position: relative; text-align: initial; width: 100%; height: 600px;"
+                    >
+                      <div
+                        style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+                      >
+                        <div
+                          class="loaderContainer"
+                        >
+                          <div
+                            class="  loader"
+                          >
+                            <span
+                              class="dot dot_1"
+                            />
+                            <span
+                              class="dot dot_2"
+                            />
+                            <span
+                              class="dot dot_3"
+                            />
+                            <span
+                              class="dot dot_4"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="editor modified"
+                        style="width: 100%; display: none;"
+                      />
+                    </section>
                   </div>
                 </div>
               </div>
@@ -679,10 +720,13 @@ exports[`Webhooks Component static components renders WebhookActivity correctly
       </div>
     </div>
   </div>
+  <script
+    src="/ui/vs/loader.js"
+  />
 </body>
 `;
 
-exports[`Webhooks Component static components renders WebhookCreation correctly 1`] = `
+exports[`Webhooks Component static components renders WebhookConfiguration correctly 1`] = `
 .emotion-0 {
   position: fixed;
   z-index: 1300;
@@ -1143,7 +1187,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
-.emotion-14 {
+.emotion-12 {
+  color: rgba(0, 0, 0, 0.54);
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.6964rem;
+  line-height: 1.66;
+  text-align: left;
+  margin-top: 3px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+}
+
+.emotion-12.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-12.Mui-error {
+  color: #ab1000;
+}
+
+.emotion-15 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1164,16 +1229,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
   position: relative;
 }
 
-.emotion-14.Mui-disabled {
+.emotion-15.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-14 {
+label+.emotion-15 {
   margin-top: 16px;
 }
 
-.emotion-14::after {
+.emotion-15::after {
   left: 0;
   bottom: 0;
   content: "";
@@ -1188,19 +1253,19 @@ label+.emotion-14 {
   pointer-events: none;
 }
 
-.emotion-14.Mui-focused:after {
+.emotion-15.Mui-focused:after {
   -webkit-transform: scaleX(1) translateX(0);
   -moz-transform: scaleX(1) translateX(0);
   -ms-transform: scaleX(1) translateX(0);
   transform: scaleX(1) translateX(0);
 }
 
-.emotion-14.Mui-error::before,
-.emotion-14.Mui-error::after {
+.emotion-15.Mui-error::before,
+.emotion-15.Mui-error::after {
   border-bottom-color: #ab1000;
 }
 
-.emotion-14::before {
+.emotion-15::before {
   border-bottom: 1px solid rgba(0, 0, 0, 0.42);
   left: 0;
   bottom: 0;
@@ -1212,37 +1277,37 @@ label+.emotion-14 {
   pointer-events: none;
 }
 
-.emotion-14:hover:not(.Mui-disabled, .Mui-error):before {
+.emotion-15:hover:not(.Mui-disabled, .Mui-error):before {
   border-bottom: 2px solid rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-14:hover:not(.Mui-disabled, .Mui-error):before {
+  .emotion-15:hover:not(.Mui-disabled, .Mui-error):before {
     border-bottom: 1px solid rgba(0, 0, 0, 0.42);
   }
 }
 
-.emotion-14.Mui-disabled:before {
+.emotion-15.Mui-disabled:before {
   border-bottom-style: dotted;
 }
 
-.emotion-14::after {
+.emotion-15::after {
   border-bottom: 2px solid #337a87;
 }
 
-.emotion-14:before {
+.emotion-15:before {
   border-bottom: 1px solid rgb(224, 224, 224);
 }
 
-.emotion-14:hover:not($disabled):before {
+.emotion-15:hover:not($disabled):before {
   border-bottom: 2px solid #337a87!important;
 }
 
-.emotion-14:after {
+.emotion-15:after {
   border-bottom: 2px solid #337a87;
 }
 
-.emotion-15 {
+.emotion-16 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -1266,88 +1331,213 @@ label+.emotion-14 {
   padding-top: 0;
 }
 
-.emotion-15::-webkit-input-placeholder {
+.emotion-16::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-15::-moz-placeholder {
+.emotion-16::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-15::-ms-input-placeholder {
+.emotion-16::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-15:focus {
+.emotion-16:focus {
   outline: 0;
 }
 
-.emotion-15:invalid {
+.emotion-16:invalid {
   box-shadow: none;
 }
 
-.emotion-15::-webkit-search-decoration {
+.emotion-16::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-16::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-16::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-16::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-15.Mui-disabled {
+.emotion-16.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-15:-webkit-autofill {
+.emotion-16:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
+.emotion-19 {
+  gap: 16px;
+}
+
+.emotion-20 {
+  max-width: 100%;
+  font-family: Lato,sans-serif;
+  font-size: 0.7545rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  height: 32px;
+  color: rgba(10, 10, 11, 0.78);
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+  white-space: nowrap;
+  -webkit-transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  cursor: unset;
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border: 0;
+  padding: 0;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-color: #f7fafb;
+  color: rgba(0, 0, 0, 0.38);
+  text-transform: uppercase;
+  background-color: #f7fafb;
+  color: rgba(0, 0, 0, 0.38);
+  text-transform: uppercase;
+}
+
+.emotion-20.Mui-disabled {
+  opacity: 0.38;
+  pointer-events: none;
+}
+
+.emotion-20 .MuiChip-avatar {
+  margin-left: 5px;
+  margin-right: -6px;
+  width: 24px;
+  height: 24px;
+  color: #bcbcbc;
+  font-size: 0.6964rem;
+}
+
+.emotion-20 .MuiChip-avatarColorPrimary {
+  color: #fff;
+  background-color: rgb(35, 85, 94);
+}
+
+.emotion-20 .MuiChip-avatarColorSecondary {
+  color: #fff;
+  background-color: rgb(65, 10, 46);
+}
+
+.emotion-20 .MuiChip-avatarSmall {
+  margin-left: 4px;
+  margin-right: -4px;
+  width: 18px;
+  height: 18px;
+  font-size: 0.5804rem;
+}
+
+.emotion-20 .MuiChip-icon {
+  margin-left: 5px;
+  margin-right: -6px;
+}
+
+.emotion-20 .MuiChip-deleteIcon {
+  -webkit-tap-highlight-color: transparent;
+  color: rgba(10, 10, 11, 0.26);
+  font-size: 22px;
+  cursor: pointer;
+  margin: 0 5px 0 -6px;
+}
+
+.emotion-20 .MuiChip-deleteIcon:hover {
+  color: rgba(10, 10, 11, 0.4);
+}
+
+.emotion-20 .MuiChip-icon {
+  color: #bcbcbc;
+}
+
+.emotion-20:hover {
+  font-weight: bold;
+}
+
+.emotion-20:hover {
+  font-weight: bold;
+}
+
 .emotion-21 {
-  margin: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  border-width: 0;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.12);
-  border-bottom-width: thin;
-  border-color: rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 12px;
+  padding-right: 12px;
+  white-space: nowrap;
+}
+
+.emotion-24 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent;
+  margin-left: -11px;
+  margin-right: 16px;
+  margin-top: 18px;
+}
+
+.emotion-24.Mui-disabled {
+  cursor: default;
 }
 
-.emotion-22 {
+.emotion-24 .MuiFormControlLabel-label.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-25 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1380,574 +1570,69 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   -webkit-text-decoration: none;
   text-decoration: none;
   color: inherit;
-  font-family: Lato,sans-serif;
-  font-weight: 500;
-  font-size: 0.8125rem;
-  line-height: 1.75;
-  text-transform: uppercase;
-  min-width: 64px;
-  padding: 6px 16px;
-  border: 0;
-  border-radius: 4px;
-  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  padding: 6px 8px;
-  color: var(--variant-textColor);
-  background-color: var(--variant-textBg);
-  --variant-textColor: #337a87;
-  --variant-outlinedColor: #337a87;
-  --variant-outlinedBorder: rgba(51, 122, 135, 0.5);
-  --variant-containedColor: #fff;
-  --variant-containedBg: #337a87;
-  border-radius: 2px;
-  font-size: 14px;
-  font-weight: bold;
-  padding: 10px 15px;
+  padding: 9px;
+  border-radius: 50%;
+  color: rgba(0, 0, 0, 0.54);
+  color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-22::-moz-focus-inner {
+.emotion-25::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-22.Mui-disabled {
+.emotion-25.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-22 {
+  .emotion-25 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-22:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+.emotion-25:hover {
+  background-color: rgba(51, 122, 135, 0.04);
+}
+
+.emotion-25.Mui-checked,
+.emotion-25.MuiCheckbox-indeterminate {
+  color: #337a87;
 }
 
-.emotion-22.Mui-disabled {
+.emotion-25.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-@media (hover: hover) {
-  .emotion-22:hover {
-    --variant-containedBg: rgb(35, 85, 94);
-    --variant-textBg: rgba(51, 122, 135, 0.04);
-    --variant-outlinedBorder: #337a87;
-    --variant-outlinedBg: rgba(51, 122, 135, 0.04);
+@media (hover: none) {
+  .emotion-25:hover {
+    background-color: transparent;
   }
 }
 
-.emotion-22:hover {
-  colors: #337a87;
+.emotion-26 {
+  cursor: inherit;
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
 }
 
-.emotion-22.MuiButton-text {
-  color: rgba(10, 10, 11, 0.78);
+.emotion-28 {
+  margin: 0;
+  line-height: 1.5;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
 }
 
-<body
-  style="padding-right: 1024px; overflow: hidden;"
->
-  <div
-    aria-hidden="true"
-  />
-  <div
-    class="MuiDrawer-root MuiDrawer-modal MuiModal-root emotion-0"
-    role="presentation"
-  >
-    <div
-      aria-hidden="true"
-      class="MuiBackdrop-root MuiModal-backdrop emotion-1"
-      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-    />
-    <div
-      data-testid="sentinelStart"
-      tabindex="0"
-    />
-    <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation16 MuiDrawer-paper MuiDrawer-paperAnchorRight emotion-2"
-      style="--Paper-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12); min-width: 600px; width: 50vw;"
-      tabindex="-1"
-    >
-      <div
-        class="flexbox center-aligned margin-bottom-small space-between"
-      >
-        <div
-          class="flexbox center-aligned"
-        >
-          <h3>
-            Add a webhook
-          </h3>
-          <div
-            class=""
-            data-mui-internal-clone-element="true"
-          >
-            <div
-              class="relative"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium  emotion-3"
-                data-testid="HelpIcon"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
-                />
-              </svg>
-              <div
-                class="emotion-4 "
-              />
-            </div>
-          </div>
-        </div>
-        <button
-          aria-label="close"
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium emotion-5"
-          tabindex="0"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-6"
-            data-testid="CloseIcon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
-          </svg>
-        </button>
-      </div>
-      <hr
-        class="MuiDivider-root MuiDivider-fullWidth emotion-7"
-      />
-      <div
-        class="flexbox column"
-        style="width: 500px;"
-      >
-        <div
-          aria-label="Cannot edit webhook url after it has been saved"
-          class="MuiFormControl-root MuiTextField-root emotion-8"
-          data-mui-internal-clone-element="true"
-        >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-9"
-            data-shrink="false"
-            for="webhook-name"
-            id="webhook-name-label"
-          >
-            Url
-          </label>
-          <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-10"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input Mui-disabled emotion-11"
-              disabled=""
-              id="webhook-name"
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-        <div
-          aria-label="Cannot edit webhook description after it has been saved"
-          class="MuiFormControl-root MuiTextField-root emotion-8"
-          data-mui-internal-clone-element="true"
-        >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-9"
-            data-shrink="false"
-            for="webhook-description"
-            id="webhook-description-label"
-          >
-            Description (optional)
-          </label>
-          <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-14"
-          >
-            <textarea
-              aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-15"
-              disabled=""
-              id="webhook-description"
-              style="height: 0px; overflow: hidden;"
-            />
-            <textarea
-              aria-hidden="true"
-              class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-15"
-              readonly=""
-              style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding-top: 0px; padding-bottom: 0px; width: 100%;"
-              tabindex="-1"
-            />
-          </div>
-        </div>
-        <div
-          aria-label="Cannot edit webhook secrets after they have been saved"
-          class="MuiFormControl-root MuiTextField-root emotion-8"
-          data-mui-internal-clone-element="true"
-        >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-9"
-            data-shrink="false"
-            for="webhook-secret"
-            id="webhook-secret-label"
-          >
-            Secret (optional)
-          </label>
-          <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-10"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input Mui-disabled emotion-11"
-              disabled=""
-              id="webhook-secret"
-              type="password"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-      <hr
-        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-light margin-top-large emotion-21"
-      />
-      <div
-        class="flexbox centered margin-top"
-        style="justify-content: flex-end;"
-      >
-        <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-22"
-          tabindex="0"
-          type="button"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-    <div
-      data-testid="sentinelEnd"
-      tabindex="0"
-    />
-  </div>
-</body>
-`;
-
-exports[`Webhooks Component static components renders WebhookManagement correctly 1`] = `
-.emotion-0 {
-  position: fixed;
-  z-index: 1300;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  z-index: 1200;
-}
-
-.emotion-1 {
-  position: fixed;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  -webkit-tap-highlight-color: transparent;
-  z-index: -1;
-}
-
-.emotion-2 {
-  background-color: #fff;
-  color: rgba(10, 10, 11, 0.78);
-  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  box-shadow: var(--Paper-shadow);
-  background-image: var(--Paper-overlay);
-  overflow-y: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 100%;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  z-index: 1200;
-  -webkit-overflow-scrolling: touch;
-  position: fixed;
-  top: 0;
-  outline: 0;
-  right: 0;
-  min-width: 40vw;
-  max-width: 80vw;
-  padding: 30px 75px 5%;
-}
-
-.emotion-3 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  position: relative;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  margin: 0;
-  border-radius: 0;
-  padding: 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: inherit;
-  font-family: Lato,sans-serif;
-  font-weight: 500;
-  font-size: 0.8125rem;
-  line-height: 1.75;
-  text-transform: uppercase;
-  min-width: 64px;
-  padding: 6px 16px;
-  border: 0;
-  border-radius: 4px;
-  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  padding: 6px 8px;
-  color: var(--variant-textColor);
-  background-color: var(--variant-textBg);
-  --variant-textColor: #5d0f43;
-  --variant-outlinedColor: #5d0f43;
-  --variant-outlinedBorder: rgba(93, 15, 67, 0.5);
-  --variant-containedColor: #fff;
-  --variant-containedBg: #5d0f43;
-  border-radius: 2px;
-  font-size: 14px;
-  font-weight: bold;
-  padding: 10px 15px;
-}
-
-.emotion-3::-moz-focus-inner {
-  border-style: none;
-}
-
-.emotion-3.Mui-disabled {
-  pointer-events: none;
-  cursor: default;
-}
-
-@media print {
-  .emotion-3 {
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-  }
-}
-
-.emotion-3:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-3.Mui-disabled {
-  color: rgba(0, 0, 0, 0.26);
-}
-
-@media (hover: hover) {
-  .emotion-3:hover {
-    --variant-containedBg: rgb(65, 10, 46);
-    --variant-textBg: rgba(93, 15, 67, 0.04);
-    --variant-outlinedBorder: #5d0f43;
-    --variant-outlinedBg: rgba(93, 15, 67, 0.04);
-  }
-}
-
-.emotion-3:hover {
-  colors: #337a87;
-}
-
-.emotion-3.MuiButton-text {
-  color: rgba(10, 10, 11, 0.78);
-}
-
-.emotion-4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  position: relative;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  margin: 0;
-  border-radius: 0;
-  padding: 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: inherit;
-  text-align: center;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  font-size: 1.3929rem;
-  padding: 8px;
-  border-radius: 50%;
-  color: rgba(0, 0, 0, 0.54);
-  -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  font-size: 1.2rem;
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.emotion-4::-moz-focus-inner {
-  border-style: none;
-}
-
-.emotion-4.Mui-disabled {
-  pointer-events: none;
-  cursor: default;
-}
-
-@media print {
-  .emotion-4 {
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-  }
-}
-
-.emotion-4:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-@media (hover: none) {
-  .emotion-4:hover {
-    background-color: transparent;
-  }
-}
-
-.emotion-4.Mui-disabled {
-  background-color: transparent;
-  color: rgba(0, 0, 0, 0.26);
-}
-
-.emotion-5 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 1em;
-  height: 1em;
-  display: inline-block;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  fill: currentColor;
-  font-size: 1.3929rem;
-}
-
-.emotion-5 iconButton {
-  margin-right: 8px;
-}
-
-.emotion-6 {
-  margin: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  border-width: 0;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.12);
-  border-bottom-width: thin;
-}
-
-.emotion-7 {
-  overflow: hidden;
-  min-height: 48px;
-  -webkit-overflow-scrolling: touch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-@media (max-width:599.95px) {
-  .emotion-7 .MuiTabs-scrollButtons {
-    display: none;
-  }
-}
-
-.emotion-8 {
-  position: relative;
-  display: inline-block;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  white-space: nowrap;
-  overflow-x: hidden;
-  width: 100%;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-10 {
+.emotion-42 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1980,132 +1665,9 @@ exports[`Webhooks Component static components renders WebhookManagement correctl
   -webkit-text-decoration: none;
   text-decoration: none;
   color: inherit;
-  font-family: Lato,sans-serif;
-  font-weight: 500;
-  font-size: 0.8125rem;
-  line-height: 1.25;
-  text-transform: uppercase;
-  max-width: 360px;
-  min-width: 90px;
-  position: relative;
-  min-height: 48px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  padding: 12px 16px;
-  overflow: hidden;
-  white-space: normal;
-  text-align: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  color: rgba(0, 0, 0, 0.54);
-  text-transform: none;
-}
-
-.emotion-10::-moz-focus-inner {
-  border-style: none;
-}
-
-.emotion-10.Mui-disabled {
-  pointer-events: none;
-  cursor: default;
-}
-
-@media print {
-  .emotion-10 {
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-  }
-}
-
-.emotion-10.Mui-selected {
-  color: #337a87;
-}
-
-.emotion-10.Mui-disabled {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-.emotion-12 {
-  position: absolute;
-  height: 2px;
-  bottom: 0;
-  width: 100%;
-  -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  background-color: #337a87;
-}
-
-.emotion-13 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  vertical-align: top;
-  margin-top: 18px;
-  min-width: 240px;
-}
-
-.emotion-14 {
-  color: rgba(0, 0, 0, 0.54);
-  line-height: 1.4375em;
-  font-family: Lato,sans-serif;
-  font-weight: 400;
-  font-size: 0.9286rem;
-  padding: 0;
-  position: relative;
-  color: rgba(0, 0, 0, 0.54);
-  display: block;
-  transform-origin: top left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   max-width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  -webkit-transform: translate(0, 20px) scale(1);
-  -moz-transform: translate(0, 20px) scale(1);
-  -ms-transform: translate(0, 20px) scale(1);
-  transform: translate(0, 20px) scale(1);
-  -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-}
-
-.emotion-14.Mui-focused {
-  color: #337a87;
-}
-
-.emotion-14.Mui-disabled {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-.emotion-14.Mui-error {
-  color: #ab1000;
-}
-
-.emotion-14.Mui-focused {
-  color: #337a87;
-}
-
-.emotion-15 {
-  line-height: 1.4375em;
   font-family: Lato,sans-serif;
-  font-weight: 400;
-  font-size: 0.9286rem;
-  color: rgba(10, 10, 11, 0.78);
-  box-sizing: border-box;
-  position: relative;
-  cursor: text;
+  font-size: 0.7545rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2114,381 +1676,415 @@ exports[`Webhooks Component static components renders WebhookManagement correctl
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  position: relative;
-}
-
-.emotion-15.Mui-disabled {
-  color: rgba(0, 0, 0, 0.38);
-  cursor: default;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  height: 32px;
+  color: rgba(10, 10, 11, 0.78);
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+  white-space: nowrap;
+  -webkit-transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  cursor: unset;
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border: 0;
+  padding: 0;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-color: #337a87;
+  color: #fff;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid #f7f7f7;
+  color: #337a87;
+  border: 1px solid rgba(51, 122, 135, 0.7);
+  border-style: dashed;
 }
 
-label+.emotion-15 {
-  margin-top: 16px;
+.emotion-42::-moz-focus-inner {
+  border-style: none;
 }
 
-.emotion-15::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+.emotion-42.Mui-disabled {
   pointer-events: none;
+  cursor: default;
 }
 
-.emotion-15.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-15.Mui-error::before,
-.emotion-15.Mui-error::after {
-  border-bottom-color: #ab1000;
+@media print {
+  .emotion-42 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
 }
 
-.emotion-15::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+.emotion-42.Mui-disabled {
+  opacity: 0.38;
   pointer-events: none;
 }
 
-.emotion-15:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
-}
-
-@media (hover: none) {
-  .emotion-15:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  }
-}
-
-.emotion-15.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-42 .MuiChip-avatar {
+  margin-left: 5px;
+  margin-right: -6px;
+  width: 24px;
+  height: 24px;
+  color: #bcbcbc;
+  font-size: 0.6964rem;
 }
 
-.emotion-15::after {
-  border-bottom: 2px solid #337a87;
+.emotion-42 .MuiChip-avatarColorPrimary {
+  color: #fff;
+  background-color: rgb(35, 85, 94);
 }
 
-.emotion-15:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-42 .MuiChip-avatarColorSecondary {
+  color: #fff;
+  background-color: rgb(65, 10, 46);
 }
 
-.emotion-15:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-42 .MuiChip-avatarSmall {
+  margin-left: 4px;
+  margin-right: -4px;
+  width: 18px;
+  height: 18px;
+  font-size: 0.5804rem;
 }
 
-.emotion-15:after {
-  border-bottom: 2px solid #337a87;
+.emotion-42 .MuiChip-icon {
+  margin-left: 5px;
+  margin-right: -6px;
 }
 
-.emotion-16 {
-  font: inherit;
-  letter-spacing: inherit;
-  color: currentColor;
-  padding: 4px 0 5px;
-  border: 0;
-  box-sizing: content-box;
-  background: none;
-  height: 1.4375em;
-  margin: 0;
+.emotion-42 .MuiChip-deleteIcon {
   -webkit-tap-highlight-color: transparent;
-  display: block;
-  min-width: 0;
-  width: 100%;
-  -webkit-animation-name: mui-auto-fill-cancel;
-  animation-name: mui-auto-fill-cancel;
-  -webkit-animation-duration: 10ms;
-  animation-duration: 10ms;
+  color: rgba(10, 10, 11, 0.26);
+  font-size: 22px;
+  cursor: pointer;
+  margin: 0 5px 0 -6px;
+}
+
+.emotion-42 .MuiChip-deleteIcon:hover {
+  color: rgba(10, 10, 11, 0.4);
 }
 
-.emotion-16::-webkit-input-placeholder {
-  color: currentColor;
-  opacity: 0.42;
-  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+.emotion-42 .MuiChip-deleteIcon {
+  color: rgba(255, 255, 255, 0.7);
 }
 
-.emotion-16::-moz-placeholder {
-  color: currentColor;
-  opacity: 0.42;
-  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+.emotion-42 .MuiChip-deleteIcon:hover,
+.emotion-42 .MuiChip-deleteIcon:active {
+  color: #fff;
 }
 
-.emotion-16::-ms-input-placeholder {
-  color: currentColor;
-  opacity: 0.42;
-  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+.emotion-42 .MuiChip-icon {
+  color: #bcbcbc;
 }
 
-.emotion-16:focus {
-  outline: 0;
+.emotion-42 .MuiChip-icon {
+  color: inherit;
 }
 
-.emotion-16:invalid {
-  box-shadow: none;
+.emotion-42.Mui-focusVisible {
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-16::-webkit-search-decoration {
-  -webkit-appearance: none;
+.emotion-42.Mui-focusVisible {
+  background: rgb(35, 85, 94);
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-16::-webkit-input-placeholder {
-  opacity: 0!important;
+.emotion-42:hover {
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-16::-moz-placeholder {
-  opacity: 0!important;
+.emotion-42.Mui-focusVisible {
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-16::-ms-input-placeholder {
-  opacity: 0!important;
+.emotion-42:active {
+  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-webkit-input-placeholder {
-  opacity: 0.42;
+.emotion-42:hover,
+.emotion-42.Mui-focusVisible {
+  background-color: rgb(35, 85, 94);
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-moz-placeholder {
-  opacity: 0.42;
+.emotion-42.MuiChip-clickable:hover {
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-placeholder {
-  opacity: 0.42;
+.emotion-42.Mui-focusVisible {
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-16.Mui-disabled {
-  opacity: 1;
-  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+.emotion-42 .MuiChip-avatar {
+  margin-left: 4px;
 }
 
-.emotion-16:-webkit-autofill {
-  -webkit-animation-duration: 5000s;
-  animation-duration: 5000s;
-  -webkit-animation-name: mui-auto-fill;
-  animation-name: mui-auto-fill;
+.emotion-42 .MuiChip-avatarSmall {
+  margin-left: 2px;
 }
 
-.emotion-19 {
-  line-height: 1.4375em;
-  font-family: Lato,sans-serif;
-  font-weight: 400;
-  font-size: 0.9286rem;
-  color: rgba(10, 10, 11, 0.78);
-  box-sizing: border-box;
-  position: relative;
-  cursor: text;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding: 4px 0 5px;
-  position: relative;
+.emotion-42 .MuiChip-icon {
+  margin-left: 4px;
 }
 
-.emotion-19.Mui-disabled {
-  color: rgba(0, 0, 0, 0.38);
-  cursor: default;
+.emotion-42 .MuiChip-iconSmall {
+  margin-left: 2px;
 }
 
-label+.emotion-19 {
-  margin-top: 16px;
+.emotion-42 .MuiChip-deleteIcon {
+  margin-right: 5px;
 }
 
-.emotion-19::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
+.emotion-42 .MuiChip-deleteIconSmall {
+  margin-right: 3px;
 }
 
-.emotion-19.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
+.emotion-42.MuiChip-clickable:hover {
+  background-color: rgba(51, 122, 135, 0.04);
 }
 
-.emotion-19.Mui-error::before,
-.emotion-19.Mui-error::after {
-  border-bottom-color: #ab1000;
+.emotion-42.Mui-focusVisible {
+  background-color: rgba(51, 122, 135, 0.12);
 }
 
-.emotion-19::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
+.emotion-42 .MuiChip-deleteIcon {
+  color: rgba(51, 122, 135, 0.7);
 }
 
-.emotion-19:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-42 .MuiChip-deleteIcon:hover,
+.emotion-42 .MuiChip-deleteIcon:active {
+  color: #337a87;
 }
 
-@media (hover: none) {
-  .emotion-19:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  }
+.emotion-42 .MuiChip-deleteIcon {
+  font-size: smaller;
 }
 
-.emotion-19.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-42.not-hovering {
+  border-color: transparent;
+  color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-19::after {
-  border-bottom: 2px solid #337a87;
+.emotion-42.not-hovering .MuiChip-deleteIcon {
+  color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-19:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-42.not-hovering .MuiChip-label {
+  padding-left: 0;
+  visibility: collapse;
 }
 
-.emotion-19:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-43 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 12px;
+  padding-right: 12px;
+  white-space: nowrap;
+  padding-left: 11px;
+  padding-right: 11px;
 }
 
-.emotion-19:after {
-  border-bottom: 2px solid #337a87;
+.emotion-44 {
+  height: 0;
+  overflow: hidden;
+  -webkit-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  height: auto;
+  width: 0;
+  -webkit-transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  visibility: hidden;
 }
 
-.emotion-20 {
-  font: inherit;
-  letter-spacing: inherit;
-  color: currentColor;
-  padding: 4px 0 5px;
-  border: 0;
-  box-sizing: content-box;
-  background: none;
-  height: 1.4375em;
-  margin: 0;
-  -webkit-tap-highlight-color: transparent;
-  display: block;
-  min-width: 0;
+.emotion-45 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   width: 100%;
-  -webkit-animation-name: mui-auto-fill-cancel;
-  animation-name: mui-auto-fill-cancel;
-  -webkit-animation-duration: 10ms;
-  animation-duration: 10ms;
-  height: auto;
-  resize: none;
-  padding: 0;
-  padding-top: 0;
+  width: auto;
+  height: 100%;
 }
 
-.emotion-20::-webkit-input-placeholder {
-  color: currentColor;
-  opacity: 0.42;
-  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+.emotion-46 {
+  width: 100%;
+  width: auto;
+  height: 100%;
 }
 
-.emotion-20::-moz-placeholder {
-  color: currentColor;
-  opacity: 0.42;
-  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+.emotion-47 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  fill: currentColor;
+  font-size: 1.1607rem;
 }
 
-.emotion-20::-ms-input-placeholder {
-  color: currentColor;
-  opacity: 0.42;
-  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+.emotion-47 iconButton {
+  margin-right: 8px;
 }
 
-.emotion-20:focus {
-  outline: 0;
+.emotion-48 {
+  position: absolute;
+  top: -6px;
+  bottom: -4px;
+  left: -7px;
+  right: -6.5px;
+  border: 1px dashed rgba(0, 0, 0, 0.38);
+  border-radius: 50%;
 }
 
-.emotion-20:invalid {
-  box-shadow: none;
+.emotion-48.hovering {
+  border-color: transparent;
 }
 
-.emotion-20::-webkit-search-decoration {
-  -webkit-appearance: none;
+.emotion-49 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+  height: -webkit-min-content;
+  height: -moz-min-content;
+  height: min-content;
+  margin-top: 32px;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-20::-webkit-input-placeholder {
-  opacity: 0!important;
+.emotion-50.button-wrapper {
+  -webkit-box-pack: initial;
+  -ms-flex-pack: initial;
+  -webkit-justify-content: initial;
+  justify-content: initial;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-20::-moz-placeholder {
-  opacity: 0!important;
+.emotion-50 .MuiButton-root {
+  line-height: initial;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-20::-ms-input-placeholder {
-  opacity: 0!important;
+.emotion-51 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family: Lato,sans-serif;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+  min-width: 64px;
+  padding: 6px 16px;
+  border: 0;
+  border-radius: 4px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  padding: 6px 8px;
+  color: var(--variant-textColor);
+  background-color: var(--variant-textBg);
+  --variant-textColor: #337a87;
+  --variant-outlinedColor: #337a87;
+  --variant-outlinedBorder: rgba(51, 122, 135, 0.5);
+  --variant-containedColor: #fff;
+  --variant-containedBg: #337a87;
+  border-radius: 2px;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 10px 15px;
+  margin-right: 8px;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-webkit-input-placeholder {
-  opacity: 0.42;
+.emotion-51::-moz-focus-inner {
+  border-style: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-moz-placeholder {
-  opacity: 0.42;
+.emotion-51.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-placeholder {
-  opacity: 0.42;
+@media print {
+  .emotion-51 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+
+.emotion-51:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-51.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-20.Mui-disabled {
-  opacity: 1;
-  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+@media (hover: hover) {
+  .emotion-51:hover {
+    --variant-containedBg: rgb(35, 85, 94);
+    --variant-textBg: rgba(51, 122, 135, 0.04);
+    --variant-outlinedBorder: #337a87;
+    --variant-outlinedBg: rgba(51, 122, 135, 0.04);
+  }
 }
 
-.emotion-20:-webkit-autofill {
-  -webkit-animation-duration: 5000s;
-  animation-duration: 5000s;
-  -webkit-animation-name: mui-auto-fill;
-  animation-name: mui-auto-fill;
+.emotion-51:hover {
+  colors: #337a87;
 }
 
-.emotion-26 {
-  margin: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  border-width: 0;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.12);
-  border-bottom-width: thin;
-  border-color: rgba(0, 0, 0, 0.08);
+.emotion-51.MuiButton-text {
+  color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-27 {
+.emotion-52 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2532,9 +2128,9 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
   border-radius: 4px;
   -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  padding: 6px 8px;
-  color: var(--variant-textColor);
-  background-color: var(--variant-textBg);
+  color: var(--variant-containedColor);
+  background-color: var(--variant-containedBg);
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   --variant-textColor: #337a87;
   --variant-outlinedColor: #337a87;
   --variant-outlinedBorder: rgba(51, 122, 135, 0.5);
@@ -2543,36 +2139,59 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
   border-radius: 2px;
   font-size: 14px;
   font-weight: bold;
-  padding: 10px 15px;
 }
 
-.emotion-27::-moz-focus-inner {
+.emotion-52::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-27.Mui-disabled {
+.emotion-52.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-27 {
+  .emotion-52 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-27:hover {
+.emotion-52:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-27.Mui-disabled {
+.emotion-52.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.emotion-52:hover {
+  box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
+}
+
+@media (hover: none) {
+  .emotion-52:hover {
+    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
+  }
+}
+
+.emotion-52:active {
+  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+}
+
+.emotion-52.Mui-focusVisible {
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
+}
+
+.emotion-52.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
+  box-shadow: none;
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-27:hover {
+  .emotion-52:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -2580,11 +2199,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
   }
 }
 
-.emotion-27:hover {
+.emotion-52:hover {
   colors: #337a87;
 }
 
-.emotion-27.MuiButton-text {
+.emotion-52.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -2609,196 +2228,380 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
     />
     <div
       class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation16 MuiDrawer-paper MuiDrawer-paperAnchorRight emotion-2"
-      style="--Paper-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12); min-width: 600px; width: 50vw;"
+      style="--Paper-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12); min-width: 600px; width: 50vw; webkit-transform: none; transform: none; webkit-transition: -webkit-transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; transition: transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;"
       tabindex="-1"
     >
       <div
-        class="flexbox margin-bottom-small space-between"
+        class="flexbox center-aligned margin-bottom-small space-between"
       >
-        <h3>
-          Manage webhook
-        </h3>
         <div
           class="flexbox center-aligned"
         >
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary emotion-3"
-            tabindex="0"
-            type="button"
-          >
-            delete webhook
-          </button>
-          <button
-            aria-label="close"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium emotion-4"
-            tabindex="0"
-            type="button"
+          <h3
+            class="margin-right-small"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-5"
-              data-testid="CloseIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <hr
-        class="MuiDivider-root MuiDivider-fullWidth emotion-6"
-      />
-      <div
-        class="MuiTabs-root margin-top margin-bottom emotion-7"
-      >
-        <div
-          class="MuiTabs-scroller MuiTabs-fixed emotion-8"
-          style="overflow: hidden; margin-bottom: 0px;"
-        >
+            Webhook details
+          </h3>
           <div
-            class="MuiTabs-flexContainer emotion-9"
-            role="tablist"
+            class=""
+            data-mui-internal-clone-element="true"
           >
-            <button
-              aria-selected="true"
-              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected emotion-10"
-              role="tab"
-              tabindex="0"
-              type="button"
+            <div
+              class="relative"
             >
-              <div
-                class="capitalized-start"
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium  emotion-3"
+                data-testid="HelpIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
               >
-                settings
-              </div>
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary emotion-10"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
+                />
+              </svg>
               <div
-                class="capitalized-start"
-              >
-                activity
-              </div>
-            </button>
+                class="emotion-4 "
+              />
+            </div>
           </div>
-          <span
-            class="MuiTabs-indicator emotion-12"
-            style="left: 0px; width: 0px;"
-          />
         </div>
+        <button
+          aria-label="close"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium emotion-5"
+          tabindex="0"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-6"
+            data-testid="CloseIcon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+          </svg>
+        </button>
       </div>
-      <div
+      <hr
+        class="MuiDivider-root MuiDivider-fullWidth emotion-7"
+      />
+      <form
         class="flexbox column"
-        style="width: 500px;"
+        id="webhookConfig"
+        novalidate=""
       >
         <div
-          aria-label="Cannot edit webhook url after it has been saved"
-          class="MuiFormControl-root MuiTextField-root emotion-13"
-          data-mui-internal-clone-element="true"
+          class="MuiFormControl-root  required emotion-8"
+          style="width: 400px;"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-14"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-9"
             data-shrink="false"
-            for="webhook-name"
-            id="webhook-name-label"
+            for="url"
           >
             Url
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-15"
+            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-10"
+            required=""
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input Mui-disabled emotion-16"
-              disabled=""
-              id="webhook-name"
+              class="MuiInputBase-input MuiInput-input emotion-11"
+              id="url"
+              name="url"
+              required=""
               type="text"
               value=""
             />
           </div>
+          <p
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-12"
+          />
         </div>
+        <div />
         <div
-          aria-label="Cannot edit webhook description after it has been saved"
-          class="MuiFormControl-root MuiTextField-root emotion-13"
-          data-mui-internal-clone-element="true"
+          class="MuiFormControl-root   emotion-8"
+          style="width: 400px;"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-14"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-9"
             data-shrink="false"
-            for="webhook-description"
-            id="webhook-description-label"
+            for="description"
           >
             Description (optional)
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-19"
+            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-multiline emotion-15"
           >
             <textarea
               aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-20"
-              disabled=""
-              id="webhook-description"
+              class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline emotion-16"
+              id="description"
+              name="description"
               style="height: 0px; overflow: hidden;"
             />
             <textarea
               aria-hidden="true"
-              class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-20"
+              class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline emotion-16"
               readonly=""
               style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding-top: 0px; padding-bottom: 0px; width: 100%;"
               tabindex="-1"
             />
           </div>
+          <p
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-12"
+          />
+        </div>
+        <div
+          class="flexbox center-aligned margin-top"
+        >
+          <h4
+            class="margin-right-small"
+          >
+            Webhook Events
+          </h4>
+          <div
+            class="flexbox center-aligned margin-left-small emotion-19"
+          >
+            <div
+              class=""
+              data-mui-internal-clone-element="true"
+            >
+              <div
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault emotion-20"
+              >
+                <span
+                  class="MuiChip-label MuiChip-labelMedium emotion-21"
+                >
+                  Professional
+                </span>
+              </div>
+            </div>
+            <div
+              class=""
+              data-mui-internal-clone-element="true"
+            >
+              <div
+                class="relative"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium  emotion-3"
+                  data-testid="HelpIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
+                  />
+                </svg>
+                <div
+                  class="emotion-4 "
+                />
+              </div>
+            </div>
+          </div>
         </div>
         <div
-          aria-label="Cannot edit webhook secrets after they have been saved"
-          class="MuiFormControl-root MuiTextField-root emotion-13"
-          data-mui-internal-clone-element="true"
+          class="flexbox column margin-left-small"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-14"
-            data-shrink="false"
-            for="webhook-secret"
-            id="webhook-secret-label"
+            class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementEnd margin-top-none emotion-24"
+          >
+            <span
+              aria-disabled="true"
+              class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-checked Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-25"
+              tabindex="-1"
+            >
+              <input
+                class="PrivateSwitchBase-input emotion-26"
+                data-indeterminate="false"
+                disabled=""
+                name="deviceauth"
+                type="checkbox"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-6"
+                data-testid="CheckBoxIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled emotion-28"
+            >
+              Device authentication
+            </span>
+          </label>
+          <label
+            class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementEnd margin-top-none emotion-24"
           >
-            Secret (optional)
+            <span
+              aria-disabled="true"
+              class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-25"
+              tabindex="-1"
+            >
+              <input
+                class="PrivateSwitchBase-input emotion-26"
+                data-indeterminate="false"
+                disabled=""
+                name="inventory"
+                type="checkbox"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-6"
+                data-testid="CheckBoxOutlineBlankIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled emotion-28"
+            >
+              Device inventory
+            </span>
           </label>
+        </div>
+        <div
+          class="flexbox"
+        >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-15"
+            class="MuiFormControl-root   emotion-8"
+            style="width: 400px;"
           >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input Mui-disabled emotion-16"
-              disabled=""
-              id="webhook-secret"
-              type="password"
-              value=""
+            <label
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-9"
+              data-shrink="false"
+              for="secret"
+            >
+              Secret (optional)
+            </label>
+            <div
+              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-10"
+            >
+              <input
+                aria-invalid="false"
+                class="MuiInputBase-input MuiInput-input emotion-11"
+                id="secret"
+                name="secret"
+                type="text"
+                value=""
+              />
+            </div>
+            <p
+              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-12"
             />
           </div>
+          <div
+            class="flexbox center-aligned margin-left-small emotion-19"
+            style="align-items: end;"
+          >
+            <div
+              class=""
+              data-mui-internal-clone-element="true"
+            >
+              <div
+                class="relative"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium  emotion-3"
+                  data-testid="HelpIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
+                  />
+                </svg>
+                <div
+                  class="emotion-4 "
+                />
+              </div>
+            </div>
+            <div
+              class=""
+              data-mui-internal-clone-element="true"
+            >
+              <div
+                class="MuiButtonBase-root MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-outlinedPrimary not-hovering emotion-42"
+                role="button"
+                tabindex="0"
+              >
+                <span
+                  class="MuiChip-label MuiChip-labelMedium emotion-43"
+                >
+                  <div
+                    class="MuiCollapse-root MuiCollapse-horizontal MuiCollapse-hidden emotion-44"
+                    style="min-width: 0px;"
+                  >
+                    <div
+                      class="MuiCollapse-wrapper MuiCollapse-horizontal emotion-45"
+                    >
+                      <div
+                        class="MuiCollapse-wrapperInner MuiCollapse-horizontal emotion-46"
+                      >
+                        Learn more
+                      </div>
+                    </div>
+                  </div>
+                </span>
+                <div
+                  class="relative MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconOutlinedColorPrimary"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-47"
+                    data-testid="DescriptionIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm2 16H8v-2h8zm0-4H8v-2h8zm-3-5V3.5L18.5 9z"
+                    />
+                  </svg>
+                  <div
+                    class="emotion-48 not-hovering"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-      <hr
-        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-light margin-top-large emotion-26"
-      />
-      <div
-        class="flexbox centered margin-top"
-        style="justify-content: flex-end;"
-      >
-        <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-27"
-          tabindex="0"
-          type="button"
+        <div
+          class="button-wrapper emotion-49 emotion-50"
         >
-          Cancel
-        </button>
-      </div>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary undefined emotion-51"
+            tabindex="0"
+            type="button"
+          >
+            Cancel
+          </button>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-52"
+            disabled=""
+            tabindex="-1"
+            type="submit"
+          >
+            Save
+          </button>
+        </div>
+      </form>
     </div>
     <div
       data-testid="sentinelEnd"
@@ -2807,3 +2610,9 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
   </div>
 </body>
 `;
+
+exports[`Webhooks Component static components renders WebhookManagement correctly 1`] = `
+<body>
+  <div />
+</body>
+`;
diff --git a/frontend/src/js/components/settings/webhooks/activity.js b/frontend/src/js/components/settings/webhooks/activity.js
deleted file mode 100644
index b86fad41..00000000
--- a/frontend/src/js/components/settings/webhooks/activity.js
+++ /dev/null
@@ -1,158 +0,0 @@
-// Copyright 2022 Northern.tech AS
-//
-//    Licensed under the Apache License, Version 2.0 (the "License");
-//    you may not use this file except in compliance with the License.
-//    You may obtain a copy of the License at
-//
-//        http://www.apache.org/licenses/LICENSE-2.0
-//
-//    Unless required by applicable law or agreed to in writing, software
-//    distributed under the License is distributed on an "AS IS" BASIS,
-//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//    See the License for the specific language governing permissions and
-//    limitations under the License.
-import React, { useEffect, useMemo, useState } from 'react';
-
-// material ui
-import { ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Circle as CircleIcon } from '@mui/icons-material';
-import { Accordion, AccordionDetails, AccordionSummary, accordionClasses } from '@mui/material';
-import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
-import { makeStyles } from 'tss-react/mui';
-
-import { DEVICE_LIST_DEFAULTS } from '@northern.tech/store/constants';
-
-import { toggle } from '../../../helpers';
-import Pagination from '../../common/pagination';
-import Time from '../../common/time';
-
-const useStyles = makeStyles()(theme => ({
-  activityList: {
-    display: 'flexbox',
-    flexDirection: 'column',
-    ['.header']: {
-      padding: `0px ${theme.spacing(2)}`,
-      marginBottom: theme.spacing()
-    },
-    [`.header, .${accordionSummaryClasses.content}`]: {
-      display: 'grid',
-      gridTemplateColumns: '1fr 2fr 1fr 50px'
-    },
-    [`.${accordionSummaryClasses.content}`]: {
-      cursor: 'pointer',
-      [`&>time, &>.trigger-type`]: {
-        color: theme.palette.secondary.main
-      },
-      [`&>:last-child`]: {
-        paddingRight: 'initial'
-      }
-    },
-    [`.${accordionClasses.root}`]: {
-      backgroundColor: theme.palette.background.default
-    }
-  },
-  divider: { marginTop: theme.spacing(), marginBottom: theme.spacing() }
-}));
-
-const triggerMap = {
-  'device-decommissioned': 'Device decommissioned',
-  'device-provisioned': 'Device provisioned',
-  'device-status-changed': 'Device status updated'
-};
-
-const iconStyles = {
-  status: { fontSize: 12, marginRight: 8 },
-  dropDown: { justifySelf: 'right', marginRight: 8 }
-};
-
-const DeliveryStatus = ({ entry, webhook = {} }) => {
-  const { delivery_statuses = [] } = entry;
-
-  const status = useMemo(() => {
-    const status = delivery_statuses.find(status => status.integration_id === webhook.id) ?? delivery_statuses[0];
-    if (status) {
-      return { code: status.status_code, signal: status.success ? 'green' : 'red' };
-    }
-    return { code: 418, signal: 'disabled' };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(delivery_statuses), webhook.id]);
-
-  return (
-    <div className="flexbox center-aligned">
-      <CircleIcon className={status.signal} style={iconStyles.status} />
-      <div className={status.code >= 400 ? 'muted' : ''}>{status.code}</div>
-    </div>
-  );
-};
-
-const columns = [
-  { key: 'created_ts', title: 'Time', render: ({ entry }) => <Time value={entry.time} /> },
-  { key: 'trigger', title: 'Event trigger', render: ({ entry }) => <div className="trigger-type">{triggerMap[entry.type] ?? entry.type}</div> },
-  { key: 'status', title: 'Status', render: ({ entry, webhook }) => <DeliveryStatus entry={entry} webhook={webhook} /> },
-  {
-    key: 'details',
-    title: 'Details',
-    render: ({ isExpanded }) => (isExpanded ? <ArrowDropUpIcon style={iconStyles.dropDown} /> : <ArrowDropDownIcon style={iconStyles.dropDown} />)
-  }
-];
-
-const ListItem = ({ entry = {}, webhook }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const { data = {} } = entry;
-
-  return (
-    <Accordion square expanded={isExpanded}>
-      <AccordionSummary onClick={() => setIsExpanded(toggle)}>
-        {columns.map(({ key, render: Column }) => (
-          <Column key={key} entry={entry} isExpanded={isExpanded} webhook={webhook} />
-        ))}
-      </AccordionSummary>
-      <AccordionDetails>
-        <code>{JSON.stringify(data)}</code>
-      </AccordionDetails>
-    </Accordion>
-  );
-};
-
-const { page: defaultPage, perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;
-const WebhookActivity = ({ events = [], getWebhookEvents, eventTotal, webhook }) => {
-  const { classes } = useStyles();
-  const [page, setPage] = useState(defaultPage);
-
-  useEffect(() => {
-    getWebhookEvents({ page, perPage: defaultPerPage });
-  }, [getWebhookEvents, page]);
-
-  return (
-    <div className={classes.activityList}>
-      {events.length ? (
-        <>
-          <div className="header">
-            {columns.map(({ key, title }) => (
-              <div key={key}>{title}</div>
-            ))}
-          </div>
-          <div className="body">
-            {events.map(entry => (
-              <ListItem key={entry.id} entry={entry} webhook={webhook} />
-            ))}
-            {eventTotal > defaultPerPage && (
-              <Pagination
-                className="margin-top-none"
-                count={eventTotal ? eventTotal : defaultPerPage}
-                showCountInfo={false}
-                rowsPerPageOptions={[defaultPerPage]}
-                page={page}
-                rowsPerPage={defaultPerPage}
-                onChangePage={setPage}
-              />
-            )}
-          </div>
-        </>
-      ) : (
-        <div className="margin-top-large flexbox centered disabled">No webhook activity yet.</div>
-      )}
-    </div>
-  );
-};
-
-export default WebhookActivity;
diff --git a/frontend/src/js/components/settings/webhooks/activity.tsx b/frontend/src/js/components/settings/webhooks/activity.tsx
new file mode 100644
index 00000000..d5408ea5
--- /dev/null
+++ b/frontend/src/js/components/settings/webhooks/activity.tsx
@@ -0,0 +1,70 @@
+// Copyright 2022 Northern.tech AS
+//
+//    Licensed under the Apache License, Version 2.0 (the "License");
+//    you may not use this file except in compliance with the License.
+//    You may obtain a copy of the License at
+//
+//        http://www.apache.org/licenses/LICENSE-2.0
+//
+//    Unless required by applicable law or agreed to in writing, software
+//    distributed under the License is distributed on an "AS IS" BASIS,
+//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//    See the License for the specific language governing permissions and
+//    limitations under the License.
+import { useEffect, useRef, useState } from 'react';
+
+import { DEVICE_LIST_DEFAULTS } from '@northern.tech/store/constants';
+
+import DetailsTable from '../../common/detailstable';
+import Pagination from '../../common/pagination';
+
+const { page: defaultPage, perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;
+const WebhookActivity = ({
+  classes,
+  columns,
+  events = [],
+  eventTotal,
+  getWebhookEvents,
+  setSelectedEvent,
+  webhook
+}: {
+  classes: any;
+  columns: any;
+  events?: never[] | undefined;
+  eventTotal: any;
+  getWebhookEvents: any;
+  setSelectedEvent: any;
+  webhook: any;
+}) => {
+  const [page, setPage] = useState(defaultPage);
+  const tableRef = useRef();
+
+  useEffect(() => {
+    getWebhookEvents({ page, perPage: defaultPerPage });
+  }, [getWebhookEvents, page]);
+
+  const mappedColumns = columns.map(column => ({ ...column, extras: { webhook, classes } }));
+
+  if (!events.length) {
+    return <div className="margin-top-large flexbox centered disabled">No webhook activity yet.</div>;
+  }
+
+  return (
+    <>
+      <DetailsTable columns={mappedColumns} items={events} onItemClick={setSelectedEvent} tableRef={tableRef} />
+      {eventTotal > defaultPerPage && (
+        <Pagination
+          className="margin-top-none"
+          count={eventTotal ? eventTotal : defaultPerPage}
+          showCountInfo={false}
+          rowsPerPageOptions={[defaultPerPage]}
+          page={page}
+          rowsPerPage={defaultPerPage}
+          onChangePage={setPage}
+        />
+      )}
+    </>
+  );
+};
+
+export default WebhookActivity;
diff --git a/frontend/src/js/components/settings/webhooks/eventdetails.tsx b/frontend/src/js/components/settings/webhooks/eventdetails.tsx
new file mode 100644
index 00000000..97e234ba
--- /dev/null
+++ b/frontend/src/js/components/settings/webhooks/eventdetails.tsx
@@ -0,0 +1,83 @@
+// Copyright 2024 Northern.tech AS
+//
+//    Licensed under the Apache License, Version 2.0 (the "License");
+//    you may not use this file except in compliance with the License.
+//    You may obtain a copy of the License at
+//
+//        http://www.apache.org/licenses/LICENSE-2.0
+//
+//    Unless required by applicable law or agreed to in writing, software
+//    distributed under the License is distributed on an "AS IS" BASIS,
+//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//    See the License for the specific language governing permissions and
+//    limitations under the License.
+import { ArrowCircleLeftOutlined as ArrowLeftIcon } from '@mui/icons-material';
+import { Divider, IconButton } from '@mui/material';
+
+import Editor, { loader } from '@monaco-editor/react';
+
+import { TwoColumnData } from '../../common/configurationobject';
+import { CopyTextToClipboard } from '../../common/copytext';
+import Loader from '../../common/loader';
+
+loader.config({ paths: { vs: '/ui/vs' } });
+const editorProps = {
+  height: 600,
+  loading: <Loader show />,
+  language: 'json',
+  options: {
+    autoClosingOvertype: 'auto',
+    codeLens: false,
+    contextmenu: false,
+    enableSplitViewResizing: false,
+    formatOnPaste: true,
+    lightbulb: { enabled: false },
+    lineNumbers: 'off',
+    minimap: { enabled: false },
+    quickSuggestions: false,
+    readOnly: true,
+    renderOverviewRuler: false,
+    scrollBeyondLastLine: false,
+    wordWrap: 'on'
+  }
+};
+
+const WebhookEventDetails = ({
+  classes,
+  columns,
+  entry = {},
+  onClickBack,
+  setSnackbar,
+  webhook
+}: {
+  classes: any;
+  columns: any;
+  entry?: {} | undefined;
+  onClickBack: any;
+  setSnackbar: any;
+  webhook: any;
+}) => {
+  const { data = {} } = entry;
+
+  const content = columns.slice(0, columns.length - 1).reduce((accu, column) => ({ ...accu, [column.title]: column.render(entry, { webhook, classes }) }), {});
+
+  return (
+    <>
+      <div className="clickable" onClick={onClickBack}>
+        <IconButton>
+          <ArrowLeftIcon />
+        </IconButton>
+        Back to webhook
+      </div>
+      <Divider className={classes.divider} />
+      <h4>Event details</h4>
+      <TwoColumnData className={classes.twoColumnsMultiple} config={content} setSnackbar={setSnackbar} />
+      <h4>Payload</h4>
+      {data && <Editor {...editorProps} className="editor modified" value={JSON.stringify(data, null, '\t')} />}
+      <Divider className={classes.divider} />
+      <CopyTextToClipboard token={data} />
+    </>
+  );
+};
+
+export default WebhookEventDetails;
diff --git a/frontend/src/js/components/settings/webhooks/management.js b/frontend/src/js/components/settings/webhooks/management.js
index d0fa0a79..57d31db9 100644
--- a/frontend/src/js/components/settings/webhooks/management.js
+++ b/frontend/src/js/components/settings/webhooks/management.js
@@ -11,46 +11,151 @@
 //    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 //    See the License for the specific language governing permissions and
 //    limitations under the License.
-import React, { useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 // material ui
-import { Close as CloseIcon } from '@mui/icons-material';
-import { Button, Divider, Drawer, IconButton, Tab, Tabs } from '@mui/material';
+import { Circle as CircleIcon, Close as CloseIcon } from '@mui/icons-material';
+import { Button, Divider, Drawer, IconButton, Slide } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 
-import { emptyWebhook } from '@northern.tech/store/constants';
+import actions from '@northern.tech/store/actions';
+import { EXTERNAL_PROVIDER, emptyWebhook } from '@northern.tech/store/constants';
+import { getTenantCapabilities, getWebhookEventInfo } from '@northern.tech/store/selectors';
+import { getWebhookEvents } from '@northern.tech/store/thunks';
 
+import { TwoColumnData } from '../../common/configurationobject';
+import DetailsIndicator from '../../common/detailsindicator';
+import Time from '../../common/time';
 import WebhookActivity from './activity';
-import WebhookConfiguration from './configuration';
+import { availableScopes } from './configuration';
+import WebhookEventDetails from './eventdetails';
 
-const tabs = ['settings', 'activity'];
+const { setSnackbar } = actions;
 
-export const WebhookManagement = ({ adding, editing, events, eventTotal, getWebhookEvents, onCancel, onSubmit, onRemove, webhook = { ...emptyWebhook } }) => {
-  const [currentTab, setCurrentTab] = useState(tabs[0]);
+const useStyles = makeStyles()(theme => ({
+  divider: { marginTop: theme.spacing(), marginBottom: theme.spacing() },
+  statusIcon: { fontSize: 12, marginRight: theme.spacing() },
+  twoColumnsMultiple: {
+    gridTemplateColumns: 'max-content 1fr',
+    marginBottom: theme.spacing(2),
+    marginTop: theme.spacing(2),
+    maxWidth: 'initial'
+  },
+  wrapper: { justifyContent: 'end' }
+}));
+
+const triggerMap = {
+  'device-decommissioned': 'Device decommissioned',
+  'device-provisioned': 'Device provisioned',
+  'device-status-changed': 'Device status updated'
+};
+
+const DeliveryStatus = ({ entry, webhook = {}, classes }) => {
+  const { delivery_statuses = [] } = entry;
+
+  const status = useMemo(() => {
+    const status = delivery_statuses.find(status => status.integration_id === webhook.id) ?? delivery_statuses[0];
+    if (status) {
+      return { code: status.status_code, signal: status.success ? 'green' : 'red' };
+    }
+    return { code: 418, signal: 'disabled' };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(delivery_statuses), webhook.id]);
+
+  return (
+    <div className="flexbox center-aligned">
+      <CircleIcon className={`${status.signal} ${classes.statusIcon}`} />
+      <div className={status.code >= 400 ? 'muted' : ''}>{status.code}</div>
+    </div>
+  );
+};
+
+const columns = [
+  { key: 'created_ts', title: 'Time', render: entry => <Time value={entry.time} /> },
+  { key: 'trigger', title: 'Event trigger', render: entry => <div className="trigger-type">{triggerMap[entry.type] ?? entry.type}</div> },
+  { key: 'status', title: 'Status', render: (entry, { webhook, classes }) => <DeliveryStatus classes={classes} entry={entry} webhook={webhook} /> },
+  { key: 'details', title: '', render: (_, { classes }) => <DetailsIndicator classes={classes} /> }
+];
+
+export const WebhookManagement = ({ onCancel, onRemove, webhook }) => {
+  const [selectedEvent, setSelectedEvent] = useState();
+  const { events, eventTotal } = useSelector(getWebhookEventInfo);
+  const { canDelta: canScopeWebhooks } = useSelector(getTenantCapabilities);
+  const dispatch = useDispatch();
+  const { classes } = useStyles();
+  const containerRef = useRef();
+
+  const dispatchedGetWebhookEvents = useCallback(options => dispatch(getWebhookEvents(options)), [dispatch]);
+  const dispatchedSetSnackbar = useCallback(args => dispatch(setSnackbar(args)), [dispatch]);
+
+  const { description, scopes = [], credentials = {} } = webhook ?? emptyWebhook;
+  const {
+    [EXTERNAL_PROVIDER.webhook.credentialsType]: { url = '', secret = '' }
+  } = credentials;
+
+  const webhookConfig = {
+    'Destination URL': url,
+    'Description': description,
+    'Webhook events': scopes?.length
+      ? scopes.map(scope => availableScopes[scope].title).join(', ')
+      : canScopeWebhooks
+        ? 'Backend information unclear'
+        : availableScopes.deviceauth.title,
+    'Secret': secret
+  };
+
+  const handleBack = () => setSelectedEvent();
+
+  const onCancelClick = () => {
+    setSelectedEvent();
+    onCancel();
+  };
 
   return (
-    <Drawer anchor="right" open={adding || editing} PaperProps={{ style: { minWidth: 600, width: '50vw' } }}>
+    <Drawer anchor="right" open={!!webhook?.id} PaperProps={{ style: { minWidth: 750, width: '60vw' } }}>
       <div className="flexbox margin-bottom-small space-between">
-        <h3>Manage webhook</h3>
+        <h3>Webhook details</h3>
         <div className="flexbox center-aligned">
-          <Button color="secondary" onClick={() => onRemove(webhook)}>
+          <Button className={selectedEvent ? 'muted' : ''} color="secondary" disabled={!!selectedEvent} onClick={() => onRemove(webhook)}>
             delete webhook
           </Button>
-          <IconButton onClick={onCancel} aria-label="close">
+          <IconButton onClick={onCancelClick} aria-label="close">
             <CloseIcon />
           </IconButton>
         </div>
       </div>
       <Divider />
-      <Tabs className="margin-top margin-bottom" value={currentTab} onChange={(e, tab) => setCurrentTab(tab)} textColor="primary">
-        {tabs.map(key => (
-          <Tab key={key} label={<div className="capitalized-start">{key}</div>} value={key} />
-        ))}
-      </Tabs>
-      {currentTab === tabs[0] ? (
-        <WebhookConfiguration adding={adding} editing={editing} onCancel={onCancel} onSubmit={onSubmit} webhook={webhook} />
-      ) : (
-        <WebhookActivity events={events} eventTotal={eventTotal} getWebhookEvents={getWebhookEvents} webhook={webhook} />
-      )}
+      <div className="relative" ref={containerRef}>
+        <Slide in={!selectedEvent} container={containerRef.current} direction="right">
+          <div className="absolute margin-top full-width" style={{ top: 0 }}>
+            <h4>Settings</h4>
+            <TwoColumnData className={classes.twoColumnsMultiple} config={webhookConfig} setSnackbar={dispatchedSetSnackbar} />
+            <h4>Activity</h4>
+            <WebhookActivity
+              classes={classes}
+              columns={columns}
+              events={events}
+              eventTotal={eventTotal}
+              getWebhookEvents={dispatchedGetWebhookEvents}
+              setSelectedEvent={setSelectedEvent}
+              webhook={webhook}
+            />
+          </div>
+        </Slide>
+        <Slide in={!!selectedEvent} container={containerRef.current} direction="left">
+          <div className="absolute margin-top full-width" style={{ top: 0 }}>
+            <WebhookEventDetails
+              classes={classes}
+              columns={columns}
+              entry={selectedEvent}
+              onClickBack={handleBack}
+              setSnackbar={setSnackbar}
+              webhook={webhook}
+            />
+          </div>
+        </Slide>
+      </div>
     </Drawer>
   );
 };