Fix multiple UI and SonarQube issues found when testing wcDocker chan…

…ges. #6479
pgadmin-org · Oct 26, 2023 · 3bcac26 · 3bcac26
1 parent c5f4a56
commit 3bcac26
Show file tree

Hide file tree

Showing 32 changed files with 119 additions and 692 deletions.
diff --git a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
@@ -117,7 +117,7 @@ export default function Processes() {
           />
         </ErrorBoundary>
       )
-    }, pgAdmin.Browser.stdW.md);
+    }, pgAdmin.Browser.stdW.md, pgAdmin.Browser.stdH.md);
   }, []);
 
 

diff --git a/web/pgadmin/misc/statistics/static/js/Statistics.jsx b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
@@ -157,7 +157,6 @@ function createSingleLineStatistics(data, prettifyFields) {
   return res;
 }
 
-// {nodeData, node, treeNodeInfo, isActive, isStale, setIsStale}
 function Statistics({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStale, setIsStale }) {
   const classes = useStyles();
   const [tableData, setTableData] = React.useState([]);

diff --git a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
@@ -559,7 +559,6 @@ export default function PreferencesComponent({ ...props }) {
           function () {
             pgAdmin.Browser.tree.destroy({
               success: function () {
-                // pgAdmin.Browser.initializeBrowserTree(pgAdmin.Browser);
                 return true;
               },
             });

diff --git a/web/pgadmin/static/bundle/app.js b/web/pgadmin/static/bundle/app.js
@@ -50,21 +50,6 @@ define('app', [
   // Create menus after all modules are initialized.
   MainMenuFactory.createMainMenus();
 
-  // const menuContainerEle = document.querySelector('#main-menu-container');
-  // if(menuContainerEle) {
-  //   ReactDOM.render(
-  //     <Theme>
-  //       <AppMenuBar />
-  //     </Theme>, menuContainerEle
-  //   );
-  // }
-
-  // ReactDOM.render(
-  //   <Theme>
-  //     <ObjectBreadcrumbs pgAdmin={pgAdmin} />
-  //   </Theme>, document.querySelector('#object-breadcrumbs')
-  // );
-
   ReactDOM.render(
     <Theme>
       <BrowserComponent pgAdmin={pgAdmin} />

diff --git a/web/pgadmin/static/js/BrowserComponent.jsx b/web/pgadmin/static/js/BrowserComponent.jsx
@@ -43,7 +43,7 @@ export const defaultTabsData = [
     id: BROWSER_PANELS.DASHBOARD, title: gettext('Dashboard'), content: <Dashboard />, closable: true, group: 'main'
   },
   {
-    id: BROWSER_PANELS.PROPERTIES, title: gettext('Properties'), content: <Properties />, closable: true,
+    id: BROWSER_PANELS.PROPERTIES, title: gettext('Properties'), content: <Properties />, closable: true, group: 'main'
   },
   {
     id: BROWSER_PANELS.SQL, title: gettext('SQL'), content: <SQL />, closable: true, group: 'main'

diff --git a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
@@ -31,7 +31,7 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight}
 
   const onTextChange = (e, id) => {
     let val = e;
-    if(e && e.target) {
+    if(e?.target) {
       val = e.target.value;
     }
     setFormData((prev)=>({...prev, [id]: val}));

diff --git a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
@@ -34,7 +34,7 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO
 
   const onTextChange = (e, id) => {
     let val = e;
-    if (e && e.target) {
+    if (e?.target) {
       val = e.target.value;
     }
     setFormData((prev) => ({ ...prev, [id]: val }));

diff --git a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
@@ -29,7 +29,7 @@ export default function NamedRestoreContent({closeModal, onOK, setHeight}) {
 
   const onTextChange = (e, id) => {
     let val = e;
-    if(e && e.target) {
+    if(e?.target) {
       val = e.target.value;
     }
     setFormData((prev)=>({...prev, [id]: val}));

diff --git a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
@@ -33,7 +33,7 @@ export default function RenameTabContent({ panelId, panelDocker, closeModal}) {
 
   const onTextChange = (e, id) => {
     let val = e;
-    if (e && e.target) {
+    if (e?.target) {
       val = e.target.value;
     }
     setFormData((prev) => ({ ...prev, [id]: val }));

diff --git a/web/pgadmin/static/js/SchemaView/MappedControl.jsx b/web/pgadmin/static/js/SchemaView/MappedControl.jsx
@@ -25,7 +25,7 @@ function MappedFormControlBase({ type, value, id, onChange, className, visible,
   const name = id;
   const onTextChange = useCallback((e) => {
     let val = e;
-    if(e && e.target) {
+    if(e?.target) {
       val = e.target.value;
     }
     onChange && onChange(val);
@@ -124,7 +124,7 @@ function MappedCellControlBase({ cell, value, id, optionsLoaded, onCellChange, v
   const name = id;
   const onTextChange = useCallback((e) => {
     let val = e;
-    if (e && e.target) {
+    if (e?.target) {
       val = e.target.value;
     }
 
@@ -133,7 +133,7 @@ function MappedCellControlBase({ cell, value, id, optionsLoaded, onCellChange, v
 
   const onRadioChange = useCallback((e) => {
     let val =e;
-    if(e && e.target) {
+    if(e?.target) {
       val = e.target.checked;
     }
     onCellChange && onCellChange(val);

diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx
@@ -320,6 +320,10 @@ function getFinalTheme(baseTheme) {
           textarea: {
             fontFamily: 'inherit',
           },
+          iframe: {
+            margin: 0,
+            padding: 0,
+          },
           ...pickrOverride(baseTheme),
           ...uplotOverride(baseTheme),
           ...rcdockOverride(baseTheme),

diff --git a/web/pgadmin/static/js/UtilityView.jsx b/web/pgadmin/static/js/UtilityView.jsx
@@ -195,7 +195,7 @@ function UtilityViewContent({panelId, schema, treeNodeInfo, actionType, formType
         onHelp={onHelp}
         onDataChange={()=>{/*This is intentional (SonarQube)*/}}
         confirmOnCloseReset={confirmOnReset}
-        hasSQL={nodeObj?nodeObj.hasSQL:false && (actionType === 'create' || actionType === 'edit')}
+        hasSQL={nodeObj?.hasSQL && (actionType === 'create' || actionType === 'edit')}
         getSQLValue={getSQLValue}
         isTabView={isTabView}
         disableSqlHelp={sqlHelpUrl == undefined || sqlHelpUrl == ''}

diff --git a/web/pgadmin/static/js/components/ContextMenu.jsx b/web/pgadmin/static/js/components/ContextMenu.jsx
@@ -34,7 +34,7 @@ export default function ContextMenu({menuItems, position, onClose, label='contex
       {menuItems.length !=0 && menuItems.map((menuItem, i)=>{
         const submenus = menuItem.getMenuItems?.();
         if(submenus) {
-          return <PgSubMenu key={i} label={menuItem.label}>
+          return <PgSubMenu key={label+'-'+menuItem.label} label={menuItem.label}>
             {submenus.map((submenuItem, si)=>{
               return getPgMenuItem(submenuItem, i+'-'+si);
             })}

diff --git a/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx b/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme)=>({
     bottom: 0,
     width: 'auto',
     maxWidth: '99%',
-    zIndex: 9999,
+    zIndex: 1004,
     padding: '0.25rem 0.5rem',
     fontSize: '0.95em',
     color: theme.palette.background.default,

diff --git a/web/pgadmin/static/js/helpers/Layout/LayoutIframeTab.jsx b/web/pgadmin/static/js/helpers/Layout/LayoutIframeTab.jsx
@@ -16,20 +16,23 @@ export default function LayoutIframeTab({target, src, children}) {
     const updatePositionAndSize = () => {
       if (!selfRef.current) return;
       const rect = selfRef.current.getBoundingClientRect();
+      rect.visibility = selfRef.current.closest('#'+target).style.visibility;
 
       // Only update the iframe's position if the position has actually changed
       if (
         !lastKnownPosition ||
         rect.top !== lastKnownPosition.top ||
         rect.left !== lastKnownPosition.left ||
         rect.width !== lastKnownPosition.width ||
-        rect.height !== lastKnownPosition.height
+        rect.height !== lastKnownPosition.height ||
+        rect.visibility !== lastKnownPosition.visibility
       ) {
         iframeTarget.style.position = 'fixed'; // You can adjust this if needed
         iframeTarget.style.top = `${rect.top}px`;
         iframeTarget.style.left = `${rect.left}px`;
         iframeTarget.style.width = `${rect.width}px`;
         iframeTarget.style.height = `${rect.height}px`;
+        iframeTarget.style.display = rect.visibility == 'hidden' ? 'none' : '';
 
         lastKnownPosition = rect;
       }
@@ -45,17 +48,18 @@ export default function LayoutIframeTab({target, src, children}) {
   }, [iframeTarget]);
 
   return <>
-    <div ref={selfRef} data-target={target} style={{width: '100%', height: '100%'}}></div>
-    <Portal ref={(r)=>{
-      if(r) setIframeTarget(r.querySelector('#'+target));
-    }} container={document.querySelector('#layout-portal')}>
-      {src ?
-        <iframe src={src} id={target} style={{position: 'fixed'}} />:
-        <Frame src={src} id={target} style={{position: 'fixed'}}>
-          {children}
-        </Frame>
-      }
-    </Portal>
+    <div ref={selfRef} data-target={target} style={{width: '100%', height: '100%'}}>
+      <Portal ref={(r)=>{
+        if(r) setIframeTarget(r.querySelector('#'+target));
+      }} container={document.querySelector('#layout-portal')}>
+        {src ?
+          <iframe src={src} id={target} style={{position: 'fixed', border: 0}} />:
+          <Frame src={src} id={target} style={{position: 'fixed', border: 0}}>
+            {children}
+          </Frame>
+        }
+      </Portal>
+    </div>
   </>;
 }
 

diff --git a/web/pgadmin/static/js/helpers/Layout/index.jsx b/web/pgadmin/static/js/helpers/Layout/index.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useMemo, useEffect, useCallback } from 'react';
 import DockLayout from 'rc-dock';
 import PropTypes from 'prop-types';
 import EventBus from '../EventBus';
@@ -18,16 +18,6 @@ import _ from 'lodash';
 
 function TabTitle({id, icon, title, closable, tooltip}) {
   const layoutDocker = React.useContext(LayoutDockerContext);
-  const dynamicTabsPref = useRef(usePreferences().getPreferencesForModule('browser')?.dynamic_tabs);
-  const getMaxWidth = ()=>{
-    if(layoutDocker.isTabVisible(id)) {
-      return '100%';
-    } else if(dynamicTabsPref.current) {
-      return '100%';
-    }
-    return '125px';
-  };
-  const [maxWidth, setMaxWidth] = useState(getMaxWidth());
 
   const onContextMenu = useCallback((e)=>{
     const g = layoutDocker.find(id)?.group??'';
@@ -37,26 +27,10 @@ function TabTitle({id, icon, title, closable, tooltip}) {
     layoutDocker.eventBus.fireEvent(LAYOUT_EVENTS.CONTEXT, e, id);
   }, []);
 
-  const onTabActive = _.debounce(()=>{
-    setMaxWidth(getMaxWidth());
-  }, 100);
-
-  useEffect(()=>{
-    layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.ACTIVE, onTabActive);
-    return ()=>{
-      onTabActive.cancel();
-      layoutDocker.eventBus.deregisterListener(LAYOUT_EVENTS.ACTIVE, onTabActive);
-    };
-  }, []);
-
-  useEffect(()=>{
-    setMaxWidth(getMaxWidth());
-  }, [usePreferences().version]);
-
   return (
-    <Box display="flex" alignItems="center" title={tooltip??title} onContextMenu={onContextMenu} maxWidth={maxWidth}>
+    <Box display="flex" alignItems="center" title={tooltip??title} onContextMenu={onContextMenu} width="100%">
       {icon && <span style={{fontSize: '1rem', marginRight: '4px'}} className={icon}></span>}
-      <span style={{maxWidth: maxWidth, textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap'}} data-visible={layoutDocker.isTabVisible(id)}>{title}</span>
+      <span style={{textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap'}} data-visible={layoutDocker.isTabVisible(id)}>{title}</span>
       {closable && <PgIconButton title={gettext('Close')} icon={<CloseIcon style={{height: '0.7em'}} />} size="xs" noBorder onClick={()=>{
         layoutDocker.close(id);
       }} style={{margin: '-1px -10px -1px 0'}} />}
@@ -146,7 +120,7 @@ export class LayoutDocker {
       ...panelData,
       internal: internal,
       title: <TabTitle id={panelData.id} icon={internal.icon} title={internal.title} closable={internal.closable} tooltip={internal.tooltip} />
-    });
+    }, false);
   }
 
   setInternalAttrs(panelId, attrs) {
@@ -157,7 +131,7 @@ export class LayoutDocker {
         ...panelData.internal,
         ...attrs,
       },
-    });
+    }, false);
   }
 
   getInternalAttrs(panelId) {
@@ -328,23 +302,30 @@ export class LayoutDocker {
 
 export const LayoutDockerContext = React.createContext(new LayoutDocker(null, null));
 
+function DialogClose({panelData}) {
+  const layoutDocker = React.useContext(LayoutDockerContext);
+  // In a dialog, panelData is the data of the container panel and not the
+  // data of actual dialog tab. panelData.activeId gives the id of dialog tab.
+  return (
+    <Box display="flex" alignItems="center">
+      <PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={()=>{
+        layoutDocker.close(panelData.activeId);
+      }} style={{marginRight: '-4px'}}/>
+    </Box>
+  );
+}
+DialogClose.propTypes = {
+  panelData: PropTypes.object
+};
+
 function getDialogsGroup() {
   return {
     disableDock: true,
     tabLocked: true,
     floatable: 'singleTab',
     moreIcon: <ExpandMoreIcon style={{height: '0.9em'}} />,
     panelExtra: (panelData) => {
-      const layoutDocker = React.useContext(LayoutDockerContext);
-      // In a dialo, panelData is the data of the container panel and not the
-      // data of actual dialog tab. panelData.activeId gives the id of dialog tab.
-      return (
-        <Box display="flex" alignItems="center">
-          <PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={()=>{
-            layoutDocker.close(panelData.activeId);
-          }} style={{marginRight: '-4px'}}/>
-        </Box>
-      );
+      return <DialogClose panelData={panelData} />;
     }
   };
 }
@@ -379,6 +360,8 @@ export default function Layout({groups, noContextGroups, getLayoutInstance, layo
     ...groups,
   }), [groups]);
   const layoutDockerObj = React.useMemo(()=>new LayoutDocker(layoutId, props.defaultLayout, resetToTabPanel, noContextGroups), []);
+  const prefStore = usePreferences();
+  const dynamicTabsStyleRef = useRef();
 
   useEffect(()=>{
     layoutDockerObj.eventBus.registerListener(LAYOUT_EVENTS.REMOVE, (panelId)=>{
@@ -390,6 +373,22 @@ export default function Layout({groups, noContextGroups, getLayoutInstance, layo
     });
   }, []);
 
+  useEffect(()=>{
+    const dynamicTabs = prefStore.getPreferencesForModule('browser')?.dynamic_tabs;
+    // Add a class to set max width for non dynamic Tabs
+    if(!dynamicTabs && !dynamicTabsStyleRef.current) {
+      const css = '.dock-tab:not(div.dock-tab-active) { max-width: 180px; }',
+        head = document.head || document.getElementsByTagName('head')[0];
+
+      dynamicTabsStyleRef.current = document.createElement('style');
+      head.appendChild(dynamicTabsStyleRef.current);
+      dynamicTabsStyleRef.current.appendChild(document.createTextNode(css));
+    } else if(dynamicTabs && dynamicTabsStyleRef.current) {
+      dynamicTabsStyleRef.current.remove();
+      dynamicTabsStyleRef.current = null;
+    }
+  }, [prefStore]);
+
   const getTabMenuItems = (panelId)=>{
     const ret = [];
     if(panelId) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -117,7 +117,7 @@ export default function Processes() { @@
               />
             </ErrorBoundary>
           )
-        }, pgAdmin.Browser.stdW.md);
+        }, pgAdmin.Browser.stdW.md, pgAdmin.Browser.stdH.md);
       }, []);
@@ Expand Down @@