Few more changes to core schema framework required by other nodes.

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);
 }

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;

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.'));
       }

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,

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

@@ -105,7 +105,7 @@ export function FormInput({children, error, className, label, helpMessage, requi
       <Grid item lg={3} md={3} sm={3} xs={12}>
         <InputLabel htmlFor={cid} className={clsx(classes.formLabel, error?classes.formLabelError : null)} required={required}>
           {label}
-          {error && <FormIcon type={MESSAGE_TYPE.ERROR} style={{marginLeft: 'auto'}}/>}
+          <FormIcon type={MESSAGE_TYPE.ERROR} style={{marginLeft: 'auto', visibility: error ? 'unset' : 'hidden'}}/>
         </InputLabel>
       </Grid>
       <Grid item lg={9} md={9} sm={9} xs={12}>
@@ -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),