Merge pull request #12168 from ToolJet/fix/debugger-copy-btn

Fix: Copy button not working in Debugger

frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx

@@ -5,6 +5,7 @@ import JSONTreeViewer from '@/_ui/JSONTreeViewer';
 import cx from 'classnames';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import useStore from '@/AppBuilder/_stores/store';
+import { toast } from 'react-hot-toast';
 
 function Logs({ logProps, idx }) {
   const [open, setOpen] = React.useState(false);
@@ -52,10 +53,19 @@ function Logs({ logProps, idx }) {
     }
   };
 
+  const copyToClipboard = (data) => {
+    const stringified = JSON.stringify(data, null, 2).replace(/\\/g, '');
+    navigator.clipboard.writeText(stringified);
+    return toast.success('Value copied to clipboard', { position: 'top-center' });
+  };
+
   const callbackActions = [
     {
       for: 'all',
-      actions: [{ name: 'Select Widget', dispatchAction: handleSelectComponentOnEditor, icon: false, onSelect: true }],
+      actions: [
+        { name: 'Copy value', dispatchAction: copyToClipboard, icon: false },
+        { name: 'Select Widget', dispatchAction: handleSelectComponentOnEditor, icon: false, onSelect: true },
+      ],
       enableForAllChildren: true,
       enableFor1stLevelChildren: true,
     },

frontend/src/_ui/JSONTreeViewer/JSONNode.jsx

@@ -268,7 +268,15 @@ export const JSONNode = ({ data, ...restProps }) => {
     };
 
     return (
-      <div style={{ fontSize: '9px', marginTop: '0px', right: '10px' }} className="d-flex position-absolute">
+      <div
+        style={{
+          paddingLeft: !enableCopyToClipboard ? '13px' : '0px', // Temporary fix for hover issue for copy value button. Need to remove this once inspector gets revamped.
+          fontSize: '9px',
+          marginTop: '0px',
+          right: '10px',
+        }}
+        className="d-flex position-absolute"
+      >
         {enableCopyToClipboard && (
           <ToolTip message={'Copy to clipboard'}>
             <span