public inbox for [email protected]help / color / mirror / Atom feed
[pgAdmin][patch] Improvements in PgTable component 4+ messages / 2 participants [nested] [flat]
* [pgAdmin][patch] Improvements in PgTable component @ 2022-04-04 13:24 Aditya Toshniwal <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Aditya Toshniwal @ 2022-04-04 13:24 UTC (permalink / raw) To: pgadmin-hackers 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" Attachments: [application/octet-stream] pgtable.improve.patch (22.2K, 3-pgtable.improve.patch) download | inline diff: diff --git a/web/pgadmin/dashboard/static/js/ActiveQuery.ui.js b/web/pgadmin/dashboard/static/js/ActiveQuery.ui.js index a1450df7b..5cce03308 100644 --- a/web/pgadmin/dashboard/static/js/ActiveQuery.ui.js +++ b/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', diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx index 637f6cde4..779b406cc 100644 --- a/web/pgadmin/dashboard/static/js/Dashboard.jsx +++ b/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, - minWidth: '300px', - minHeight: '300px' + height: '100%', + minHeight: '400px' }, 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,31 +810,34 @@ export default function Dashboard({ > {gettext('Server activity')}{' '} </Box> - <Tabs - value={val} - onChange={tabChanged} - className={classes.searchInput} - > - {tab.map((tabValue, i) => { - return <Tab key={i} label={tabValue} />; - })} + <Box display="flex"> + <Tabs + value={val} + onChange={tabChanged} + className={classes.searchInput} + > + {tab.map((tabValue, i) => { + return <Tab key={i} label={tabValue} />; + })} + </Tabs> <RefreshButton/> - </Tabs> - - <PgTable - columns={ - val === 0 - ? activityColumns - : val === 1 - ? databaseLocksColumns - : val == 2 - ? databasePreparedColumns - : serverConfigColumns - } - data={dashData} - schema={schemaDict} - offset={145} - ></PgTable> + </Box> + <Box flexGrow={1}> + <PgTable + caveTable={false} + columns={ + val === 0 + ? activityColumns + : val === 1 + ? databaseLocksColumns + : val == 2 + ? databasePreparedColumns + : serverConfigColumns + } + data={dashData} + schema={schemaDict} + ></PgTable> + </Box> </Box> </Box> </Box> diff --git a/web/pgadmin/static/js/Theme/dark.js b/web/pgadmin/static/js/Theme/dark.js index cafaaae3e..8808262ac 100644 --- a/web/pgadmin/static/js/Theme/dark.js +++ b/web/pgadmin/static/js/Theme/dark.js @@ -94,6 +94,7 @@ export default function(basicSettings) { stepFg: '#000', toggleBtnBg: '#000', colorFg: '#FFFFFF', + emptySpaceBg: '#212121', } }); } diff --git a/web/pgadmin/static/js/Theme/high_contrast.js b/web/pgadmin/static/js/Theme/high_contrast.js index a9c172ac7..0fb330ae3 100644 --- a/web/pgadmin/static/js/Theme/high_contrast.js +++ b/web/pgadmin/static/js/Theme/high_contrast.js @@ -92,6 +92,7 @@ export default function(basicSettings) { stepFg: '#000', toggleBtnBg: '#6B6B6B', colorFg: '#FFFFFF', + emptySpaceBg: '#010B15', } }); } diff --git a/web/pgadmin/static/js/Theme/standard.js b/web/pgadmin/static/js/Theme/standard.js index 8cf463a71..b4e2b88b1 100644 --- a/web/pgadmin/static/js/Theme/standard.js +++ b/web/pgadmin/static/js/Theme/standard.js @@ -103,7 +103,7 @@ export default function(basicSettings) { toggleBtnBg: '#000', editorToolbarBg: '#ebeef3', datagridBg: '#fff', - + emptySpaceBg: '#ebeef3', } }); } diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx index 265d833f3..5626271a4 100644 --- a/web/pgadmin/static/js/components/PgTable.jsx +++ b/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', - marginRight: '15px', + flexGrow: 1, }, tableCell: { @@ -155,6 +166,9 @@ const useStyles = makeStyles((theme) => ({ overflow: 'auto', padding: '7.5px', }, + caveTable: { + margin: '8px', + }, panelIcon: { width: '80%', margin: '0 auto', @@ -177,30 +191,63 @@ const useStyles = makeStyles((theme) => ({ }, })); -export default function PgTable({ columns, data, isSelectRow, offset=105, ...props }) { +const IndeterminateCheckbox = React.forwardRef( + ({ indeterminate, ...rest }, ref) => { + const defaultRef = React.useRef(); + const resolvedRef = ref || defaultRef; + + React.useEffect(() => { + resolvedRef.current.indeterminate = indeterminate; + }, [resolvedRef, indeterminate]); + return ( + <> + <Checkbox + color="primary" + ref={resolvedRef} {...rest} + /> + </> + ); + }, +); + +IndeterminateCheckbox.displayName = 'SelectCheckbox'; + +IndeterminateCheckbox.propTypes = { + indeterminate: PropTypes.bool, + rest: PropTypes.func, + getToggleAllRowsSelectedProps: PropTypes.func, + 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({}); - const rowRef = React.useRef({}); // Reset Search vakue in tab changed. React.useEffect(()=>{ setSearchVal(''); - },[columns]); - function getRowHeight(index, size) { - return rowHeights.current[index] + size || 35; + rowHeights.current = {}; + tableRef.current?.resetAfterIndex(0); + }, [columns]); + + function getRowHeight(index) { + return rowHeights.current[index] || ROW_HEIGHT; } - const setRowHeight = React.useCallback((index, size) => { + const setRowHeight = (index, size) => { if(tableRef.current) { - tableRef.current.resetAfterIndex(index); - if (!(rowHeights.current.hasOwnProperty(index))){ - rowHeights.current = { ...rowHeights.current, [index]: size }; + if(size == ROW_HEIGHT) { + delete rowHeights.current[index]; + } else { + rowHeights.current[index] = size; } + tableRef.current.resetAfterIndex(index); } - }, []); + }; const defaultColumn = React.useMemo( () => ({ @@ -209,34 +256,6 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro [] ); - const IndeterminateCheckbox = React.forwardRef( - ({ indeterminate, ...rest }, ref) => { - const defaultRef = React.useRef(); - const resolvedRef = ref || defaultRef; - - React.useEffect(() => { - resolvedRef.current.indeterminate = indeterminate; - }, [resolvedRef, indeterminate]); - return ( - <> - <Checkbox - color="primary" - ref={resolvedRef} {...rest} - /> - </> - ); - }, - ); - - IndeterminateCheckbox.displayName = 'SelectCheckbox'; - - IndeterminateCheckbox.propTypes = { - indeterminate: PropTypes.bool, - rest: PropTypes.func, - getToggleAllRowsSelectedProps: PropTypes.func, - row: PropTypes.object, - }; - 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,45 +379,72 @@ 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 {...row.getRowProps()} className={classes.tr}> - {row.cells.map((cell) => { - let classNames = [classes.tableCell]; - if(typeof(cell.column.id) == 'string' && cell.column.id.startsWith('btn-')) { - classNames.push(classes.btnCell); - } - if(cell.column.id == 'btn-edit' && row.isExpanded) { - classNames.push(classes.expandedIconCell); - } - if (row.original.row_type === 'warning'){ - classNames.push(classes.warning); - } - if (row.original.row_type === 'alert'){ - classNames.push(classes.alert); - } - return ( - <div key={cell.column.id} {...cell.getCellProps()} className={clsx(classNames, row.original.icon && row.original.icon[cell.column.id], row.original.icon[cell.column.id] && classes.cellIcon)} - title={_.isUndefined(cell.value) || _.isNull(cell.value) ? '': String(cell.value)}> - {cell.render('Cell')} - </div> - ); - })} + <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]; + if(typeof(cell.column.id) == 'string' && cell.column.id.startsWith('btn-')) { + classNames.push(classes.btnCell); + } + if(cell.column.id == 'btn-edit' && row.isExpanded) { + classNames.push(classes.expandedIconCell); + } + if (row.original.row_type === 'warning'){ + classNames.push(classes.warning); + } + if (row.original.row_type === 'alert'){ + classNames.push(classes.alert); + } + return ( + <div key={cell.column.id} {...cell.getCellProps()} className={clsx(classNames, row.original.icon && row.original.icon[cell.column.id], row.original.icon[cell.column.id] && classes.cellIcon)} + title={_.isUndefined(cell.value) || _.isNull(cell.value) ? '': String(cell.value)}> + {cell.render('Cell')} + </div> + ); + })} + </div> + {!_.isUndefined(row) && row.isExpanded && ( + <Box key={row.id} className={classes.expandedForm}> + <SchemaView + getInitData={()=>Promise.resolve({})} + viewHelperProps={{ mode: 'properties' }} + schema={props.schema[row.id]} + showFooter={false} + onDataChange={()=>{setExpandComplete(true);}} + /> + </Box> + )} </div> - {!_.isUndefined(row) && row.isExpanded && ( - <Box key={row.id} className={classes.expandedForm} ref={rowRef} style={{height: rowHeights.current[index]}}> - <FormView - getInitData={() => { - /*This is intentional (SonarQube)*/ - }} - viewHelperProps={{ mode: 'properties' }} - schema={props.schema[row.id]} - showFooter={false} - onDataChange={() => { }} - /> - </Box> - )} </div> ); }, @@ -424,80 +465,70 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro }} /> </Box> - <AutoSizer - className={props.type === 'panel' ? props.className : classes.autoResizer} - > - {({ height }) => ( - <div {...getTableProps()} className={classes.table}> - <div> - {headerGroups.map((headerGroup) => ( - <div key={''} {...headerGroup.getHeaderGroupProps()}> - {headerGroup.headers.map((column) => ( + <div className={classes.tableContainer}> + <div {...getTableProps()} className={clsx(classes.table, caveTable ? classes.caveTable : '')}> + <div> + {headerGroups.map((headerGroup) => ( + <div key={''} {...headerGroup.getHeaderGroupProps()}> + {headerGroup.headers.map((column) => ( + <div + key={column.id} + {...column.getHeaderProps()} + className={clsx(classes.tableCellHeader, column.className)} + > <div - key={column.id} - {...column.getHeaderProps()} - className={clsx(classes.tableCellHeader, column.className)} + {...(column.sortble ? column.getSortByToggleProps() : {})} > - <div - {...(column.sortble ? column.getSortByToggleProps() : {})} - > - {column.render('Header')} - <span> - {column.isSorted - ? column.isSortedDesc - ? ' 🔽' - : ' 🔼' - : ''} - </span> - {column.resizable && ( - <div - {...column.getResizerProps()} - className={classes.resizer} - /> - )} - </div> + {column.render('Header')} + <span> + {column.isSorted + ? column.isSortedDesc + ? ' 🔽' + : ' 🔼' + : ''} + </span> + {column.resizable && ( + <div + {...column.getResizerProps()} + className={classes.resizer} + /> + )} </div> - ))} - </div> - ))} - </div> - - { - data.length > 0 ? ( - <div {...getTableBodyProps()} > - <VariableSizeList - ref={tableRef} - className={props.type === 'dashboard' ? props.fixedSizeList : classes.fixedSizeList} - height={height - offset} - itemCount={rows.length} - itemSize={(i) => { - 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> - </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> + { + data.length > 0 ? ( + <div {...getTableBodyProps()} className={classes.autoResizerContainer}> + <AutoSizer + className={classes.autoResizer} + > + {({ height }) => ( + <VariableSizeList + ref={tableRef} + className={classes.fixedSizeList} + height={height} + itemCount={rows.length} + itemSize={getRowHeight} + sorted={props?.sortOptions} + > + {RenderRow} + </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> </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), diff --git a/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx b/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx index 015c3939d..2bf300b9c 100644 --- a/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx +++ b/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} ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin][patch] Improvements in PgTable component @ 2022-04-04 13:37 Akshay Joshi <[email protected]> parent: Aditya Toshniwal <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Akshay Joshi @ 2022-04-04 13:37 UTC (permalink / raw) To: Aditya Toshniwal <[email protected]>; +Cc: pgadmin-hackers 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* ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin][patch] Improvements in PgTable component @ 2022-04-05 06:23 Aditya Toshniwal <[email protected]> parent: Akshay Joshi <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Aditya Toshniwal @ 2022-04-05 06:23 UTC (permalink / raw) To: Akshay Joshi <[email protected]>; +Cc: pgadmin-hackers 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> ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin][patch] Improvements in PgTable component @ 2022-04-05 06:52 Akshay Joshi <[email protected]> parent: Aditya Toshniwal <[email protected]> 0 siblings, 0 replies; 4+ messages in thread From: Akshay Joshi @ 2022-04-05 06:52 UTC (permalink / raw) To: Aditya Toshniwal <[email protected]>; +Cc: pgadmin-hackers Thanks, the patch applied. On Tue, Apr 5, 2022 at 11:54 AM Aditya Toshniwal < [email protected]> wrote: > 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" > -- *Thanks & Regards* *Akshay Joshi* *pgAdmin Hacker | Principal Software Architect* *EDB Postgres <http://edbpostgres.com>* *Mobile: +91 976-788-8246* ^ permalink raw reply [nested|flat] 4+ messages in thread
end of thread, other threads:[~2022-04-05 06:52 UTC | newest] Thread overview: 4+ messages (download: mbox mbox.gz follow: Atom feed) -- links below jump to the message on this page -- 2022-04-04 13:24 [pgAdmin][patch] Improvements in PgTable component Aditya Toshniwal <[email protected]> 2022-04-04 13:37 ` Akshay Joshi <[email protected]> 2022-04-05 06:23 ` Aditya Toshniwal <[email protected]> 2022-04-05 06:52 ` Akshay Joshi <[email protected]>
This inbox is served by agora; see mirroring instructions for how to clone and mirror all data and code used for this inbox