1. Switch control and CodeMirror control UI improvements for read-only and disabled states.

2. If a form input value changes to null, pass it as an empty string in URL params.
3. Use server_type instead of type from the server info.

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.ui.js

@@ -457,7 +457,7 @@ export default class TriggerSchema extends BaseUISchema {
       type: 'sql', mode: ['create', 'edit'], deps: ['tfunction'],
       isFullTab: true,
       visible: true,
-      readonly: (state) => {
+      disabled: (state) => {
         // We will enable it only when EDB PPAS and trigger function is
         // set to Inline EDB-SPL
         var tfunction = state.tfunction,

web/pgadmin/browser/static/js/node_view.jsx

@@ -165,7 +165,7 @@ export function getNodeView(nodeType, treeNodeInfo, actionType, itemNodeData, fo
   const viewHelperProps = {
     mode: actionType,
     serverInfo: serverInfo ? {
-      type: serverInfo.type,
+      type: serverInfo.server_type,
       version: serverInfo.version,
     }: undefined,
     inCatalog: inCatalog,

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

@@ -130,6 +130,10 @@ function getChangedData(topSchema, viewHelperProps, sessData, stringify=false) {
         if(stringify && (_.isArray(change) || _.isObject(change))) {
           change = JSON.stringify(change);
         }
+        /* Null values are not passed in URL params, pass it as an empty string */
+        if(_.isNull(change)) {
+          change = '';
+        }
         return levelChanges[id] = change;
       }
     };

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

@@ -30,6 +30,11 @@ basicSettings = createMuiTheme(basicSettings, {
   shape: {
     borderRadius: 4,
   },
+  palette: {
+    action: {
+      disabledOpacity: 0.32,
+    }
+  },
   overrides: {
     MuiTabs: {
       root: {
@@ -196,6 +201,9 @@ basicSettings = createMuiTheme(basicSettings, {
     },
     MuiTab: {
       textColor: 'inherit',
+    },
+    MuiCheckbox: {
+      disableTouchRipple: true,
     }
   },
 });
@@ -272,6 +280,9 @@ function getFinalTheme(baseTheme) {
       MuiIconButton: {
         root: {
           color: baseTheme.palette.text.primary,
+          '&$disabled': {
+            color: 'abc',
+          }
         }
       },
       MuiAccordion: {
@@ -291,16 +302,33 @@ function getFinalTheme(baseTheme) {
           height: 28,
           padding: '7px 12px',
         },
+        colorPrimary: {
+          '&$disabled': {
+            color: 'abc',
+          }
+        },
         switchBase: {
           padding: baseTheme.spacing(0.5),
+          '&$disabled': {
+            color: 'abc',
+            '& + .MuiSwitch-track': {
+              opacity: baseTheme.palette.action.disabledOpacity,
+            }
+          },
           '&.Mui-checked': {
             color: baseTheme.palette.success.main,
             transform: 'translateX(24px)',
+            '& .MuiSwitch-thumb': {
+              border: 0
+            }
           },
           '&.Mui-checked + .MuiSwitch-track': {
             backgroundColor: baseTheme.palette.success.light,
           },
         },
+        thumb: {
+          border: '1px solid ' + baseTheme.otherVars.inputBorderColor
+        }
       },
       MuiCheckbox: {
         root: {

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

@@ -14,7 +14,7 @@ import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 
 /* React wrapper for CodeMirror */
-export default function CodeMirror({currEditor, name, value, options, events, className}) {
+export default function CodeMirror({currEditor, name, value, options, events, readonly, disabled, className}) {
   const taRef = useRef();
   const editor = useRef();
   const cmWrapper = useRef();
@@ -40,6 +40,24 @@ export default function CodeMirror({currEditor, name, value, options, events, cl
     });
   }, []);
 
+  useEffect(()=>{
+    if(editor.current) {
+      if(disabled) {
+        cmWrapper.current.classList.add('cm_disabled');
+        editor.current.setOption('readOnly', 'nocursor');
+      } else if(readonly) {
+        cmWrapper.current.classList.add('cm_disabled');
+        editor.current.addKeyMap({'Tab': false});
+        editor.current.addKeyMap({'Shift-Tab': false});
+      } else {
+        cmWrapper.current.classList.remove('cm_disabled');
+        editor.current.setOption('readOnly', false);
+        editor.current.removeKeyMap('Tab');
+        editor.current.removeKeyMap('Shift-Tab');
+      }
+    }
+  }, [readonly, disabled]);
+
   useMemo(() => {
     if(editor.current) {
       if(value != editor.current.getValue()) {
@@ -68,5 +86,7 @@ CodeMirror.propTypes = {
   options: PropTypes.object,
   change: PropTypes.func,
   events: PropTypes.object,
+  readonly: PropTypes.bool,
+  disabled: PropTypes.bool,
   className: CustomPropTypes.className,
 };

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

@@ -76,6 +76,12 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     backgroundColor: theme.otherVars.borderColor,
     padding: theme.spacing(1),
+  },
+  readOnlySwitch: {
+    opacity: 0.75,
+    '& .MuiSwitch-track': {
+      opacity: theme.palette.action.disabledOpacity,
+    }
   }
 }));
 
@@ -139,16 +145,10 @@ FormInput.propTypes = {
   testcid: PropTypes.any,
 };
 
-export function InputSQL({value, options, onChange, readonly, className, ...props}) {
+export function InputSQL({value, options, onChange, className, ...props}) {
   const classes = useStyles();
   const editor = useRef();
 
-  useEffect(()=>{
-    if(editor.current) {
-      editor.current.setOption('readOnly', readonly);
-    }
-  }, [readonly]);
-
   return (
     <CodeMirror
       currEditor={(obj)=>editor.current=obj}
@@ -413,6 +413,7 @@ FormInputFileSelect.propTypes = {
 };
 
 export function InputSwitch({cid, helpid, value, onChange, readonly, controlProps, ...props}) {
+  const classes = useStyles();
   return (
     <Switch color="primary"
       checked={Boolean(value)}
@@ -425,6 +426,7 @@ export function InputSwitch({cid, helpid, value, onChange, readonly, controlProp
       }}
       {...controlProps}
       {...props}
+      className={(readonly || props.disabled) ? classes.readOnlySwitch : null}
     />
   );
 }
@@ -434,6 +436,7 @@ InputSwitch.propTypes = {
   value: PropTypes.any,
   onChange: PropTypes.func,
   readonly: PropTypes.bool,
+  disabled: PropTypes.bool,
   controlProps: PropTypes.object,
 };
 

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

@@ -19,7 +19,16 @@ describe('CodeMirror', ()=>{
   let cmInstance, options={
       lineNumbers: true,
       mode: 'text/x-pgsql',
-    }, cmObj = jasmine.createSpyObj('cmObj', {'getValue':()=>'', 'setValue': ()=>{}, 'refresh': ()=>{}});
+    },
+    cmObj = jasmine.createSpyObj('cmObj', {
+      'getValue':()=>'',
+      'setValue': ()=>{},
+      'refresh': ()=>{},
+      'setOption': ()=>{},
+      'removeKeyMap': ()=>{},
+      'addKeyMap': ()=>{},
+      'getWrapperElement': document.createElement('div'),
+    });
   beforeEach(()=>{
     jasmineEnzyme();
     spyOn(OrigCodeMirror, 'fromTextArea').and.returnValue(cmObj);