Skip to content

Commit e913be9

Browse files
Rohit BhatiRohitBhati8269
Rohit Bhati
authored and
RohitBhati8269
committed
Fix focus issue of buttons. #6513 
1 parent 9cd8492 commit e913be9

File tree

5 files changed

+87
-74
lines changed

5 files changed

+87
-74
lines changed

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

Lines changed: 2 additions & 2 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() {
@@ -557,7 +557,7 @@ define('pgadmin.node.database', [
557557
});
558558
};
559559
if (notify) {
560-
pgAdmin.Browser.notifier.confirm(
560+
pgAdmin.Browser.notifier.confirmDelete(
561561
gettext('Disconnect from database'),
562562
gettext('Are you sure you want to disconnect from the database - <b>%s</b>?', d.label),
563563
function() {

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

Lines changed: 2 additions & 2 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() {
@@ -862,7 +862,7 @@ define('pgadmin.node.server', [
862862
};
863863

864864
if (notify) {
865-
pgAdmin.Browser.notifier.confirm(
865+
pgAdmin.Browser.notifier.confirmDelete(
866866
gettext('Disconnect from server'),
867867
gettext('Are you sure you want to disconnect from the server <b>%s</b>?', label),
868868
function() { disconnect(); },

‎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: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -41,31 +41,15 @@ export function useModal() {
4141
return React.useContext(ModalContext);
4242
}
4343

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 }) {
44+
function AlertContent({ text, confirm, okLabel = gettext('OK'), cancelLabel = gettext('Cancel'), onOkClick, onCancelClick }) {
5645
return (
5746
<StyledBox display="flex" flexDirection="column" height="100%">
5847
<Box flexGrow="1" p={2}>{typeof (text) == 'string' ? HTMLReactParser(text) : text}</Box>
5948
<Box className='Alert-footer'>
6049
{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>
50+
<DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick}>{cancelLabel}</DefaultButton>
6851
}
52+
<PrimaryButton className='Alert-margin' startIcon={<CheckRoundedIcon/>} onClick={onOkClick} autoFocus>{okLabel}</PrimaryButton>
6953
</Box>
7054
</StyledBox>
7155
);
@@ -93,7 +77,7 @@ function alert(title, text, onOkClick, okLabel = gettext('OK')) {
9377
});
9478
}
9579

96-
function confirm(title, text, onOkClick, onCancelClick, okLabel = gettext('Yes'), cancelLabel = gettext('No'), extras = null) {
80+
function confirm(title, text, onOkClick, onCancelClick, okLabel = gettext('Yes'), cancelLabel = gettext('No')) {
9781
// bind the modal provider before calling
9882
this.showModal(title, (closeModal) => {
9983
const onCancelClickClose = () => {
@@ -105,9 +89,8 @@ function confirm(title, text, onOkClick, onCancelClick, okLabel = gettext('Yes')
10589
onOkClick?.();
10690
closeModal();
10791
};
108-
const extraButtons = extras?.(closeModal);
10992
return (
110-
<AlertContent text={text} confirm onOkClick={onOkClickClose} onCancelClick={onCancelClickClose} okLabel={okLabel} cancelLabel={cancelLabel} extraButtons={extraButtons} />
93+
<AlertContent text={text} confirm onOkClick={onOkClickClose} onCancelClick={onCancelClickClose} okLabel={okLabel} cancelLabel={cancelLabel}/>
11194
);
11295
});
11396
}

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

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { SnackbarProvider, SnackbarContent } from 'notistack';
1111
import { styled } from '@mui/material/styles';
1212
import {Box} from '@mui/material';
1313
import CloseIcon from '@mui/icons-material/CloseRounded';
14+
import DeleteIcon from '@mui/icons-material/Delete';
1415
import { DefaultButton, PrimaryButton } from '../components/Buttons';
1516
import HTMLReactParser from 'html-react-parser';
1617
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
@@ -22,6 +23,7 @@ import gettext from 'sources/gettext';
2223
import _ from 'lodash';
2324
import { useModal } from './ModalProvider';
2425
import { parseApiError } from '../api_instance';
26+
import { DisonnectedIcon } from '../components/ExternalIcon';
2527

2628

2729
const Root = styled('div')(({theme}) => ({
@@ -36,6 +38,18 @@ const Root = styled('div')(({theme}) => ({
3638
},
3739
}));
3840

41+
const StyledBox = styled(Box)(({theme}) => ({
42+
'& .Alert-footer': {
43+
display: 'flex',
44+
justifyContent: 'flex-end',
45+
padding: '0.5rem',
46+
...theme.mixins.panelBorder.top,
47+
},
48+
'& .Alert-margin': {
49+
marginLeft: '0.25rem',
50+
},
51+
}));
52+
3953
const AUTO_HIDE_DURATION = 3000; // In milliseconds
4054

4155
export const FinalNotifyContent = React.forwardRef(({children}, ref) => {
@@ -175,29 +189,38 @@ class Notifier {
175189
this.modal.alert(title, text, onOkClick, okLabel);
176190
}
177191

178-
confirm(title, text, onOkClick, onCancelClick, okLabel=gettext('Yes'), cancelLabel=gettext('No'), extras=null) {
192+
confirm(title, text, onOkClick, onCancelClick, okLabel=gettext('Yes'), cancelLabel=gettext('No')) {
179193
/* Use this if you want to use pgAdmin global notifier.
180194
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);
195+
this.modal.confirm(title, text, onOkClick, onCancelClick, okLabel, cancelLabel);
182196
}
183197

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);
198+
confirmDelete(title, text, onOkClick, onCancelClick, okLabel = gettext('Delete'), cancelLabel = gettext('Cancel')){
199+
let isDeleteButton = gettext('Delete') === okLabel;
200+
this.modal.showModal(
201+
title,
202+
(closeModal)=>{
203+
const handleOkClose = (callback) => {
204+
callback();
205+
closeModal();
206+
};
207+
return (
208+
<StyledBox display="flex" flexDirection="column" height="100%">
209+
<Box flexGrow="1" p={2}>
210+
{typeof (text) == 'string' ? HTMLReactParser(text) : text}
211+
</Box>
212+
<Box className='Alert-footer'>
213+
<DefaultButton className='Alert-margin' startIcon={<CloseIcon />} onClick={() => handleOkClose(onCancelClick)} autoFocus={isDeleteButton} >{cancelLabel}</DefaultButton>
214+
{isDeleteButton ?
215+
<DefaultButton className='Alert-margin' color={'error'} startIcon={<DeleteIcon/> } onClick={() => handleOkClose(onOkClick)}>{okLabel}</DefaultButton>:
216+
<PrimaryButton className='Alert-margin' startIcon={<DisonnectedIcon/>} onClick={() => handleOkClose(onOkClick)} autoFocus={!isDeleteButton}>{okLabel}</PrimaryButton>
217+
}
218+
</Box>
219+
</StyledBox>
220+
);
221+
},
222+
{ isFullScreen: false, isResizeable: false, showFullScreen: false, isFullWidth: false, showTitle: true},
223+
);
201224
}
202225

203226
showModal(title, content, modalOptions) {

0 commit comments

Comments
 (0)