Skip to content

Commit

Permalink
More fixes for UI issues found when testing wcDocker changes. pgadmin…
Browse files Browse the repository at this point in the history
  • Loading branch information
adityatoshniwal committed Nov 14, 2023
1 parent e5cba59 commit 75a2d88
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 36 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -677,7 +677,7 @@ define('pgadmin.node.server', [
);
// Generate the event that database is connected
pgBrowser.Events.trigger(
'pgadmin:database:connected', _data._id, _data.db, _item, _data
'pgadmin:database:connected', _item, _data
);

// Load dashboard
Expand Down
2 changes: 1 addition & 1 deletion web/pgadmin/misc/statistics/static/js/Statistics.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ function getColumn(data, singleLineStatistics, prettifyFields=[]) {
{
Header: 'Value',
accessor: 'value',
sortable: true,
sortable: false,
resizable: true,
disableGlobalFilter: false,
},
Expand Down
5 changes: 4 additions & 1 deletion web/pgadmin/static/js/SchemaView/FormView.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ const useStyles = makeStyles((theme)=>({
nonTabPanel: {
padding: 0,
background: 'inherit',
},
nonTabPanelContent: {
height: 'unset'
}
}));

Expand Down Expand Up @@ -454,7 +457,7 @@ export default function FormView({
</Box>
</>);
} else {
let contentClassName = [stateUtils.formErr.message ? classes.errorMargin : null];
let contentClassName = [classes.nonTabPanelContent, stateUtils.formErr.message ? classes.errorMargin : null];
return (
<>
<Box height="100%" display="flex" flexDirection="column" className={clsx(className)} ref={formRef} data-test="form-view">
Expand Down
7 changes: 5 additions & 2 deletions web/pgadmin/static/js/components/FormComponents.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,7 @@ FormInputSwitch.propTypes = {
controlGridBasis: PropTypes.number,
};

export function InputCheckbox({ cid, helpid, value, onChange, controlProps, readonly, ...props }) {
export function InputCheckbox({ cid, helpid, value, onChange, controlProps, readonly, labelPlacement, ...props }) {
controlProps = controlProps || {};
return (
<FormControlLabel
Expand All @@ -569,6 +569,7 @@ export function InputCheckbox({ cid, helpid, value, onChange, controlProps, read
{...props} />
}
label={controlProps.label}
labelPlacement={labelPlacement}
/>
);
}
Expand All @@ -579,6 +580,7 @@ InputCheckbox.propTypes = {
controlProps: PropTypes.object,
onChange: PropTypes.func,
readonly: PropTypes.bool,
labelPlacement: PropTypes.string
};

export function FormInputCheckbox({ hasError, required, label,
Expand All @@ -599,7 +601,7 @@ FormInputCheckbox.propTypes = {
testcid: PropTypes.string,
};

export function InputRadio({ helpid, value, onChange, controlProps, readonly, ...props }) {
export function InputRadio({ helpid, value, onChange, controlProps, readonly, labelPlacement, ...props }) {
const classes = useStyles();
controlProps = controlProps || {};
return (
Expand All @@ -622,6 +624,7 @@ export function InputRadio({ helpid, value, onChange, controlProps, readonly, ..

}
label={controlProps.label}
labelPlacement={labelPlacement}
className={(readonly || props.disabled) ? classes.readOnlySwitch : null}
/>
);
Expand Down
3 changes: 3 additions & 0 deletions web/pgadmin/static/js/components/TabPanel.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ export const tabPanelStyles = makeStyles((theme)=>({
root: {
...theme.mixins.tabPanel,
},
content: {
height: '100%',
}
}));

/* Material UI does not have any tabpanel component, we create one for us */
Expand Down
60 changes: 32 additions & 28 deletions web/pgadmin/static/js/helpers/Layout/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,14 @@ import { showRenameTab } from '../../Dialogs';
import usePreferences from '../../../../preferences/static/js/store';
import _ from 'lodash';

function TabTitle({id, icon, title, closable, tooltip}) {
function TabTitle({id, closable, defaultInternal}) {
const layoutDocker = React.useContext(LayoutDockerContext);
const internal = layoutDocker?.find(id)?.internal ?? defaultInternal;
const [attrs, setAttrs] = useState({
icon: icon,
title: title,
tooltip: tooltip??title,
icon: internal.icon,
title: internal.title,
tooltip: internal.tooltip ?? internal.title,
});
const layoutDocker = React.useContext(LayoutDockerContext);
const onContextMenu = useCallback((e)=>{
const g = layoutDocker.find(id)?.group??'';
if((layoutDocker.noContextGroups??[]).includes(g)) return;
Expand All @@ -32,17 +33,21 @@ function TabTitle({id, icon, title, closable, tooltip}) {
}, []);

useEffect(()=>{
const deregister = layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.REFRESH_TITLE, _.debounce((panelId)=>{
if(panelId == id) {
const p = layoutDocker.find(id)?.internal??{};
setAttrs({
icon: p.icon,
title: p.title,
tooltip: p.tooltip??p.title
});
}
}, 100));
return deregister;
let deregister;
if(internal.renamable) {
deregister = layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.REFRESH_TITLE, _.debounce((panelId)=>{
if(panelId == id) {
const internal = layoutDocker?.find(id)?.internal??{};
setAttrs({
icon: internal.icon,
title: internal.title,
tooltip: internal.tooltip ?? internal.title,
});
}
}, 100));
}

return ()=>deregister?.();
}, []);

return (
Expand All @@ -58,10 +63,8 @@ function TabTitle({id, icon, title, closable, tooltip}) {

TabTitle.propTypes = {
id: PropTypes.string,
icon: PropTypes.string,
title: PropTypes.string,
closable: PropTypes.bool,
tooltip: PropTypes.string
defaultInternal: PropTypes.object
};

export class LayoutDocker {
Expand Down Expand Up @@ -259,21 +262,22 @@ export class LayoutDocker {
}

static getPanel({icon, title, closable, tooltip, renamable, manualClose, ...attrs}) {
const internal = {
icon: icon,
title: title,
tooltip: tooltip,
closable: _.isUndefined(closable) ? manualClose : closable,
renamable: renamable,
manualClose: manualClose,
};
return {
cached: true,
group: 'default',
minWidth: 200,
...attrs,
closable: false,
title: <TabTitle id={attrs.id} icon={icon} title={title} closable={attrs.group!='dialogs' && closable} tooltip={tooltip} />,
internal: {
icon: icon,
title: title,
tooltip: tooltip,
closable: _.isUndefined(closable) ? manualClose : closable,
renamable: renamable,
manualClose: manualClose,
}
title: <TabTitle id={attrs.id} closable={attrs.group!='dialogs' && closable} defaultInternal={internal}/>,
internal: internal
};
}

Expand Down
12 changes: 9 additions & 3 deletions web/pgadmin/static/js/helpers/withStandardTabInfo.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,14 @@ export default function withStandardTabInfo(Component, tabId) {
}
}, 100);

let deregisterTree = pgAdmin.Browser.Events.on('pgadmin-browser:node:selected', (item, data)=>{
const onUpdate = (item, data)=>{
setNodeInfo([true, item, data]);
});
let deregisterTreeUpdate = pgAdmin.Browser.Events.on('pgadmin-browser:tree:updated', (item, data)=>{
};

let deregisterTree = pgAdmin.Browser.Events.on('pgadmin-browser:node:selected', onUpdate);
let deregisterTreeUpdate = pgAdmin.Browser.Events.on('pgadmin-browser:tree:updated', onUpdate);
let deregisterDbConnected = pgAdmin.Browser.Events.on('pgadmin:database:connected', onUpdate);
let deregisterServerConnected = pgAdmin.Browser.Events.on('pgadmin:server:connected', (_sid, item, data)=>{
setNodeInfo([true, item, data]);
});
let deregisterActive = layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.ACTIVE, onTabActive);
Expand All @@ -51,6 +55,8 @@ export default function withStandardTabInfo(Component, tabId) {
onTabActive?.cancel();
deregisterTree();
deregisterTreeUpdate();
deregisterDbConnected();
deregisterServerConnected();
deregisterActive();
deregisterChange();
};
Expand Down

0 comments on commit 75a2d88

Please sign in to comment.