Continue fixing multiple UI issues found when testing wcDocker changes. #6479

docs/en_US/release_notes_7_9.rst

@@ -39,5 +39,9 @@ Bug fixes
   | `Issue #6487 <https://github.com/pgadmin-org/pgadmin4/issues/6487>`_ -  Fixed restoration of query tool database connection after dropping and re-creating the database with the same name.
   | `Issue #6602 <https://github.com/pgadmin-org/pgadmin4/issues/6602>`_ -  Fix an issue where the default server-group is being deleted if the load-server json file contains no servers.
   | `Issue #6720 <https://github.com/pgadmin-org/pgadmin4/issues/6720>`_ -  Fix an issue of the incorrect format (no indent) of SQL stored functions/procedures.
+  | `Issue #6769 <https://github.com/pgadmin-org/pgadmin4/issues/6769>`_ -  Server config information in the about dialog should be only visible to admin users.
   | `Issue #6784 <https://github.com/pgadmin-org/pgadmin4/issues/6784>`_ -  Fixed an issue where Schema Diff does not work when the user language is set to any language other than English in Preferences.
+  | `Issue #6817 <https://github.com/pgadmin-org/pgadmin4/issues/6817>`_ -  Fixed the query generated when creating subscription where copy_data parameter was missing. 
+  | `Issue #6820 <https://github.com/pgadmin-org/pgadmin4/issues/6820>`_ -  Ensure backup/restore/maintenance works with invalid pgpass file parameter.
   | `Issue #6874 <https://github.com/pgadmin-org/pgadmin4/issues/6874>`_ -  Fix an issue where the browser window stuck on spinning with an Oauth user without email.
+  | `Issue #6877 <https://github.com/pgadmin-org/pgadmin4/issues/6877>`_ -  Remove the max length of 255 from password exec command in server configuration dialog.

web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx

@@ -422,7 +422,7 @@ export function StorageWrapper(props) {
             return label;
           },
           label: function (context) {
-            return (context.dataset?.label ?? 'Total space: ') + toPrettySize(context.raw);
+            return `${context.dataset?.label ?? gettext('Total space')}: ${toPrettySize(context.raw)}`;
           },
         },
       },

web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx

@@ -67,6 +67,7 @@ const useStyles = makeStyles((theme) =>
       display: 'flex',
       flexDirection: 'column',
       height: '100%',
+      minHeight: 0,
     },
     preferences: {
       borderColor: theme.otherVars.borderColor,

web/pgadmin/static/js/QuickSearch/index.jsx

@@ -83,7 +83,7 @@ function HelpArticleContents({isHelpLoading, isMenuLoading, helpSearchResult}) {
     <div>
       <div className={classes.helpGroup}>
         <span className='fa fa-question-circle'></span>
-          &nbsp;HELP ARTICLES
+          &nbsp;HELP ARTICLES&nbsp;
         {Object.keys(helpSearchResult.data).length > 10
           ? '(10 of ' + Object.keys(helpSearchResult.data).length + ')'
           : '(' + Object.keys(helpSearchResult.data).length + ')'
@@ -301,8 +301,7 @@ export default function QuickSearch({closeModal}) {
                 <div>
                   <div className={classes.helpGroup}>
                     <span className='fa fa-question-circle'></span> &nbsp;{gettext('HELP ARTICLES')} {Object.keys(helpSearchResult.data).length > 10 ?
-                      <span>(10 of {Object.keys(helpSearchResult.data).length} )
+                      <span> (10 of {Object.keys(helpSearchResult.data).length})</span>:
-                      </span>:
                       '(' + Object.keys(helpSearchResult.data).length + ')'}&nbsp;
                     { !helpSearchResult.clearedPooling ? <CircularProgress style={{height: '18px', width: '18px'}} /> :''}
                     { Object.keys(helpSearchResult.data).length > 10 ? <a href={helpSearchResult.url} className={classes.showAll} target='_blank' rel='noreferrer'>{gettext('Show all')} &nbsp;<span className='fas fa-external-link-alt' ></span></a> : ''}

web/pgadmin/static/js/SchemaView/FormView.jsx

@@ -50,6 +50,10 @@ const useStyles = makeStyles((theme)=>({
   },
   sqlTabInput: {
     border: 0,
+  },
+  nonTabPanel: {
+    padding: 0,
+    background: 'inherit',
   }
 }));
 
@@ -453,12 +457,15 @@ export default function FormView({
     let contentClassName = [stateUtils.formErr.message ? classes.errorMargin : null];
     return (
       <>
-        <Box height="100%" display="flex" flexDirection="column" className={clsx(className, contentClassName)} ref={formRef} data-test="form-view">
+        <Box height="100%" display="flex" flexDirection="column" className={clsx(className)} ref={formRef} data-test="form-view">
-          {Object.keys(finalTabs).map((tabName)=>{
+          <TabPanel value={tabValue} index={0} classNameRoot={classes.nonTabPanel}
-            return (
+            className={clsx(contentClassName)}>
-              <React.Fragment key={tabName}>{finalTabs[tabName]}</React.Fragment>
+            {Object.keys(finalTabs).map((tabName)=>{
-            );
+              return (
-          })}
+                <React.Fragment key={tabName}>{finalTabs[tabName]}</React.Fragment>
+              );
+            })}
+          </TabPanel>
         </Box>
       </>);
   }

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

@@ -25,7 +25,7 @@ import { parseApiError } from '../api_instance';
 
 const AUTO_HIDE_DURATION = 3000;  // In milliseconds
 
-const FinalNotifyContent = React.forwardRef(({children}, ref) => {
+export const FinalNotifyContent = React.forwardRef(({children}, ref) => {
   return <SnackbarContent style= {{justifyContent:'end', maxWidth: '700px'}} ref={ref}>{children}</SnackbarContent>;
 });
 FinalNotifyContent.displayName = 'FinalNotifyContent';

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

@@ -25,7 +25,7 @@ export default function withStandardTabInfo(Component, tabId) {
     useEffect(()=>{
       const i = pgAdmin.Browser.tree?.selected();
       if(i) {
-        setNodeInfo([i, pgAdmin.Browser.tree.itemData(i)]);
+        setNodeInfo([true, i, pgAdmin.Browser.tree.itemData(i)]);
       }
       setIsActive(layoutDocker.isTabVisible(tabId));
 
@@ -41,7 +41,7 @@ export default function withStandardTabInfo(Component, tabId) {
         setNodeInfo([true, item, data]);
       });
       let deregisterTreeUpdate = pgAdmin.Browser.Events.on('pgadmin-browser:tree:updated', (item, data)=>{
-        setNodeInfo([item, data]);
+        setNodeInfo([true, item, data]);
       });
       let deregisterActive = layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.ACTIVE, onTabActive);
       // if there is any dock changes to the tab and it appears to be active/inactive

web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx

@@ -46,6 +46,7 @@ const useStyles = makeStyles((theme) =>
       display: 'flex',
       flexDirection: 'column',
       height: '100%',
+      minHeight: 0,
     },
     actionBtn: {
       alignItems: 'flex-start',

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

@@ -22,6 +22,7 @@ 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';
+import { PgAdminContext } from '../../../../static/js/BrowserComponent';
 
 
 export default class SchemaDiff {
@@ -102,10 +103,12 @@ export default class SchemaDiff {
   load(container, trans_id) {
     ReactDOM.render(
       <Theme>
-        <ModalProvider>
+        <PgAdminContext.Provider value={pgAdmin}>
-          <NotifierProvider pgAdmin={pgAdmin} pgWindow={pgWindow} />
+          <ModalProvider>
-          <SchemaDiffComponent params={{ transId: trans_id, pgAdmin: pgWindow.pgAdmin }}></SchemaDiffComponent>
+            <NotifierProvider pgAdmin={pgAdmin} pgWindow={pgWindow} />
-        </ModalProvider>
+            <SchemaDiffComponent params={{ transId: trans_id, pgAdmin: pgWindow.pgAdmin }}></SchemaDiffComponent>
+          </ModalProvider>
+        </PgAdminContext.Provider>
       </Theme>,
       container
     );

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

@@ -310,13 +310,17 @@ export function SchemaDiffCompare({ params }) {
       try {
         setCompareOptions(compareParams);
         socket = await openSocket('/schema_diff');
-        socket.on('compare_status', res=>{
+        const compareStatus = _.debounce(res=>{
           let msg = res.compare_msg;
           msg = msg + gettext(` (this may take a few minutes)... ${Math.round(res.diff_percentage)} %`);
           setLoaderText(msg);
-        });
+        }, 250);
+        socket.on('compare_status', compareStatus);
         resData = await socketApiGet(socket, socketEndpoint, url_params);
         setShowResultGrid(true);
+        // stop the listeners
+        socket.off('compare_status', compareStatus);
+        compareStatus.cancel();
         setLoaderText(null);
         setFilterOptions(filterParams);
         getResultGridData(resData, filterParams);

web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx

@@ -704,7 +704,7 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
   };
 
   const onManageMacros = useCallback(()=>{
-    const onClose = ()=>LayoutDocker.close(docker.current, 'manage-macros');
+    const onClose = ()=>docker.current.close('manage-macros');
     docker.current.openDialog({
       id: 'manage-macros',
       title: gettext('Manage Macros'),
@@ -723,7 +723,7 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
   }, [qtState.preferences.browser]);
 
   const onFilterClick = useCallback(()=>{
-    const onClose = ()=>LayoutDocker.close(docker.current, 'filter-dialog');
+    const onClose = ()=>docker.current.close('filter-dialog');
     docker.current.openDialog({
       id: 'filter-dialog',
       title: gettext('Sort/Filter options'),