Fixed an issue where Query Tool's Messages tab content right-click "Select All" selects the entire page's content and copying the selection by right-click "Copy" reset the selection. #8992

Author: anilsahoo20

web/pgadmin/tools/sqleditor/static/js/components/sections/Messages.jsx

@@ -10,6 +10,8 @@ import { styled } from '@mui/material/styles';
 import React from 'react';
 import { QueryToolEventsContext } from '../QueryToolComponent';
 import { QUERY_TOOL_EVENTS } from '../QueryToolConstants';
+import gettext from 'sources/gettext';
+import { PgMenu, PgMenuItem } from '../../../../../../static/js/components/Menu';
 
 const StyledDiv = styled('div')(({theme}) => ({
   whiteSpace: 'pre-wrap',
@@ -27,6 +29,8 @@ const StyledDiv = styled('div')(({theme}) => ({
 export function Messages() {
 
   const [messageText, setMessageText] = React.useState('');
+  const [contextPos, setContextPos] = React.useState(null);
+  const containerRef = React.useRef(null);
   const eventBus = React.useContext(QueryToolEventsContext);
   React.useEffect(()=>{
     eventBus.registerListener(QUERY_TOOL_EVENTS.SET_MESSAGE, (text, append=false)=>{
@@ -38,5 +42,45 @@ export function Messages() {
       });
     });
   }, []);
-  return <StyledDiv tabIndex="0">{messageText}</StyledDiv>;
+
+  const handleContextMenu = React.useCallback((e)=>{
+    e.preventDefault();
+    setContextPos({x: e.clientX, y: e.clientY});
+  }, []);
+
+  const selectAll = React.useCallback(()=>{
+    if(containerRef.current) {
+      const selection = window.getSelection();
+      const range = document.createRange();
+      range.selectNodeContents(containerRef.current);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    setContextPos(null);
+  }, []);
+
+  const copyToClipboard = React.useCallback(()=>{
+    const selection = window.getSelection();
+    const text = selection.toString();
+    if(text) {
+      navigator.clipboard.writeText(text);
+    }
+    setContextPos(null);
+  }, []);
+
+  return <>
+    <StyledDiv tabIndex="0" ref={containerRef} onContextMenu={handleContextMenu}>
+      {messageText}
+    </StyledDiv>
+    <PgMenu
+      anchorPoint={contextPos ? {x: contextPos.x, y: contextPos.y} : undefined}
+      open={Boolean(contextPos)}
+      onClose={()=>setContextPos(null)}
+      label="messages-context"
+      portal
+    >
+      <PgMenuItem onClick={copyToClipboard}>{gettext('Copy')}</PgMenuItem>
+      <PgMenuItem onClick={selectAll}>{gettext('Select All')}</PgMenuItem>
+    </PgMenu>
+  </>;
 }