Fixed the following issues for the new query tool:

1) In Dark mode > Replace/Find dialogue forward & reverse buttons are stuck to each other.
 2) In Dark/High contrast mode > Checkbox is not visible for false value.
 3) Wrap toolbar when size goes very small.
 4) Replace functionality does not work when tried in sequence 2 times. Codemirror search is not cyclic. So, changes are made to always search from the start.
 5) Replace all does not work when tried in sequence 2 times. Same reason as above.
 6) Fix broken macros $SELECTION$ feature.
 7) Make query history SQL readonly.
 8) The Filter dialog save button should be disabled when opened.

web/pgadmin/static/js/components/CodeMirror.jsx

@@ -134,7 +134,7 @@ export function FindDialog({editor, show, replace, onClose}) {
   const search = ()=>{
     if(editor) {
       let query = parseQuery(findVal, useRegex, matchCase);
-      searchCursor.current = editor.getSearchCursor(query, editor.getCursor(true), !matchCase);
+      searchCursor.current = editor.getSearchCursor(query, 0, !matchCase);
       if(findVal != '') {
         editor.removeOverlay(highlightsearch.current);
         highlightsearch.current = searchOverlay(query, matchCase);
@@ -221,6 +221,8 @@ export function FindDialog({editor, show, replace, onClose}) {
   };
 
   const onReplaceAll = ()=>{
+    /* search from start */
+    search();
     while(searchCursor.current.from()) {
       onReplace();
     }
@@ -253,10 +255,13 @@ export function FindDialog({editor, show, replace, onClose}) {
       />}
 
       <Box display="flex" className={classes.marginTop}>
-        <PgIconButton title={gettext('Previous')} icon={<ArrowUpwardRoundedIcon />} size="xs" noBorder onClick={onFindPrev} />
+        <PgIconButton title={gettext('Previous')} icon={<ArrowUpwardRoundedIcon />} size="xs" noBorder onClick={onFindPrev}
-        <PgIconButton title={gettext('Next')} icon={<ArrowDownwardRoundedIcon />} size="xs" noBorder onClick={onFindNext}/>
+          style={{marginRight: '2px'}} />
+        <PgIconButton title={gettext('Next')} icon={<ArrowDownwardRoundedIcon />} size="xs" noBorder onClick={onFindNext}
+          style={{marginRight: '2px'}} />
         {replace && <>
-          <PgIconButton title={gettext('Replace')} icon={<SwapHorizRoundedIcon style={{height: 'unset'}}/>} size="xs" noBorder onClick={onReplace} />
+          <PgIconButton title={gettext('Replace')} icon={<SwapHorizRoundedIcon style={{height: 'unset'}}/>} size="xs" noBorder onClick={onReplace}
+            style={{marginRight: '2px'}} />
           <PgIconButton title={gettext('Replace All')} icon={<SwapCallsRoundedIcon />} size="xs" noBorder onClick={onReplaceAll}/>
         </>}
         <Box marginLeft="auto">

web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx

@@ -68,9 +68,13 @@ function setPanelTitle(panel, title, qtState, dirty=false) {
     setQueryToolDockerTitle(panel, true, title, qtState.current_file ? true : false);
   }
 }
+
+function onBeforeUnload(e) {
+  e.preventDefault();
+  e.returnValue = 'prevent';
+}
 export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedNodeInfo, panel, eventBusObj}) {
   const containerRef = React.useRef(null);
-  const forceClose = React.useRef(false);
   const [qtState, _setQtState] = useState({
     preferences: {
       browser: {}, sqleditor: {},
@@ -111,7 +115,8 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
   const modal = useModal();
 
   /* Connection status poller */
-  let pollTime = qtState.preferences.sqleditor.connection_status_fetch_time > 0 && !qtState.obtaining_conn ?
+  let pollTime = qtState.preferences.sqleditor.connection_status_fetch_time > 0
+    && !qtState.obtaining_conn && qtState.preferences?.sqleditor?.connection_status ?
     qtState.preferences.sqleditor.connection_status_fetch_time*1000 : -1;
   /* No need to poll when the query is executing. Query poller will the txn status */
   if(qtState.connection_status === CONNECTION_STATUS.TRANSACTION_STATUS_ACTIVE && qtState.connected) {
@@ -299,11 +304,8 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
 
     /* WC docker events */
     panel?.on(window.wcDocker.EVENT.CLOSING, function() {
-      if(!forceClose.current) {
+      window.removeEventListener('beforeunload', onBeforeUnload);
-        eventBus.current.fireEvent(QUERY_TOOL_EVENTS.WARN_SAVE_DATA_CLOSE);
+      eventBus.current.fireEvent(QUERY_TOOL_EVENTS.WARN_SAVE_DATA_CLOSE);
-      } else {
-        panel.close();
-      }
     });
 
     pgAdmin.Browser.Events.on('pgadmin-storage:finish_btn:select_file', (fileName)=>{
@@ -313,6 +315,8 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
     pgAdmin.Browser.Events.on('pgadmin-storage:finish_btn:create_file', (fileName)=>{
       eventBus.current.fireEvent(QUERY_TOOL_EVENTS.SAVE_FILE, fileName);
     }, pgAdmin);
+
+    window.addEventListener('beforeunload', onBeforeUnload);
   }, []);
 
   useEffect(()=>{

web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx

@@ -93,7 +93,7 @@ const useStyles = makeStyles((theme)=>({
     lineHeight: '16px',
 
     '&.checked, &.unchecked': {
-      background: theme.palette.background.default,
+      background: theme.palette.grey[200],
     },
     '&.checked:after': {
       content: '\'\\2713\'',

web/pgadmin/tools/sqleditor/static/js/components/dialogs/FilterDialog.jsx

@@ -136,7 +136,7 @@ export default function FilterDialog({onClose, onSave}) {
       getInitData={getInitData}
       schema={filterSchemaObj}
       viewHelperProps={{
-        mode: 'create',
+        mode: 'edit',
       }}
       onSave={onSaveClick}
       onClose={onClose}

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

@@ -43,6 +43,7 @@ const useStyles = makeStyles((theme)=>({
     alignItems: 'center',
     gap: '4px',
     backgroundColor: theme.otherVars.editorToolbarBg,
+    flexWrap: 'wrap',
     ...theme.mixins.panelBorder.bottom,
   },
 }));
@@ -322,7 +323,7 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros}) {
     eventBus.fireEvent(QUERY_TOOL_EVENTS.EXECUTION_START, 'ROLLBACK;', null, true);
   };
   const executeMacro = (m)=>{
-    eventBus.fireEvent(QUERY_TOOL_EVENTS.EXECUTION_START, m.sql, null, true);
+    eventBus.fireEvent(QUERY_TOOL_EVENTS.TRIGGER_EXECUTION, null, m.sql);
   };
   const onLimitChange=(e)=>{
     setLimit(e.target.value);

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

@@ -237,11 +237,20 @@ export default function Query() {
     }
   };
 
-  const triggerExecution = (explainObject)=>{
+  const triggerExecution = (explainObject, macroSQL)=>{
     if(queryToolCtx.params.is_query_tool) {
-      let query = editor.current?.getSelection() || editor.current?.getValue() || '';
+      let external = null;
+      let query = editor.current?.getSelection();
+      if(!_.isUndefined(macroSQL)) {
+        const regex = /\$SELECTION\$/gi;
+        query =  macroSQL.replace(regex, query);
+        external = true;
+      } else{
+        /* Normal execution */
+        query = query || editor.current?.getValue() || '';
+      }
       if(query) {
-        eventBus.fireEvent(QUERY_TOOL_EVENTS.EXECUTION_START, query, explainObject);
+        eventBus.fireEvent(QUERY_TOOL_EVENTS.EXECUTION_START, query, explainObject, external);
       }
     } else {
       eventBus.fireEvent(QUERY_TOOL_EVENTS.EXECUTION_START, null, null);
@@ -375,7 +384,7 @@ export default function Query() {
     });
   }, [queryToolCtx.params.trans_id]);
 
-  const isDirty = ()=>lastSavedText.current !== editor.current.getValue();
+  const isDirty = ()=>(queryToolCtx.params.is_query_tool && lastSavedText.current !== editor.current.getValue());
 
   const cursorActivity = useCallback((cmObj)=>{
     const c = cmObj.getCursor();