Moved permission checking out of the VolunteerTables and into the individual components. The components handle the "onlyMe" setting and permissions too.

Author: ocielliottc

web-ui/src/components/volunteer/VolunteerEvents.jsx

@@ -19,7 +19,12 @@ import DatePickerField from '../date-picker-field/DatePickerField';
 import ConfirmationDialog from '../dialogs/ConfirmationDialog';
 import OrganizationDialog from '../dialogs/OrganizationDialog'; // Include OrganizationDialog
 import { AppContext } from '../../context/AppContext';
-import { selectCsrfToken, selectCurrentUser, selectProfileMap } from '../../context/selectors';
+import {
+  selectCsrfToken,
+  selectCurrentUser,
+  selectProfileMap,
+  selectHasVolunteeringEventsPermission,
+} from '../../context/selectors';
 import { formatDate } from '../../helpers/datetime';
 
 const eventBaseUrl = '/services/volunteer/event';
@@ -322,6 +327,9 @@ const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
           <td>{event.hours}</td>
           <td>{event.notes}</td>
           <td>
+            {(member.id == currentUser.id ||
+              selectHasVolunteeringEventsPermission(state)) &&
+            <>
             <Tooltip title="Edit">
               <IconButton aria-label="Edit" onClick={() => editEvent(event)}>
                 <Edit />
@@ -332,6 +340,7 @@ const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
                 <Delete />
               </IconButton>
             </Tooltip>
+            </>}
           </td>
         </tr>
       );
@@ -362,9 +371,10 @@ const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
           </thead>
           <tbody>{events.map(eventRow)}</tbody>
         </table>
+        {(onlyMe || selectHasVolunteeringEventsPermission(state)) &&
         <IconButton aria-label="Add Volunteer Event" classes={{ root: 'add-button' }} onClick={addEvent}>
           <AddCircleOutline />
-        </IconButton>
+        </IconButton>}
       </div>
     );
   }, [events, organizationMap, profileMap, relationshipMap, sortAscending, sortColumn]);
@@ -536,4 +546,4 @@ const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
 
 VolunteerEvents.propTypes = propTypes;
 
-export default VolunteerEvents;
+export default VolunteerEvents;

web-ui/src/components/volunteer/VolunteerRelationships.jsx

@@ -19,7 +19,13 @@ import DatePickerField from '../date-picker-field/DatePickerField';
 import ConfirmationDialog from '../dialogs/ConfirmationDialog';
 import OrganizationDialog from '../dialogs/OrganizationDialog';
 import { AppContext } from '../../context/AppContext';
-import { selectCsrfToken, selectCurrentUser, selectProfileMap } from '../../context/selectors';
+import {
+  selectCsrfToken,
+  selectCurrentUser,
+  selectProfileMap,
+  selectHasVolunteeringRelationshipsPermission,
+  selectHasVolunteeringOrganizationsPermission,
+} from '../../context/selectors';
 import { formatDate } from '../../helpers/datetime';
 import { showError } from '../../helpers/toast';
 
@@ -269,6 +275,11 @@ const VolunteerRelationships = ({ forceUpdate = () => {}, onlyMe = false }) => {
     [sortAscending, sortColumn]
   );
 
+  const organizationOptions = Object.keys(organizationMap);
+  if (selectHasVolunteeringOrganizationsPermission(state)) {
+    organizationOptions.unshift('new');
+  }
+
   return (
     <div id="volunteer-relationships">
       {/* Table for showing relationships */}
@@ -301,6 +312,9 @@ const VolunteerRelationships = ({ forceUpdate = () => {}, onlyMe = false }) => {
                 <td>{relationship.startDate}</td>
                 <td>{relationship.endDate}</td>
                 <td>
+                  {(relationship.memberId == currentUser.id ||
+                    selectHasVolunteeringRelationshipsPermission(state)) &&
+                  <>
                   <Tooltip title="Edit">
                     <IconButton
                       aria-label="Edit"
@@ -320,17 +334,19 @@ const VolunteerRelationships = ({ forceUpdate = () => {}, onlyMe = false }) => {
                       <Delete />
                     </IconButton>
                   </Tooltip>
+                  </>}
                 </td>
               </tr>
             ))}
           </tbody>
         </table>
+        {(onlyMe || selectHasVolunteeringRelationshipsPermission(state)) &&
         <IconButton
           aria-label="Add Volunteer Relationship"
           onClick={addRelationship}
         >
           <AddCircleOutline />
-        </IconButton>
+        </IconButton>}
       </div>
 
       {/* Message below the table */}
@@ -347,7 +363,7 @@ const VolunteerRelationships = ({ forceUpdate = () => {}, onlyMe = false }) => {
           getOptionLabel={(option) => 
             option === 'new' ? 'Create a New Organization' : organizationMap[option]?.name || option
           }
-          options={['new', ...Object.keys(organizationMap)]}
+          options={organizationOptions}
           onChange={(event, value) => {
             if (value === 'new') {
               setRelationshipDialogOpen(false); // Close the relationship dialog
@@ -402,4 +418,4 @@ const VolunteerRelationships = ({ forceUpdate = () => {}, onlyMe = false }) => {
 
 VolunteerRelationships.propTypes = propTypes;
 
-export default VolunteerRelationships;
+export default VolunteerRelationships;

web-ui/src/components/volunteer/VolunteerTables.jsx

@@ -2,11 +2,6 @@ import PropTypes from 'prop-types';
 import React, { useContext, useReducer, useState } from 'react';
 import { Box, Tab, Tabs, Typography, Card, CardHeader, CardContent, Avatar } from '@mui/material';
 
-import {
-  selectHasVolunteeringEventsPermission,
-  selectHasVolunteeringRelationshipsPermission,
-  noPermission,
-} from '../../context/selectors';
 import { AppContext } from '../../context/AppContext';
 
 import Organizations from './Organizations';
@@ -50,14 +45,7 @@ const VolunteerReportPage = ({ onlyMe = false }) => {
   const [n, forceUpdate] = useReducer(n => n + 1, 0);
   const [tabIndex, setTabIndex] = useState(0);
 
-  // React requires that tabs be sequentially numbered.  Use these to ensure
-  // that each tab coinsides with the correct tab content based on the
-  // individual permissions.
-  let tabCount = 0;
-  let tabContent = 0;
-
-  return (selectHasVolunteeringEventsPermission(state) ||
-          selectHasVolunteeringRelationshipsPermission(state)) ? (
+  return (
     <Card className="volunteer-activities-card">
       <CardContent className="volunteer-tables">
         <Tabs
@@ -67,7 +55,7 @@ const VolunteerReportPage = ({ onlyMe = false }) => {
           value={tabIndex}
           variant="fullWidth"
         >
-          {selectHasVolunteeringRelationshipsPermission(state) && <Tab
+          <Tab
             label={
               <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Avatar sx={{ mr: 1 }}>
@@ -76,13 +64,13 @@ const VolunteerReportPage = ({ onlyMe = false }) => {
                 <Typography textTransform="none" variant='h5' component='h2'>Volunteer Orgs</Typography>
               </Box>
             }
-            {...a11yProps(tabCount++)}
+            {...a11yProps(0)}
             sx={{
               minWidth: '150px',
               whiteSpace: 'nowrap'
             }}
-          />}
-          {selectHasVolunteeringEventsPermission(state) && <Tab
+          />
+          <Tab
             label={
               <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <Avatar sx={{ mr: 1 }}>
@@ -91,31 +79,29 @@ const VolunteerReportPage = ({ onlyMe = false }) => {
                 <Typography textTransform="none" variant='h5' component='h2'>Events</Typography>
               </Box>
             }
-            {...a11yProps(tabCount++)}
+            {...a11yProps(1)}
             sx={{
               minWidth: '150px',
               whiteSpace: 'nowrap'
             }}
-          />}
+          />
         </Tabs>
-        {selectHasVolunteeringRelationshipsPermission(state) && <TabPanel index={tabContent++} value={tabIndex}>
+        <TabPanel index={0} value={tabIndex}>
           <VolunteerRelationships
             forceUpdate={forceUpdate}
             key={'vr' + n}
             onlyMe={onlyMe}
           />
-        </TabPanel>}
-        {selectHasVolunteeringEventsPermission(state) && <TabPanel index={tabContent++} value={tabIndex}>
+        </TabPanel>
+        <TabPanel index={1} value={tabIndex}>
           <VolunteerEvents
             forceUpdate={forceUpdate}
             key={'vh' + n}
             onlyMe={onlyMe}
           />
-        </TabPanel>}
+        </TabPanel>
       </CardContent>
     </Card>
-  ) : (
-    <h3>{noPermission}</h3>
   );
 };