Significant changes to use ReactJS extensively.

1. Replace the current layout library wcDocker with ReactJS based rc-dock. #6479
2. Have close buttons on individual panel tabs instead of common. #2821
3. Changes in the context menu on panel tabs - Add close, close all and close others menu items. #5394
4. Allow closing all the tabs, including SQL and Properties. #4733
5. Changes in docking behaviour of different tabs based on user requests and remove lock layout menu.
6. Fix an issue where the scroll position of panels was not remembered on Firefox. #2986
7. Reset layout now will not require page refresh and is done spontaneously.
8. Use the zustand store for storing preferences instead of plain JS objects. This will help reflecting preferences immediately.
9. The above fix incorrect format (no indent) of SQL stored functions/procedures. #6720
10. New version check is moved to an async request now instead of app start to improve startup performance.
11. Remove jQuery and Bootstrap completely.
12. Replace jasmine and karma test runner with jest. Migrate all the JS test cases to jest. This will save time in writing and debugging JS tests.
13. Other important code improvements and cleanup.

web/pgadmin/tools/schema_diff/__init__.py

@@ -48,9 +48,6 @@ class SchemaDiffModule(PgAdminModule):
     def get_own_menuitems(self):
         return {}
 
-    def get_panels(self):
-        return []
-
     def get_exposed_url_endpoints(self):
         """
         Returns:

web/pgadmin/tools/schema_diff/static/js/SchemaDiffModule.js

@@ -13,15 +13,15 @@ import ReactDOM from 'react-dom';
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
 import pgWindow from 'sources/window';
-import { registerDetachEvent } from 'sources/utils';
 
-import { _set_dynamic_tab } from '../../../sqleditor/static/js/show_query_tool';
 import getApiInstance from '../../../../static/js/api_instance';
 import Theme from '../../../../static/js/Theme';
 import ModalProvider from '../../../../static/js/helpers/ModalProvider';
-import Notify from '../../../../static/js/helpers/Notifier';
 import SchemaDiffComponent from './components/SchemaDiffComponent';
-import { showRenamePanel } from '../../../../static/js/Dialogs';
+import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
+import { NotifierProvider } from '../../../../static/js/helpers/Notifier';
+import usePreferences from '../../../../preferences/static/js/store';
+import pgAdmin from 'sources/pgadmin';
 
 
 export default class SchemaDiff {
@@ -37,7 +37,6 @@ export default class SchemaDiff {
   constructor(pgAdmin, pgBrowser) {
     this.pgAdmin = pgAdmin;
     this.pgBrowser = pgBrowser;
-    this.wcDocker = window.wcDocker;
     this.api = getApiInstance();
   }
 
@@ -57,32 +56,6 @@ export default class SchemaDiff {
       enable: true,
       below: true,
     }]);
-
-    /* Create and load the new frame required for schema diff panel */
-    self.frame = new self.pgBrowser.Frame({
-      name: 'frm_schemadiff',
-      title: gettext('Schema Diff'),
-      showTitle: true,
-      isCloseable: true,
-      isRenamable: true,
-      isPrivate: true,
-      icon: 'pg-font-icon icon-compare',
-      url: 'about:blank',
-    });
-
-    /* Cache may take time to load for the first time. Keep trying till available */
-    let cacheIntervalId = setInterval(function () {
-      if (self.pgBrowser.preference_version() > 0) {
-        self.preferences = self.pgBrowser.get_preferences_for_module('schema_diff');
-        clearInterval(cacheIntervalId);
-      }
-    }, 0);
-
-    self.pgBrowser.onPreferencesChange('schema_diff', function () {
-      self.preferences = self.pgBrowser.get_preferences_for_module('schema_diff');
-    });
-
-    self.frame.load(self.pgBrowser.docker);
   }
 
   showSchemaDiffTool() {
@@ -98,15 +71,13 @@ export default class SchemaDiff {
         self.launchSchemaDiff(res.data.data);
       })
       .catch(function (error) {
-        Notify.error(gettext(`Error in schema diff initialize ${error.response.data}`));
+        pgAdmin.Browser.notifier.error(gettext(`Error in schema diff initialize ${error.response.data}`));
       });
   }
 
   launchSchemaDiff(data) {
-    let self = this;
     let panelTitle = data.panel_title,
-      trans_id = data.schemaDiffTransId,
-      panelTooltip = '';
+      trans_id = data.schemaDiffTransId;
 
     let url_params = {
         'trans_id': trans_id,
@@ -114,47 +85,25 @@ export default class SchemaDiff {
       },
       baseUrl = url_for('schema_diff.panel', url_params);
 
-    let browserPreferences = this.pgBrowser.get_preferences_for_module('browser');
+    let browserPreferences = usePreferences.getState().getPreferencesForModule('browser');
     let openInNewTab = browserPreferences.new_browser_tab_open;
-    if (openInNewTab && openInNewTab.includes('schema_diff')) {
-      window.open(baseUrl, '_blank');
-      // Send the signal to runtime, so that proper zoom level will be set.
-      setTimeout(function () {
-        self.pgBrowser.Events.trigger('pgadmin:nw-set-new-window-open-size');
-      }, 500);
-    } else {
-      this.pgBrowser.Events.once(
-        'pgadmin-browser:frame:urlloaded:frm_schemadiff',
-        function (frame) {
-          frame.openURL(baseUrl);
-        });
-      let propertiesPanel = this.pgBrowser.docker.findPanels('properties'),
-        schemaDiffPanel = this.pgBrowser.docker.addPanel('frm_schemadiff', this.wcDocker.DOCK.STACKED, propertiesPanel[0]);
 
-      registerDetachEvent(schemaDiffPanel);
-
-      // Panel Rename event
-      schemaDiffPanel.on(self.wcDocker.EVENT.RENAME, function (panel_data) {
-        self.panel_rename_event(panel_data, schemaDiffPanel, browserPreferences);
-      });
-
-      _set_dynamic_tab(this.pgBrowser, browserPreferences['dynamic_tabs']);
-      // Set panel title and icon
-      schemaDiffPanel.title('<span title="' + panelTooltip + '">' + panelTitle + '</span>');
-      schemaDiffPanel.icon('pg-font-icon icon-compare');
-      schemaDiffPanel.focus();
-
-    }
-  }
-
-  panel_rename_event(panel_data, panel) {
-    showRenamePanel(panel_data.$titleText[0].textContent, null, panel);
+    pgAdmin.Browser.Events.trigger(
+      'pgadmin:tool:show',
+      `${BROWSER_PANELS.SCHEMA_DIFF_TOOL}_${trans_id}`,
+      baseUrl,
+      null,
+      {title: panelTitle, icon: 'pg-font-icon icon-compare', manualClose: false, renamable: true},
+      Boolean(openInNewTab?.includes('schema_diff'))
+    );
+    return true;
   }
 
   load(container, trans_id) {
     ReactDOM.render(
       <Theme>
         <ModalProvider>
+          <NotifierProvider pgAdmin={pgAdmin} pgWindow={pgWindow} />
           <SchemaDiffComponent params={{ transId: trans_id, pgAdmin: pgWindow.pgAdmin }}></SchemaDiffComponent>
         </ModalProvider>
       </Theme>,

web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx

@@ -27,7 +27,7 @@ import { FILTER_NAME, SCHEMA_DIFF_EVENT } from '../SchemaDiffConstants';
 import { SchemaDiffContext, SchemaDiffEventsContext } from './SchemaDiffComponent';
 import { InputCheckbox } from '../../../../../static/js/components/FormComponents';
 import PgReactDataGrid from '../../../../../static/js/components/PgReactDataGrid';
-import Notifier from '../../../../../static/js/helpers/Notifier';
+import { usePgAdmin } from '../../../../../static/js/BrowserComponent';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -448,6 +448,7 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
   const [rootSelection, setRootSelection] = useState(false);
   const [activeRow, setActiveRow] = useState(null);
   const schemaDiffToolContext = useContext(SchemaDiffContext);
+  const pgAdmin = usePgAdmin();
 
   function checkAllChildInclude(row, tempSelectedRows) {
     let isChildAllInclude = true;
@@ -714,7 +715,7 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
           };
           eventBus.fireEvent(SCHEMA_DIFF_EVENT.TRIGGER_CHANGE_RESULT_SQL, row.ddlData);
         }).catch((err) => {
-          Notifier.alert(err.message);
+          pgAdmin.Browser.notifier.alert(err.message);
         });
       } else {
         eventBus.fireEvent(SCHEMA_DIFF_EVENT.TRIGGER_CHANGE_RESULT_SQL, {});

web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx

@@ -22,7 +22,6 @@ import Loader from 'sources/components/Loader';
 import pgWindow from 'sources/window';
 
 import { PgButtonGroup, PgIconButton } from '../../../../../static/js/components/Buttons';
-import Notifier from '../../../../../static/js/helpers/Notifier';
 import ConnectServerContent from '../../../../../static/js/Dialogs/ConnectServerContent';
 import { generateScript } from '../../../../sqleditor/static/js/show_query_tool';
 import { FILTER_NAME, SCHEMA_DIFF_EVENT, TYPE } from '../SchemaDiffConstants';
@@ -32,6 +31,7 @@ import { SchemaDiffContext, SchemaDiffEventsContext } from './SchemaDiffComponen
 import { ResultGridComponent } from './ResultGridComponent';
 import { openSocket, socketApiGet } from '../../../../../static/js/socket_instance';
 import { parseApiError } from '../../../../../static/js/api_instance';
+import { usePgAdmin } from '../../../../../static/js/BrowserComponent';
 
 const useStyles = makeStyles(() => ({
   table: {
@@ -95,16 +95,16 @@ function getGenerateScriptData(rows, selectedIds, script_array) {
   }
 }
 
-function raiseErrorOnFail(alertTitle, xhr) {
+function raiseErrorOnFail(pgAdmin, alertTitle, xhr) {
   try {
     if (_.isUndefined(xhr.response.data)) {
-      Notifier.alert(alertTitle, gettext('Unable to get the response text.'));
+      pgAdmin.Browser.notifier.alert(alertTitle, gettext('Unable to get the response text.'));
     } else {
       let err = JSON.parse(xhr.response.data);
-      Notifier.alert(alertTitle, err.errormsg);
+      pgAdmin.Browser.notifier.alert(alertTitle, err.errormsg);
     }
   } catch (e) {
-    Notifier.alert(alertTitle, gettext(e.message));
+    pgAdmin.Browser.notifier.alert(alertTitle, gettext(e.message));
   }
 }
 
@@ -143,6 +143,8 @@ export function SchemaDiffCompare({ params }) {
   const [rowDep, setRowDep] = useState({});
   const [isInit, setIsInit] = useState(true);
 
+  const pgAdmin = usePgAdmin();
+
   useEffect(() => {
     schemaDiffToolContext.api.get(url_for('schema_diff.servers')).then((res) => {
       let groupedOptions = [];
@@ -158,7 +160,7 @@ export function SchemaDiffCompare({ params }) {
 
       setSourceGroupServerList(groupedOptions);
     }).catch((err) => {
-      Notifier.alert(err.message);
+      pgAdmin.Browser.notifier.alert(err.message);
     });
   }, []);
 
@@ -282,7 +284,7 @@ export function SchemaDiffCompare({ params }) {
     }
 
     if (raiseSelectionError) {
-      Notifier.alert(gettext('Selection Error'),
+      pgAdmin.Browser.notifier.alert(gettext('Selection Error'),
         gettext('Please select the different source and target.'));
     } else {
       setLoaderText('Comparing objects... (this may take a few minutes)...');
@@ -321,7 +323,7 @@ export function SchemaDiffCompare({ params }) {
       } catch (error) {
         setLoaderText(null);
         setShowResultGrid(false);
-        Notifier.alert(gettext('Error'), parseApiError(error));
+        pgAdmin.Browser.notifier.alert(gettext('Error'), parseApiError(error));
       }
       socket?.disconnect();
     }
@@ -386,7 +388,7 @@ export function SchemaDiffCompare({ params }) {
       })
       .catch(function (xhr) {
         setLoaderText(null);
-        raiseErrorOnFail(gettext('Generate script error'), xhr);
+        raiseErrorOnFail(pgAdmin, gettext('Generate script error'), xhr);
       });
   }
 
@@ -599,7 +601,7 @@ export function SchemaDiffCompare({ params }) {
         }
       }
     }).catch((error) => {
-      Notifier.error(gettext(`Error in connect database ${error.response.data}`));
+      pgAdmin.Browser.notifier.error(gettext(`Error in connect database ${error.response.data}`));
     });
 
   };
@@ -634,7 +636,7 @@ export function SchemaDiffCompare({ params }) {
         showConnectServer(error.response?.data.result, sid, diff_type, serverList);
       });
     } catch (error) {
-      Notifier.error(gettext(`Error in connect server ${error.response.data}` ));
+      pgAdmin.Browser.notifier.error(gettext(`Error in connect server ${error.response.data}` ));
     }
   };
 

web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx

@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 
-import React, { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import {DividerBox} from 'rc-dock';
 
@@ -21,6 +21,7 @@ import { SchemaDiffCompare } from './SchemaDiffCompare';
 import EventBus from '../../../../../static/js/helpers/EventBus';
 import getApiInstance, { callFetch } from '../../../../../static/js/api_instance';
 import { useModal } from '../../../../../static/js/helpers/ModalProvider';
+import usePreferences from '../../../../../preferences/static/js/store';
 
 export const SchemaDiffEventsContext = createContext();
 export const SchemaDiffContext = createContext();
@@ -52,29 +53,15 @@ export default function SchemaDiffComponent({params}) {
   const containerRef = React.useRef(null);
   const api = getApiInstance();
   const modal = useModal();
-  const [schemaDiffState, setSchemaDiffState] = useState({
-    preferences: null
-  });
+  const preferencesStore = usePreferences();
 
   const schemaDiffContextValue = useMemo(()=> ({
     api: api,
     modal: modal,
-    preferences_schema_diff: schemaDiffState.preferences
-  }), [schemaDiffState.preferences]);
+    preferences_schema_diff: preferencesStore.getPreferencesForModule('schema_diff'),
+  }), [preferencesStore]);
 
   registerUnload();
-  useEffect(() => {
-    reflectPreferences();
-    params.pgAdmin.Browser.onPreferencesChange('schema_diff', function () {
-      reflectPreferences();
-    });
-  }, []);
-
-  const reflectPreferences = useCallback(() => {
-    setSchemaDiffState({
-      preferences: params.pgAdmin.Browser.get_preferences_for_module('schema_diff')
-    });
-  }, []);
 
   function registerUnload() {
     window.addEventListener('unload', ()=>{