Merge pull request #2208 from thostetler/fix-myads-dropdown

adsabs · Sep 17, 2021 · 0133794 · 0133794
2 parents eb7ef4d + 6243be2
commit 0133794
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 74 deletions.
diff --git a/grunt/copy.js b/grunt/copy.js
@@ -19,6 +19,12 @@ module.exports = function(grunt) {
           dest: 'src/libs/react-bootstrap.js',
         },
 
+        // react-aria-menubutton
+        {
+          src: 'node_modules/react-aria-menubutton/umd/ReactAriaMenuButton.js',
+          dest: 'src/libs/react-aria-menubutton.js',
+        },
+
         // @hookform/resolvers
         {
           src:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,8 +43,9 @@
     "persist-js": "^0.3.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
+    "react-aria-menubutton": "^7.0.3",
     "react-async": "^10.0.1",
-    "react-bootstrap": "^0.33.0",
+    "react-bootstrap": "^0.33.1",
     "react-data-table-component": "^6.11.7",
     "react-dom": "^16.12.0",
     "react-flexview": "^5.0.0",

diff --git a/src/config/discovery.config.js b/src/config/discovery.config.js
@@ -293,6 +293,10 @@ require.config({
       'https://unpkg.com/select2@4.0.3/dist/js/select2.min',
       'libs/select2/select2',
     ],
+    'react-aria-menubutton': [
+      'https://unpkg.com/react-aria-menubutton@7.0.3/umd/ReactAriaMenuButton',
+      'libs/react-aria-menubutton',
+    ],
     'react-hook-form': [
       'https://unpkg.com/react-hook-form@6.11.0/dist/index.umd.production.min',
       'libs/react-hook-form',
@@ -476,6 +480,8 @@ require.config({
         'sha384-clksQEsrkq4U3jNhSd+pCTsDFvPnSxN2xr0WUy2LOXFxC8KvqinvNJJ3656K5Tkf',
       select2:
         'sha384-222hzbb8Z8ZKe6pzP18nTSltQM3PdcAwxWKzGOKOIF+Y3bROr5n9zdQ8yTRHgQkQ',
+      'react-aria-menubutton':
+        'sha384-sAiCfhNvllSt31QXulF/DbYmp8k6C5WIdSygBF7QC7wK5h8mnwxrN1fsEV0K8H+Z',
       'react-hook-form':
         'sha384-o00KobsI/OBvRsqSR+XM/cniIcEZDOEDS+fEtCVrU4fdh90ysgmIQZZ3TXBGEw/H',
       'react-is':

diff --git a/src/js/react/MyAdsDashboard/components/ActionsDropdown.jsx.js b/src/js/react/MyAdsDashboard/components/ActionsDropdown.jsx.js
@@ -1,10 +1,11 @@
 /* eslint-disable no-script-url */
-define(['react', 'react-bootstrap', 'prop-types'], function(
-  React,
-  { Dropdown, MenuItem, Label },
-  PropTypes
-) {
-  const renderRunButtons = (item, onSelect) => {
+define([
+  'react',
+  'react-bootstrap',
+  'react-aria-menubutton',
+  'prop-types',
+], function(React, { Label }, { Button, Wrapper, Menu, MenuItem }, PropTypes) {
+  const renderRunButtons = (item) => {
     let labels = [];
     if (item.type === 'template') {
       if (item.template === 'arxiv') {
@@ -24,14 +25,14 @@ define(['react', 'react-bootstrap', 'prop-types'], function(
     } else {
       labels = ['Search'];
     }
-    return labels.map((l, i) => (
+    return labels.map((label, i) => (
       <MenuItem
-        href="javascript:void(0);"
-        onSelect={onSelect}
-        aria-label={`Search: ${l}`}
-        eventKey={i}
+        key={label}
+        text={label}
+        value={{ type: 'runquery', queryKey: i }}
+        className="menuitem"
       >
-        <i className="fa fa-search fa-fw" aria-hidden="true" /> {l}
+        <i className="fa fa-search fa-fw" aria-hidden="true" /> {label}
       </MenuItem>
     ));
   };
@@ -45,51 +46,89 @@ define(['react', 'react-bootstrap', 'prop-types'], function(
     disable,
     dropup,
   }) => {
-    let allowEdit = true;
-
     // is a general notification, disallow editing
-    if (item.type === 'query') {
-      allowEdit = false;
-    }
+    const allowEdit = item.type !== 'query';
+
+    const handleSelection = ({ type, queryKey }) => {
+      switch (type) {
+        case 'toggleactive':
+          return onToggleActive(item);
+        case 'edit':
+          return onEdit(item);
+        case 'delete':
+          return onDelete(item);
+        case 'runquery':
+          return onRunQuery(item, queryKey);
+        default:
+      }
+    };
 
     return (
-      <Dropdown
-        disabled={disable}
-        dropup={dropup}
-        pullRight
-        id={`actions-dropdown-${item.id}`}
+      <Wrapper
+        onSelection={handleSelection}
+        className="react-aria-menubutton__wrapper"
       >
-        <Dropdown.Toggle>
-          <i className="fa fa-cog" aria-hidden="true" /> Actions
-        </Dropdown.Toggle>
-        <Dropdown.Menu style={{ overflow: 'visible !important' }}>
-          <MenuItem header>View in search results page</MenuItem>
-          {renderRunButtons(item, (queryKey) => onRunQuery(item, queryKey))}
-          <MenuItem divider />
-          <MenuItem header>Actions</MenuItem>
-          <MenuItem
-            href="javascript:void(0);"
-            onClick={() => onToggleActive(item)}
-          >
-            <div className="label-group">
-              <Label bsStyle={item.active ? 'success' : 'default'}>
-                ENABLED
-              </Label>
-              <Label bsStyle={item.active ? 'default' : 'danger'}>
-                DISABLED
-              </Label>
-            </div>
-          </MenuItem>
-          {allowEdit && (
-            <MenuItem href="javascript:void(0);" onClick={() => onEdit(item)}>
-              <i className="fa fa-pencil fa-fw" aria-hidden="true" /> Edit
+        <Button
+          className={`btn btn-default ${disable ? 'disabled' : ''}`}
+          disabled={disable}
+        >
+          <i className="fa fa-cog" aria-hidden="true" /> Actions{' '}
+          <i className="fa fa-caret-down" aria-hidden="true" />
+        </Button>
+        <Menu>
+          <ul className="react-aria-menubutton__menu">
+            <span
+              key="query-header"
+              aria-hidden="true"
+              className="menuitem__label"
+            >
+              View in search results page
+            </span>
+            {renderRunButtons(item)}
+            <hr key="divider" />
+            <span
+              key="actions-header"
+              aria-hidden="true"
+              className="menuitem__label"
+            >
+              Actions
+            </span>
+            <MenuItem
+              key="toggler"
+              text="toggle"
+              className="menuitem"
+              value={{ type: 'toggleactive' }}
+            >
+              <div className="label-group">
+                <Label bsStyle={item.active ? 'success' : 'default'}>
+                  ENABLED
+                </Label>
+                <Label bsStyle={item.active ? 'default' : 'danger'}>
+                  DISABLED
+                </Label>
+              </div>
+            </MenuItem>
+            {allowEdit && (
+              <MenuItem
+                key="edit"
+                text="edit"
+                className="menuitem"
+                value={{ type: 'edit' }}
+              >
+                <i className="fa fa-pencil fa-fw" aria-hidden="true" /> Edit
+              </MenuItem>
+            )}
+            <MenuItem
+              key="delete"
+              text="delete"
+              className="menuitem"
+              value={{ type: 'delete' }}
+            >
+              <i className="fa fa-trash fa-fw" aria-hidden="true" /> Delete
             </MenuItem>
-          )}
-          <MenuItem href="javascript:void(0);" onClick={() => onDelete(item)}>
-            <i className="fa fa-trash fa-fw" aria-hidden="true" /> Delete
-          </MenuItem>
-        </Dropdown.Menu>
-      </Dropdown>
+          </ul>
+        </Menu>
+      </Wrapper>
     );
   };
 

diff --git a/src/js/react/MyAdsDashboard/components/Dashboard.jsx.js b/src/js/react/MyAdsDashboard/components/Dashboard.jsx.js
@@ -32,8 +32,8 @@ define([
   SortableHeader.defaultProps = {
     active: false,
     children: null,
-    direction: PropTypes.string,
-    onClick: PropTypes.func,
+    direction: '',
+    onClick: () => {},
   };
 
   SortableHeader.propTypes = {
@@ -364,6 +364,7 @@ define([
 
                 return (
                   <tr
+                    key={id}
                     className={
                       (activeItem === id ? 'info ' : '') +
                       (item.active ? '' : 'inactive')

diff --git a/src/styles/sass/ads-sass/utility.scss b/src/styles/sass/ads-sass/utility.scss
@@ -88,7 +88,6 @@
 }
 
 .s-explore-close-container {
-
 }
 
 .s-disabled {
@@ -99,7 +98,6 @@
   min-height: 100%;
   height: 100%;
   background-color: $darker-background;
-  overflow-y: hidden;
 }
 
 //get rid of this later
@@ -270,8 +268,8 @@
 button.text-link {
   background: none;
   text-align: left;
-  border: 1px dotted rgba(0, 0, 0, 0.3); 
-  border-radius: 2px;;
+  border: 1px dotted rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
   margin-right: 4px;
 }