Allow two controls to be inline in SchemaView.

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

@@ -18,6 +18,7 @@ import CustomPropTypes from '../custom_prop_types';
 import { DepListenerContext } from './DepListener';
 import { getFieldMetaData } from './FormView';
 import FieldSet from '../components/FieldSet';
+import { Box } from '@material-ui/core';
 
 export default function FieldSetView({
   value, schema={}, viewHelperProps, accessPath, dataDispatch, controlClassName, isDataGridForm=false, label, visible}) {
@@ -46,6 +47,8 @@ export default function FieldSetView({
   }, []);
 
   let viewFields = [];
+  let inlineComponents = [];
+
   /* Prepare the array of components based on the types */
   for(const field of schema.fields) {
     let {visible, disabled, readonly, modeSupported} =
@@ -58,40 +61,63 @@ export default function FieldSetView({
         * lets pass the new changes to dependent and get the new values
         * from there as well.
         */
-      viewFields.push(
-        <MappedFormControl
-          state={value}
-          key={field.id}
-          viewHelperProps={viewHelperProps}
-          name={field.id}
-          value={value[field.id]}
-          {...field}
-          readonly={readonly}
-          disabled={disabled}
-          visible={visible}
-          onChange={(changeValue)=>{
-            /* Get the changes on dependent fields as well */
-            dataDispatch({
-              type: SCHEMA_STATE_ACTIONS.SET_VALUE,
-              path: accessPath.concat(field.id),
-              value: changeValue,
-            });
-          }}
-          hasError={hasError}
-          className={controlClassName}
-          memoDeps={[
-            value[field.id],
-            readonly,
-            disabled,
-            visible,
-            hasError,
-            controlClassName,
-            ...(evalFunc(null, field.deps) || []).map((dep)=>value[dep]),
-          ]}
-        />
-      );
+      const currentControl = <MappedFormControl
+        state={value}
+        key={field.id}
+        viewHelperProps={viewHelperProps}
+        name={field.id}
+        value={value[field.id]}
+        {...field}
+        readonly={readonly}
+        disabled={disabled}
+        visible={visible}
+        onChange={(changeValue)=>{
+          /* Get the changes on dependent fields as well */
+          dataDispatch({
+            type: SCHEMA_STATE_ACTIONS.SET_VALUE,
+            path: accessPath.concat(field.id),
+            value: changeValue,
+          });
+        }}
+        hasError={hasError}
+        className={controlClassName}
+        memoDeps={[
+          value[field.id],
+          readonly,
+          disabled,
+          visible,
+          hasError,
+          controlClassName,
+          ...(evalFunc(null, field.deps) || []).map((dep)=>value[dep]),
+        ]}
+      />;
+
+      if(field.inlineNext) {
+        inlineComponents.push(React.cloneElement(currentControl, {
+          withContainer: false, controlGridBasis: 3
+        }));
+      } else if(inlineComponents?.length > 0) {
+        inlineComponents.push(React.cloneElement(currentControl, {
+          withContainer: false, controlGridBasis: 3
+        }));
+        viewFields.push(
+          <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} gridRowGap="8px" flexWrap="wrap">
+            {inlineComponents}
+          </Box>
+        );
+        inlineComponents = [];
+      } else {
+        viewFields.push(currentControl);
+      }
     }
   }
+  if(inlineComponents?.length > 0) {
+    viewFields.push(
+      <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} gridRowGap="8px" flexWrap="wrap">
+        {inlineComponents}
+      </Box>
+    );
+  }
 
   if(!visible) {
     return <></>;

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

@@ -212,6 +212,8 @@ export default function FormView({
   }, [stateUtils.formResetKey]);
 
   let fullTabs = [];
+  let inlineComponents = [];
+  let inlineCompGroup = null;
 
   /* Prepare the array of components based on the types */
   for(const field of schemaRef.current.fields) {
@@ -304,49 +306,75 @@ export default function FormView({
           firstEleID.current = field.id;
         }
 
-        tabs[group].push(
-          <MappedFormControl
-            inputRef={(ele)=>{
-              if(firstEleRef && firstEleID.current === field.id) {
-                firstEleRef.current = ele;
-              }
-            }}
-            state={value}
-            key={id}
-            viewHelperProps={viewHelperProps}
-            name={id}
-            value={value[id]}
-            {...field}
-            id={id}
-            readonly={readonly}
-            disabled={disabled}
-            visible={visible}
-            onChange={(changeValue)=>{
-              /* Get the changes on dependent fields as well */
-              dataDispatch({
-                type: SCHEMA_STATE_ACTIONS.SET_VALUE,
-                path: accessPath.concat(id),
-                value: changeValue,
-              });
-            }}
-            hasError={hasError}
-            className={classes.controlRow}
-            noLabel={field.isFullTab}
-            memoDeps={[
-              value[id],
-              readonly,
-              disabled,
-              visible,
-              hasError,
-              classes.controlRow,
-              ...(evalFunc(null, field.deps) || []).map((dep)=>value[dep]),
-            ]}
-          />
-        );
+        const currentControl = <MappedFormControl
+          inputRef={(ele)=>{
+            if(firstEleRef && firstEleID.current === field.id) {
+              firstEleRef.current = ele;
+            }
+          }}
+          state={value}
+          key={id}
+          viewHelperProps={viewHelperProps}
+          name={id}
+          value={value[id]}
+          {...field}
+          id={id}
+          readonly={readonly}
+          disabled={disabled}
+          visible={visible}
+          onChange={(changeValue)=>{
+            /* Get the changes on dependent fields as well */
+            dataDispatch({
+              type: SCHEMA_STATE_ACTIONS.SET_VALUE,
+              path: accessPath.concat(id),
+              value: changeValue,
+            });
+          }}
+          hasError={hasError}
+          className={classes.controlRow}
+          noLabel={field.isFullTab}
+          memoDeps={[
+            value[id],
+            readonly,
+            disabled,
+            visible,
+            hasError,
+            classes.controlRow,
+            ...(evalFunc(null, field.deps) || []).map((dep)=>value[dep]),
+          ]}
+        />;
+
+        if(field.inlineNext) {
+          inlineComponents.push(React.cloneElement(currentControl, {
+            withContainer: false, controlGridBasis: 3
+          }));
+          inlineCompGroup = group;
+        } else if(inlineComponents?.length > 0) {
+          inlineComponents.push(React.cloneElement(currentControl, {
+            withContainer: false, controlGridBasis: 3
+          }));
+          tabs[group].push(
+            <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={classes.controlRow} gridRowGap="8px" flexWrap="wrap">
+              {inlineComponents}
+            </Box>
+          );
+          inlineComponents = [];
+          inlineCompGroup = null;
+        } else {
+          tabs[group].push(currentControl);
+        }
       }
     }
   }
 
+  if(inlineComponents?.length > 0) {
+    tabs[inlineCompGroup].push(
+      <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={classes.controlRow} gridRowGap="8px" flexWrap="wrap">
+        {inlineComponents}
+      </Box>
+    );
+  }
+
   let finalTabs = _.pickBy(tabs, (v, tabName)=>schemaRef.current.filterGroups.indexOf(tabName) <= -1);
 
   /* Add the SQL tab if required */

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

@@ -201,7 +201,8 @@ const ALLOWED_PROPS_FIELD_COMMON = [
   'mode', 'value', 'readonly', 'disabled', 'hasError', 'id',
   'label', 'options', 'optionsLoaded', 'controlProps', 'schema', 'inputRef',
   'visible', 'autoFocus', 'helpMessage', 'className', 'optionsReloadBasis',
-  'orientation', 'isvalidate', 'fields', 'radioType', 'hideBrowseButton', 'btnName', 'hidden'
+  'orientation', 'isvalidate', 'fields', 'radioType', 'hideBrowseButton', 'btnName', 'hidden',
+  'withContainer', 'controlGridBasis',
 ];
 
 const ALLOWED_PROPS_FIELD_FORM = [

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

@@ -125,19 +125,37 @@ FormIcon.propTypes = {
 };
 
 /* Wrapper on any form component to add label, error indicator and help message */
-export function FormInput({ children, error, className, label, helpMessage, required, testcid }) {
+export function FormInput({ children, error, className, label, helpMessage, required, testcid, withContainer=true, labelGridBasis=3, controlGridBasis=9 }) {
   const classes = useStyles();
   const cid = testcid || _.uniqueId('c');
   const helpid = `h${cid}`;
+  if(!withContainer) {
+    return (
+      <>
+        <Grid item lg={labelGridBasis} md={labelGridBasis} sm={12} xs={12}>
+          <InputLabel htmlFor={cid} className={clsx(classes.formLabel, error ? classes.formLabelError : null)} required={required}>
+            {label}
+            <FormIcon type={MESSAGE_TYPE.ERROR} style={{ marginLeft: 'auto', visibility: error ? 'unset' : 'hidden' }} />
+          </InputLabel>
+        </Grid>
+        <Grid item lg={controlGridBasis} md={controlGridBasis} sm={12} xs={12}>
+          <FormControl error={Boolean(error)} fullWidth>
+            {React.cloneElement(children, { cid, helpid })}
+          </FormControl>
+          <FormHelperText id={helpid} variant="outlined">{HTMLReactParse(helpMessage || '')}</FormHelperText>
+        </Grid>
+      </>
+    );
+  }
   return (
     <Grid container spacing={0} className={className}>
-      <Grid item lg={3} md={3} sm={3} xs={12}>
+      <Grid item lg={labelGridBasis} md={labelGridBasis} sm={12} xs={12}>
         <InputLabel htmlFor={cid} className={clsx(classes.formLabel, error ? classes.formLabelError : null)} required={required}>
           {label}
           <FormIcon type={MESSAGE_TYPE.ERROR} style={{ marginLeft: 'auto', visibility: error ? 'unset' : 'hidden' }} />
         </InputLabel>
       </Grid>
-      <Grid item lg={9} md={9} sm={9} xs={12}>
+      <Grid item lg={controlGridBasis} md={controlGridBasis} sm={12} xs={12}>
         <FormControl error={Boolean(error)} fullWidth>
           {React.cloneElement(children, { cid, helpid })}
         </FormControl>
@@ -154,6 +172,9 @@ FormInput.propTypes = {
   helpMessage: PropTypes.string,
   required: PropTypes.bool,
   testcid: PropTypes.any,
+  withContainer: PropTypes.bool,
+  labelGridBasis: PropTypes.number,
+  controlGridBasis: PropTypes.number,
 };
 
 export function InputSQL({ value, options, onChange, className, controlProps, inputRef, ...props }) {
@@ -512,10 +533,10 @@ InputSwitch.propTypes = {
   controlProps: PropTypes.object,
 };
 
-export function FormInputSwitch({ hasError, required, label, className, helpMessage, testcid, ...props }) {
-
+export function FormInputSwitch({ hasError, required, label, className, helpMessage, testcid, withContainer, controlGridBasis, ...props }) {
   return (
-    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput required={required} label={label} error={hasError} className={className}
+      helpMessage={helpMessage} testcid={testcid} withContainer={withContainer} controlGridBasis={controlGridBasis}>
       <InputSwitch {...props} />
     </FormInput>
   );
@@ -527,6 +548,8 @@ FormInputSwitch.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
+  withContainer: PropTypes.bool,
+  controlGridBasis: PropTypes.number,
 };
 
 export function InputCheckbox({ cid, helpid, value, onChange, controlProps, readonly, ...props }) {
@@ -1019,10 +1042,11 @@ InputColor.propTypes = {
 };
 
 export function FormInputColor({
-  hasError, required, className, label, helpMessage, testcid, ...props }) {
+  hasError, required, className, label, helpMessage, testcid, withContainer, controlGridBasis, ...props }) {
 
   return (
-    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}
+      withContainer={withContainer} controlGridBasis={controlGridBasis}>
       <InputColor {...props} />
     </FormInput>
   );
@@ -1034,6 +1058,8 @@ FormInputColor.propTypes = {
   label: PropTypes.string,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
+  withContainer: PropTypes.bool,
+  controlGridBasis: PropTypes.number,
 };
 
 export function PlainString({ controlProps, value }) {

web/pgadmin/tools/backup/static/js/backup.ui.js

@@ -40,6 +40,7 @@ export class SectionSchema extends BaseUISchema {
            state.only_tablespaces ||
            state.only_roles;
         },
+        inlineNext: true,
       }, {
         id: 'data',
         label: gettext('Data'),