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/preferences/static/js/components/PreferencesComponent.jsx

@@ -21,13 +21,12 @@ import CloseSharpIcon from '@material-ui/icons/CloseSharp';
 import HelpIcon from '@material-ui/icons/HelpRounded';
 import SaveSharpIcon from '@material-ui/icons/SaveSharp';
 import clsx from 'clsx';
-import Notify from '../../../../static/js/helpers/Notifier';
 import pgAdmin from 'sources/pgadmin';
 import { DefaultButton, PgIconButton, PrimaryButton } from '../../../../static/js/components/Buttons';
 import BaseUISchema from 'sources/SchemaView/base_schema.ui';
 import { getBinaryPathSchema } from '../../../../browser/server_groups/servers/static/js/binary_path.ui';
-import { _set_dynamic_tab } from '../../../../tools/sqleditor/static/js/show_query_tool';
 import { getBrowserAccesskey } from '../../../../static/js/components/ShortcutTitle';
+import usePreferences from '../store';
 
 class PreferencesSchema extends BaseUISchema {
   constructor(initValues = {}, schemaFields = []) {
@@ -168,6 +167,7 @@ export default function PreferencesComponent({ ...props }) {
   const [loadTree, setLoadTree] = React.useState(0);
   const api = getApiInstance();
   const firstTreeElement = React.useRef('');
+  const preferencesStore = usePreferences();
 
   useEffect(() => {
     const pref_url = url_for('preferences.index');
@@ -230,7 +230,7 @@ export default function PreferencesComponent({ ...props }) {
       // set Preferences schema
       prefSchema.current = new PreferencesSchema(preferencesValues, preferencesData);
     }).catch((err) => {
-      Notify.alert(err);
+      pgAdmin.Browser.notifier.alert(err);
     });
   }, []);
   function setPreferences(node, subNode, nodeData, preferencesValues, preferencesData) {
@@ -328,8 +328,8 @@ export default function PreferencesComponent({ ...props }) {
     element.canDelete = false;
     element.canEdit = false;
     element.editable = false;
-    if (pgAdmin.Browser.get_preference(node.label.toLowerCase(), element.name)?.value) {
-      let temp = pgAdmin.Browser.get_preference(node.label.toLowerCase(), element.name).value;
+    if (preferencesStore.getPreferences(node.label.toLowerCase(), element.name)?.value) {
+      let temp = preferencesStore.getPreferences(node.label.toLowerCase(), element.name).value;
       preferencesValues[element.id] = temp;
     } else {
       preferencesValues[element.id] = element.value;
@@ -547,44 +547,19 @@ export default function PreferencesComponent({ ...props }) {
         return s.name=='show_system_objects'||s.name=='show_empty_coll_nodes'||s.name.startsWith('show_node_')||s.name=='hide_shared_server'||s.name=='show_user_defined_templates';
       });
       let requires_refresh = false;
-      /* Find the modules changed */
-      let modulesChanged = {};
       for (const [key] of Object.entries(data.current)) {
-        let pref = pgAdmin.Browser.get_preference_for_id(Number(key));
-
-        if (pref['name'] == 'dynamic_tabs') {
-          _set_dynamic_tab(pgAdmin.Browser, !pref['value']);
-        }
-
-        if (!modulesChanged[pref.module]) {
-          modulesChanged[pref.module] = true;
-        }
-
+        let pref = preferencesStore.getPreferenceForId(Number(key));
         requires_refresh = checkRefreshRequired(pref, requires_refresh);
-
-        // Sync the lock layout menu with preferences
-        if (pref.name == 'lock_layout') {
-          let fileMenu = pgAdmin.Browser.MainMenus.find((menu) => menu.name == 'file');
-          let layoutSubMenu = fileMenu['menuItems'].find(menu => menu.name == 'mnu_locklayout');
-          layoutSubMenu['menu_items'].forEach(item => {
-            if (item.name === 'mnu_lock_'+save_data[0]['value']) {
-              item.checked = true;
-            } else {
-              item.checked = false;
-            }
-          });
-          pgAdmin.Browser.Events.trigger('pgadmin:nw-refresh-menu-item', 'lock_layout');
-        }
       }
 
       if (requiresTreeRefresh) {
-        Notify.confirm(
+        pgAdmin.Browser.notifier.confirm(
           gettext('Object explorer refresh required'),
           gettext('An object explorer refresh is required. Do you wish to refresh it now?'),
           function () {
             pgAdmin.Browser.tree.destroy({
               success: function () {
-                pgAdmin.Browser.initializeBrowserTree(pgAdmin.Browser);
+                // pgAdmin.Browser.initializeBrowserTree(pgAdmin.Browser);
                 return true;
               },
             });
@@ -598,7 +573,7 @@ export default function PreferencesComponent({ ...props }) {
       }
 
       if (requires_refresh) {
-        Notify.confirm(
+        pgAdmin.Browser.notifier.confirm(
           gettext('Refresh required'),
           gettext('A page refresh is required to apply the theme. Do you wish to refresh the page now?'),
           function () {
@@ -612,10 +587,10 @@ export default function PreferencesComponent({ ...props }) {
         );
       }
       // Refresh preferences cache
-      pgAdmin.Browser.cache_preferences(modulesChanged);
+      preferencesStore.cache();
       props.closeModal();
     }).catch((err) => {
-      Notify.alert(err.response.data);
+      pgAdmin.Browser.notifier.alert(err.response.data);
     });
   }
 

web/pgadmin/preferences/static/js/preferences.js

@@ -10,8 +10,8 @@
 import React from 'react';
 import gettext from 'sources/gettext';
 import PreferencesComponent from './components/PreferencesComponent';
-import Notify from '../../../static/js/helpers/Notifier';
 import PreferencesTree from './components/PreferencesTree';
+import pgAdmin from 'sources/pgadmin';
 
 export default class Preferences {
   static instance;
@@ -50,7 +50,7 @@ export default class Preferences {
   show() {
 
     // Render Preferences component
-    Notify.showModal(gettext('Preferences'), (closeModal) => {
+    pgAdmin.Browser.notifier.showModal(gettext('Preferences'), (closeModal) => {
       return <PreferencesComponent
         renderTree={(prefTreeData) => {
           // Render preferences tree component

web/pgadmin/preferences/static/js/store.js

@@ -0,0 +1,81 @@
+import {create} from 'zustand';
+import getApiInstance from '../../../static/js/api_instance';
+import url_for from 'sources/url_for';
+import pgAdmin from 'sources/pgadmin';
+
+const usePreferences = create((set, get)=>({
+  data: {},
+  version: 0,
+  isLoading: true,
+  failed: false,
+  getPreferences: (module, preference)=>{
+    return _.find(
+      get().data, {'module': module, 'name': preference}
+    );
+  },
+  getPreferencesForModule: function(module) {
+    let preferences = {};
+    _.forEach(
+      _.filter(get().data, {'module': module}),
+      (preference) => {
+        preferences[preference.name] = preference.value;
+      }
+    );
+    return preferences;
+  },
+  /* Get preference of an id, id is numeric */
+  getPreferenceForId : function(id) {
+    return _.find(get().data, {'id': id});
+  },
+  cache: async ()=>{
+    try {
+      const res = await getApiInstance().get(url_for('preferences.get_all'));
+      set({data: res.data, version: (new Date()).getTime(), isLoading: false});
+    } catch (error) {
+      set({data: {}, version: (new Date()).getTime(), isLoading: false, failed: true});
+      pgAdmin.Browser.notifier.pgRespErrorNotify(error);
+    }
+  }
+}));
+
+export default usePreferences;
+
+// Setup two way broadcast channel
+// This will help to sync preferences in iframes/tabs of Query tool, debugger, etc.
+const preferenceChangeBroadcast = new BroadcastChannel('preference-change');
+
+export function setupPreferenceBroadcast() {
+  const broadcast = (state)=>{
+    preferenceChangeBroadcast.postMessage({
+      data: state.data,
+      version: state.version,
+    });
+  };
+
+  // broadcast when state changed.
+  usePreferences.subscribe((state)=>{
+    broadcast(state);
+  });
+
+  // if asked for sync from a tab then broadcast once.
+  preferenceChangeBroadcast.onmessage = (ev)=>{
+    if(ev.data == 'sync') {
+      broadcast(usePreferences.getState());
+    }
+  };
+}
+
+export function listenPreferenceBroadcast() {
+  preferenceChangeBroadcast.onmessage = (ev)=>{
+    const currState = usePreferences.getState();
+    if(currState.version < ev.data.version) {
+      usePreferences.setState({
+        ...usePreferences.getState(),
+        ...ev.data,
+      });
+    }
+  };
+
+  // initial sync
+  preferenceChangeBroadcast.postMessage('sync');
+}