Remove Alertify dialog from Grant Wizard, Import/Export Servers and Cloud.

web/pgadmin/misc/cloud/static/js/CloudWizard.jsx

@@ -16,7 +16,7 @@ import Wizard from '../../../../static/js/helpers/wizard/Wizard';
 import WizardStep from '../../../../static/js/helpers/wizard/WizardStep';
 import {FormFooterMessage, MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
 import getApiInstance from '../../../../static/js/api_instance';
-import Alertify from 'pgadmin.alertifyjs';
+import Notifier from '../../../../static/js/helpers/Notifier';
 import PropTypes from 'prop-types';
 import pgAdmin from 'sources/pgadmin';
 import {ToggleButtons, FinalSummary} from './cloud_components';
@@ -62,7 +62,7 @@ const useStyles = makeStyles(() =>
 export const CloudWizardEventsContext = React.createContext();
 
 
-export default function CloudWizard({ nodeInfo, nodeData }) {
+export default function CloudWizard({ nodeInfo, nodeData, onClose}) {
   const classes = useStyles();
 
   const eventBus = React.useRef(new EventBus());
@@ -112,7 +112,7 @@ export default function CloudWizard({ nodeInfo, nodeData }) {
         }
       })
       .catch((error) => {
-        Alertify.error(gettext(`Error while getting the host ip: ${error.response.data.errormsg}`));
+        Notifier.error(gettext(`Error while getting the host ip: ${error.response.data.errormsg}`));
       });
   }, [cloudProvider]);
 
@@ -153,11 +153,11 @@ export default function CloudWizard({ nodeInfo, nodeData }) {
     axiosApi.post(_url, post_data)
       .then((res) => {
         pgAdmin.Browser.Events.trigger('pgadmin:browser:tree:add', res.data.data.node, {'server_group': nodeInfo['server_group']});
-        pgAdmin.Browser.Events.trigger('pgadmin-bgprocess:created', Alertify.cloudWizardDialog());
-        Alertify.cloudWizardDialog().close();
+        pgAdmin.Browser.Events.trigger('pgadmin-bgprocess:created');
+        onClose();
       })
       .catch((error) => {
-        Alertify.error(gettext(`Error while saving cloud wizard data: ${error.response.data.errormsg}`));
+        Notifier.error(gettext(`Error while saving cloud wizard data: ${error.response.data.errormsg}`));
       });
   };
 
@@ -450,4 +450,5 @@ export default function CloudWizard({ nodeInfo, nodeData }) {
 CloudWizard.propTypes = {
   nodeInfo: PropTypes.object,
   nodeData: PropTypes.object,
+  onClose: PropTypes.func
 };

web/pgadmin/misc/cloud/static/js/cloud.js

@@ -11,16 +11,15 @@ import ReactDOM from 'react-dom';
 import Theme from 'sources/Theme';
 import CloudWizard from './CloudWizard';
 import getApiInstance from '../../../../static/js/api_instance';
+import Notifier from '../../../../static/js/helpers/Notifier';
 
 
 // Cloud Wizard
 define('pgadmin.misc.cloud', [
-  'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
-  'pgadmin.alertifyjs',
+  'sources/gettext', 'sources/url_for',
   'pgadmin.browser',
-  'pgadmin.browser.wizard',
 ], function(
-  gettext, url_for, $, _, Alertify, pgBrowser
+  gettext, url_for, pgBrowser
 ) {
 
   // if module is already initialized, refer to that.
@@ -70,92 +69,35 @@ define('pgadmin.misc.cloud', [
 
     // Callback to draw Wizard Dialog
     start_cloud_wizard: function() {
+      let t = pgBrowser.tree,
+        i = t.selected(),
+        d = this.d = i ? t.itemData(i) : undefined,
+        info = this.info = pgBrowser.tree.getTreeNodeHierarchy(i);
 
-      // Declare Wizard dialog
-      if (!Alertify.cloudWizardDialog) {
-        Alertify.dialog('cloudWizardDialog', function factory() {
+      // Register dialog panel
+      pgBrowser.Node.registerUtilityPanel();
+      let panel = pgBrowser.Node.addUtilityPanel(920, 650),
+        j = panel.$container.find('.obj_properties').first();
+      panel.title(gettext('Deploy Cloud Instance'));
 
-          // Generate wizard main container
-          var $container = $('<div class=\'wizard_dlg\' id=\'cloudWizardDlg\'></div>');
-          return {
-            main: function () {
-              /*This is intentional (SonarQube)*/
-            },
-            setup: function () {
-              return {
-                // Set options for dialog
-                options: {
-                  frameless: true,
-                  resizable: true,
-                  autoReset: false,
-                  maximizable: true,
-                  closable: true,
-                  closableByDimmer: false,
-                  modal: true,
-                  pinnable: false,
-                },
-              };
-            },
-            build: function () {
-              this.elements.content.appendChild($container.get(0));
-              Alertify.pgDialogBuild.apply(this);
-              var t = pgBrowser.tree,
-                i = t.selected(),
-                d = this.d = i ? t.itemData(i) : undefined,
-                info = this.info = pgBrowser.tree.getTreeNodeHierarchy(i);
+      panel.on(window.wcDocker.EVENT.CLOSED, function() {
+        const axiosApi = getApiInstance();
+        let _url = url_for('cloud.clear_cloud_session');
+        axiosApi.post(_url)
+          .then(() => {})
+          .catch((error) => {
+            Notifier.error(gettext(`Error while clearing cloud wizard data: ${error.response.data.errormsg}`));
+          });
+      });
 
-              setTimeout(function () {
-                if (document.getElementById('cloudWizardDlg')) {
-                  ReactDOM.render(
-                    <Theme>
-                      <CloudWizard nodeInfo={info} nodeData={d} />
-                    </Theme>,
-                    document.getElementById('cloudWizardDlg'));
-                  Alertify.cloudWizardDialog().elements.modal.style.maxHeight=0;
-                  Alertify.cloudWizardDialog().elements.modal.style.maxWidth='none';
-                  Alertify.cloudWizardDialog().elements.modal.style.overflow='visible';
-                  Alertify.cloudWizardDialog().elements.dimmer.style.display='none';
-                }
-              }, 500);
-
-            },
-            prepare: function () {
-              $container.empty().append('<div class=\'cloud_wizard_container\'></div>');
-            },
-            hooks: {
-              // Triggered when the dialog is closed
-              onclose: function () {
-                if(event.target instanceof Object && event.target.className == 'ajs-close'){
-                  const axiosApi = getApiInstance();
-                  let _url = url_for('cloud.clear_cloud_session');
-                  axiosApi.post(_url)
-                    .then(() => {})
-                    .catch((error) => {
-                      Alertify.error(gettext(`Error while clearing cloud wizard data: ${error.response.data.errormsg}`));
-                    });
-                }
-                // Clear the view and remove the react component.
-                return setTimeout((function () {
-                  ReactDOM.unmountComponentAtNode(document.getElementById('cloudWizardDlg'));
-                  return Alertify.cloudWizardDialog().destroy();
-                }), 10);
-              },
-            }
-          };
-        });
-      }
-      // Call Grant Wizard Dialog and set dimensions for wizard
-      Alertify.cloudWizardDialog('').set({
-        onmaximize:function(){
-          Alertify.cloudWizardDialog().elements.modal.style.maxHeight='initial';
-        },
-        onrestore:function(){
-          Alertify.cloudWizardDialog().elements.modal.style.maxHeight=0;
-        },
-      }).resizeTo(920, 650);
+      ReactDOM.render(
+        <Theme>
+          <CloudWizard nodeInfo={info} nodeData={d}
+            onClose={() => {
+              panel.close();
+            }}/>
+        </Theme>, j[0]);
     },
-
-
   };
 
   return pgBrowser.Cloud;