From dc8ab7cd2ac9c7b0b2ed90d7482e42d4278ecf80 Mon Sep 17 00:00:00 2001 From: Aditya Toshniwal Date: Tue, 28 Sep 2021 10:24:25 +0530 Subject: [PATCH] 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. --- .../tables/triggers/static/js/trigger.ui.js | 2 +- web/pgadmin/browser/static/js/node_view.jsx | 2 +- web/pgadmin/static/js/SchemaView/index.jsx | 4 +++ web/pgadmin/static/js/Theme/index.jsx | 28 +++++++++++++++++++ .../static/js/components/CodeMirror.jsx | 22 ++++++++++++++- .../static/js/components/FormComponents.jsx | 17 ++++++----- .../javascript/components/CodeMirror.spec.js | 11 +++++++- 7 files changed, 75 insertions(+), 11 deletions(-) diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.ui.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.ui.js index 61e6c4a14..bc42b1f1d 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.ui.js +++ b/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, diff --git a/web/pgadmin/browser/static/js/node_view.jsx b/web/pgadmin/browser/static/js/node_view.jsx index 1aa8dc42b..c94928689 100644 --- a/web/pgadmin/browser/static/js/node_view.jsx +++ b/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, diff --git a/web/pgadmin/static/js/SchemaView/index.jsx b/web/pgadmin/static/js/SchemaView/index.jsx index 0f3182f47..d2aa26838 100644 --- a/web/pgadmin/static/js/SchemaView/index.jsx +++ b/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; } }; diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx index b03a04b19..f24d3c63a 100644 --- a/web/pgadmin/static/js/Theme/index.jsx +++ b/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: { diff --git a/web/pgadmin/static/js/components/CodeMirror.jsx b/web/pgadmin/static/js/components/CodeMirror.jsx index 9627d2b43..a848cfbe3 100644 --- a/web/pgadmin/static/js/components/CodeMirror.jsx +++ b/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, }; diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx index 92e8fd686..c4d06ffe7 100644 --- a/web/pgadmin/static/js/components/FormComponents.jsx +++ b/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 ( editor.current=obj} @@ -413,6 +413,7 @@ FormInputFileSelect.propTypes = { }; export function InputSwitch({cid, helpid, value, onChange, readonly, controlProps, ...props}) { + const classes = useStyles(); return ( ); } @@ -434,6 +436,7 @@ InputSwitch.propTypes = { value: PropTypes.any, onChange: PropTypes.func, readonly: PropTypes.bool, + disabled: PropTypes.bool, controlProps: PropTypes.object, }; diff --git a/web/regression/javascript/components/CodeMirror.spec.js b/web/regression/javascript/components/CodeMirror.spec.js index ce75ead0a..ecb46269b 100644 --- a/web/regression/javascript/components/CodeMirror.spec.js +++ b/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);