Fixed an issue where schema diff tool is not loading preferences on start. #7017

docs/en_US/release_notes_8_1.rst

@@ -39,3 +39,4 @@ Bug fixes
   | `Issue #6984 <https://github.com/pgadmin-org/pgadmin4/issues/6984>`_ -  Fixed an issue where the Vacuum option INDEX_CLEANUP have an incorrect value ('AUTO') for database versions < 14.
   | `Issue #6989 <https://github.com/pgadmin-org/pgadmin4/issues/6989>`_ -  Fixed an issue where the pgAdmin page went blank when clicking the delete button in the User Management dialog.
   | `Issue #7000 <https://github.com/pgadmin-org/pgadmin4/issues/7000>`_ -  Ensure that correct timezone is set for Docker deployments.
+  | `Issue #7017 <https://github.com/pgadmin-org/pgadmin4/issues/7017>`_ -  Fixed an issue where schema diff tool is not loading preferences on start.

web/pgadmin/static/js/helpers/withStandardTabInfo.jsx

@@ -32,9 +32,9 @@ export default function withStandardTabInfo(Component, tabId) {
 
       const onTabActive = _.debounce(()=>{
         if(layoutDocker.isTabVisible(tabId)) {
-          !isActive && setIsActive(true);
+          setIsActive(true);
         } else {
-          isActive && setIsActive(false);
+          setIsActive(false);
         }
       }, 100);
 

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

@@ -20,7 +20,7 @@ import ModalProvider from '../../../../static/js/helpers/ModalProvider';
 import SchemaDiffComponent from './components/SchemaDiffComponent';
 import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
 import { NotifierProvider } from '../../../../static/js/helpers/Notifier';
-import usePreferences from '../../../../preferences/static/js/store';
+import usePreferences, { listenPreferenceBroadcast } from '../../../../preferences/static/js/store';
 import pgAdmin from 'sources/pgadmin';
 import { PgAdminContext } from '../../../../static/js/BrowserComponent';
 
@@ -100,7 +100,9 @@ export default class SchemaDiff {
     return true;
   }
 
-  load(container, trans_id) {
+  async load(container, trans_id) {
+    await listenPreferenceBroadcast();
+
     ReactDOM.render(
       <Theme>
         <PgAdminContext.Provider value={pgAdmin}>

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

@@ -6,7 +6,6 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 
 import React, { useContext, useState } from 'react';
@@ -77,12 +76,11 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
         container
         direction="row"
         alignItems="center"
-        key={_.uniqueId('c')}
       >
-        <Grid item lg={2} md={2} sm={2} xs={2} className={classes.inputLabel} key={_.uniqueId('c')}>
+        <Grid item lg={2} md={2} sm={2} xs={2} className={classes.inputLabel}>
           <Typography id={label}>{label}</Typography>
         </Grid>
-        <Grid item lg={4} md={4} sm={4} xs={4} className={classes.inputLabel} key={_.uniqueId('c')}>
+        <Grid item lg={4} md={4} sm={4} xs={4} className={classes.inputLabel}>
           <InputSelect
             options={serverList}
             onChange={changeServer}
@@ -96,7 +94,7 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
           ></InputSelect>
         </Grid>
 
-        <Grid item lg={3} md={3} sm={3} xs={3} className={classes.inputLabel} key={_.uniqueId('c')}>
+        <Grid item lg={3} md={3} sm={3} xs={3} className={classes.inputLabel}>
           <InputSelect
             options={databaseList}
             onChange={changeDatabase}
@@ -111,7 +109,7 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
           ></InputSelect>
         </Grid>
 
-        <Grid item lg={3} md={3} sm={3} xs={3} className={classes.inputLabel} key={_.uniqueId('c')}>
+        <Grid item lg={3} md={3} sm={3} xs={3} className={classes.inputLabel}>
           <InputSelect
             options={schemaList}
             onChange={changeSchema}
@@ -133,9 +131,9 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
 
 InputComponent.propTypes = {
   label: PropTypes.string,
-  serverList: PropTypes.array, 
+  serverList: PropTypes.array,
-  databaseList:PropTypes.array, 
+  databaseList:PropTypes.array,
-  schemaList:PropTypes.array, 
+  schemaList:PropTypes.array,
   diff_type:PropTypes.number,
   selectedSid: PropTypes.number,
   selectedDid: PropTypes.number,

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

@@ -715,9 +715,8 @@ export function SchemaDiffCompare({ params }) {
           container
           direction="row"
           alignItems="center"
-          key={_.uniqueId('c')}
         >
-          <Grid item lg={7} md={7} sm={10} xs={10} key={_.uniqueId('c')}>
+          <Grid item lg={7} md={7} sm={10} xs={10}>
             <InputComponent
               label={gettext('Select Source')}
               serverList={sourceGroupServerList}
@@ -729,7 +728,7 @@ export function SchemaDiffCompare({ params }) {
               diff_type={TYPE.SOURCE}
             ></InputComponent>
           </Grid>
-          <Grid item lg={5} md={5} sm={2} xs={2} key={_.uniqueId('c')} className={classes.helpBtn}>
+          <Grid item lg={5} md={5} sm={2} xs={2} className={classes.helpBtn}>
             <PgButtonGroup size="small">
               <PgIconButton data-test='schema-diff-help' title={gettext('Help')} icon={<HelpIcon />} onClick={onHelpClick} />
             </PgButtonGroup>
@@ -739,9 +738,8 @@ export function SchemaDiffCompare({ params }) {
           container
           direction="row"
           alignItems="center"
-          key={_.uniqueId('c')}
         >
-          <Grid item lg={7} md={7} sm={10} xs={10} key={_.uniqueId('c')}>
+          <Grid item lg={7} md={7} sm={10} xs={10}>
             <InputComponent
               label={gettext('Select Target')}
               serverList={sourceGroupServerList}
@@ -754,7 +752,7 @@ export function SchemaDiffCompare({ params }) {
             ></InputComponent>
           </Grid>
 
-          <Grid item lg={5} md={5} sm={12} xs={12} key={_.uniqueId('c')} className={classes.diffBtn}>
+          <Grid item lg={5} md={5} sm={12} xs={12} className={classes.diffBtn}>
             <SchemaDiffButtonComponent
               sourceData={{
                 'sid': selectedSourceSid,

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

@@ -59,7 +59,7 @@ export default function SchemaDiffComponent({params}) {
     api: api,
     modal: modal,
     preferences_schema_diff: preferencesStore.getPreferencesForModule('schema_diff'),
-  }), [preferencesStore]);
+  }), []);
 
   registerUnload();