From 7c45470481a2bb7d8bcc89ac0533be9f24de265b Mon Sep 17 00:00:00 2001
From: garuda-eagle <info@garuda-labs.org>
Date: Fri, 26 Dec 2025 19:52:09 -0800
Subject: [PATCH 1/2] Add copy-to-clipboard functionality for toast
 notifications
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added copy button to individual toast notifications with inline layout
- Implemented recursive text extraction from React children for comprehensive content copying
- Added hover effects (dark background) for both copy and close buttons
- Included clipboard API availability checks for cross-browser compatibility
- Enhanced notification usability with no server-side behavior changes
- No breaking changes to existing functionality

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .gitignore                                    |  1 +
 .../components/Main/NotificationSection.tsx   |  1 +
 .../lib/new-components/Toasts/hasuraToast.tsx | 70 +++++++++++++++++--
 3 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index e0fda05d0d4f7..20e5436e62c3f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -74,3 +74,4 @@ node_modules
 *.ticky.modules
 
 yarn-error.log
+frontend/package-lock.json
diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Main/NotificationSection.tsx b/frontend/libs/console/legacy-ce/src/lib/components/Main/NotificationSection.tsx
index 430a86ca7295b..1c6cafd022ded 100644
--- a/frontend/libs/console/legacy-ce/src/lib/components/Main/NotificationSection.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Main/NotificationSection.tsx
@@ -637,6 +637,7 @@ const HasuraNotifications: React.FC<
     }
   };
 
+
   const onClickOutside = () => {
     updateOpenState(false);
     closeDropDown();
diff --git a/frontend/libs/console/legacy-ce/src/lib/new-components/Toasts/hasuraToast.tsx b/frontend/libs/console/legacy-ce/src/lib/new-components/Toasts/hasuraToast.tsx
index 53e9eb19de2a0..fdbb3fc662b32 100644
--- a/frontend/libs/console/legacy-ce/src/lib/new-components/Toasts/hasuraToast.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/new-components/Toasts/hasuraToast.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { deepmerge } from 'deepmerge-ts';
-import { MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
+import React, { MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
 import { Toast, ToastOptions, toast } from 'react-hot-toast/headless';
-import { FaTimesCircle } from 'react-icons/fa';
+import { FaTimesCircle, FaCopy } from 'react-icons/fa';
 import { HtmlAnalyticsAttributes } from '../../features/Analytics';
 
 export type ToastType = 'error' | 'success' | 'info' | 'warning';
@@ -108,6 +108,50 @@ export const hasuraToast = ({
     onRemove();
   };
 
+  const extractTextFromChildren = (node: ReactNode): string => {
+    if (typeof node === 'string' || typeof node === 'number') {
+      return String(node);
+    }
+    
+    if (React.isValidElement(node)) {
+      if (node.props.children) {
+        if (Array.isArray(node.props.children)) {
+          return node.props.children
+            .map((child) => extractTextFromChildren(child))
+            .join('');
+        }
+        return extractTextFromChildren(node.props.children);
+      }
+    }
+    
+    if (Array.isArray(node)) {
+      return node.map((child) => extractTextFromChildren(child)).join('');
+    }
+    
+    return '';
+  };
+
+  const handleCopy = () => {
+    if (!navigator.clipboard) {
+      console.warn('Clipboard API not available');
+      return;
+    }
+
+    let copyText = '';
+    if (title) copyText += `${title}\n`;
+    if (message) copyText += `${message}\n`;
+    if (children) {
+      const childText = extractTextFromChildren(children);
+      if (childText.trim()) {
+        copyText += `${childText.trim()}\n`;
+      }
+    }
+    
+    navigator.clipboard.writeText(copyText.trim()).catch(err => {
+      console.error('Failed to copy notification:', err);
+    });
+  };
+
   return toast.custom(
     t => (
       <div
@@ -151,11 +195,23 @@ export const hasuraToast = ({
             </div>
           ) : null}
         </div>
-        <button onClick={handleOnRemove(t)} className="p-1">
-          <FaTimesCircle
-            color={TOASTS_TYPES_OPTIONS[type].iconTheme?.primary}
-          />
-        </button>
+        <div className="flex items-center gap-1">
+          <button 
+            onClick={handleCopy} 
+            className="p-1 hover:bg-gray-700 rounded" 
+            title="Copy notification content"
+          >
+            <FaCopy
+              color={TOASTS_TYPES_OPTIONS[type].iconTheme?.primary}
+              size={14}
+            />
+          </button>
+          <button onClick={handleOnRemove(t)} className="p-1 hover:bg-gray-700 rounded">
+            <FaTimesCircle
+              color={TOASTS_TYPES_OPTIONS[type].iconTheme?.primary}
+            />
+          </button>
+        </div>
       </div>
     ),
     deepmerge(

From 9e216680b3e9361a77135cde966bb0dce1115bc8 Mon Sep 17 00:00:00 2001
From: garuda-eagle <info@garuda-labs.org>
Date: Fri, 26 Dec 2025 20:10:21 -0800
Subject: [PATCH 2/2] Fix: Remove extra blank line in NotificationSection.tsx

---
 .../legacy-ce/src/lib/components/Main/NotificationSection.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Main/NotificationSection.tsx b/frontend/libs/console/legacy-ce/src/lib/components/Main/NotificationSection.tsx
index 1c6cafd022ded..430a86ca7295b 100644
--- a/frontend/libs/console/legacy-ce/src/lib/components/Main/NotificationSection.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Main/NotificationSection.tsx
@@ -637,7 +637,6 @@ const HasuraNotifications: React.FC<
     }
   };
 
-
   const onClickOutside = () => {
     updateOpenState(false);
     closeDropDown();