Fix focus issue of buttons. #6513

Author: Rohit Bhati

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

@@ -257,7 +257,7 @@ define('pgadmin.node.database', [
             t = pgBrowser.tree;
 
           if (children) {
-            pgAdmin.Browser.notifier.confirm(
+            pgAdmin.Browser.notifier.confirmDelete(
               gettext('Disconnect from all databases'),
               gettext('Are you sure you want to disconnect from all databases?'),
               function() {
@@ -557,7 +557,7 @@ define('pgadmin.node.database', [
           });
         };
         if (notify) {
-          pgAdmin.Browser.notifier.confirm(
+          pgAdmin.Browser.notifier.confirmDelete(
             gettext('Disconnect from database'),
             gettext('Are you sure you want to disconnect from the database - <b>%s</b>?', d.label),
             function() {

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

@@ -243,7 +243,7 @@ define('pgadmin.node.server', [
             obj = this,
             t = pgBrowser.tree;
           if (children) {
-            pgAdmin.Browser.notifier.confirm(
+            pgAdmin.Browser.notifier.confirmDelete(
               gettext('Disconnect from all servers'),
               gettext('Are you sure you want to disconnect from all servers?'),
               function() {
@@ -862,7 +862,7 @@ define('pgadmin.node.server', [
       };
 
       if (notify) {
-        pgAdmin.Browser.notifier.confirm(
+        pgAdmin.Browser.notifier.confirmDelete(
           gettext('Disconnect from server'),
           gettext('Are you sure you want to disconnect from the server <b>%s</b>?', label),
           function() { disconnect(); },

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

@@ -18,6 +18,7 @@ import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import HTMLReactParser from 'html-react-parser';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import _ from 'lodash';
 import { Rnd } from 'react-rnd';
 import { ExpandDialogIcon, MinimizeDialogIcon } from '../components/ExternalIcon';
 import { styled } from '@mui/material/styles';
@@ -44,7 +45,7 @@ export function useModal() {
 function renderExtraButtons(button) {
   switch(button.type) {
   case 'primary':
-    return <PrimaryButton className='Alert-margin' startIcon={button.icon} onClick={button.onClick}>{button.label}</PrimaryButton>;
+    return <PrimaryButton className='Alert-margin' startIcon={button.icon} onClick={button.onClick} autoFocus>{button.label}</PrimaryButton>;
   case 'default':
     return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onClick} color={button?.color}>{button.label}</DefaultButton>;
   default:
@@ -53,18 +54,20 @@ function renderExtraButtons(button) {
 }
 
 function AlertContent({ text, confirm, okLabel = gettext('OK'), cancelLabel = gettext('Cancel'), onOkClick, onCancelClick, extraButtons }) {
+  // Check if any extra buttons have an focus property to determine if autofocus should be applied.
+  const hasAutoFocus = _.some(extraButtons, item => !_.isNil(item.focus));
   return (
     <StyledBox display="flex" flexDirection="column" height="100%">
       <Box flexGrow="1" p={2}>{typeof (text) == 'string' ? HTMLReactParser(text) : text}</Box>
       <Box className='Alert-footer'>
         {confirm &&
-          <DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick} autoFocus={true}>{cancelLabel}</DefaultButton>
+          <DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick} autoFocus={hasAutoFocus} >{cancelLabel}</DefaultButton>
         }
         {
           extraButtons?.length ?
             extraButtons.map(button=>renderExtraButtons(button))
             :
-            <PrimaryButton className='Alert-margin' startIcon={<CheckRoundedIcon />} onClick={onOkClick}>{okLabel}</PrimaryButton>
+            <PrimaryButton className='Alert-margin' startIcon={<CheckRoundedIcon/>} onClick={onOkClick} autoFocus={true}>{okLabel}</PrimaryButton>
         }
       </Box>
     </StyledBox>

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

@@ -11,6 +11,7 @@ import { SnackbarProvider, SnackbarContent } from 'notistack';
 import { styled } from '@mui/material/styles';
 import {Box} from '@mui/material';
 import CloseIcon from '@mui/icons-material/CloseRounded';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { DefaultButton, PrimaryButton } from '../components/Buttons';
 import HTMLReactParser from 'html-react-parser';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
@@ -22,6 +23,7 @@ import gettext from 'sources/gettext';
 import _ from 'lodash';
 import { useModal } from './ModalProvider';
 import { parseApiError } from '../api_instance';
+import { DisonnectedIcon } from '../components/ExternalIcon';
 
 
 const Root = styled('div')(({theme}) => ({
@@ -68,6 +70,20 @@ AlertContent.propTypes = {
   cancelLabel: PropTypes.string,
 };
 
+function createButtonConfig(icon, label, onOkClick, closeModal, type, color=null, focus=false){
+  // Creates a configuration object for a button.
+  return {
+    icon,
+    label,
+    onClick: () => {
+      onOkClick();
+      closeModal();
+    },    type,
+    color,
+    focus
+  };
+}
+
 // This can be called from iframe,
 // so need to separate the context to avoid hooks error
 class SnackbarNotifier {
@@ -182,20 +198,16 @@ class Notifier {
   }
 
   confirmDelete(title, text, onOkClick, onCancelClick,okLabel = gettext('Yes'), cancelLabel = gettext('No')){
-
-    const  extraButtons = (closeModal) => {
-      return [
-        {
-          type: 'default',
-          icon: <CheckRoundedIcon />,
-          label: okLabel,
-          onClick: ()=>{
-            onOkClick();
-            closeModal();
-          },
-          color: 'error',
-        },
-      ];
+    const extraButtons = (closeModal) => {
+      // Button configurations for specific actions like "Delete" and "Disconnect".
+      const buttonConfigs = {
+        [gettext('Delete')]: () =>
+          createButtonConfig(<DeleteIcon />, okLabel, onOkClick, closeModal,'default','error', true),
+        [gettext('Disconnect')]: () =>
+          createButtonConfig(<DisonnectedIcon />, okLabel, onOkClick, closeModal, 'primary'),
+      };
+      // Return the button configuration for the specified `okLabel`, if it exists.
+      return buttonConfigs[okLabel] ? [buttonConfigs[okLabel]()] : [];
     };
     this.modal.confirm(title, text, onOkClick, onCancelClick, okLabel, cancelLabel, extraButtons);
   }