Fix JS test cases and other JS build issues caused due to dependabot updates.

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

@@ -8,11 +8,11 @@
 //////////////////////////////////////////////////////////////
 
 /* The dark theme */
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { darken } from '@material-ui/core/styles/colorManipulator';
 
 export default function(basicSettings) {
-  return createMuiTheme(basicSettings, {
+  return createTheme(basicSettings, {
     palette: {
       default: {
         main: '#6b6b6b',

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

@@ -8,10 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 /* The dark theme */
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 
 export default function(basicSettings) {
-  return createMuiTheme(basicSettings, {
+  return createTheme(basicSettings, {
     palette: {
       default: {
         main: 'transparent',

web/pgadmin/static/js/Theme/index.jsx

@@ -13,7 +13,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { createMuiTheme, ThemeProvider, makeStyles } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider, makeStyles } from '@material-ui/core/styles';
 import CustomPropTypes from '../custom_prop_types';
 
 import getStandardTheme from './standard';
@@ -24,8 +24,8 @@ import pickrOverride from './overrides/pickr.override';
 import uplotOverride from './overrides/uplot.override';
 
 /* Common settings across all themes */
-let basicSettings = createMuiTheme();
-basicSettings = createMuiTheme(basicSettings, {
+let basicSettings = createTheme();
+basicSettings = createTheme(basicSettings, {
   typography: {
     fontSize: 14,
     htmlFontSize: 14,
@@ -296,7 +296,7 @@ function getFinalTheme(baseTheme) {
     }
   };
 
-  return createMuiTheme({
+  return createTheme({
     mixins: mixins,
     overrides: {
       MuiCssBaseline: {

web/pgadmin/static/js/Theme/standard.js

@@ -8,11 +8,11 @@
 //////////////////////////////////////////////////////////////
 
 /* The standard theme */
-import { createMuiTheme } from '@material-ui/core/styles';
-import { fade, darken } from '@material-ui/core/styles/colorManipulator';
+import { createTheme } from '@material-ui/core/styles';
+import { alpha, darken } from '@material-ui/core/styles/colorManipulator';
 
 export default function(basicSettings) {
-  return createMuiTheme(basicSettings, {
+  return createTheme(basicSettings, {
     palette: {
       default: {
         main: '#fff',
@@ -86,7 +86,7 @@ export default function(basicSettings) {
       },
       borderColor: '#dde0e6',
       loader: {
-        backgroundColor: fade('#000', 0.65),
+        backgroundColor: alpha('#000', 0.65),
         color: '#fff',
       },
       errorColor: '#E53935',

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

@@ -267,6 +267,9 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
   let useModalRef = useModal();
   const classes = useModalStyles();
   let closeModal = (_e, reason) => {
+    if(reason == 'backdropClick' && showTitle) {
+      return;
+    }
     useModalRef.closeModal(id);
     if(reason == 'escapeKeyDown') {
       onClose?.();
@@ -282,7 +285,6 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
       PaperProps={{ 'isfullscreen': isfullScreen.toString(), 'isresizeable': isResizeable.toString(), width: dialogWidth, height: dialogHeight, minHeight: minHeight, minWidth: minWidth }}
       fullScreen={isfullScreen}
       fullWidth={isFullWidth}
-      disableBackdropClick={showTitle}
       disablePortal
     >
       { showTitle && <>