Fixed 'ternary operators should not be nested' code smell.

web/pgadmin/browser/static/js/browser.js

@@ -701,12 +701,18 @@ define('pgadmin.browser', [
             }
 
             let get_menuitem_obj = function(_m) {
+              let enable = _m.enable;
+              if(_m.enable == '') {
+                enable = true;
+              } else if(_.isString(_m.enable) && _m.enable.toLowerCase() == 'false') {
+                enable = false;
+              }
               return new MenuItem({
                 name: _m.name, label: _m.label, module: _m.module,
                 category: _m.category, callback: _m.callback,
                 priority: _m.priority, data: _m.data, url: _m.url || '#',
                 target: _m.target, icon: _m.icon,
-                enable: (_m.enable == '' ? true : (_.isString(_m.enable) && _m.enable.toLowerCase() == 'false') ? false : _m.enable),
+                enable,
                 node: _m.node, checked: _m.checked, below: _m.below,
               });
             };

web/pgadmin/browser/static/js/quick_search/trigger_search.js

@@ -12,6 +12,32 @@ import {onlineHelpSearch} from './online_help';
 import {menuSearch} from './menuitems_help';
 import $ from 'jquery';
 import gettext from 'sources/gettext';
+import PropTypes from 'prop-types';
+
+function HelpArticleContents({isHelpLoading, isMenuLoading, helpSearchResult}) {
+  return (isHelpLoading && !(isMenuLoading??true)) ? (
+    <div>
+      <div className='help-groups'>
+        <span className='fa fa-question-circle'></span>
+          &nbsp;HELP ARTICLES
+        {Object.keys(helpSearchResult.data).length > 10
+          ? '(10 of ' + Object.keys(helpSearchResult.data).length + ')'
+          : '(' + Object.keys(helpSearchResult.data).length + ')'
+        }
+        { Object.keys(helpSearchResult.data).length > 10
+          ? <a href={helpSearchResult.url} className='pull-right no-padding' target='_blank' rel='noreferrer'>
+          Show all &nbsp;<span className='fas fa-external-link-alt' ></span></a> : ''
+        }
+      </div>
+      <div className='pad-12'><div className="search-icon">{gettext('Searching...')}</div></div>
+    </div>) : '';
+}
+
+HelpArticleContents.propTypes = {
+  helpSearchResult: PropTypes.object,
+  isHelpLoading: PropTypes.bool,
+  isMenuLoading: PropTypes.bool
+};
 
 export function Search() {
   const wrapperRef = useRef(null);
@@ -180,6 +206,10 @@ export function Search() {
 
   useOutsideAlerter(wrapperRef);
 
+  const showLoader = (loading) => {
+    return loading ? <div className='pad-12'><div className="search-icon">{gettext('Searching...')}</div></div> : '';
+  };
+
   return (
     <div id='quick-search-container' onClick={setSearchTerm}></div>,
     <ul id='quick-search-container' ref={wrapperRef} className='test' role="menu">
@@ -208,7 +238,7 @@ export function Search() {
 
 
                     {refactorMenuItems(menuSearchResult.data)}
-                  </div> : ( (isMenuLoading) ? (<div className='pad-12'><div className="search-icon">{gettext('Searching...')}</div></div>) : '')}
+                  </div> :  showLoader(isMenuLoading)}
 
                 {(menuSearchResult.data.length == 0 && menuSearchResult.fetched && !(isMenuLoading??true)) ? (<div className='pad-12 no-results'><span className='fa fa-info-circle'></span> {gettext('No search results')}</div>):''}
 
@@ -228,22 +258,8 @@ export function Search() {
                     })}
 
                     {(Object.keys(helpSearchResult.data).length == 0) ? (<div className='pad-12 no-results'><span className='fa fa-info-circle'></span> {gettext('No search results')}</div>):''}
-                  </div> : ( (isHelpLoading && !(isMenuLoading??true)) ? (
+
-                    <div>
+                  </div> : <HelpArticleContents isHelpLoading={isHelpLoading} isMenuLoading={isMenuLoading} helpSearchResult={helpSearchResult} /> }
-                      <div className='help-groups'>
-                        <span className='fa fa-question-circle'></span>
-                          &nbsp;HELP ARTICLES
-                        {Object.keys(helpSearchResult.data).length > 10
-                          ? '(10 of ' + Object.keys(helpSearchResult.data).length + ')'
-                          : '(' + Object.keys(helpSearchResult.data).length + ')'
-                        }
-                        { Object.keys(helpSearchResult.data).length > 10
-                          ? <a href={helpSearchResult.url} className='pull-right no-padding' target='_blank' rel='noreferrer'>
-                          Show all &nbsp;<span className='fas fa-external-link-alt' ></span></a> : ''
-                        }
-                      </div>
-                      <div className='pad-12'><div className="search-icon">{gettext('Searching...')}</div></div>
-                    </div>) : '')}
               </div>
             </div>
           </div>

web/pgadmin/dashboard/static/js/Dashboard.jsx

@@ -786,6 +786,27 @@ export default function Dashboard({
     );
   };
 
+  const showDefaultContents = () => {
+    return (
+      sid && !props.serverConnected ? (
+        <Box className={classes.dashboardPanel}>
+          <div className={classes.emptyPanel}>
+            <EmptyPanelMessage text={msg}/>
+          </div>
+        </Box>
+      ) : (
+        <WelcomeDashboard
+          pgBrowser={pgBrowser}
+          node={node}
+          itemData={nodeData}
+          item={item}
+          sid={sid}
+          did={did}
+        />
+      )
+    );
+  };
+
   return (
     <>
       {sid && props.serverConnected ? (
@@ -854,22 +875,7 @@ export default function Dashboard({
             )}
           </Box>
         </Box>
-      ) : sid && !props.serverConnected ? (
+      ) : showDefaultContents() }
-        <Box className={classes.dashboardPanel}>
-          <div className={classes.emptyPanel}>
-            <EmptyPanelMessage text={msg}/>
-          </div>
-        </Box>
-      ) : (
-        <WelcomeDashboard
-          pgBrowser={pgBrowser}
-          node={node}
-          itemData={nodeData}
-          item={item}
-          sid={sid}
-          did={did}
-        />
-      )}
     </>
   );
 }

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

@@ -120,6 +120,9 @@ const useStyles = makeStyles((theme)=>({
 
 function DataTableHeader({headerGroups}) {
   const classes = useStyles();
+  const sortIcon = (isDesc) => {
+    return isDesc ? ' 🔽' : ' 🔼';
+  };
   return (
     <div className={classes.tableContentWidth}>
       {headerGroups.map((headerGroup, hi) => (
@@ -129,11 +132,7 @@ function DataTableHeader({headerGroups}) {
               <div {...(column.sortable ? column.getSortByToggleProps() : {})} className={clsx(classes.tableCell, classes.tableCellHeader)}>
                 {column.render('Header')}
                 <span>
-                  {column.isSorted
+                  {column.isSorted ? sortIcon(column.isSortedDesc) : ''}
-                    ? column.isSortedDesc
-                      ? ' 🔽'
-                      : ' 🔼'
-                    : ''}
                 </span>
               </div>
               {!column.disableResizing &&

web/pgadmin/static/js/components/PgTable.jsx

@@ -213,6 +213,17 @@ IndeterminateCheckbox.propTypes = {
 };
 
 const ROW_HEIGHT = 35;
+
+function SortIcon ({column}) {
+  if (column.isSorted) {
+    return column.isSortedDesc ? <KeyboardArrowDownIcon style={{fontSize: '1.2rem'}} /> : <KeyboardArrowUpIcon style={{fontSize: '1.2rem'}} />;
+  }
+  return '';
+}
+
+SortIcon.propTypes = {
+  column: PropTypes.object
+};
 export default function PgTable({ columns, data, isSelectRow, caveTable=true, schema, ExpandedComponent, sortOptions, tableProps, ...props }) {
   // Use the state and functions returned from useTable to build your UI
   const classes = useStyles();
@@ -476,11 +487,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, sc
                     >
                       {column.render('Header')}
                       <span>
-                        {column.isSorted
+                        <SortIcon column={column} />
-                          ? column.isSortedDesc
-                            ? <KeyboardArrowDownIcon style={{fontSize: '1.2rem'}} />
-                            : <KeyboardArrowUpIcon style={{fontSize: '1.2rem'}} />
-                          : ''}
                       </span>
                     </div>
                     {column.resizable && (

web/pgadmin/static/js/pgadmin.js

@@ -22,7 +22,11 @@ define([], function() {
         _f = 'px' === _c ? 1 : d[_c + 'toPx'],
         _u = /r?em/i;
       if (_f || _u.test(_c) && !_p){
-        _t = _f ? _t : 'rem' === _c ? i : 'fontSize' === _r ? +t.parentNode || _t : _t;
+        if ('rem' === _c) {
+          _t = i;
+        }
+        _t = 'fontSize' === _r ? +t.parentNode || _t : _t;
+        // _t = _f ? _t : 'rem' === _c ? i : 'fontSize' === _r ? +t.parentNode || _t : _t;
         _f = _f || parseFloat(a(_t, 'fontSize'));
         _m = parseFloat(_e) * _f;
       }
@@ -46,7 +50,15 @@ define([], function() {
         _u = 4;
 
       _n = _t.style['pixel' + _e.charAt(0).toUpperCase() + _e.slice(1)];
-      _o = m ? m(_t)[_e] : (_n) ? _n + 'px' : 'fontSize' === _e ? r(_t, '1em', 'left', 1) + 'px' : _t.currentStyle[_e];
+      if (m) {
+        _o = m(_t)[_e];
+      } else {
+        if (_n) {
+          _o = _n + 'px'; 
+        } else {
+          _o = 'fontSize' === _e ? r(_t, '1em', 'left', 1) + 'px' : _t.currentStyle[_e];
+        }
+      }
       _i = (_o.match(s) || [])[2];
 
       if ('%' === _i && p)