From 9d33b03be93082408ea85ba71444114228400d34 Mon Sep 17 00:00:00 2001 From: Aditya Toshniwal Date: Thu, 1 Jul 2021 15:08:58 +0530 Subject: [PATCH] Few more changes to core schema framework required by other nodes. --- web/pgadmin/browser/static/js/node_ajax.js | 8 +++--- web/pgadmin/static/js/SchemaView/FormView.jsx | 8 +++++- web/pgadmin/static/js/SchemaView/index.jsx | 18 ++++++++++-- web/pgadmin/static/js/Theme/index.jsx | 1 + .../static/js/components/FormComponents.jsx | 28 +++++++++++++------ 5 files changed, 46 insertions(+), 17 deletions(-) diff --git a/web/pgadmin/browser/static/js/node_ajax.js b/web/pgadmin/browser/static/js/node_ajax.js index 494cbb838..71fa3a1d5 100644 --- a/web/pgadmin/browser/static/js/node_ajax.js +++ b/web/pgadmin/browser/static/js/node_ajax.js @@ -105,7 +105,7 @@ export function getNodeAjaxOptions(url, nodeObj, treeNodeInfo, itemNodeData, par } /* Get the nodes list based on current selected node id */ -export function getNodeListById(nodeObj, treeNodeInfo, itemNodeData, filter=()=>true) { +export function getNodeListById(nodeObj, treeNodeInfo, itemNodeData, params={}, filter=()=>true) { /* Transform the result to add image details */ const transform = (rows) => { var res = []; @@ -130,11 +130,11 @@ export function getNodeListById(nodeObj, treeNodeInfo, itemNodeData, filter=()=> return res; }; - return getNodeAjaxOptions('nodes', nodeObj, treeNodeInfo, itemNodeData, null, transform); + return getNodeAjaxOptions('nodes', nodeObj, treeNodeInfo, itemNodeData, params, transform); } /* Get the nodes list based on node name passed */ -export function getNodeListByName(node, treeNodeInfo, itemNodeData, filter=()=>true, postTransform=(res)=>res) { +export function getNodeListByName(node, treeNodeInfo, itemNodeData, params={}, filter=()=>true, postTransform=(res)=>res) { let nodeObj = pgAdmin.Browser.Nodes[node]; /* Transform the result to add image details */ const transform = (rows) => { @@ -160,5 +160,5 @@ export function getNodeListByName(node, treeNodeInfo, itemNodeData, filter=()=>t return postTransform(res); }; - return getNodeAjaxOptions('nodes', nodeObj, treeNodeInfo, itemNodeData, null, transform); + return getNodeAjaxOptions('nodes', nodeObj, treeNodeInfo, itemNodeData, params, transform); } diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx index 49d133d17..74bf22dd6 100644 --- a/web/pgadmin/static/js/SchemaView/FormView.jsx +++ b/web/pgadmin/static/js/SchemaView/FormView.jsx @@ -69,6 +69,7 @@ export default function FormView({ const [tabValue, setTabValue] = useState(0); const classes = useStyles(); const firstElement = useRef(); + let groupLabels = {}; schema = schema || {fields: []}; @@ -93,7 +94,7 @@ export default function FormView({ } if(modeSuppoted) { let {visible, disabled, group, readonly, ...field} = f; - group = group || defaultTab; + group = groupLabels[group] || group || defaultTab; let verInLimit = (_.isUndefined(viewHelperProps.serverInfo) ? true : ((_.isUndefined(field.server_type) ? true : @@ -137,6 +138,11 @@ export default function FormView({ schema={field.schema} accessPath={accessPath.concat(field.id)} dataDispatch={dataDispatch} containerClassName={classes.controlRow} {...field}/>, [value[field.id]]) ); + } else if(field.type === 'group') { + groupLabels[field.id] = field.label; + if(!_visible) { + schema.filterGroups.push(field.label); + } } else { /* Its a form control */ const hasError = field.id == formErr.name; diff --git a/web/pgadmin/static/js/SchemaView/index.jsx b/web/pgadmin/static/js/SchemaView/index.jsx index 6fccc3daa..6a4b7e602 100644 --- a/web/pgadmin/static/js/SchemaView/index.jsx +++ b/web/pgadmin/static/js/SchemaView/index.jsx @@ -63,6 +63,17 @@ const useDialogStyles = makeStyles((theme)=>({ }, })); +function getForQueryParams(data) { + let retData = {...data}; + Object.keys(retData).forEach((key)=>{ + let value = retData[key]; + if(_.isArray(value) || _.isObject(value)) { + retData[key] = JSON.stringify(value); + } + }); + return retData; +} + /* Compare the sessData with schema.origData schema.origData is set to incoming or default data */ @@ -78,8 +89,9 @@ function getChangedData(topSchema, mode, sessData, stringify=false) { /* If the orig value was null and new one is empty string, then its a "no change" */ /* If the orig value and new value are of different datatype but of same value(numeric) "no change" */ + /* If the orig value is undefined or null and new value is boolean false "no change" */ if ((_.isEqual(origVal, sessVal) - || ((origVal === null || _.isUndefined(origVal)) && sessVal === '') + || ((origVal === null || _.isUndefined(origVal)) && !Boolean(sessVal)) || (attrDefined ? _.isEqual(origVal.toString(), sessVal.toString()) : false)) && !force) { return; @@ -442,7 +454,7 @@ function SchemaDialogView({ if(!formErr.name) { let changeData = {}; if(viewHelperProps.mode === 'edit') { - changeData = getChangedData(schema, viewHelperProps.mode, sessData, true); + changeData = getChangedData(schema, viewHelperProps.mode, sessData); } else { /* If new then merge the changed data with origData */ changeData = _.merge(schema.origData, sessData); @@ -450,7 +462,7 @@ function SchemaDialogView({ /* Call the passed incoming getSQLValue func to get the SQL return of getSQLValue should be a promise. */ - return props.getSQLValue(isNew, changeData); + return props.getSQLValue(isNew, getForQueryParams(changeData)); } else { return Promise.resolve('-- ' + gettext('Definition incomplete.')); } diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx index 6a6e1fc29..16748acb0 100644 --- a/web/pgadmin/static/js/Theme/index.jsx +++ b/web/pgadmin/static/js/Theme/index.jsx @@ -238,6 +238,7 @@ function getFinalTheme(baseTheme) { root: { color: baseTheme.palette.text.primary, fontSize: baseTheme.typography.fontSize, + wordBreak: 'break-word', }, asterisk: { color: baseTheme.palette.error.main, diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx index f495cf259..97953f97c 100644 --- a/web/pgadmin/static/js/components/FormComponents.jsx +++ b/web/pgadmin/static/js/components/FormComponents.jsx @@ -105,7 +105,7 @@ export function FormInput({children, error, className, label, helpMessage, requi {label} - {error && } + @@ -186,7 +186,7 @@ export const InputText = forwardRef(({ disabled={Boolean(disabled)} rows={4} notched={false} - value={value || ''} + value={(_.isNull(value) || _.isUndefined(value)) ? '' : value} onChange={onChange} {...controlProps} {...props} @@ -442,7 +442,7 @@ const customReactSelectStyles = (theme, readonly)=>({ ...provided, padding: '0rem 0.25rem', }), - valueContainer: (provided)=>({ + valueContainer: (provided, state)=>({ ...provided, padding: theme.otherVars.reactSelect.padding, }), @@ -471,7 +471,7 @@ const customReactSelectStyles = (theme, readonly)=>({ multiValueLabel: (provided)=>({ ...provided, fontSize: '1em', - zIndex: 9999, + zIndex: 99, color: theme.palette.text.primary }), multiValueRemove: (provided)=>({ @@ -520,13 +520,18 @@ CustomSelectSingleValue.propTypes = { data: PropTypes.object, }; -function getRealValue(options, value, creatable) { +function getRealValue(options, value, creatable, formatter) { let realValue = null; if(_.isArray(value)) { + realValue = [...value]; + /* If multi select options need to be in some format by UI, use formatter */ + if(formatter) { + realValue = formatter.toSelect(realValue); + } if(creatable) { - realValue = value.map((val)=>({label:val, value: val})); + realValue = realValue.map((val)=>({label:val, value: val})); } else { - realValue = value.map((val)=>(_.find(options, (option)=>option.value==val))); + realValue = realValue.map((val)=>(_.find(options, (option)=>option.value==val))); } } else { realValue = _.find(options, (option)=>option.value==value) || null; @@ -557,7 +562,12 @@ export function InputSelect({ const onChangeOption = useCallback((selectVal, action)=>{ if(_.isArray(selectVal)) { - onChange && onChange(selectVal.map((option)=>option.value, action.name)); + /* If multi select options need to be in some format by UI, use formatter */ + selectVal = selectVal.map((option)=>option.value); + if(controlProps.formatter) { + selectVal = controlProps.formatter.fromSelect(selectVal); + } + onChange && onChange(selectVal, action.name); } else { onChange && onChange(selectVal ? selectVal.value : null, action.name); } @@ -565,7 +575,7 @@ export function InputSelect({ /* Apply filter if any */ const filteredOptions = (controlProps.filter && controlProps.filter(finalOptions)) || finalOptions; - const realValue = getRealValue(filteredOptions, value, controlProps.creatable); + const realValue = getRealValue(filteredOptions, value, controlProps.creatable, controlProps.formatter); const otherProps = { isSearchable: !readonly, isClearable: !readonly && (!_.isUndefined(controlProps.allowClear) ? controlProps.allowClear : true),