Fixes some issues and improves the PgTable component.

2025-02-25 18:55:31 -06:00 · 2022-04-05 12:10:51 +05:30 · 2022-04-05 12:10:51 +05:30 · 953a9d7fd1
commit 953a9d7fd1
parent 56a4263a5c
7 changed files with 67 additions and 52 deletions
--- a/web/pgadmin/dashboard/static/js/Dashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx
@ -26,6 +26,7 @@ import WelcomeDashboard from './WelcomeDashboard';
 import ActiveQuery from './ActiveQuery.ui';
 import _ from 'lodash';
 import CachedIcon from '@mui/icons-material/Cached';
+import EmptyPanelMessage from '../../../static/js/components/EmptyPanelMessage';

 function parseData(data) {
  var res = [];
@ -191,8 +192,8 @@ export default function Dashboard({
      sortble: true,
      resizable: true,
      disableGlobalFilter: false,
-      minWidth: 16,
-      maxWidth: 30,
+      width: 35,
+      minWidth: 0,
      id: 'btn-terminate',
      // eslint-disable-next-line react/display-name
      Cell: ({ row }) => {
@ -264,8 +265,8 @@ export default function Dashboard({
      sortble: true,
      resizable: true,
      disableGlobalFilter: false,
-      minWidth: 16,
-      maxWidth: 30,
+      width: 35,
+      minWidth: 0,
      id: 'btn-cancel',
      Cell: ({ row }) => {
        var cancel_query_url =
@ -332,8 +333,8 @@ export default function Dashboard({
      sortble: true,
      resizable: true,
      disableGlobalFilter: false,
-      minWidth: 16,
-      maxWidth: 30,
+      width: 35,
+      minWidth: 0,
      id: 'btn-edit',
      Cell: ({ row }) => {
        let canEditRow = true;
@ -844,10 +845,7 @@ export default function Dashboard({
      ) : sid && !props.serverConnected ? (
        <Box className={classes.dashboardPanel}>
          <div className={classes.emptyPanel}>
-            <div className={classes.panelIcon}>
-              <i className="fa fa-exclamation-circle"></i>
-              <span className={classes.panelMessage}>{gettext(msg)}</span>
-            </div>
+            <EmptyPanelMessage text={gettext(msg)}/>
          </div>
        </Box>
      ) : (
--- a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
+++ b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
@ -17,14 +17,16 @@ import getApiInstance from 'sources/api_instance';
 import { makeStyles } from '@material-ui/core/styles';
 import { getURL } from '../../../static/utils/utils';
 import Loader from 'sources/components/Loader';
+import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';

 const useStyles = makeStyles((theme) => ({
  emptyPanel: {
    minHeight: '100%',
    minWidth: '100%',
-    background: theme.palette.grey[400],
+    background: theme.otherVars.emptySpaceBg,
    overflow: 'auto',
-    padding: '7.5px',
+    padding: '8px',
+    display: 'flex',
  },
  panelIcon: {
    width: '80%',
@ -162,10 +164,7 @@ export default function Dependencies({ nodeData, item, node, ...props }) {
      ) : (
        <div className={classes.emptyPanel}>
          {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
-            <div className={classes.panelIcon}>
-              <i className="fa fa-exclamation-circle"></i>
-              <span className={classes.panelMessage}>{gettext(msg)}</span>
-            </div>
+            <EmptyPanelMessage text={gettext(msg)}/>
          }
        </div>
      )}
--- a/web/pgadmin/misc/dependents/static/js/Dependents.jsx
+++ b/web/pgadmin/misc/dependents/static/js/Dependents.jsx
@ -17,14 +17,16 @@ import getApiInstance from 'sources/api_instance';
 import { makeStyles } from '@material-ui/core/styles';
 import { getURL } from '../../../static/utils/utils';
 import Loader from 'sources/components/Loader';
+import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';

 const useStyles = makeStyles((theme) => ({
  emptyPanel: {
    minHeight: '100%',
    minWidth: '100%',
-    background: theme.palette.grey[400],
+    background: theme.otherVars.emptySpaceBg,
    overflow: 'auto',
-    padding: '7.5px',
+    padding: '8px',
+    display: 'flex',
  },
  panelIcon: {
    width: '80%',
@ -163,10 +165,7 @@ export default function Dependents({ nodeData, item, node, ...props }) {
      ) : (
        <div className={classes.emptyPanel}>
          {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
-            <div className={classes.panelIcon}>
-              <i className="fa fa-exclamation-circle"></i>
-              <span className={classes.panelMessage}>{gettext(msg)}</span>
-            </div>
+            <EmptyPanelMessage text={gettext(msg)}/>
          }
        </div>

--- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
+++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
@ -21,14 +21,16 @@ import PropTypes from 'prop-types';
 import { PgIconButton } from '../../static/js/components/Buttons';
 import DeleteIcon from '@material-ui/icons/Delete';
 import DeleteSweepIcon from '@material-ui/icons/DeleteSweep';
+import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage';

 const useStyles = makeStyles((theme) => ({
  emptyPanel: {
    minHeight: '100%',
    minWidth: '100%',
-    background: theme.palette.grey[400],
+    background: theme.otherVars.emptySpaceBg,
    overflow: 'auto',
-    padding: '7.5px',
+    padding: '8px',
+    display: 'flex',
  },
  panelIcon: {
    width: '80%',
@ -201,7 +203,7 @@ export function CollectionNodeView({
                sortble: true,
                resizable: false,
                disableGlobalFilter: false,
-                minWidth: 100,
+                minWidth: 0,
                // eslint-disable-next-line react/display-name
                Cell: ({ value }) => {
                  return (<Switch color="primary" checked={value} className={classes.readOnlySwitch} value={value} readOnly title={String(value)} />);
@ -214,7 +216,7 @@ export function CollectionNodeView({
                sortble: true,
                resizable: false,
                disableGlobalFilter: false,
-                minWidth: 100,
+                minWidth: 0,
              };
            }
            tableColumns.push(column);
@ -228,10 +230,9 @@ export function CollectionNodeView({
            sortble: true,
            resizable: false,
            disableGlobalFilter: false,
-            minWidth: 100,
+            minWidth: 0,
          };
          tableColumns.push(column);
-
        });
      }

@ -261,7 +262,6 @@ export function CollectionNodeView({
      <Box >
        <PgIconButton
          className={classes.dropButton}
-
          icon={<DeleteIcon/>}
          aria-label="Delete/Drop"
          title={gettext('Delete/Drop')}
@ -310,12 +310,8 @@ export function CollectionNodeView({
          :
          (
            <div className={classes.emptyPanel}>
-              <div className={classes.panelIcon}>
-                <i className="fa fa-exclamation-circle"></i>
-                <span className={classes.panelMessage}>{gettext(infoMsg)}</span>
-              </div>
+              <EmptyPanelMessage text={gettext(infoMsg)}/>
            </div>
-
          )
        }
      </Box>
--- a/web/pgadmin/misc/statistics/static/js/Statistics.jsx
+++ b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
@ -18,13 +18,15 @@ import { makeStyles } from '@material-ui/core/styles';
 import sizePrettify from 'sources/size_prettify';
 import { getURL } from '../../../static/utils/utils';
 import Loader from 'sources/components/Loader';
+import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
 const useStyles = makeStyles((theme) => ({
  emptyPanel: {
    minHeight: '100%',
    minWidth: '100%',
-    background: theme.palette.grey[400],
+    background: theme.otherVars.emptySpaceBg,
    overflow: 'auto',
-    padding: '7.5px',
+    padding: '8px',
+    display: 'flex',
  },
  panelIcon: {
    width: '80%',
@ -239,10 +241,7 @@ export default function Statistics({ nodeData, item, node, ...props }) {
      ) : (
        <div className={classes.emptyPanel}>
          {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
-            <div className={classes.panelIcon}>
-              <i className="fa fa-exclamation-circle"></i>
-              <span className={classes.panelMessage}>{gettext(msg)}</span>
-            </div>
+            <EmptyPanelMessage text={gettext(msg)}/>
          }
        </div>
      )}
--- a/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
+++ b/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
@ -0,0 +1,27 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
+import { makeStyles } from '@material-ui/styles';
+import PropTypes from 'prop-types';
+
+const useStyles = makeStyles((theme)=>({
+  root: {
+    color: theme.palette.text.primary,
+    margin: 'auto',
+    marginTop: '24px',
+    fontSize: '0.9em',
+  },
+}));
+
+export default function EmptyPanelMessage({text}) {
+  const classes = useStyles();
+  return (
+    <Box className={classes.root}>
+      <InfoRoundedIcon />
+      <span marginLeft='4px'>{text}</span>
+    </Box>
+  );
+}
+EmptyPanelMessage.propTypes = {
+  text: PropTypes.string,
+};
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@ -27,6 +27,7 @@ import { InputText } from './FormComponents';
 import _ from 'lodash';
 import gettext from 'sources/gettext';
 import SchemaView from '../SchemaView';
+import EmptyPanelMessage from './EmptyPanelMessage';

 /* eslint-disable react/display-name */
 const useStyles = makeStyles((theme) => ({
@ -162,9 +163,9 @@ const useStyles = makeStyles((theme) => ({
  emptyPanel: {
    minHeight: '100%',
    minWidth: '100%',
-    background: theme.palette.background.default,
    overflow: 'auto',
-    padding: '7.5px',
+    padding: '8px',
+    display: 'flex',
  },
  caveTable: {
    margin: '8px',
@ -251,7 +252,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..

  const defaultColumn = React.useMemo(
    () => ({
-      minWidth: 150,
+      minWidth: 50,
    }),
    []
  );
@ -266,6 +267,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
    state: { selectedRowIds },
    setGlobalFilter,
    setHiddenColumns,
+    totalColumnsWidth
  } = useTable(
    {
      columns,
@ -328,8 +330,8 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
                </div>
              ),
              sortble: false,
-              width: 30,
-              maxWidth: 30,
+              width: 35,
+              maxWidth: 35,
              minWidth: 0
            },
            ...CLOUMNS,
@ -466,7 +468,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
        />
      </Box>
      <div className={classes.tableContainer}>
-        <div {...getTableProps()} className={clsx(classes.table, caveTable ? classes.caveTable : '')}>
+        <div {...getTableProps({style:{minWidth: totalColumnsWidth}})} className={clsx(classes.table, caveTable ? classes.caveTable : '')}>
          <div>
            {headerGroups.map((headerGroup) => (
              <div key={''} {...headerGroup.getHeaderGroupProps()}>
@ -519,12 +521,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
                </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>
+              <EmptyPanelMessage text={gettext('No record found')}/>
            )
          }
        </div>