Skip to content

Commit 18c0710

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

File tree

11 files changed

+69
-23
lines changed

11 files changed

+69
-23
lines changed

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -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

@@ -557,11 +559,13 @@ define('pgadmin.node.database', [
557559
if (notify) {
558560
pgAdmin.Browser.notifier.confirm(
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: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -862,9 +862,11 @@ define('pgadmin.node.server', [
862862
if (notify) {
863863
pgAdmin.Browser.notifier.confirm(
864864
gettext('Disconnect from server'),
865-
gettext('Are you sure you want to disconnect from the server %s?', label),
865+
gettext('Are you sure you want to disconnect from the server <b>%s</b>?', label),
866866
function() { disconnect(); },
867867
function() { return true;},
868+
gettext('Disconnect'),
869+
gettext('Cancel')
868870
);
869871
} else {
870872
disconnect();

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

Lines changed: 9 additions & 4 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

@@ -592,7 +592,12 @@ define('pgadmin.browser.node', [
592592
}
593593
pgAdmin.Browser.notifier.alert(gettext('Error dropping/removing %s: "%s"', obj.label, objName), errmsg);
594594
});
595-
}
595+
},
596+
function() { return true;},
597+
gettext('Delete'),
598+
gettext('Cancel'),
599+
null,
600+
'error'
596601
);
597602
},
598603
// 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.confirm(title, msg, dropNodeProperties, null, gettext('Delete'), gettext('Cancel'), null, '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){
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} >{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: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function renderExtraButtons(button) {
4646
case 'primary':
4747
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 ?? 'default'}>{button.label}</DefaultButton>;
5050
default:
5151
return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onclick}>{button.label}</DefaultButton>;
5252
};
@@ -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>
@@ -104,7 +104,9 @@ function confirm(title, text, onOkClick, onCancelClick, okLabel = gettext('Yes')
104104
onOkClick?.();
105105
closeModal();
106106
};
107-
const extraButtons = extras?.(closeModal);
107+
108+
const extraButtons = Array.isArray(extras) ? extras : extras?.(closeModal);
109+
108110
return (
109111
<AlertContent text={text} confirm onOkClick={onOkClickClose} onCancelClick={onCancelClickClose} okLabel={okLabel} cancelLabel={cancelLabel} extraButtons={extraButtons} />
110112
);

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,27 @@ class Notifier {
175175
this.modal.alert(title, text, onOkClick, okLabel);
176176
}
177177

178-
confirm(title, text, onOkClick, onCancelClick, okLabel=gettext('Yes'), cancelLabel=gettext('No'), extras=null) {
178+
confirm(title, text, onOkClick, onCancelClick, okLabel=gettext('Yes'), cancelLabel=gettext('No'), extras=null, type=null) {
179179
/* Use this if you want to use pgAdmin global notifier.
180180
Or else, if you want to use modal inside iframe only then use ModalProvider eg- query tool */
181+
switch (type) {
182+
case 'error':
183+
extras = [
184+
{
185+
type: 'default',
186+
icon: <CheckRoundedIcon />,
187+
label: okLabel,
188+
onclick: () => {
189+
onOkClick?.();
190+
},
191+
color: type
192+
}
193+
];
194+
break;
195+
default:
196+
extras = null;
197+
}
198+
181199
this.modal.confirm(title, text, onOkClick, onCancelClick, okLabel, cancelLabel, extras);
182200
}
183201

0 commit comments

Comments
 (0)