Port Backup Global, Backup Server, and Backup object dialog in React. Fixes #6984

web/pgadmin/browser/server_groups/servers/databases/__init__.py

@@ -537,7 +537,7 @@ class DatabaseView(PGChildNodeView):
         """
         This function to return list of avialable encodings
         """
-        res = [{'label': '', 'value': ''}]
+        res = []
         SQL = render_template(
             "/".join([self.template_path, 'get_encodings.sql'])
         )

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

@@ -497,6 +497,72 @@ define('pgadmin.browser.node', [
 
       return null;
     },
+    addUtilityPanel: function() {
+      var body = window.document.body,
+        el = document.createElement('div');
+
+      body.insertBefore(el, body.firstChild);
+
+      var new_panel = pgBrowser.docker.addPanel(
+        'utility_props', window.wcDocker.DOCK.FLOAT, undefined, {
+          w: (screen.width < 700 ?
+            screen.width * 0.95 : screen.width * 0.5),
+          h: (screen.height < 500 ?
+            screen.height * 0.95 : screen.height * 0.5),
+          x: (screen.width < 700 ? '2%' : '25%'),
+          y: (screen.height < 500 ? '2%' : '25%'),
+        }
+      );
+      /*set movable false to prevent dialog from docking,
+      by setting this we can able to move the dialog but can't dock it
+      in to the frame. e.g: can't dock it in to properties and other tabs. */
+      setTimeout(function() {
+        new_panel.moveable(false);
+      }, 0);
+
+      body.removeChild(el);
+
+      return new_panel;
+    },
+    registerUtilityPanel: function() {
+      var w = pgBrowser.docker,
+        p = w.findPanels('utility_props');
+
+      if (p && p.length == 1)
+        return;
+
+      var events = {};
+      events[wcDocker.EVENT.RESIZE_ENDED] = function() {
+        var $container = this.$container.find('.obj_properties').first(),
+          v = $container.data('obj-view');
+
+        if (v && v.model && v.model) {
+          v.model.trigger(
+            'pg-browser-resized', {
+              'view': v,
+              'panel': this,
+              'container': $container,
+            });
+
+        }
+      };
+
+      p = new pgBrowser.Panel({
+        name: 'utility_props',
+        showTitle: true,
+        isCloseable: true,
+        isPrivate: true,
+        isLayoutMember: false,
+        canMaximise: true,
+        elContainer: true,
+        content: '<div class="obj_properties container-fluid h-100"><div role="status" class="pg-panel-message">' + gettext('Please wait while we fetch information ...') + '</div></div>',
+        onCreate: function(myPanel, $container) {
+          $container.addClass('pg-no-overflow');
+        },
+        events: events,
+      });
+      p.load(pgBrowser.docker);
+    },
     register_node_panel: function() {
       var w = pgBrowser.docker,
         p = w.findPanels('node_props');

web/pgadmin/browser/static/js/utility_view.jsx

@@ -0,0 +1,108 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import pgAdmin from 'sources/pgadmin';
+import getApiInstance from 'sources/api_instance';
+import {getHelpUrl, getEPASHelpUrl} from 'pgadmin.help';
+import SchemaView from 'sources/SchemaView';
+import 'wcdocker';
+
+/* The entry point for rendering React based view in properties, called in node.js */
+export function getUtilityView(schema, treeNodeInfo, actionType, formType, container, containerPanel, onSave, extraData, saveBtnName, urlBase, sqlHelpUrl, helpUrl) {
+  let serverInfo = treeNodeInfo && ('server' in treeNodeInfo) &&
+      pgAdmin.Browser.serverInfo && pgAdmin.Browser.serverInfo[treeNodeInfo.server._id];
+  let inCatalog = treeNodeInfo && ('catalog' in treeNodeInfo);
+  const api = getApiInstance();
+  const url = ()=>{
+    return urlBase;
+  };
+  const confirmOnReset = pgAdmin.Browser.get_preferences_for_module('browser').confirm_on_properties_close;
+
+  /* on save button callback, promise required */
+  const onSaveClick = (isNew, data)=>new Promise((resolve, reject)=>{
+    return api({
+      url: url(),
+      method: isNew ? 'POST' : 'PUT',
+      data: Object.assign({}, data, extraData),
+    }).then((res)=>{
+      /* Don't warn the user before closing dialog */
+      resolve(res.data);
+      onSave && onSave(res.data, containerPanel);
+      containerPanel.close();
+    }).catch((err)=>{
+      reject(err);
+    });
+  });
+
+  /* Callback for help button */
+  const onHelp = (isSqlHelp=false, isNew=false)=>{
+    if(isSqlHelp) {
+      let server = treeNodeInfo.server;
+      let url = pgAdmin.Browser.utils.pg_help_path;
+      let fullUrl = '';
+
+      if (server.server_type == 'ppas') {
+        fullUrl = getEPASHelpUrl(server.version);
+      } else {
+        if (sqlHelpUrl == '') {
+          fullUrl = getHelpUrl(url, sqlHelpUrl, server.version);
+        } else if (sqlHelpUrl != '') {
+          fullUrl = getHelpUrl(url, sqlHelpUrl, server.version);
+        } else {
+          if (isNew) {
+            fullUrl = getHelpUrl(url, sqlHelpUrl, server.version);
+          } else {
+            fullUrl = getHelpUrl(url, sqlHelpUrl, server.version);
+          }
+        }
+      }
+
+      window.open(fullUrl, 'postgres_help');
+    } else {
+      window.open(helpUrl, 'pgadmin_help');
+    }
+  };
+
+  /* All other useful details can go with this object */
+  const viewHelperProps = {
+    mode: actionType,
+    serverInfo: serverInfo ? {
+      type: serverInfo.server_type,
+      version: serverInfo.version,
+    }: undefined,
+    inCatalog: inCatalog,
+  };
+
+  let _schema = schema;
+
+  /* Fire at will, mount the DOM */
+  ReactDOM.render(
+    <SchemaView
+      formType={formType}
+      schema={_schema}
+      viewHelperProps={viewHelperProps}
+      customSaveBtnName={saveBtnName}
+      onSave={onSaveClick}
+      onClose={()=>containerPanel.close()}
+      onHelp={onHelp}
+      onDataChange={()=>{
+      }}
+      confirmOnCloseReset={confirmOnReset}
+      hasSQL={false}
+      disableSqlHelp={sqlHelpUrl == undefined || sqlHelpUrl == ''}
+      disableDialogHelp={helpUrl == undefined || helpUrl == ''}
+    />, container);
+}
+
+/* When switching from normal node to collection node, clean up the React mounted DOM */
+export function removeNodeView(container) {
+  ReactDOM.unmountComponentAtNode(container);
+}