Makes some improvements/restructurings to the PgTable component.

web/pgadmin/dashboard/static/js/ActiveQuery.ui.js

@@ -30,7 +30,6 @@ export default class ActiveQuery extends BaseUISchema {
         readonly: true,
         mode: ['properties'],
         group: gettext('Details'),
-        disabled: true
       },
       {
         id: 'query_start',
@@ -39,8 +38,6 @@ export default class ActiveQuery extends BaseUISchema {
         editable: false,
         readonly: true,
         group: gettext('Details'),
-        disabled: true
-
       },
       {
         id: 'state_change',
@@ -49,7 +46,6 @@ export default class ActiveQuery extends BaseUISchema {
         editable: false,
         readonly: true,
         group: gettext('Details'),
-        disabled: true
       },
       {
         id: 'query',

web/pgadmin/dashboard/static/js/Dashboard.jsx

@@ -85,11 +85,11 @@ const useStyles = makeStyles((theme) => ({
   },
   panelContent: {
     ...theme.mixins.panelBorder,
+    display: 'flex',
     flexDirection: 'column',
     overflow: 'hidden !important',
-    flexGrow: 1,
+    height: '100%',
-    minWidth: '300px',
+    minHeight: '400px'
-    minHeight: '300px'
   },
   arrowButton: {
     fontSize: '2rem !important',
@@ -339,6 +339,7 @@ export default function Dashboard({
         let canEditRow = true;
         return (
           <PgIconButton
+            size="xs"
             className={row.isExpanded ?classes.buttonClick : ''}
             icon={
               row.isExpanded ? (
@@ -809,6 +810,7 @@ export default function Dashboard({
               >
                 {gettext('Server activity')}{' '}
               </Box>
+              <Box display="flex">
                 <Tabs
                   value={val}
                   onChange={tabChanged}
@@ -817,10 +819,12 @@ export default function Dashboard({
                   {tab.map((tabValue, i) => {
                     return <Tab key={i} label={tabValue} />;
                   })}
-                <RefreshButton/>
                 </Tabs>
-
+                <RefreshButton/>
+              </Box>
+              <Box flexGrow={1}>
                 <PgTable
+                  caveTable={false}
                   columns={
                     val === 0
                       ? activityColumns
@@ -832,11 +836,11 @@ export default function Dashboard({
                   }
                   data={dashData}
                   schema={schemaDict}
-                offset={145}
                 ></PgTable>
               </Box>
             </Box>
           </Box>
+        </Box>
       ) : sid && !props.serverConnected ? (
         <Box className={classes.dashboardPanel}>
           <div className={classes.emptyPanel}>

web/pgadmin/static/js/Theme/dark.js

@@ -94,6 +94,7 @@ export default function(basicSettings) {
       stepFg: '#000',
       toggleBtnBg: '#000',
       colorFg: '#FFFFFF',
+      emptySpaceBg: '#212121',
     }
   });
 }

web/pgadmin/static/js/Theme/high_contrast.js

@@ -92,6 +92,7 @@ export default function(basicSettings) {
       stepFg: '#000',
       toggleBtnBg: '#6B6B6B',
       colorFg: '#FFFFFF',
+      emptySpaceBg: '#010B15',
     }
   });
 }

web/pgadmin/static/js/Theme/standard.js

@@ -103,7 +103,7 @@ export default function(basicSettings) {
       toggleBtnBg: '#000',
       editorToolbarBg: '#ebeef3',
       datagridBg: '#fff',
-
+      emptySpaceBg: '#ebeef3',
     }
   });
 }

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

@@ -24,9 +24,9 @@ import PropTypes from 'prop-types';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { Checkbox, Box } from '@material-ui/core';
 import { InputText } from './FormComponents';
-import FormView from 'sources/SchemaView';
 import _ from 'lodash';
 import gettext from 'sources/gettext';
+import SchemaView from '../SchemaView';
 
 /* eslint-disable react/display-name */
 const useStyles = makeStyles((theme) => ({
@@ -37,8 +37,11 @@ const useStyles = makeStyles((theme) => ({
     ...theme.mixins.panelBorder,
     backgroundColor: theme.palette.background.default,
   },
+  autoResizerContainer: {
+    flexGrow: 1,
+    minHeight: 0
+  },
   autoResizer: {
-    height: '100% !important',
     width: '100% !important',
   },
   fixedSizeList: {
@@ -51,7 +54,6 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: '4px'
   },
   searchBox: {
-    marginBottom: '5px',
     display: 'flex',
     background: theme.palette.background.default
   },
@@ -61,10 +63,6 @@ const useStyles = makeStyles((theme) => ({
   alert: {
     backgroundColor: theme.palette.error.main + '!important'
   },
-
-  tableContentWidth: {
-    width: 'calc(100% - 3px)',
-  },
   searchPadding: {
     flex: 2.5
   },
@@ -77,14 +75,22 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: 8,
 
   },
-  table: {
+  tableContainer: {
+    overflowX: 'auto',
     flexGrow: 1,
     minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: theme.otherVars.emptySpaceBg,
+  },
+  table: {
     borderSpacing: 0,
-    width: '100%',
     overflow: 'hidden',
     borderRadius: theme.shape.borderRadius,
-    border: '1px solid'+ theme.palette.grey[400]
+    border: '1px solid '+theme.otherVars.borderColor,
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
   },
   pgTableHeadar: {
     display: 'flex',
@@ -94,11 +100,16 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column'
   },
 
+  tableRowContent:{
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+  },
+
   expandedForm: {
-    ...theme.mixins.panelBorder,
+    ...theme.mixins.panelBorder.all,
     margin: '8px',
-    paddingBottom: '12px',
+    flexGrow: 1,
-    marginRight: '15px',
   },
 
   tableCell: {
@@ -155,6 +166,9 @@ const useStyles = makeStyles((theme) => ({
     overflow: 'auto',
     padding: '7.5px',
   },
+  caveTable: {
+    margin: '8px',
+  },
   panelIcon: {
     width: '80%',
     margin: '0 auto',
@@ -177,38 +191,6 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function PgTable({ columns, data, isSelectRow, offset=105, ...props }) {
-  // Use the state and functions returned from useTable to build your UI
-  const classes = useStyles();
-  const [searchVal, setSearchVal] = React.useState('');
-  const tableRef = React.useRef();
-  const rowHeights = React.useRef({});
-  const rowRef = React.useRef({});
-
-  // Reset Search vakue in tab changed.
-  React.useEffect(()=>{
-    setSearchVal('');
-  },[columns]);
-  function getRowHeight(index, size) {
-    return rowHeights.current[index] + size || 35;
-  }
-
-  const setRowHeight = React.useCallback((index, size) => {
-    if(tableRef.current) {
-      tableRef.current.resetAfterIndex(index);
-      if (!(rowHeights.current.hasOwnProperty(index))){
-        rowHeights.current = { ...rowHeights.current, [index]: size };
-      }
-    }
-  }, []);
-
-  const defaultColumn = React.useMemo(
-    () => ({
-      minWidth: 150,
-    }),
-    []
-  );
-
 const IndeterminateCheckbox = React.forwardRef(
   ({ indeterminate, ...rest }, ref) => {
     const defaultRef = React.useRef();
@@ -237,6 +219,43 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
   row: PropTypes.object,
 };
 
+const ROW_HEIGHT = 35;
+export default function PgTable({ columns, data, isSelectRow, caveTable=true, ...props }) {
+  // Use the state and functions returned from useTable to build your UI
+  const classes = useStyles();
+  const [searchVal, setSearchVal] = React.useState('');
+  const tableRef = React.useRef();
+  const rowHeights = React.useRef({});
+
+  // Reset Search vakue in tab changed.
+  React.useEffect(()=>{
+    setSearchVal('');
+    rowHeights.current = {};
+    tableRef.current?.resetAfterIndex(0);
+  }, [columns]);
+
+  function getRowHeight(index) {
+    return rowHeights.current[index] || ROW_HEIGHT;
+  }
+
+  const setRowHeight = (index, size) => {
+    if(tableRef.current) {
+      if(size == ROW_HEIGHT) {
+        delete rowHeights.current[index];
+      } else {
+        rowHeights.current[index] = size;
+      }
+      tableRef.current.resetAfterIndex(index);
+    }
+  };
+
+  const defaultColumn = React.useMemo(
+    () => ({
+      minWidth: 150,
+    }),
+    []
+  );
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -244,7 +263,7 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
     rows,
     prepareRow,
     selectedFlatRows,
-    state: { selectedRowIds, expanded },
+    state: { selectedRowIds },
     setGlobalFilter,
     setHiddenColumns,
   } = useTable(
@@ -327,11 +346,6 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
     }
   );
 
-  React.useEffect(()=>{
-    tableRef.current?.resetAfterIndex(0);
-  },[expanded]);
-
-
   React.useEffect(() => {
     setHiddenColumns(
       columns
@@ -365,9 +379,37 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
   const RenderRow = React.useCallback(
     ({ index, style }) => {
       const row = rows[index];
+      const [expandComplete, setExpandComplete] = React.useState(null);
+      const rowRef = React.useRef() ;
       prepareRow(row);
+
+      React.useEffect(()=>{
+        if(expandComplete && !row.isExpanded) {
+          setExpandComplete(false);
+        }
+      }, [row.isExpanded]);
+
+      React.useEffect(()=>{
+        if(rowRef.current) {
+          if(expandComplete == null) {
+            return;
+          }
+          let rowHeight;
+          rowRef.current.style.height='unset';
+          if(expandComplete) {
+            rowHeight = rowRef.current.offsetHeight;
+          } else {
+            rowHeight = ROW_HEIGHT;
+            rowRef.current.style.height = ROW_HEIGHT;
+          }
+          rowRef.current.style.height = rowHeight + 'px';
+          setRowHeight(index, rowHeight);
+        }
+      }, [expandComplete]);
+
       return (
-        <div className={classes.tableContentWidth} style={style} key={row.id}>
+        <div style={style} key={row.id} ref={rowRef}>
+          <div className={classes.tableRowContent}>
             <div {...row.getRowProps()} className={classes.tr}>
               {row.cells.map((cell) => {
                 let classNames = [classes.tableCell];
@@ -392,19 +434,18 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
               })}
             </div>
             {!_.isUndefined(row) && row.isExpanded && (
-            <Box key={row.id} className={classes.expandedForm} ref={rowRef} style={{height: rowHeights.current[index]}}>
+              <Box key={row.id} className={classes.expandedForm}>
-              <FormView
+                <SchemaView
-                getInitData={() => {
+                  getInitData={()=>Promise.resolve({})}
-                  /*This is intentional (SonarQube)*/
-                }}
                   viewHelperProps={{ mode: 'properties' }}
                   schema={props.schema[row.id]}
                   showFooter={false}
-                onDataChange={() => { }}
+                  onDataChange={()=>{setExpandComplete(true);}}
                 />
               </Box>
             )}
           </div>
+        </div>
       );
     },
     [prepareRow, rows, selectedRowIds]
@@ -424,11 +465,8 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
           }}
         />
       </Box>
-      <AutoSizer
+      <div className={classes.tableContainer}>
-        className={props.type === 'panel' ? props.className : classes.autoResizer}
+        <div {...getTableProps()} className={clsx(classes.table, caveTable ? classes.caveTable : '')}>
-      >
-        {({ height }) => (
-          <div {...getTableProps()} className={classes.table}>
           <div>
             {headerGroups.map((headerGroup) => (
               <div key={''} {...headerGroup.getHeaderGroupProps()}>
@@ -461,43 +499,36 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
               </div>
             ))}
           </div>
-
           {
             data.length > 0 ? (
-                <div {...getTableBodyProps()} >
+              <div {...getTableBodyProps()} className={classes.autoResizerContainer}>
+                <AutoSizer
+                  className={classes.autoResizer}
+                >
+                  {({ height }) => (
                     <VariableSizeList
                       ref={tableRef}
-                    className={props.type === 'dashboard' ? props.fixedSizeList : classes.fixedSizeList}
+                      className={classes.fixedSizeList}
-                    height={height - offset}
+                      height={height}
                       itemCount={rows.length}
-                    itemSize={(i) => {
+                      itemSize={getRowHeight}
-                      if (_.isUndefined(rows[i].isExpanded)) {
-                        rows[i].isExpanded = false;
-                      }
-                      if (rowRef.current && rows[i].isExpanded) {
-                        setRowHeight(i, rowRef.current.offsetHeight + 35);
-                      }
-                      return rows[i].isExpanded ? getRowHeight(i, 35) : 35;
-                    }}
                       sorted={props?.sortOptions}
                     >
                       {RenderRow}
-
+                    </VariableSizeList>)}
-                  </VariableSizeList>
+                </AutoSizer>
               </div>
             ) : (
-
               <div className={classes.emptyPanel}>
                 <div className={classes.panelIcon}>
                   <i className="fa fa-exclamation-circle"></i>
                   <span className={classes.panelMessage}>{gettext('No record found')}</span>
                 </div>
-
               </div>
-              )}
+            )
+          }
+        </div>
       </div>
-        )}
-      </AutoSizer>
     </Box>
   );
 }
@@ -505,9 +536,9 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
 PgTable.propTypes = {
   stepId: PropTypes.number,
   height: PropTypes.number,
-  offset: PropTypes.number,
   customHeader: PropTypes.func,
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  caveTable: PropTypes.bool,
   fixedSizeList: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),

web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx

@@ -315,6 +315,7 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData }) {
       <WizardStep stepId={0}>
         <Box className={classes.panelContent}>
           <PgTable
+            caveTable={false}
             className={classes.table}
             height={window.innerHeight - 450}
             columns={columns}