Update button lables, color and standardize confirmation messages for…

… delete/disconnect.#6513

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

@@ -270,6 +270,8 @@ define('pgadmin.node.database', [
                 t.deselect(item);
               },
               function() { return true;},
+              gettext('Disconnect'),
+              gettext('Cancel')
             );
           }
 
@@ -557,11 +559,13 @@ define('pgadmin.node.database', [
         if (notify) {
           pgAdmin.Browser.notifier.confirm(
             gettext('Disconnect from database'),
-            gettext('Are you sure you want to disconnect from database - %s?', d.label),
+            gettext('Are you sure you want to disconnect from the database - <b>%s</b>?', d.label),
             function() {
               disconnect();
             },
-            function() { return true; }
+            function() { return true; },
+            gettext('Disconnect'),
+            gettext('Cancel')
           );
         } else {
           disconnect();

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

@@ -259,6 +259,8 @@ define('pgadmin.node.server', [
                 }, 100);
               },
               function() { return true;},
+              gettext('Disconnect'),
+              gettext('Cancel'),
             );
           }
           return false;
@@ -862,9 +864,11 @@ define('pgadmin.node.server', [
       if (notify) {
         pgAdmin.Browser.notifier.confirm(
           gettext('Disconnect from server'),
-          gettext('Are you sure you want to disconnect from the server %s?', label),
+          gettext('Are you sure you want to disconnect from the server <b>%s</b>?', label),
           function() { disconnect(); },
           function() { return true;},
+          gettext('Disconnect'),
+          gettext('Cancel')
         );
       } else {
         disconnect();

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

@@ -525,7 +525,7 @@ define('pgadmin.browser.node', [
           title = gettext('Delete FORCE %s?', obj.label);
 
         } else if (input.url == 'delete') {
-          msg = gettext('Are you sure you want to delete %s <b>"%s"</b> and all the objects that depend on it?',
+          msg = gettext('Are you sure you want to delete the %s <b>"%s"</b> and all the objects that depend on it?',
             obj.label.toLowerCase(), d.label);
           title = gettext('Delete CASCADE %s?', obj.label);
 
@@ -539,10 +539,10 @@ define('pgadmin.browser.node', [
           }
         } else {
           if (obj.dropAsRemove) {
-            msg = gettext('Are you sure you want to remove %s "%s"?', obj.label.toLowerCase(), d.label);
+            msg = gettext('Are you sure you want to remove the %s <b>"%s"</b>?', obj.label.toLowerCase(), d.label);
             title = gettext('Remove %s?', obj.label);
           } else {
-            msg = gettext('Are you sure you want to delete %s <b>"%s"</b>?', obj.label.toLowerCase(), d.label);
+            msg = gettext('Are you sure you want to delete the %s <b>"%s"</b>?', obj.label.toLowerCase(), d.label);
             title = gettext('Delete %s?', obj.label);
           }
 
@@ -555,7 +555,7 @@ define('pgadmin.browser.node', [
             return;
           }
         }
-        pgAdmin.Browser.notifier.confirm(title, msg,
+        pgAdmin.Browser.notifier.modal.confirmDelete(title, msg,
           function() {
             getApiInstance().delete(
               obj.generate_url(i, input.url, d, true),
@@ -592,7 +592,10 @@ define('pgadmin.browser.node', [
               }
               pgAdmin.Browser.notifier.alert(gettext('Error dropping/removing %s: "%s"', obj.label, objName), errmsg);
             });
-          }
+          },
+          function() { return true;},
+          gettext('Delete'),
+          gettext('Cancel'),
         );
       },
       // Callback for creating script(s) & opening them in Query editor

web/pgadmin/misc/properties/CollectionNodeProperties.jsx

@@ -197,7 +197,7 @@ export default function CollectionNodeProperties({
     };
 
     if (confirm) {
-      pgAdmin.Browser.notifier.confirm(title, msg, dropNodeProperties, null);
+      pgAdmin.Browser.notifier.modal.confirmDelete(title, msg, dropNodeProperties, null, gettext('Delete'), gettext('Cancel'));
     } else {
       dropNodeProperties();
     }

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

@@ -44,6 +44,8 @@ export default function(basicSettings) {
         light: '#1e1e1e',
         contrastText: '#fff',
         lighter: '#1e1e1e',
+        hoverMain: darken('#da6758', 0.25),
+        hoverBorderColor: darken('#da6758', 0.25),
       },
       warning: {
         main: '#eea236',

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

@@ -42,6 +42,8 @@ export default function(basicSettings) {
         main: '#EE7A55',
         light: '#010B15',
         contrastText: '#010B15',
+        hoverMain: '#fff',
+        hoverBorderColor: '#fff',
       },
       warning: {
         main: '#F4D35E',

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

@@ -42,6 +42,8 @@ export default function(basicSettings) {
         main: '#CC0000',
         light: '#FAECEC',
         contrastText: '#fff',
+        hoverMain: darken('#CC0000', 0.25),
+        hoverBorderColor: darken('#CC0000', 0.25),
       },
       warning: {
         main: '#eea236',

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

@@ -15,7 +15,7 @@ import ShortcutTitle from './ShortcutTitle';
 import { styled } from '@mui/material/styles';
 
 
-const StyledButton = styled(Button)(({theme}) => ({
+const StyledButton = styled(Button)(({theme, color}) => ({
   '&.Buttons-primaryButton': {
     border: '1px solid '+theme.palette.primary.main,
     '&.Mui-disabled': {
@@ -37,18 +37,19 @@ const StyledButton = styled(Button)(({theme}) => ({
     }
   },
   '&.Buttons-defaultButton': {
-    backgroundColor: theme.palette.default.main,
-    color: theme.palette.default.contrastText,
-    border: '1px solid '+theme.palette.default.borderColor,
+    // Use the color prop to determine the background color and text color.
+    backgroundColor: theme.palette[color]?.main ?? theme.palette.default.main,
+    border: '1px solid '+ theme.palette.default.borderColor,
+    color: theme.palette[color]?.contrastText ?? theme.palette.default.contrastText,
     whiteSpace: 'nowrap',
     '&.Mui-disabled': {
       color: [theme.palette.default.disabledContrastText, '!important'],
       borderColor: theme.palette.default.disabledBorderColor
     },
     '&:hover': {
-      backgroundColor: theme.palette.default.hoverMain,
-      color: theme.palette.default.hoverContrastText,
-      borderColor: theme.palette.default.hoverBorderColor,
+      backgroundColor: theme.palette[color]?.hoverMain ?? theme.palette.default.hoverMain,
+      color: theme.palette[color]?.contrastText ?? theme.palette.default.hoverContrastText,
+      borderColor: theme.palette[color]?.hoverBorderColor ?? theme.palette.default.hoverBorderColor,
     },
     '&.Buttons-noBorder': {
       border: 0,
@@ -143,16 +144,19 @@ PrimaryButton.propTypes = {
 
 /* pgAdmin default button */
 export const DefaultButton = forwardRef((props, ref)=>{
-  let {children, className, size, noBorder, ...otherProps} = props;
+  let {children, className, size, noBorder, color, ...otherProps} = props;
+  let variant = 'outlined';
   let allClassName = ['Buttons-defaultButton', className];
   if(size == 'xs') {
     size = undefined;
     allClassName.push('Buttons-xsButton');
+  } else if(color !== 'default'){
+    variant='contained';
   }
   noBorder && allClassName.push('Buttons-noBorder');
   const dataLabel = typeof(children) == 'string' ? children : undefined;
   return (
-    <StyledButton variant="outlined" ref={ref} size={size} className={allClassName.join(' ')} data-label={dataLabel} color="default" {...otherProps}>{children}</StyledButton>
+    <StyledButton variant={variant} ref={ref} size={size} className={allClassName.join(' ')} data-label={dataLabel} {...otherProps} color={color ?? 'default'} >{children}</StyledButton>
   );
 });
 DefaultButton.displayName = 'DefaultButton';
@@ -161,6 +165,7 @@ DefaultButton.propTypes = {
   noBorder: PropTypes.bool,
   children: CustomPropTypes.children,
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  color: PropTypes.string,
 };
 
 

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

@@ -46,7 +46,7 @@ function renderExtraButtons(button) {
   case 'primary':
     return <PrimaryButton className='Alert-margin' startIcon={button.icon} onClick={button.onclick}>{button.label}</PrimaryButton>;
   case 'default':
-    return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onclick}>{button.label}</DefaultButton>;
+    return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onclick} color={button?.color}>{button.label}</DefaultButton>;
   default:
     return <DefaultButton className='Alert-margin' startIcon={button.icon} onClick={button.onclick}>{button.label}</DefaultButton>;
   };
@@ -58,13 +58,13 @@ function AlertContent({ text, confirm, okLabel = gettext('OK'), cancelLabel = ge
       <Box flexGrow="1" p={2}>{typeof (text) == 'string' ? HTMLReactParser(text) : text}</Box>
       <Box className='Alert-footer'>
         {confirm &&
-          <DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick} >{cancelLabel}</DefaultButton>
+          <DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick} autoFocus={true}>{cancelLabel}</DefaultButton>
         }
         {
           extraButtons?.length ?
             extraButtons.map(button=>renderExtraButtons(button))
             :
-            <PrimaryButton className='Alert-margin' startIcon={<CheckRoundedIcon />} onClick={onOkClick} autoFocus={true} >{okLabel}</PrimaryButton>
+            <PrimaryButton className='Alert-margin' startIcon={<CheckRoundedIcon />} onClick={onOkClick}>{okLabel}</PrimaryButton>
         }
       </Box>
     </StyledBox>
@@ -96,17 +96,43 @@ function alert(title, text, onOkClick, okLabel = gettext('OK')) {
 function confirm(title, text, onOkClick, onCancelClick, okLabel = gettext('Yes'), cancelLabel = gettext('No'), extras = null) {
   // bind the modal provider before calling
   this.showModal(title, (closeModal) => {
-    const onCancelClickClose = () => {
-      onCancelClick?.();
+    // Generalized function to handle button click and close the modal.
+    const handleClick = (callback) => {
+      callback?.();
       closeModal();
     };
-    const onOkClickClose = () => {
-      onOkClick?.();
+
+    return (
+      <AlertContent text={text} confirm onOkClick={() => handleClick(onOkClick)} onCancelClick={() => handleClick(onCancelClick)} okLabel={okLabel} cancelLabel={cancelLabel} extraButtons={extras?.(closeModal)} />
+    );
+  });
+}
+
+function confirmDelete(...args){
+  let [title, text, onOkClick, onCancelClick, okLabel = gettext('Yes'), cancelLabel = gettext('No')] = args;
+  // bind the modal provider before calling
+  this.showModal(title, (closeModal) => {
+    // Generalized function to handle button click and close the modal.
+    const handleClick = (callback) => {
+      callback?.();
       closeModal();
     };
-    const extraButtons =  extras?.(closeModal);
+
+    // Define additional buttons to be displayed in the modal.
+    const extraButtons = [
+      {
+        type: 'default',
+        icon: <CheckRoundedIcon />,
+        label: okLabel,
+        onclick: () => {
+          handleClick(onOkClick);
+        },
+        color: 'error'
+      }
+    ];
+
     return (
-      <AlertContent text={text} confirm onOkClick={onOkClickClose} onCancelClick={onCancelClickClose} okLabel={okLabel} cancelLabel={cancelLabel} extraButtons={extraButtons} />
+      <AlertContent text={text} confirm onOkClick={() => {}} onCancelClick={() => handleClick(onCancelClick)} cancelLabel={cancelLabel} extraButtons={extraButtons} />
     );
   });
 }
@@ -143,7 +169,8 @@ export default function ModalProvider({ children }) {
   const modalContext = React.useMemo(() => ({
     ...modalContextBase,
     confirm: confirm.bind(modalContextBase),
-    alert: alert.bind(modalContextBase)
+    alert: alert.bind(modalContextBase),
+    confirmDelete : confirmDelete.bind(modalContextBase)
   }), []);
   return (
     <ModalContext.Provider value={modalContext}>

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

@@ -499,7 +499,7 @@ export default class ERDTool extends React.Component {
   }
 
   onDeleteNode() {
-    pgAdmin.Browser.notifier.confirm(
+    pgAdmin.Browser.notifier.modal.confirmDelete(
       gettext('Delete ?'),
       gettext('You have selected %s tables and %s links.', this.diagram.getSelectedNodes().length, this.diagram.getSelectedLinks().length)
         + '<br />' + gettext('Are you sure you want to delete ?'),
@@ -516,7 +516,9 @@ export default class ERDTool extends React.Component {
         }
         this.diagram.repaint();
       },
-      () => {/*This is intentional (SonarQube)*/}
+      () => {/*This is intentional (SonarQube)*/},
+      gettext('Delete'),
+      gettext('Cancel')
     );
   }
 

web/regression/javascript/components/Buttons.spec.js

@@ -28,7 +28,7 @@ describe('components Buttons', ()=>{
     let ThemedBtn = withTheme(DefaultButton);
     render(<ThemedBtn className="testClass">Test</ThemedBtn>);
     const btn = screen.getByRole('button');
-    expect(btn.classList.contains('MuiButton-outlined')).toBe(true);
+    expect(btn.classList.contains('MuiButton-outlined')).toBe(false);
     expect(btn.classList.contains('testClass')).toBe(true);
   });