Fixes for the preferences dialog

1) Add server mode validation in the binary path.
  2) Updated preferences tree rendering to avoid using the ReactDOM render.
  3) Updated CSS for keyboard shortcuts checkbox border makes it consistent with input box border.
  4) Fixed jasmine test case and improved code coverage.
  5) Fixed SonarQube issues.
  6) Added validation to disable "Maximum column with" option if "Column sized by" option is set to "Column name" in Query Tool -> Result grid.
  7) Updated documentation with the latest screenshots.
  8) Correct typo in the documentation. Fixes #7261

refs #7149

web/regression/javascript/components/KeyboardShortcuts.spec.js

@@ -16,6 +16,7 @@ import {
   OutlinedInput,
 } from '@material-ui/core';
 import KeyboardShortcuts from '../../../pgadmin/static/js/components/KeyboardShortcuts';
+import { InputCheckbox } from '../../../pgadmin/static/js/components/FormComponents';
 
 /* MUI Components need to be wrapped in Theme for theme vars */
 describe('KeyboardShortcuts', () => {
@@ -26,7 +27,8 @@ describe('KeyboardShortcuts', () => {
     'key': {
       'char': 'a',
       'key_code': 97
-    }
+    },
+    'shift': false
   };
   let fields = [{
     type: 'keyCode',
@@ -63,21 +65,17 @@ describe('KeyboardShortcuts', () => {
 
   describe('KeyboardShortcuts', () => {
     let ThemedFormInputKeyboardShortcuts = withTheme(KeyboardShortcuts), ctrl;
-
+    let onChange = jasmine.createSpy('onChange');
     beforeEach(() => {
       ctrl = mount(
         <ThemedFormInputKeyboardShortcuts
-          testcid="inpCid"
-          helpMessage="some help message"
-          /* InputText */
-          readonly={false}
-          disabled={false}
-          maxlength={1}
           value={defult_value}
           fields={fields}
           controlProps={{
-            extraprop: 'test'
+            extraprop: 'test',
+            keyDown: onChange
           }}
+          onChange={onChange}
         />);
     });
 
@@ -85,15 +83,29 @@ describe('KeyboardShortcuts', () => {
       expect(ctrl.find(OutlinedInput).prop('value')).toBe('a');
     });
 
-    it('Key change', () => {
-      let onChange = () => {/*This is intentional (SonarQube)*/ };
-      ctrl.setProps({
-        controlProps: {
-          onKeyDown: onChange
-        }
-      });
+    it('Key change', (done) => {
+      ctrl.find(OutlinedInput).at(0).find('input').simulate('keydown', { key: '', keyCode: 32});
+      expect(onChange).toHaveBeenCalledWith({ ctrl: true, alt: true, key: { char: 'Space', key_code: 32 }, shift: false });
+      done();
+    });
 
-      expect(ctrl.find(OutlinedInput).prop('value')).toBe('a');
+    it('Shift option', (done) => {
+      ctrl.find(InputCheckbox).at(0).find('input').simulate('change', { target: { checked: true, name: 'shift' } });
+      expect(onChange).toHaveBeenCalledWith({ ctrl: true, alt: true, key: { char: 'a', key_code: 97 }, shift: true });
+      done();
+    });
+
+    it('Ctrl option', (done) => {
+      ctrl.find(InputCheckbox).at(1).find('input').simulate('change', { target: { checked: false, name: 'ctrl' } });
+      expect(onChange).toHaveBeenCalledWith({ ctrl: false, alt: true, key: { char: 'a', key_code: 97 }, shift: false });
+      done();
+    });
+
+
+    it('Alt option', (done) => {
+      ctrl.find(InputCheckbox).at(2).find('input').simulate('change', { target: { checked: false, name: 'alt' } });
+      expect(onChange).toHaveBeenCalledWith({ ctrl: true, alt: false, key: { char: 'a', key_code: 97 }, shift: false });
+      done();
     });
 
   });

web/regression/javascript/components/QueryThreshold.spec.js

@@ -12,10 +12,8 @@ import React from 'react';
 import '../helper/enzyme.helper';
 import { withTheme } from '../fake_theme';
 import { createMount } from '@material-ui/core/test-utils';
-import {
-  OutlinedInput,
-} from '@material-ui/core';
 import QueryThresholds from '../../../pgadmin/static/js/components/QueryThresholds';
+import { InputText } from '../../../pgadmin/static/js/components/FormComponents';
 
 /* MUI Components need to be wrapped in Theme for theme vars */
 describe('QueryThresholds', () => {
@@ -41,45 +39,34 @@ describe('QueryThresholds', () => {
 
   describe('QueryThresholds', () => {
     let ThemedFormInputQueryThresholds = withTheme(QueryThresholds), ctrl;
-
+    let onChange = jasmine.createSpy('onChange');
     beforeEach(() => {
       ctrl = mount(
         <ThemedFormInputQueryThresholds
-          testcid="inpCid"
+          testcid="QueryThresholdCid"
           helpMessage="some help message"
-          /* InputText */
-          readonly={false}
-          disabled={false}
-          maxlength={1}
           value={defult_value}
           controlProps={{
             extraprop: 'test'
           }}
+          onChange={onChange}
         />);
     });
 
-    it('init Warning', () => {
-      expect(ctrl.find(OutlinedInput).at(0).prop('value')).toBe(5);
+    it('Warning', (done) => {
+      ctrl.find(InputText).at(0).find('input').simulate('change', { warning: 5, alert: 6 });
+      expect(ctrl.find(InputText).at(0).prop('value')).toBe(5);
+
+      expect(onChange).toHaveBeenCalledWith({ warning: '5', alert: 6 });
+      done();
     });
 
-    it('init Alert', () => {
-      expect(ctrl.find(OutlinedInput).at(1).prop('value')).toBe(6);
-    });
+    it('Alert', (done) => {
+      ctrl.find(InputText).at(1).find('input').simulate('change', { warning: 5, alert: 6 });
+      expect(ctrl.find(InputText).at(1).prop('value')).toBe(6);
 
-    it('warning change', () => {
-      let onChange = () => {/*This is intentional (SonarQube)*/ };
-      ctrl.setProps({
-        onChange: onChange
-      });
-      expect(ctrl.find(OutlinedInput).at(0).prop('value')).toBe(5);
-    });
-
-    it('Alert change', () => {
-      let onChange = () => {/*This is intentional (SonarQube)*/ };
-      ctrl.setProps({
-        onChange: onChange
-      });
-      expect(ctrl.find(OutlinedInput).at(1).prop('value')).toBe(6);
+      expect(onChange).toHaveBeenCalledWith({ warning: 5, alert: '6' });
+      done();
     });
   });
 

web/regression/javascript/components/SelectThemes.spec.js

@@ -12,11 +12,11 @@ import React from 'react';
 import '../helper/enzyme.helper';
 import { withTheme } from '../fake_theme';
 import { createMount } from '@material-ui/core/test-utils';
-import Themes from '../../../pgadmin/static/js/components/Themes';
+import SelectThemes from '../../../pgadmin/static/js/components/SelectThemes';
 import { InputSelect } from '../../../pgadmin/static/js/components/FormComponents';
 
 /* MUI Components need to be wrapped in Theme for theme vars */
-describe('Themes', () => {
+describe('SelectThemes', () => {
   let mount;
   let options = [{
     value: 'standard',
@@ -51,13 +51,13 @@ describe('Themes', () => {
     jasmineEnzyme();
   });
 
-  describe('Themes', () => {
-    let ThemedFormInputThemes = withTheme(Themes), ctrl, onChange = jasmine.createSpy('onChange');
+  describe('Select Themes', () => {
+    let ThemedFormInputThemes = withTheme(SelectThemes), ctrl, onChange = jasmine.createSpy('onChange');
 
     beforeEach(() => {
       ctrl = mount(
         <ThemedFormInputThemes
-          testcid="inpCid"
+          testcid="SelectThemeCid"
           helpMessage="some help message"
           options={options}
           onChange={onChange}