Fixed following issues for Query Tool (after React Porting):

1) Find/Replace both opens the same dialogue box.(by clicking menu option)
2) Add New Server Connection > Server options keep loading(For multiple Server groups & should have some server)
3) Fixed CSS issues of slickgrid at various places.
4) C should be captial in ’<New connection…>'
5) In pop title for New Connection, all words should be capital.(Add new connection)
6) Explain > Analaysis tab > Column heading missing ROWS PLAN with cost & In explain only.
7) Explain > Analaysis tab > with cost enabled > Upward arrow size does not match with font of number. Arrow is little bigger than number.
8) Boolean default is not considered while ading new row.(try table from feature test defaults)
9) In query history , when not query history present, warning icon size big. Match it to warning message - No history found
10) Select table/db object > Open query tool from Tools menu > NOT FOUND error is shown. Existing issue, fixed.
11) Any cell just open by clicking it > Do NOT change any thing > Click Ok > Cell is shown as edited.

refs #6131

web/pgadmin/static/js/Explain/Analysis.jsx

@@ -15,6 +15,7 @@ import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import HTMLReactParse from 'html-react-parser';
 import { commonTableStyles } from '../Theme';
 import PropTypes from 'prop-types';
+import gettext from 'sources/gettext';
 
 const useStyles = makeStyles((theme)=>({
   collapsible: {
@@ -172,26 +173,26 @@ export default function Analysis({explainTable}) {
         <th rowSpan="2"><button disabled="">#</button></th>
         <th rowSpan="2"><button disabled="">Node</button></th>
         <th colSpan="2" style={explainTable.show_timings ? {} : {display: 'none'}}>
-          <button disabled="">Timings</button>
+          <button disabled="">{gettext('Timings')}</button>
         </th>
-        <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}}
+        <th style={(explainTable.show_rowsx || explainTable.show_rows || explainTable.show_plan_rows) ? {} : {display: 'none'}}
           colSpan={(explainTable.show_rowsx) ? '3' : '1'}>
-          <button disabled="">Rows</button>
+          <button disabled="">{gettext('Rows')}</button>
         </th>
         <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}} rowSpan="2">
-          <button disabled="">Loops</button>
+          <button disabled="">{gettext('Loops')}</button>
         </th>
       </tr>
       <tr>
         <th style={explainTable.show_timings ? {} : {display: 'none'}}>
-          <button disabled="">Exclusive</button>
+          <button disabled="">{gettext('Exclusive')}</button>
         </th>
         <th style={explainTable.show_timings ? {} : {display: 'none'}}>
-          <button disabled="">Inclusive</button>
+          <button disabled="">{gettext('Inclusive')}</button>
         </th>
-        <th style={explainTable.show_rowsx ? {} : {display: 'none'}}><button disabled="">Rows X</button></th>
-        <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}}><button disabled="">Actual</button></th>
-        <th style={(explainTable.show_rowsx || explainTable.plan_rows) ? {} : {display: 'none'}}><button disabled="">Plan</button></th>
+        <th style={explainTable.show_rowsx ? {} : {display: 'none'}}><button disabled="">{gettext('Rows X')}</button></th>
+        <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}}><button disabled="">{gettext('Actual')}</button></th>
+        <th style={(explainTable.show_rowsx || explainTable.show_plan_rows) ? {} : {display: 'none'}}><button disabled="">{gettext('Plan')}</button></th>
       </tr>
     </thead>
     <tbody>

web/pgadmin/static/js/Explain/ExplainStatistics.jsx

@@ -92,7 +92,7 @@ export default function ExplainStatistics({explainTable}) {
             <tbody>
               {_.sortBy(Object.keys(explainTable.statistics.tables)).map((key, i)=>{
                 let table = explainTable.statistics.tables[key];
-                table.sum_of_times = _.sumBy(table.nodes, 'sum_of_times');
+                table.sum_of_times = _.sumBy(Object.values(table.nodes), 'sum_of_times');
                 return <React.Fragment key={i}>
                   <tr className={classes.tableRow}>
                     <td className={classes.tableName}>{table.name}</td>

web/pgadmin/static/js/Explain/Graphical.jsx

@@ -419,7 +419,7 @@ export default function Graphical({planData, ctx}) {
           </Box>
         </Box>} />
         <CardContent className={classes.explainContent}>
-          <table className={clsx(tableStyles.table, tableStyles.borderBottom)}>
+          <table className={clsx(tableStyles.table, tableStyles.borderBottom, tableStyles.wrapTd)}>
             <tbody>
               <NodeDetails download={false} plan={explainPlanDetails} />
             </tbody>

web/pgadmin/static/js/Explain/index.jsx

@@ -237,6 +237,14 @@ function nodeExplainTableData(_planData, _ctx) {
   info.statistics.nodes[node_info] = node;
 }
 
+function parseExplainTableData(plan, ctx) {
+  nodeExplainTableData(plan, ctx);
+
+  plan['Plans']?.map((p)=>{
+    parseExplainTableData(p, ctx);
+  });
+}
+
 function parsePlan(data, ctx) {
   var idx = 1,
     lvl = data.level = data.level || [idx],
@@ -408,7 +416,6 @@ function parsePlan(data, ctx) {
   // Final Width and Height of current node
   data['width'] += maxChildWidth;
   data['Plans'] = plans;
-  nodeExplainTableData(data, ctx);
 
   return data;
 }
@@ -456,6 +463,8 @@ function parsePlanData(data, ctx) {
     if (data && 'Settings' in data) {
       retPlan['Statistics']['Settings'] = data['Settings'];
     }
+
+    parseExplainTableData(retPlan['Plan'], ctx);
   }
   return retPlan;
 }

web/pgadmin/static/js/Theme/index.jsx

@@ -27,6 +27,18 @@ basicSettings = createMuiTheme(basicSettings, {
   typography: {
     fontSize: 14,
     htmlFontSize: 14,
+    fontFamily: [
+      'Roboto',
+      '"Helvetica Neue"',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
   },
   shape: {
     borderRadius: 4,
@@ -281,6 +293,9 @@ function getFinalTheme(baseTheme) {
     overrides: {
       MuiCssBaseline: {
         '@global': {
+          body: {
+            fontFamily: baseTheme.typography.fontFamily,
+          },
           ul: {
             margin: 0,
             padding: 0,
@@ -618,6 +633,11 @@ export const commonTableStyles = makeStyles((theme)=>({
       borderBottom: '1px solid '+theme.otherVars.borderColor,
     },
   },
+  wrapTd: {
+    '& tbody td': {
+      whiteSpace: 'pre-wrap',
+    }
+  },
   noHover: {
     '& tbody > tr': {
       '&:hover': {

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

@@ -462,16 +462,12 @@ export default function CodeMirror({currEditor, name, value, options, events, re
 
   useEffect(()=>{
     if(editor.current) {
-      if(disabled) {
-        editor.current.setOption('readOnly', true);
-        cmWrapper.current.classList.add(classes.hideCursor);
-      } else if(readonly) {
+      if(readonly || disabled) {
         editor.current.setOption('readOnly', true);
         editor.current.addKeyMap({'Tab': false});
         editor.current.addKeyMap({'Shift-Tab': false});
         cmWrapper.current.classList.add(classes.hideCursor);
       } else {
-        cmWrapper.current.classList.remove('cm_disabled');
         editor.current.setOption('readOnly', false);
         editor.current.removeKeyMap('Tab');
         editor.current.removeKeyMap('Shift-Tab');

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

@@ -9,7 +9,9 @@ const useStyles = makeStyles((theme)=>({
     color: theme.palette.text.primary,
     margin: 'auto',
     marginTop: '24px',
-    fontSize: '0.9em',
+    fontSize: '0.8rem',
+    display: 'flex',
+    alignItems: 'center',
   },
 }));
 
@@ -17,8 +19,8 @@ export default function EmptyPanelMessage({text}) {
   const classes = useStyles();
   return (
     <Box className={classes.root}>
-      <InfoRoundedIcon />
-      <span marginLeft='4px'>{text}</span>
+      <InfoRoundedIcon style={{height: '1.2rem'}}/>
+      <span style={{marginLeft: '4px'}}>{text}</span>
     </Box>
   );
 }

web/pgadmin/static/js/helpers/Layout.jsx

@@ -81,6 +81,9 @@ const useStyles = makeStyles((theme)=>({
       },
       '& > div': {
         padding: '4px 10px',
+        '&:focus': {
+          outline: '2px solid '+theme.otherVars.activeBorder,
+        }
       },
       '& .drag-initiator': {
         display: 'flex',
@@ -190,6 +193,11 @@ export class LayoutHelper {
     return Boolean(docker.find(panelId));
   }
 
+  static isTabVisible(docker, panelId) {
+    let panelData = docker.find(panelId);
+    return panelData?.parent?.activeId == panelData.id;
+  }
+
   static openTab(docker, panelData, refTabId, direction, forceRerender=false) {
     let panel = docker.find(panelData.id);
     if(panel) {
@@ -203,6 +211,43 @@ export class LayoutHelper {
       docker.dockMove(LayoutHelper.getPanel(panelData), tgtPanel, direction);
     }
   }
+
+  static moveTo(direction) {
+    let dockBar = document.activeElement.closest('.dock')?.querySelector('.dock-bar.drag-initiator');
+    if(dockBar) {
+      let key = {
+        key: 'ArrowRight', keyCode: 39, which: 39, code: 'ArrowRight',
+        metaKey: false, ctrlKey: false, shiftKey: false, altKey: false,
+        bubbles: true,
+      };
+      if(direction == 'right') {
+        key = {
+          ...key,
+          key: 'ArrowRight', keyCode: 39, which: 39, code: 'ArrowRight'
+        };
+      } else if(direction == 'left') {
+        key = {
+          ...key,
+          key: 'ArrowLeft', keyCode: 37, which: 37, code: 'ArrowLeft',
+        };
+      }
+      dockBar.dispatchEvent(new KeyboardEvent('keydown', key));
+    }
+  }
+
+  static switchPanel() {
+    let currDockPanel = document.activeElement.closest('.dock-panel.dock-style-default');
+    let dockLayoutPanels = currDockPanel?.closest('.dock-layout').querySelectorAll('.dock-panel.dock-style-default');
+    if(dockLayoutPanels?.length > 1) {
+      for(let i=0; i<dockLayoutPanels.length; i++) {
+        if(dockLayoutPanels[i] == currDockPanel) {
+          let newPanelIdx = (i+1)%dockLayoutPanels.length;
+          dockLayoutPanels[newPanelIdx]?.querySelector('.dock-tab.dock-tab-active .dock-tab-btn')?.focus();
+          break;
+        }
+      }
+    }
+  }
 }
 
 function saveLayout(layoutObj, layoutId) {

web/pgadmin/static/scss/_slickgrid.overrides.scss

@@ -0,0 +1,83 @@
+.slick-row .cell-actions {
+  text-align: left;
+}
+
+.slick-row.selected .cell-selection {
+  background-color: transparent; /* show default selected row background */
+}
+
+.slick-cell span[data-cell-type="row-header-selector"] {
+  display: block;
+  text-align: center;
+}
+
+/*
+  SlickGrid, To fix the issue of width misalignment between Column Header &
+  actual Column in Mozilla Firefox browser
+  Ref: https://github.com/mleibman/SlickGrid/issues/742
+*/
+.slickgrid, .slickgrid *, .slick-header-column {
+  box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  -ms-box-sizing: content-box;
+}
+
+.slick-cell.selected span[data-cell-type="row-header-selector"] {
+  color: $color-primary-fg;
+}
+
+.slick-cell.cell-move-handle {
+  font-weight: bold;
+  text-align: right;
+  border-right: solid  $border-color;
+  background: $color-gray-lighter;
+  cursor: move;
+
+  &:hover {
+    background: $color-gray-light;
+  }
+}
+
+.cell-selection {
+  border-right-color: $border-color;
+  border-right-style: solid;
+  background: $color-gray-lighter;
+  color:  $color-gray;
+  text-align: right;
+  font-size: 10px;
+}
+
+.slick-row.selected .cell-move-handle {
+  background: $color-warning-light;
+}
+
+.slick-row.complete {
+  background-color: $color-success-light;
+  color:  $color-gray-dark;
+}
+
+.slick-row:hover .slick-cell{
+  border-top: $table-hover-border;
+  border-bottom: $table-hover-border;
+  background-color: $table-hover-bg-color;
+}
+
+.slick-row .slick-cell {
+  border-bottom: $panel-border;
+  border-right: $panel-border;
+  z-index: 0;
+}
+
+.slick-cell.active {
+  border: 1px solid transparent;
+  border-right: 1px solid $color-gray-light;
+  border-bottom-color: $color-gray-light;
+}
+
+.ui-widget-content.slick-row {
+  &.even,  &.odd {
+    background: none;
+    background-color: $table-bg;
+  }
+}

web/pgadmin/static/scss/pgadmin.scss

@@ -35,5 +35,6 @@ $theme-colors: (
 @import 'jsoneditor.overrides';
 @import 'pgadmin4-tree.overrides';
 @import 'pgadmin4-tree/src/css/styles';
+@import 'slickgrid.overrides';
 @import 'rc-dock/dist/rc-dock.css';
 @import '@szhsin/react-menu/dist/index.css';