From 4004d6158b49b34ef68213d837f79e59c76719cb Mon Sep 17 00:00:00 2001
From: Vincent Chafouin <chafouin@users.noreply.github.com>
Date: Tue, 15 Jul 2025 10:08:45 +0300
Subject: [PATCH] feat: Add clickable link to URL in Alert side panel (#5159)

Co-authored-by: Shahar Glazner <shaharglazner@gmail.com>
Co-authored-by: Ihor Panasiuk <igorskynet13@gmail.com>
---
 .../alert-detail-sidebar/ui/alert-sidebar.tsx | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/keep-ui/features/alerts/alert-detail-sidebar/ui/alert-sidebar.tsx b/keep-ui/features/alerts/alert-detail-sidebar/ui/alert-sidebar.tsx
index 80f0df3214..d9a76b56d0 100644
--- a/keep-ui/features/alerts/alert-detail-sidebar/ui/alert-sidebar.tsx
+++ b/keep-ui/features/alerts/alert-detail-sidebar/ui/alert-sidebar.tsx
@@ -89,6 +89,24 @@ export const AlertSidebar = ({
     }
   };
 
+  const handleCopyUrl = async (alertUrl: string | undefined) => {
+    if (!alertUrl) {
+      showErrorToast(new Error("Alert has no URL"));
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(alertUrl);
+      showSuccessToast("URL copied to clipboard");
+    } catch (err) {
+      showErrorToast(
+        err,
+        <p>
+          Failed to copy URL. Please check your browser permissions.{" "}
+        </p>
+      );
+    }
+  };
+
   return (
     <Transition appear show={isOpen} as={Fragment}>
       <Dialog onClose={toggle}>
@@ -219,6 +237,33 @@ export const AlertSidebar = ({
                       />
                     </div>
                   </p>
+                  {alert.url && (
+                  <p>
+                    <FieldHeader>URL</FieldHeader>
+                    <div className="flex items-center gap-2">
+                      <Link
+                        href={alert.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-600 hover:underline truncate max-w-[calc(100%-40px)] inline-block"
+                      >
+                        {alert.url}
+                      </Link>
+                      <Button
+                        icon={ClipboardDocumentIcon}
+                        size="xs"
+                        color="orange"
+                        variant="light"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleCopyUrl(alert.url);
+                        }}
+                        tooltip="Copy URL"
+                      />
+                    </div>
+                  </p>
+                  )}
                 </div>
                 {alert.incident_dto && (
                   <div>