Ensure that a new row should be added on top in the User Management dialog. Fixes #5817

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

@@ -546,6 +546,7 @@ export default function DataGridView({
       type: SCHEMA_STATE_ACTIONS.ADD_ROW,
       path: accessPath,
       value: newRow,
+      addOnTop: props.addOnTop
     });
   }, [props.canAddRow, rows?.length]);
 
@@ -682,4 +683,5 @@ DataGridView.propTypes = {
   customDeleteMsg: PropTypes.string,
   canSearch: PropTypes.bool,
   onDelete: PropTypes.func,
+  addOnTop: PropTypes.bool
 };

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

@@ -41,7 +41,7 @@ const useStyles = makeStyles((theme)=>({
   },
   errorMargin: {
     /* Error footer space */
-    paddingBottom: '36px',
+    paddingBottom: '36px !important',
   },
   sqlTabInput: {
     border: 0,
@@ -278,7 +278,8 @@ export default function FormView({
           canEdit: canEdit, canDelete: canDelete,
           visible: visible, canAddRow: canAddRow, onDelete: field.onDelete, canSearch: field.canSearch,
           expandEditOnAdd: field.expandEditOnAdd,
-          fixedRows: (viewHelperProps.mode == 'create' ? field.fixedRows : undefined)
+          fixedRows: (viewHelperProps.mode == 'create' ? field.fixedRows : undefined),
+          addOnTop: Boolean(field.addOnTop)
         };
 
         if(CustomControl) {
@@ -404,9 +405,10 @@ export default function FormView({
         </Box>
       </>);
   } else {
+    let contentClassName = [stateUtils.formErr.message ? classes.errorMargin : null];
     return (
       <>
-        <Box height="100%" display="flex" flexDirection="column" className={className} ref={formRef}>
+        <Box height="100%" display="flex" flexDirection="column" className={clsx(className, contentClassName)} ref={formRef}>
           {Object.keys(finalTabs).map((tabName)=>{
             return (
               <React.Fragment key={tabName}>{finalTabs[tabName]}</React.Fragment>

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

@@ -186,15 +186,16 @@ function getChangedData(topSchema, viewHelperProps, sessData, stringify=false, i
               let changed = [];
               for(const changedRow of changeDiff.updated) {
                 let finalChangedRow = {};
-                let rowIndx = _.findIndex(_.get(sessVal, field.id), (r)=>r.cid==changedRow.cid);
-                finalChangedRow = parseChanges(field.schema, _.get(origVal, [field.id, rowIndx]), _.get(sessVal, [field.id, rowIndx]));
+                let rowIndxSess = _.findIndex(_.get(sessVal, field.id), (r)=>r.cid==changedRow.cid);
+                let rowIndxOrig = _.findIndex(_.get(origVal, field.id), (r)=>r.cid==changedRow.cid);
+                finalChangedRow = parseChanges(field.schema, _.get(origVal, [field.id, rowIndxOrig]), _.get(sessVal, [field.id, rowIndxSess]));
 
                 if(_.isEmpty(finalChangedRow)) {
                   continue;
                 }
                 /* If the id attr value is present, then only changed keys can be passed.
                 Otherwise, passing all the keys is useful */
-                let idAttrValue = _.get(sessVal, [field.id, rowIndx, field.schema.idAttribute]);
+                let idAttrValue = _.get(sessVal, [field.id, rowIndxSess, field.schema.idAttribute]);
                 if(_.isUndefined(idAttrValue)) {
                   changed.push({
                     ...changedRow,
@@ -409,7 +410,11 @@ const sessDataReducer = (state, action)=>{
     /* Create id to identify a row uniquely, usefull when getting diff */
     cid = _.uniqueId('c');
     action.value['cid'] = cid;
-    rows = (_.get(data, action.path)||[]).concat(action.value);
+    if (action.addOnTop) {
+      rows = [].concat(action.value).concat(_.get(data, action.path)||[]);
+    } else {
+      rows = (_.get(data, action.path)||[]).concat(action.value);
+    }
     _.set(data, action.path, rows);
     /* If there is any dep listeners get the changes */
     data = getDepChange(action.path, data, state, action);

web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx

@@ -239,6 +239,7 @@ class UserManagementSchema extends BaseUISchema {
       {
         id: 'userManagement', label: '', type: 'collection', schema: obj.userManagementCollObj,
         canAdd: true, canDelete: true, isFullTab: true, group: 'temp_user',
+        addOnTop: true,
         canDeleteRow: (row)=>{
           return row['id'] != current_user['id'];
         },