Skip to content

Commit 4b26b03

Browse files
RohitBhati8269RohitBhati8269
committed
Fix button focus issue. #6513 
1 parent 9cd8492 commit 4b26b03

File tree

7 files changed

+87
-79
lines changed

7 files changed

+87
-79
lines changed

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@
66
// This software is released under the PostgreSQL Licence
77
//
88
//////////////////////////////////////////////////////////////
9-
9+
import React from 'react';
1010
import { getNodeAjaxOptions, getNodeListByName } from '../../../../../static/js/node_ajax';
1111
import { getNodePrivilegeRoleSchema } from '../../../static/js/privilege.ui';
1212
import { getNodeVariableSchema } from '../../../static/js/variable.ui';
1313
import DatabaseSchema from './database.ui';
1414
import { showServerPassword } from '../../../../../../static/js/Dialogs/index';
1515
import _ from 'lodash';
1616
import getApiInstance, { parseApiError } from '../../../../../../static/js/api_instance';
17+
import { DisonnectedIcon } from '../../../../../../static/js/components/ExternalIcon';
1718

1819
define('pgadmin.node.database', [
1920
'sources/gettext', 'sources/url_for',
@@ -271,7 +272,8 @@ define('pgadmin.node.database', [
271272
},
272273
function() { return true;},
273274
gettext('Disconnect'),
274-
gettext('Cancel')
275+
gettext('Cancel'),
276+
<DisonnectedIcon/>
275277
);
276278
}
277279

@@ -565,7 +567,8 @@ define('pgadmin.node.database', [
565567
},
566568
function() { return true; },
567569
gettext('Disconnect'),
568-
gettext('Cancel')
570+
gettext('Cancel'),
571+
<DisonnectedIcon/>
569572
);
570573
} else {
571574
disconnect();

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
// This software is released under the PostgreSQL Licence
77
//
88
//////////////////////////////////////////////////////////////
9-
9+
import React from 'react';
1010
import { getNodeListById } from '../../../../static/js/node_ajax';
1111
import ServerSchema from './server.ui';
1212
import { showServerPassword, showChangeServerPassword, showNamedRestorePoint } from '../../../../../static/js/Dialogs/index';
1313
import _ from 'lodash';
1414
import getApiInstance, { parseApiError } from '../../../../../static/js/api_instance';
15+
import { DisonnectedIcon } from '../../../../../static/js/components/ExternalIcon';
1516

1617
define('pgadmin.node.server', [
1718
'sources/gettext', 'sources/url_for',
@@ -261,6 +262,7 @@ define('pgadmin.node.server', [
261262
function() { return true;},
262263
gettext('Disconnect'),
263264
gettext('Cancel'),
265+
<DisonnectedIcon/>
264266
);
265267
}
266268
return false;
@@ -868,7 +870,8 @@ define('pgadmin.node.server', [
868870
function() { disconnect(); },
869871
function() { return true;},
870872
gettext('Disconnect'),
871-
gettext('Cancel')
873+
gettext('Cancel'),
874+
<DisonnectedIcon/>
872875
);
873876
} else {
874877
disconnect();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -595,7 +595,7 @@ define('pgadmin.browser.node', [
595595
},
596596
() => {},
597597
gettext('Delete'),
598-
gettext('Cancel'),
598+
gettext('Cancel')
599599
);
600600
},
601601
// Callback for creating script(s) & opening them in Query editor

‎web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import React, { useEffect, useMemo } from 'react';
1515
import { FileType } from 'react-aspen';
1616
import { Box } from '@mui/material';
1717
import PropTypes from 'prop-types';
18+
import CloseIcon from '@mui/icons-material/CloseRounded';
19+
import HTMLReactParser from 'html-react-parser/lib/index';
1820
import SchemaView from '../../../../static/js/SchemaView';
1921
import getApiInstance from '../../../../static/js/api_instance';
2022
import CloseSharpIcon from '@mui/icons-material/CloseSharp';
@@ -85,6 +87,16 @@ const StyledBox = styled(Box)(({theme}) => ({
8587
marginLeft: '0.5em'
8688
},
8789
},
90+
91+
},
92+
'& .Alert-footer': {
93+
display: 'flex',
94+
justifyContent: 'flex-end',
95+
padding: '0.5rem',
96+
...theme.mixins.panelBorder.top,
97+
},
98+
'& .Alert-margin': {
99+
marginLeft: '0.25rem',
88100
},
89101
}));
90102

@@ -655,36 +667,31 @@ export default function PreferencesComponent({ ...props }) {
655667
};
656668

657669
const reset = () => {
658-
pgAdmin.Browser.notifier.confirm(
670+
const text = `${gettext('All preferences will be reset to their default values.')}<br><br>${gettext('Do you want to proceed?')}<br><br>
671+
${gettext('Note:')}<br> <ul style="padding-left:20px"><li style="list-style-type:disc">${gettext('The object explorer tree will be refreshed automatically to reflect the changes.')}</li>
672+
<li style="list-style-type:disc">${gettext('If the application language changes, a reload of the application will be required. You can choose to reload later at your convenience.')}</li></ul>`;
673+
674+
pgAdmin.Browser.notifier.showModal(
659675
gettext('Reset all preferences'),
660-
`${gettext('All preferences will be reset to their default values.')}<br><br>${gettext('Do you want to proceed?')}<br><br>
661-
${gettext('Note:')}<br> <ul style="padding-left:20px"><li style="list-style-type:disc">${gettext('The object explorer tree will be refreshed automatically to reflect the changes.')}</li>
662-
<li style="list-style-type:disc">${gettext('If the application language changes, a reload of the application will be required. You can choose to reload later at your convenience.')}</li></ul>`,
663-
function () {},
664-
function () {},
665-
'',
666-
'Cancel',
667-
function (closeModal) {
668-
return [
669-
{
670-
type: 'default',
671-
icon: <SaveSharpIcon />,
672-
label: gettext('Save & Reload'),
673-
onclick: () => {
674-
resetPrefsToDefault(true);
675-
closeModal();
676-
}
677-
}, {
678-
type: 'primary',
679-
icon: <SaveSharpIcon />,
680-
label: gettext('Save & Reload Later'),
681-
onclick: () => {
682-
resetPrefsToDefault(false);
683-
closeModal();
684-
}
685-
}
686-
];
687-
}
676+
(closeModal)=>{
677+
const onClick = (reset) => {
678+
resetPrefsToDefault(reset);
679+
closeModal();
680+
};
681+
return(
682+
<StyledBox display="flex" flexDirection="column" height="100%">
683+
<Box flexGrow="1" p={2}>
684+
{HTMLReactParser(text)}
685+
</Box>
686+
<Box className='Alert-footer'>
687+
<DefaultButton className='Alert-margin' startIcon={<CloseIcon />} onClick={()=> closeModal()}>{'Cancel'}</DefaultButton>
688+
<DefaultButton className='Alert-margin' startIcon={<SaveSharpIcon />} onClick={() => onClick(true)} >{gettext('Save & Reload')}</DefaultButton>
689+
<PrimaryButton className='Alert-margin' startIcon={ <SaveSharpIcon />} onClick={()=>onClick(false)}>{gettext('Save & Reload Later')}</PrimaryButton>
690+
</Box>
691+
</StyledBox>
692+
);
693+
},
694+
{ isFullScreen: false, isResizeable: false, showFullScreen: false, isFullWidth: false, showTitle: true},
688695
);
689696
};
690697

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

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { getEpoch } from 'sources/utils';
1313
import { DefaultButton, PgIconButton, PrimaryButton } from '../components/Buttons';
1414
import Draggable from 'react-draggable';
1515
import CloseIcon from '@mui/icons-material/CloseRounded';
16+
import DeleteIcon from '@mui/icons-material/Delete';
1617
import CustomPropTypes from '../custom_prop_types';
1718
import PropTypes from 'prop-types';
1819
import gettext from 'sources/gettext';
@@ -41,31 +42,15 @@ export function useModal() {
4142
return React.useContext(ModalContext);
4243
}
4344

44-
function renderExtraButtons(button) {
45-
switch(button.type) {
46-
case 'primary':
47-
return <PrimaryButton className='Alert-margin' startIcon={button.icon} onClick={button.onClick}>{button.label}</PrimaryButton>;
48-
case 'default':
49-
return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onClick} color={button?.color}>{button.label}</DefaultButton>;
50-
default:
51-
return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onClick}>{button.label}</DefaultButton>;
52-
};
53-
}
54-
55-
function AlertContent({ text, confirm, okLabel = gettext('OK'), cancelLabel = gettext('Cancel'), onOkClick, onCancelClick, extraButtons }) {
45+
function AlertContent({ text, confirm, okLabel = gettext('OK'), cancelLabel = gettext('Cancel'), onOkClick, onCancelClick, okIcon}) {
5646
return (
5747
<StyledBox display="flex" flexDirection="column" height="100%">
5848
<Box flexGrow="1" p={2}>{typeof (text) == 'string' ? HTMLReactParser(text) : text}</Box>
5949
<Box className='Alert-footer'>
6050
{confirm &&
61-
<DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick} autoFocus={true}>{cancelLabel}</DefaultButton>
62-
}
63-
{
64-
extraButtons?.length ?
65-
extraButtons.map(button=>renderExtraButtons(button))
66-
:
67-
<PrimaryButton className='Alert-margin' startIcon={<CheckRoundedIcon />} onClick={onOkClick}>{okLabel}</PrimaryButton>
51+
<DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick}>{cancelLabel}</DefaultButton>
6852
}
53+
<PrimaryButton className='Alert-margin' startIcon={okIcon ?? <CheckRoundedIcon/>} onClick={onOkClick} autoFocus>{okLabel}</PrimaryButton>
6954
</Box>
7055
</StyledBox>
7156
);
@@ -77,7 +62,7 @@ AlertContent.propTypes = {
7762
onCancelClick: PropTypes.func,
7863
okLabel: PropTypes.string,
7964
cancelLabel: PropTypes.string,
80-
extraButtons: PropTypes.array
65+
okIcon : PropTypes.func
8166
};
8267

8368
function alert(title, text, onOkClick, okLabel = gettext('OK')) {
@@ -93,7 +78,7 @@ function alert(title, text, onOkClick, okLabel = gettext('OK')) {
9378
});
9479
}
9580

96-
function confirm(title, text, onOkClick, onCancelClick, okLabel = gettext('Yes'), cancelLabel = gettext('No'), extras = null) {
81+
function confirm(title, text, onOkClick, onCancelClick, okLabel = gettext('Yes'), cancelLabel = gettext('No'), okIcon) {
9782
// bind the modal provider before calling
9883
this.showModal(title, (closeModal) => {
9984
const onCancelClickClose = () => {
@@ -105,12 +90,36 @@ function confirm(title, text, onOkClick, onCancelClick, okLabel = gettext('Yes')
10590
onOkClick?.();
10691
closeModal();
10792
};
108-
const extraButtons = extras?.(closeModal);
10993
return (
110-
<AlertContent text={text} confirm onOkClick={onOkClickClose} onCancelClick={onCancelClickClose} okLabel={okLabel} cancelLabel={cancelLabel} extraButtons={extraButtons} />
94+
<AlertContent text={text} confirm onOkClick={onOkClickClose} onCancelClick={onCancelClickClose} okLabel={okLabel} cancelLabel={cancelLabel} okIcon={okIcon}/>
11195
);
11296
});
11397
}
98+
99+
function confirmDelete(title, text, onOkClick, onCancelClick, deleteLabel = gettext('Delete'), cancelLabel = gettext('Cancel')) {
100+
this.showModal(
101+
title,
102+
(closeModal)=>{
103+
const handleOkClose = (callback) => {
104+
callback();
105+
closeModal();
106+
};
107+
return (
108+
<StyledBox display="flex" flexDirection="column" height="100%">
109+
<Box flexGrow="1" p={2}>
110+
{typeof (text) == 'string' ? HTMLReactParser(text) : text}
111+
</Box>
112+
<Box className='Alert-footer'>
113+
<DefaultButton className='Alert-margin' startIcon={<CloseIcon />} onClick={() => handleOkClose(onCancelClick)} autoFocus>{cancelLabel}</DefaultButton>
114+
<DefaultButton className='Alert-margin' color={'error'} startIcon={<DeleteIcon/> } onClick={() => handleOkClose(onOkClick)}>{deleteLabel}</DefaultButton>
115+
</Box>
116+
</StyledBox>
117+
);
118+
},
119+
{ isFullScreen: false, isResizeable: false, showFullScreen: false, isFullWidth: false, showTitle: true},
120+
);
121+
}
122+
114123
export default function ModalProvider({ children }) {
115124
const [modals, setModals] = React.useState([]);
116125

@@ -143,7 +152,8 @@ export default function ModalProvider({ children }) {
143152
const modalContext = React.useMemo(() => ({
144153
...modalContextBase,
145154
confirm: confirm.bind(modalContextBase),
146-
alert: alert.bind(modalContextBase)
155+
alert: alert.bind(modalContextBase),
156+
confirmDelete: confirmDelete.bind(modalContextBase)
147157
}), []);
148158
return (
149159
<ModalContext.Provider value={modalContext}>

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

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -175,29 +175,14 @@ 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'), okIcon) {
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-
this.modal.confirm(title, text, onOkClick, onCancelClick, okLabel, cancelLabel, extras);
181+
this.modal.confirm(title, text, onOkClick, onCancelClick, okLabel, cancelLabel, okIcon);
182182
}
183183

184-
confirmDelete(title, text, onOkClick, onCancelClick,okLabel = gettext('Yes'), cancelLabel = gettext('No')){
185-
186-
const extraButtons = (closeModal) => {
187-
return [
188-
{
189-
type: 'default',
190-
icon: <CheckRoundedIcon />,
191-
label: okLabel,
192-
onClick: ()=>{
193-
onOkClick();
194-
closeModal();
195-
},
196-
color: 'error',
197-
},
198-
];
199-
};
200-
this.modal.confirm(title, text, onOkClick, onCancelClick, okLabel, cancelLabel, extraButtons);
184+
confirmDelete(title, text, onOkClick, onCancelClick, okLabel = gettext('Delete'), cancelLabel = gettext('Cancel')){
185+
this.modal.confirmDelete(title, text, onOkClick, onCancelClick, okLabel, cancelLabel);
201186
}
202187

203188
showModal(title, content, modalOptions) {

‎web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -518,7 +518,7 @@ export default class ERDTool extends React.Component {
518518
},
519519
() => {/*This is intentional (SonarQube)*/},
520520
gettext('Delete'),
521-
gettext('Cancel'),
521+
gettext('Cancel')
522522
);
523523
}
524524

0 commit comments

Comments
 (0)