From 9169d3d4bf72dbca61f87150a1ed020f665f9f5e Mon Sep 17 00:00:00 2001
From: Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>
Date: Wed, 9 Oct 2024 14:42:30 +0530
Subject: [PATCH] Fixed an issue where cursor selection is not visible in the
 PSQL tool. #7957

---
 docs/en_US/release_notes_8_13.rst              |  1 +
 .../static/js/components/PsqlComponent.jsx     | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/docs/en_US/release_notes_8_13.rst b/docs/en_US/release_notes_8_13.rst
index 8eb8d143f..5fe23a6ee 100644
--- a/docs/en_US/release_notes_8_13.rst
+++ b/docs/en_US/release_notes_8_13.rst
@@ -39,5 +39,6 @@ Bug fixes
   | `Issue #7919 <https://github.com/pgadmin-org/pgadmin4/issues/7919>`_ -  Fixed an issue where the dock layout was not saved upon closing a tab.
   | `Issue #7920 <https://github.com/pgadmin-org/pgadmin4/issues/7920>`_ -  Fixed an issue where the copy shortcut CTRL +C was not working in the Query Tool data grid.
   | `Issue #7955 <https://github.com/pgadmin-org/pgadmin4/issues/7955>`_ -  Fixed an issue where Dashboard tab showing 'Something went wrong'.
+  | `Issue #7957 <https://github.com/pgadmin-org/pgadmin4/issues/7957>`_ -  Fixed an issue where cursor selection is not visible in the PSQL tool.
   | `Issue #7965 <https://github.com/pgadmin-org/pgadmin4/issues/7965>`_ -  Allow OAuth2 params OAUTH2_NAME, OAUTH2_DISPLAY_NAME, OAUTH2_ICON, OAUTH2_BUTTON_COLOR to be optional.
   | `Issue #7988 <https://github.com/pgadmin-org/pgadmin4/issues/7988>`_ -  Add appropriate minimum width and height setting for desktop apps to avoid app accidentally going below visibility levels.
\ No newline at end of file
diff --git a/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx b/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx
index 38eedc044..cca8a246a 100644
--- a/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx
+++ b/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useEffect } from 'react';
-import { Box, useTheme } from '@mui/material';
+import { Box, styled, useTheme } from '@mui/material';
 import url_for from 'sources/url_for';
 import PropTypes from 'prop-types';
 
@@ -21,6 +21,16 @@ import { copyToClipboard } from '../../../../../static/js/clipboard';
 import 'pgadmin.browser.keyboard';
 import gettext from 'sources/gettext';
 
+
+const Root = styled(Box)(()=>({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: '1',
+  tabIndex: '0',
+}));
+
 function psql_socket_io(socket, is_enable, sid, db, server_type, fitAddon, term, role){
   // Listen all the socket events emit from server.
   let init_psql = true;
@@ -163,7 +173,7 @@ export default function  PsqlComponent({ params, pgAdmin }) {
         foreground: theme.palette.text.primary,
         cursor: theme.palette.text.primary,
         cursorAccent: theme.palette.text.primary,
-        selection: theme.palette.primary.main
+        selectionBackground: `${theme.otherVars.editor.selectionBg}`,
       };
     }
   };
@@ -191,8 +201,8 @@ export default function  PsqlComponent({ params, pgAdmin }) {
 
 
   return (
-    <Box width="100%" height="100%" display="flex" flexDirection="column" flexGrow="1" tabIndex="0" ref={containerRef}>
-    </Box>
+    <Root ref={containerRef}>
+    </Root>
   );
 }