Skip to content

Commit aab63a5

Browse files
author
Rohit Bhati
committed
Update button lables, color and standardize confirmation messages for delete/disconnect.#6513
1 parent 8876c42 commit aab63a5

File tree

13 files changed

+102
-34
lines changed

13 files changed

+102
-34
lines changed

‎web/pgadmin/browser/server_groups/servers/databases/static/js/database.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ define('pgadmin.node.database', [
257257
t = pgBrowser.tree;
258258

259259
if (children) {
260-
pgAdmin.Browser.notifier.confirm(
260+
pgAdmin.Browser.notifier.confirmDelete(
261261
gettext('Disconnect from all databases'),
262262
gettext('Are you sure you want to disconnect from all databases?'),
263263
function() {
@@ -270,6 +270,8 @@ define('pgadmin.node.database', [
270270
t.deselect(item);
271271
},
272272
function() { return true;},
273+
gettext('Disconnect'),
274+
gettext('Cancel')
273275
);
274276
}
275277

@@ -555,13 +557,15 @@ define('pgadmin.node.database', [
555557
});
556558
};
557559
if (notify) {
558-
pgAdmin.Browser.notifier.confirm(
560+
pgAdmin.Browser.notifier.confirmDelete(
559561
gettext('Disconnect from database'),
560-
gettext('Are you sure you want to disconnect from database - %s?', d.label),
562+
gettext('Are you sure you want to disconnect from the database - <b>%s</b>?', d.label),
561563
function() {
562564
disconnect();
563565
},
564-
function() { return true; }
566+
function() { return true; },
567+
gettext('Disconnect'),
568+
gettext('Cancel')
565569
);
566570
} else {
567571
disconnect();

‎web/pgadmin/browser/server_groups/servers/static/js/server.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ define('pgadmin.node.server', [
243243
obj = this,
244244
t = pgBrowser.tree;
245245
if (children) {
246-
pgAdmin.Browser.notifier.confirm(
246+
pgAdmin.Browser.notifier.confirmDelete(
247247
gettext('Disconnect from all servers'),
248248
gettext('Are you sure you want to disconnect from all servers?'),
249249
function() {
@@ -259,6 +259,8 @@ define('pgadmin.node.server', [
259259
}, 100);
260260
},
261261
function() { return true;},
262+
gettext('Disconnect'),
263+
gettext('Cancel'),
262264
);
263265
}
264266
return false;
@@ -860,11 +862,13 @@ define('pgadmin.node.server', [
860862
};
861863

862864
if (notify) {
863-
pgAdmin.Browser.notifier.confirm(
865+
pgAdmin.Browser.notifier.confirmDelete(
864866
gettext('Disconnect from server'),
865-
gettext('Are you sure you want to disconnect from the server %s?', label),
867+
gettext('Are you sure you want to disconnect from the server <b>%s</b>?', label),
866868
function() { disconnect(); },
867869
function() { return true;},
870+
gettext('Disconnect'),
871+
gettext('Cancel')
868872
);
869873
} else {
870874
disconnect();

‎web/pgadmin/browser/static/js/node.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -525,7 +525,7 @@ define('pgadmin.browser.node', [
525525
title = gettext('Delete FORCE %s?', obj.label);
526526

527527
} else if (input.url == 'delete') {
528-
msg = gettext('Are you sure you want to delete %s <b>"%s"</b> and all the objects that depend on it?',
528+
msg = gettext('Are you sure you want to delete the %s <b>"%s"</b> and all the objects that depend on it?',
529529
obj.label.toLowerCase(), d.label);
530530
title = gettext('Delete CASCADE %s?', obj.label);
531531

@@ -539,10 +539,10 @@ define('pgadmin.browser.node', [
539539
}
540540
} else {
541541
if (obj.dropAsRemove) {
542-
msg = gettext('Are you sure you want to remove %s "%s"?', obj.label.toLowerCase(), d.label);
542+
msg = gettext('Are you sure you want to remove the %s <b>"%s"</b>?', obj.label.toLowerCase(), d.label);
543543
title = gettext('Remove %s?', obj.label);
544544
} else {
545-
msg = gettext('Are you sure you want to delete %s <b>"%s"</b>?', obj.label.toLowerCase(), d.label);
545+
msg = gettext('Are you sure you want to delete the %s <b>"%s"</b>?', obj.label.toLowerCase(), d.label);
546546
title = gettext('Delete %s?', obj.label);
547547
}
548548

@@ -555,7 +555,7 @@ define('pgadmin.browser.node', [
555555
return;
556556
}
557557
}
558-
pgAdmin.Browser.notifier.confirm(title, msg,
558+
pgAdmin.Browser.notifier.confirmDelete(title, msg,
559559
function() {
560560
getApiInstance().delete(
561561
obj.generate_url(i, input.url, d, true),
@@ -592,7 +592,11 @@ define('pgadmin.browser.node', [
592592
}
593593
pgAdmin.Browser.notifier.alert(gettext('Error dropping/removing %s: "%s"', obj.label, objName), errmsg);
594594
});
595-
}
595+
},
596+
() => {},
597+
gettext('Delete'),
598+
gettext('Cancel'),
599+
gettext('error')
596600
);
597601
},
598602
// Callback for creating script(s) & opening them in Query editor

‎web/pgadmin/misc/properties/CollectionNodeProperties.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export default function CollectionNodeProperties({
197197
};
198198

199199
if (confirm) {
200-
pgAdmin.Browser.notifier.confirm(title, msg, dropNodeProperties, null);
200+
pgAdmin.Browser.notifier.confirmDelete(title, msg, dropNodeProperties, null, gettext('Delete'), gettext('Cancel'), gettext('error'));
201201
} else {
202202
dropNodeProperties();
203203
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ export default function(basicSettings) {
4444
light: '#1e1e1e',
4545
contrastText: '#fff',
4646
lighter: '#1e1e1e',
47+
hoverMain: darken('#da6758', 0.25),
48+
hoverBorderColor: darken('#da6758', 0.25),
4749
},
4850
warning: {
4951
main: '#eea236',

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ export default function(basicSettings) {
4242
main: '#EE7A55',
4343
light: '#010B15',
4444
contrastText: '#010B15',
45+
hoverMain: '#fff',
46+
hoverBorderColor: '#fff',
4547
},
4648
warning: {
4749
main: '#F4D35E',

‎web/pgadmin/static/js/Theme/light.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ export default function(basicSettings) {
4242
main: '#CC0000',
4343
light: '#FAECEC',
4444
contrastText: '#fff',
45+
hoverMain: darken('#CC0000', 0.25),
46+
hoverBorderColor: darken('#CC0000', 0.25),
4547
},
4648
warning: {
4749
main: '#eea236',

‎web/pgadmin/static/js/components/Buttons.jsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import ShortcutTitle from './ShortcutTitle';
1515
import { styled } from '@mui/material/styles';
1616

1717

18-
const StyledButton = styled(Button)(({theme}) => ({
18+
const StyledButton = styled(Button)(({theme, color}) => ({
1919
'&.Buttons-primaryButton': {
2020
border: '1px solid '+theme.palette.primary.main,
2121
'&.Mui-disabled': {
@@ -37,18 +37,19 @@ const StyledButton = styled(Button)(({theme}) => ({
3737
}
3838
},
3939
'&.Buttons-defaultButton': {
40-
backgroundColor: theme.palette.default.main,
41-
color: theme.palette.default.contrastText,
42-
border: '1px solid '+theme.palette.default.borderColor,
40+
// Use the color prop to determine the background color and text color.
41+
backgroundColor: theme.palette[color]?.main ?? theme.palette.default.main,
42+
border: '1px solid '+ theme.palette.default.borderColor,
43+
color: theme.palette[color]?.contrastText ?? theme.palette.default.contrastText,
4344
whiteSpace: 'nowrap',
4445
'&.Mui-disabled': {
4546
color: [theme.palette.default.disabledContrastText, '!important'],
4647
borderColor: theme.palette.default.disabledBorderColor
4748
},
4849
'&:hover': {
49-
backgroundColor: theme.palette.default.hoverMain,
50-
color: theme.palette.default.hoverContrastText,
51-
borderColor: theme.palette.default.hoverBorderColor,
50+
backgroundColor: theme.palette[color]?.hoverMain ?? theme.palette.default.hoverMain,
51+
color: theme.palette[color]?.contrastText ?? theme.palette.default.hoverContrastText,
52+
borderColor: theme.palette[color]?.hoverBorderColor ?? theme.palette.default.hoverBorderColor,
5253
},
5354
'&.Buttons-noBorder': {
5455
border: 0,
@@ -143,16 +144,19 @@ PrimaryButton.propTypes = {
143144

144145
/* pgAdmin default button */
145146
export const DefaultButton = forwardRef((props, ref)=>{
146-
let {children, className, size, noBorder, ...otherProps} = props;
147+
let {children, className, size, noBorder, color, ...otherProps} = props;
148+
let variant = 'outlined';
147149
let allClassName = ['Buttons-defaultButton', className];
148150
if(size == 'xs') {
149151
size = undefined;
150152
allClassName.push('Buttons-xsButton');
153+
} else if(color !== 'default'){
154+
variant='contained';
151155
}
152156
noBorder && allClassName.push('Buttons-noBorder');
153157
const dataLabel = typeof(children) == 'string' ? children : undefined;
154158
return (
155-
<StyledButton variant="outlined" ref={ref} size={size} className={allClassName.join(' ')} data-label={dataLabel} color="default" {...otherProps}>{children}</StyledButton>
159+
<StyledButton variant={variant} ref={ref} size={size} className={allClassName.join(' ')} data-label={dataLabel} {...otherProps} color={color ?? 'default'} >{children}</StyledButton>
156160
);
157161
});
158162
DefaultButton.displayName = 'DefaultButton';
@@ -161,6 +165,7 @@ DefaultButton.propTypes = {
161165
noBorder: PropTypes.bool,
162166
children: CustomPropTypes.children,
163167
className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
168+
color: PropTypes.string,
164169
};
165170

166171

‎web/pgadmin/static/js/helpers/ModalProvider.jsx‎

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ export function useModal() {
4444
function renderExtraButtons(button) {
4545
switch(button.type) {
4646
case 'primary':
47-
return <PrimaryButton className='Alert-margin' startIcon={button.icon} onClick={button.onclick}>{button.label}</PrimaryButton>;
47+
return <PrimaryButton className='Alert-margin' startIcon={button.icon} onClick={button.onClick}>{button.label}</PrimaryButton>;
4848
case 'default':
49-
return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onclick}>{button.label}</DefaultButton>;
49+
return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onClick} color={button?.color}>{button.label}</DefaultButton>;
5050
default:
51-
return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onclick}>{button.label}</DefaultButton>;
51+
return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onClick}>{button.label}</DefaultButton>;
5252
};
5353
}
5454

@@ -58,13 +58,13 @@ function AlertContent({ text, confirm, okLabel = gettext('OK'), cancelLabel = ge
5858
<Box flexGrow="1" p={2}>{typeof (text) == 'string' ? HTMLReactParser(text) : text}</Box>
5959
<Box className='Alert-footer'>
6060
{confirm &&
61-
<DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick} >{cancelLabel}</DefaultButton>
61+
<DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick} autoFocus={true}>{cancelLabel}</DefaultButton>
6262
}
6363
{
6464
extraButtons?.length ?
6565
extraButtons.map(button=>renderExtraButtons(button))
6666
:
67-
<PrimaryButton className='Alert-margin' startIcon={<CheckRoundedIcon />} onClick={onOkClick} autoFocus={true} >{okLabel}</PrimaryButton>
67+
<PrimaryButton className='Alert-margin' startIcon={<CheckRoundedIcon />} onClick={onOkClick}>{okLabel}</PrimaryButton>
6868
}
6969
</Box>
7070
</StyledBox>
@@ -100,13 +100,50 @@ function confirm(title, text, onOkClick, onCancelClick, okLabel = gettext('Yes')
100100
onCancelClick?.();
101101
closeModal();
102102
};
103+
103104
const onOkClickClose = () => {
104105
onOkClick?.();
105106
closeModal();
106107
};
107-
const extraButtons = extras?.(closeModal);
108+
109+
return (
110+
<AlertContent text={text} confirm onOkClick={onOkClickClose} onCancelClick={onCancelClickClose} okLabel={okLabel} cancelLabel={cancelLabel} extraButtons={extras?.(closeModal)} />
111+
);
112+
});
113+
}
114+
115+
function confirmDelete(title, text, onOkClick, onCancelClick, okLabel = gettext('Yes'), cancelLabel = gettext('No'), type = null){
116+
// bind the modal provider before calling
117+
this.showModal(title, (closeModal) => {
118+
const onCancelClickClose = () => {
119+
onCancelClick?.();
120+
closeModal();
121+
};
122+
123+
const onOkClickClose = () => {
124+
onOkClick?.();
125+
closeModal();
126+
};
127+
128+
// Define additional buttons to be displayed in the modal.
129+
let extraButtons = [];
130+
switch (type) {
131+
case 'error':
132+
extraButtons = [
133+
{
134+
type: 'default',
135+
icon: <CheckRoundedIcon />,
136+
label: okLabel,
137+
onClick: onOkClickClose,
138+
color: 'error',
139+
},
140+
];
141+
break;
142+
default:
143+
break;
144+
}
108145
return (
109-
<AlertContent text={text} confirm onOkClick={onOkClickClose} onCancelClick={onCancelClickClose} okLabel={okLabel} cancelLabel={cancelLabel} extraButtons={extraButtons} />
146+
<AlertContent text={text} confirm okLabel={okLabel} cancelLabel={cancelLabel} onOkClick={onOkClickClose} onCancelClick={onCancelClickClose} extraButtons={extraButtons} />
110147
);
111148
});
112149
}
@@ -143,7 +180,8 @@ export default function ModalProvider({ children }) {
143180
const modalContext = React.useMemo(() => ({
144181
...modalContextBase,
145182
confirm: confirm.bind(modalContextBase),
146-
alert: alert.bind(modalContextBase)
183+
alert: alert.bind(modalContextBase),
184+
confirmDelete : confirmDelete.bind(modalContextBase)
147185
}), []);
148186
return (
149187
<ModalContext.Provider value={modalContext}>

‎web/pgadmin/static/js/helpers/Notifier.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,10 @@ class Notifier {
181181
this.modal.confirm(title, text, onOkClick, onCancelClick, okLabel, cancelLabel, extras);
182182
}
183183

184+
confirmDelete(title, text, onOkClick, onCancelClick,okLabel = gettext('Yes'), cancelLabel = gettext('No'), type=null){
185+
this.modal.confirmDelete(title, text, onOkClick, onCancelClick, okLabel, cancelLabel, type);
186+
}
187+
184188
showModal(title, content, modalOptions) {
185189
this.modal.showModal(title, content, modalOptions);
186190
}

0 commit comments

Comments
 (0)