Port Dependent, dependencies, statistics panel to React. Fixes #7016

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/templates/rules/css/rule.css

@@ -1,6 +1,5 @@
 .icon-rule{
   background-image: url('{{ url_for('NODE-rule.static', filename='img/rule.svg') }}') !important;
-  border-radius: 10px;
   background-size: 20px !important;
   background-repeat: no-repeat;
   align-content: center;
@@ -11,7 +10,6 @@
 
 .icon-rule-bad{
   background-image: url('{{ url_for('NODE-rule.static', filename='img/rule-bad.svg') }}') !important;
-  border-radius: 10px;
   background-size: 20px !important;
   background-repeat: no-repeat;
   align-content: center;

web/pgadmin/browser/static/js/node_ajax.js

@@ -12,6 +12,25 @@ import getApiInstance from '../../../static/js/api_instance';
 import {generate_url} from 'sources/browser/generate_url';
 import pgAdmin from 'sources/pgadmin';
 
+/* It generates the URL based on collection node selected */
+export function generateCollectionURL(item, type) {
+  var opURL = {
+    'properties': 'obj',
+    'children': 'nodes',
+    'drop': 'obj',
+  };
+  let nodeObj= this;
+  var collectionPickFunction = function (treeInfoValue, treeInfoKey) {
+    return (treeInfoKey != nodeObj.type);
+  };
+  var treeInfo = pgAdmin.Browser.tree.getTreeNodeHierarchy(item);
+  var actionType = type in opURL ? opURL[type] : type;
+  return generate_url(
+    pgAdmin.Browser.URL, treeInfo, actionType, nodeObj.node,
+    collectionPickFunction
+  );
+}
+
 /* It generates the URL based on tree node selected */
 export function generateNodeUrl(treeNodeInfo, actionType, itemNodeData, withId, jumpAfterNode) {
   let opURL = {

web/pgadmin/browser/static/js/panel.js

@@ -7,6 +7,8 @@
 //
 //////////////////////////////////////////////////////////////
 
+import { getPanelView, removePanelView } from './panel_view';
+
 define(
   ['underscore', 'sources/pgadmin', 'jquery', 'wcdocker'],
   function(_, pgAdmin, $) {
@@ -127,6 +129,19 @@ define(
                     myPanel.on(ev, that.handleVisibility.bind(myPanel, ev));
                   });
               }
+
+              pgBrowser.Events.on('pgadmin-browser:tree:selected', () => {
+
+                if(myPanel.isVisible()) {
+                  removePanelView($container[0]);
+                  getPanelView(
+                    pgBrowser.tree,
+                    $container[0],
+                    pgBrowser,
+                    myPanel._type
+                  );
+                }
+              });
             },
           });
         }
@@ -193,26 +208,43 @@ define(
       handleVisibility: function(eventName) {
         // Supported modules
         let type_module = {
-          'dashboard': pgAdmin.Dashboard,
-          'statistics': pgBrowser.NodeStatistics,
-          'dependencies': pgBrowser.NodeDependencies,
-          'dependents': pgBrowser.NodeDependents,
+          dashboard: pgAdmin.Dashboard,
         };
-
         let module = type_module[this._type];
-        if(_.isUndefined(module))
-          return;
+        if (_.isNull(pgBrowser.tree)) return;
 
-        if(_.isUndefined(module.toggleVisibility))
-          return;
+        let selectedPanel = pgBrowser.docker.findPanels(this._type)[0];
+        let isPanelVisible = selectedPanel.isVisible();
+        var $container = selectedPanel
+          .layout()
+          .scene()
+          .find('.pg-panel-content');
 
-        if (eventName == 'panelClosed') {
-          /* Pass the closed flag also */
-          module.toggleVisibility.call(module, false, true);
-        } else if (eventName == 'panelVisibilityChanged') {
-          module.toggleVisibility.call(module, pgBrowser.docker.findPanels(this._type)[0].isVisible(), false);
+        if (this._type === 'dashboard') {
+          if (eventName == 'panelClosed') {
+            module.toggleVisibility.call(module, false, true);
+          } else if (eventName == 'panelVisibilityChanged') {
+            module.toggleVisibility.call(
+              module,
+              pgBrowser.docker.findPanels(this._type)[0].isVisible(),
+              false
+            );
+          }
         }
-      },
+
+        if (isPanelVisible) {
+          if (eventName == 'panelClosed') {
+            removePanelView($container[0]);
+          } else if (eventName == 'panelVisibilityChanged') {
+            getPanelView(
+              pgBrowser.tree,
+              $container[0],
+              pgBrowser,
+              this._type
+            );
+          }
+        }
+      }
 
     });
 

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

@@ -0,0 +1,77 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2022, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Theme from 'sources/Theme';
+import Dependencies from '../../../misc/dependencies/static/js/Dependencies';
+import Dependents from '../../../misc/dependents/static/js/Dependents';
+import Statistics from '../../../misc/statistics/static/js/Statistics';
+
+/* The entry point for rendering React based view in properties, called in node.js */
+export function getPanelView(
+  tree,
+  container,
+  pgBrowser,
+  panelType
+) {
+  let item = tree.selected(),
+    nodeData = item && tree.itemData(item),
+    node = item && nodeData && pgBrowser.Nodes[nodeData._type],
+    treeNodeInfo = pgBrowser.tree.getTreeNodeHierarchy(item);
+
+
+  if (panelType == 'statistics') {
+    ReactDOM.render(
+      <Theme>
+        <Statistics
+          treeNodeInfo={treeNodeInfo}
+          pgBrowser={pgBrowser}
+          nodeData={nodeData}
+          node={node}
+          item={item}
+        />
+      </Theme>,
+      container
+    );
+  }
+  if (panelType == 'dependencies') {
+    ReactDOM.render(
+      <Theme>
+        <Dependencies
+          treeNodeInfo={treeNodeInfo}
+          pgBrowser={pgBrowser}
+          nodeData={nodeData}
+          node={node}
+          item={item}
+        />
+      </Theme>,
+      container
+    );
+  }
+  if (panelType == 'dependents') {
+    ReactDOM.render(
+      <Theme>
+        <Dependents
+          treeNodeInfo={treeNodeInfo}
+          pgBrowser={pgBrowser}
+          nodeData={nodeData}
+          node={node}
+          item={item}
+        />
+      </Theme>,
+      container
+    );
+  }
+}
+
+/* When switching from normal node to collection node, clean up the React mounted DOM */
+export function removePanelView(container) {
+  ReactDOM.unmountComponentAtNode(container);
+}