[DCJ-286] Add bulk User operations to dropdown on SO Console

src/components/SimpleTable.jsx

@@ -83,7 +83,7 @@ const DataRows = ({rowData, baseStyle, columnHeaders, rowWrapper = ({renderedRow
   return rowData.map((row, index) => {
     const id = rowData[index][0].id;
     const mapKey = id || `noId-index-${index}`;
-    if (rowData[index][0].label === "display-names") {
+    if (rowData[index][0].striped) {
       baseStyle.backgroundColor = index % 2 === 0 ? 'white' : '#e2e8f4';
     }
     const renderedRow = (

src/libs/ajax/DAA.js

@@ -1,6 +1,5 @@
-import * as fp from 'lodash/fp';
 import fileDownload from 'js-file-download';
-import { getApiUrl, fetchOk } from '../ajax';
+import { getApiUrl } from '../ajax';
 import { Config } from '../config';
 import axios from 'axios';
 
@@ -52,7 +51,7 @@ export const DAA = {
     const url = `${await getApiUrl()}/api/daa/bulk/user/${userId}`;
     const res = await axios.delete(url, { ...Config.authOpts(), data: daaList });
     return res.data;
-  }, 
+  },
 
   getDaaFileById: async (daaId, daaFileName) => {
     const authOpts = Object.assign(Config.authOpts(), { responseType: 'blob' });

src/pages/signing_official_console/DAACell.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Checkbox } from '@mui/material';
+import { DAA } from '../../libs/ajax/DAA';
+import { Notifications } from '../../libs/utils';
+
+export default function DAACell(rowDac, researcher, institutionId, daas, refreshResearchers, setResearchers) {
+  const id = researcher && (researcher.userId || researcher.email);
+  const libraryCards = researcher && researcher.libraryCards;
+  const card = libraryCards && libraryCards.find(card => card.institutionId === institutionId);
+  const daaIds = researcher && card && card.daaIds;
+  const filteredDaas = daaIds && daas.filter(daa => daaIds.includes(daa.daaId));
+  const hasDacId = filteredDaas && filteredDaas.some(daa => daa.dacs.some(dac => dac.dacId === rowDac.dacId));
+
+  const handleClick = async (researcher, specificDac, filteredDaas, checked, refreshResearchers, setResearchers) => {
+    const daaId = filteredDaas.find(daa => daa.dacs.some(dac => dac.dacId === specificDac.dacId))?.daaId;
+    if (!checked) {
+      try {
+        await DAA.createDaaLcLink(daaId, researcher.userId);
+        Notifications.showSuccess({text: `Approved access to ${specificDac.name} to user: ${researcher.displayName}`});
+        refreshResearchers(setResearchers);
+      } catch(error) {
+        Notifications.showError({text: `Error approving access to ${specificDac.name} to user: ${researcher.displayName}`});
+      }
+    } else {
+      try {
+        await DAA.deleteDaaLcLink(daaId, researcher.userId);
+        Notifications.showSuccess({text: `Removed approval of access to ${specificDac.name} to user: ${researcher.displayName}`});
+        refreshResearchers(setResearchers);
+      } catch(error) {
+        Notifications.showError({text: `Error removing approval of access to ${specificDac.name} to user: ${researcher.displayName}`});
+      }
+    }
+  };
+
+  return {
+    isComponent: true,
+    id,
+    label: 'lc-button',
+    data: (
+      <div>
+        <Checkbox checked={hasDacId} onClick={() => handleClick(researcher,rowDac, daas, hasDacId, refreshResearchers, setResearchers)}/>
+      </div>
+    ),
+  };
+}

src/pages/signing_official_console/ManageResearcherDAAsTable.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { Checkbox } from '@mui/material';
 import { Styles } from '../../libs/theme';
 import { isEmpty } from 'lodash/fp';
 import SimpleTable from '../../components/SimpleTable';
@@ -12,9 +11,10 @@ import {
   getSearchFilterFunctions,
   searchOnFilteredList
 } from '../../libs/utils';
-import { DAA } from '../../libs/ajax/DAA';
 import {User} from '../../libs/ajax/User';
 import { USER_ROLES } from '../../libs/utils';
+import ManageUsersDropdown from './ManageUsersDropdown';
+import DAACell from './DAACell';
 
 //Styles specific to this table
 const styles = {
@@ -50,28 +50,6 @@ let columnHeaderFormat = {
 
 const researcherFilterFunction = getSearchFilterFunctions().signingOfficialResearchers;
 
-const handleClick = async (researcher, specificDac, filteredDaas, checked, refreshResearchers, setResearchers) => {
-  if (!checked) {
-    try {
-      const daaId = filteredDaas.find(daa => daa.dacs.some(dac => dac.dacId === specificDac.dacId))?.daaId;
-      await DAA.createDaaLcLink(daaId, researcher.userId);
-      Notifications.showSuccess({text: `Approved access to ${specificDac.name} to user: ${researcher.displayName}`});
-      refreshResearchers(setResearchers);
-    } catch(error) {
-      Notifications.showError({text: `Error approving access to ${specificDac.name} to user: ${researcher.displayName}`});
-    }
-  } else {
-    try {
-      const daaId = filteredDaas.find(daa => daa.dacs.some(dac => dac.dacId === specificDac.dacId))?.daaId;
-      await DAA.deleteDaaLcLink(daaId, researcher.userId);
-      Notifications.showSuccess({text: `Removed approval of access to ${specificDac.name} to user: ${researcher.displayName}`});
-      refreshResearchers(setResearchers);
-    } catch(error) {
-      Notifications.showError({text: `Error removing approval of access to ${specificDac.name} to user: ${researcher.displayName}`});
-    }
-  }
-};
-
 const refreshResearchers = async (setResearchers) => {
   const researcherList = await User.list(USER_ROLES.signingOfficial);
   // the construction of this list is currently a work-around because our endpoint in the backend
@@ -84,46 +62,26 @@ const refreshResearchers = async (setResearchers) => {
   setResearchers(researcherObjectList);
 };
 
-const DAACell = (
-  rowDac,
-  researcher,
-  institutionId,
-  daas,
-  refreshResearchers,
-  setResearchers
-) => {
-  const id = researcher && (researcher.userId || researcher.email);
-  const libraryCards = researcher && researcher.libraryCards;
-  const card = libraryCards && libraryCards.find(card => card.institutionId === institutionId);
-  const daaIds = researcher && card && card.daaIds;
-  const filteredDaas = daaIds && daas.filter(daa => daaIds.includes(daa.daaId));
-  const hasDacId = filteredDaas && filteredDaas.some(daa => daa.dacs.some(dac => dac.dacId === rowDac.dacId));
-
-  return {
-    isComponent: true,
-    id,
-    label: 'lc-button',
-    data: (
-      <div>
-        <Checkbox checked={hasDacId} onClick={() => handleClick(researcher,rowDac, daas, hasDacId, refreshResearchers, setResearchers)}/>
-      </div>
-    ),
-  };
-};
-
-
-
-const displayNameCell = (displayName, email, id) => {
+const displayNameCell = (displayName, email, id, daas, setResearchers) => {
   return {
     data: (
       <>
-        <div>{displayName || 'Invite sent, pending registration'}</div>
-        <div><a href={`mailto:${email}`}>{email || '- -'}</a></div>
+        <li className="dropdown" style={{ listStyleType: 'none' }}>
+          <a role="button" data-toggle="dropdown">
+            <div id="dacUser" style={{ color: 'black' }}>
+              {displayName || 'Invite sent, pending registration'}
+              <span className="caret caret-margin" style={{color: '#337ab7', float: 'right', marginTop: '15px'}}></span>
+              <small><a href={`mailto:${email}`}>{email || '- -'}</a></small>
+            </div>
+          </a>
+          <ManageUsersDropdown daas={daas} refreshResearchers={refreshResearchers} setResearchers={setResearchers} moreData={{id: id, name: displayName}}/>
+        </li>
       </>
     ),
     id,
     style: {},
-    label: 'display-names'
+    label: 'display-names',
+    striped: true
   };
 };
 
@@ -219,7 +177,7 @@ export default function ManageResearcherDAAsTable(props) {
       const email = researcher.email || libraryCard.userEmail;
       const id = researcher.userId || email;
       return [
-        displayNameCell(displayName, email, id),
+        displayNameCell(displayName, email, id, daas, setResearchers),
         ...dacs.map(dac => DAACell(dac, researcher, signingOfficial.institutionId, daas, refreshResearchers, setResearchers))
       ];
     });

src/pages/signing_official_console/ManageUsersDropdown.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { Button } from '@mui/material';
+import { DAA } from '../../libs/ajax/DAA';
+import { Notifications } from '../../libs/utils';
+
+export default function ManageUsersDropdown(props) {
+  const [applyAll, setApplyAll] = useState(false);
+  const [removeAll, setRemoveAll] = useState(false);
+  const {daas, refreshResearchers, setResearchers, moreData} = props;
+
+  const handleApplyAllChange = (event) => {
+    setApplyAll(event.target.checked);
+    setRemoveAll(!event.target.checked);
+  };
+
+  const handleRemoveAllChange = (event) => {
+    setRemoveAll(event.target.checked);
+    setApplyAll(!event.target.checked);
+  };
+
+  const handleApplyAll = async () => {
+    const daaList = { 'daaList': daas.map(daa => daa.daaId) };
+    if (applyAll) {
+      try {
+        await DAA.bulkAddDaasToUser(moreData.id, daaList);
+        Notifications.showSuccess({text: `Approved access to request data from all DACs to user: ${moreData.name}`});
+        refreshResearchers(setResearchers);
+      } catch(error) {
+        Notifications.showError({text: `Error approving access to request data from all DACs to user: ${moreData.name}`});
+      }
+    } else if (removeAll) {
+      try {
+        await DAA.bulkRemoveDaasFromUser(moreData.id, daaList);
+        Notifications.showSuccess({text: `Removed approval of access to request data from all DACs from user: ${moreData.name}`});
+        refreshResearchers(setResearchers);
+      } catch(error) {
+        Notifications.showError({text: `Error removing approval of access to request data from all DACs from user: ${moreData.name}`});
+      }
+    }
+  };
+
+  return (
+    <ul className="dropdown-menu" role="menu" style={{ padding: '20px', textTransform:'none'}}>
+      <th id="link_signOut" style={{display:'flex', padding: '5px', textAlign: 'left'}}>
+        <strong>Agreement Actions</strong>
+      </th>
+      <form>
+        <li style={{paddingTop: '5px', paddingBottom: '5px'}}>
+          <label style={{fontWeight: 'normal', whiteSpace: 'nowrap'}}>
+            <input type="radio" name="users" value="apply" checked={applyAll} onChange={handleApplyAllChange}/>
+            &nbsp;&nbsp;Apply all agreements to this user
+          </label>
+        </li>
+        <li style={{paddingTop: '5px', paddingBottom: '5px'}}>
+          <label style={{fontWeight: 'normal', whiteSpace: 'nowrap' }}>
+            <input type="radio" name="users" value="remove" checked={removeAll} onChange={handleRemoveAllChange}/>
+            &nbsp;&nbsp;Remove all agreements from this user
+          </label>
+        </li>
+      </form>
+      <li style={{paddingTop: '5px', paddingBottom: '5px'}}>
+        <Button style={{
+          fontSize: '15px',
+          fontWeight: 'normal',
+          fontFamily: 'Montserrat',
+          border: '1px solid #0948B7',
+          borderRadius: '5px',
+          height: '40px',
+          marginRight: '1em',
+          cursor: 'pointer',
+          color: '#0948B7',
+          padding: '10px 20px',
+          textTransform: 'none'
+        }} onClick={() => handleApplyAll()}>Apply</Button>
+      </li>
+    </ul>
+  );
+}