1) Port the file/storage manager to React. Fixes #7313

2) Allow users to delete files/folders from the storage manager. Fixes #4607
3) Allow users to search within the file/storage manager. Fixes #7389
4) Fixed an issue where new folders cannot be created in the save dialog. Fixes #7524

web/pgadmin/tools/erd/static/js/erd_tool/index.js

@@ -17,6 +17,9 @@ import Alertify from 'pgadmin.alertifyjs';
 import pgWindow from 'sources/window';
 import pgAdmin from 'sources/pgadmin';
 
+import ModalProvider from '../../../../../static/js/helpers/ModalProvider';
+import Theme from '../../../../../static/js/Theme';
+
 export default class ERDTool {
   constructor(container, params) {
     this.container = document.querySelector(container);
@@ -37,13 +40,17 @@ export default class ERDTool {
     });
 
     ReactDOM.render(
-      <BodyWidget
-        params={this.params}
-        getDialog={getDialog}
-        pgWindow={pgWindow}
-        pgAdmin={pgAdmin}
-        panel={panel}
-        alertify={Alertify} />,
+      <Theme>
+        <ModalProvider>
+          <BodyWidget
+            params={this.params}
+            getDialog={getDialog}
+            pgWindow={pgWindow}
+            pgAdmin={pgAdmin}
+            panel={panel}
+            alertify={Alertify} />
+        </ModalProvider>
+      </Theme>,
       this.container
     );
   }

web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx

@@ -27,6 +27,7 @@ import 'wcdocker';
 import Theme from '../../../../../../static/js/Theme';
 import TableSchema from '../../../../../../browser/server_groups/servers/databases/schemas/tables/static/js/table.ui';
 import Notify from '../../../../../../static/js/helpers/Notifier';
+import { ModalContext } from '../../../../../../static/js/helpers/ModalProvider';
 
 /* Custom react-diagram action for keyboard events */
 export class KeyboardShortcutAction extends Action {
@@ -61,6 +62,7 @@ export class KeyboardShortcutAction extends Action {
 
 /* The main body container for the ERD */
 export default class BodyWidget extends React.Component {
+  static contextType = ModalContext;
   constructor() {
     super();
     this.state = {
@@ -214,8 +216,6 @@ export default class BodyWidget extends React.Component {
       backgroundPosition: '0px 0px',
     });
 
-    this.props.pgAdmin.Browser.Events.on('pgadmin-storage:finish_btn:select_file', this.openFile, this);
-    this.props.pgAdmin.Browser.Events.on('pgadmin-storage:finish_btn:create_file', this.saveFile, this);
     this.props.pgAdmin.Browser.onPreferencesChange('erd', () => {
       this.setState({
         preferences: this.props.pgWindow.pgAdmin.Browser.get_preferences_for_module('erd'),
@@ -468,11 +468,10 @@ export default class BodyWidget extends React.Component {
 
   onLoadDiagram() {
     var params = {
-      'supported_types': ['pgerd'], // file types allowed
+      'supported_types': ['*','pgerd'], // file types allowed
       'dialog_type': 'select_file', // open select file dialog
     };
-    this.props.pgAdmin.FileManager.init();
-    this.props.pgAdmin.FileManager.show_dialog(params);
+    this.props.pgAdmin.Tools.FileManager.show(params, this.openFile.bind(this), null, this.context);
   }
 
   openFile(fileName) {
@@ -501,13 +500,12 @@ export default class BodyWidget extends React.Component {
       this.saveFile(this.state.current_file);
     } else {
       var params = {
-        'supported_types': ['pgerd'],
+        'supported_types': ['*','pgerd'],
         'dialog_type': 'create_file',
         'dialog_title': 'Save File',
         'btn_primary': 'Save',
       };
-      this.props.pgAdmin.FileManager.init();
-      this.props.pgAdmin.FileManager.show_dialog(params);
+      this.props.pgAdmin.Tools.FileManager.show(params, this.saveFile.bind(this), null, this.context);
     }
   }
 

web/pgadmin/tools/erd/static/js/erd_tool_hook.js

@@ -10,7 +10,7 @@
 define([
   'sources/pgadmin', 'pgadmin.tools.erd/erd_tool', 'pgadmin.browser',
   'pgadmin.browser.server.privilege', 'pgadmin.node.database', 'pgadmin.node.primary_key',
-  'pgadmin.node.foreign_key', 'pgadmin.browser.datamodel', 'pgadmin.file_manager',
+  'pgadmin.node.foreign_key', 'pgadmin.browser.datamodel', 'pgadmin.tools.file_manager',
 ], function(
   pgAdmin, ERDToolModule
 ) {