feat: Add secret rotation

Author: alexbouchardd

internal/portal/src/common/Icons.tsx

@@ -229,6 +229,18 @@ export const CollapseIcon = () => (
   </svg>
 );
 
+export const RotateIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8.0002 12.8002C6.66686 12.8002 5.53353 12.3335 4.6002 11.4002C3.66686 10.4669 3.2002 9.33353 3.2002 8.0002C3.2002 6.66686 3.66686 5.53353 4.6002 4.6002C5.53353 3.66686 6.66686 3.2002 8.0002 3.2002C8.72242 3.2002 9.39186 3.3502 10.0085 3.6502C10.6252 3.9502 11.1558 4.3502 11.6002 4.8502V3.8002C11.6002 3.6302 11.6574 3.48769 11.7717 3.37269C11.886 3.25769 12.0277 3.2002 12.1967 3.2002C12.3657 3.2002 12.5085 3.25769 12.6252 3.37269C12.7419 3.48769 12.8002 3.6302 12.8002 3.8002V6.6002C12.8002 6.7702 12.7427 6.9127 12.6277 7.0277C12.5127 7.1427 12.3702 7.2002 12.2002 7.2002H9.4002C9.2302 7.2002 9.0877 7.14303 8.9727 7.02871C8.8577 6.91438 8.8002 6.77271 8.8002 6.60371C8.8002 6.4347 8.8577 6.29186 8.9727 6.1752C9.0877 6.05853 9.2302 6.0002 9.4002 6.0002H10.9835C10.6613 5.51131 10.2391 5.12242 9.71686 4.83353C9.19464 4.54464 8.62242 4.4002 8.0002 4.4002C7.0002 4.4002 6.1502 4.7502 5.4502 5.4502C4.7502 6.1502 4.4002 7.0002 4.4002 8.0002C4.4002 9.0002 4.7502 9.8502 5.4502 10.5502C6.1502 11.2502 7.0002 11.6002 8.0002 11.6002C8.83353 11.6002 9.56686 11.3474 10.2002 10.8419C10.8335 10.3363 11.2502 9.7002 11.4502 8.93353C11.4946 8.77797 11.5863 8.65575 11.7252 8.56686C11.8641 8.47797 12.0115 8.44464 12.1674 8.46686C12.3337 8.48908 12.4669 8.56408 12.5669 8.69186C12.6669 8.81964 12.7002 8.96131 12.6669 9.11686C12.4113 10.1835 11.8558 11.0641 11.0002 11.7585C10.1446 12.453 9.14464 12.8002 8.0002 12.8002Z" />
+  </svg>
+);
+
 export const Loading = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="24px">
     <radialGradient

internal/portal/src/scenes/Destination/Destination.scss

@@ -14,7 +14,7 @@
         rgba(0, 0, 0, 0.08) 100%
       ),
       var(--colors-background-neutral-2);
-    background-color: var(--COLORS_BACKGROUND_CONTAINER_PRIMARY_LIGHT);
+    background-color: var(--colors-background-neutral-2);
     border-radius: var(--radius-m);
     box-shadow: var(--colors-shadow-button);
 
@@ -40,7 +40,7 @@
 
 .tabs-container {
   margin-top: 24px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--colors-outline-neutral);
 }
 
 .tabs {
@@ -83,8 +83,8 @@
       align-items: flex-start;
 
       > span:first-child {
-        width: 140px;
-        min-width: 140px;
+        width: 200px;
+        min-width: 200px;
         color: var(--colors-foreground-neutral-2);
       }
 

internal/portal/src/scenes/Destination/DestinationSettings/DestinationSettings.tsx

@@ -4,7 +4,12 @@ import TopicPicker from "../../../common/TopicPicker/TopicPicker";
 import { useNavigate } from "react-router-dom";
 
 import "./DestinationSettings.scss";
-import { DeleteIcon, DisableIcon, SaveIcon } from "../../../common/Icons";
+import {
+  DeleteIcon,
+  DisableIcon,
+  RotateIcon,
+  SaveIcon,
+} from "../../../common/Icons";
 import { ApiContext } from "../../../app";
 import { mutate } from "swr";
 import { showToast } from "../../../common/Toast/Toast";
@@ -30,6 +35,7 @@ const DestinationSettings = ({
   const [isTopicsSaving, setIsTopicsSaving] = useState(false);
   const [isConfigSaving, setIsConfigSaving] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [isRotatingSecret, setIsRotatingSecret] = useState(false);
 
   const handleToggleEnabled = () => {
     if (!destination.disabled_at) {
@@ -133,6 +139,32 @@ const DestinationSettings = ({
       });
   };
 
+  const handleRotateSecret = () => {
+    setIsRotatingSecret(true);
+    apiClient
+      .fetch(`destinations/${destination.id}`, {
+        method: "PATCH",
+        body: JSON.stringify({
+          credentials: {
+            rotate_secret: true,
+          },
+        }),
+      })
+      .then((data) => {
+        showToast("success", "Secret rotated successfully");
+        mutate(`destinations/${destination.id}`, data, false);
+      })
+      .catch((error) => {
+        showToast(
+          "error",
+          `${error.message.charAt(0).toUpperCase() + error.message.slice(1)}`
+        );
+      })
+      .finally(() => {
+        setIsRotatingSecret(false);
+      });
+  };
+
   const [isConfigFormValid, setIsConfigFormValid] = useState(false);
 
   const handleConfigFormValidation = (e: React.FormEvent<HTMLFormElement>) => {
@@ -214,6 +246,23 @@ const DestinationSettings = ({
           </Button>
         </form>
       </div>
+
+      {type.type === "webhook" && (
+        <>
+          <hr />
+          <div className="destination-settings__actions">
+            <h2 className="title-l">Rotate Secret</h2>
+            <p className="body-m muted">
+              Rotate the destination signing secret. This will generate a new
+              secret and invalid the current one after 24 hours.
+            </p>
+            <Button onClick={handleRotateSecret} loading={isRotatingSecret}>
+              <RotateIcon />
+              Rotate
+            </Button>
+          </div>
+        </>
+      )}
       <hr />
       <div className="destination-settings__actions">
         <h2 className="title-l">