public inbox for [email protected]
help / color / mirror / Atom feedFrom: Aditya Toshniwal <[email protected]>
To: Akshay Joshi <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin][patch] Improvements in PgTable component
Date: Tue, 5 Apr 2022 11:53:51 +0530
Message-ID: <CAM9w-_kVPphtDzzh2hD8Ei_0MnfMcP0kivkyBnPMAKP7xeEbyQ@mail.gmail.com> (raw)
In-Reply-To: <CANxoLDfdyMvLw+x-SnE8bTCF-VkapU758obXTe5g5gXpm_bN9w@mail.gmail.com>
References: <CAM9w-_=_p-z6qzQa2Cr0eR-f+4b==-NO4R-TDu2y_r68ae+X4A@mail.gmail.com>
<CANxoLDfdyMvLw+x-SnE8bTCF-VkapU758obXTe5g5gXpm_bN9w@mail.gmail.com>
Hi Hackers,
Attached patch fixes more issues and improvements for the PgTable component.
Please review.
On Mon, Apr 4, 2022 at 7:08 PM Akshay Joshi <[email protected]>
wrote:
> Thanks, the patch applied.
>
> On Mon, Apr 4, 2022 at 6:55 PM Aditya Toshniwal <
> [email protected]> wrote:
>
>> Hi Hackers,
>>
>> Attached patch makes some necessary cleanup/restructuring in PgTable
>> component.
>> Please review.
>>
>> --
>> Thanks,
>> Aditya Toshniwal
>> pgAdmin Hacker | Software Architect | *edbpostgres.com*
>> <http://edbpostgres.com;
>> "Don't Complain about Heat, Plant a TREE"
>>
>
>
> --
> *Thanks & Regards*
> *Akshay Joshi*
> *pgAdmin Hacker | Principal Software Architect*
> *EDB Postgres <http://edbpostgres.com>*
>
> *Mobile: +91 976-788-8246*
>
--
Thanks,
Aditya Toshniwal
pgAdmin Hacker | Software Architect | *edbpostgres.com*
<http://edbpostgres.com;
"Don't Complain about Heat, Plant a TREE"
Attachments:
[application/octet-stream] pgtable.improve_part2.patch (12.6K, 3-pgtable.improve_part2.patch)
download | inline diff:
diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx
index 779b406cc..d2340f63a 100644
--- 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>
) : (
diff --git a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
index b2aec80a7..1fe327036 100644
--- 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>
)}
diff --git a/web/pgadmin/misc/dependents/static/js/Dependents.jsx b/web/pgadmin/misc/dependents/static/js/Dependents.jsx
index 6b66e1c50..293da8041 100644
--- 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>
diff --git a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
index fb16de07d..1b8f56730 100644
--- 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>
diff --git a/web/pgadmin/misc/statistics/static/js/Statistics.jsx b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
index 7b5233818..50fa4965a 100644
--- 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>
)}
diff --git a/web/pgadmin/static/js/components/EmptyPanelMessage.jsx b/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
new file mode 100644
index 000000000..8b96374f5
--- /dev/null
+++ 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,
+};
diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx
index 5626271a4..5ea0c0c7e 100644
--- 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>
view thread (4+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected]
Subject: Re: [pgAdmin][patch] Improvements in PgTable component
In-Reply-To: <CAM9w-_kVPphtDzzh2hD8Ei_0MnfMcP0kivkyBnPMAKP7xeEbyQ@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox