Adjusting visibility of group attach/detach buttons on the edit exerc…

…ise page based on ACLs.
ReCodEx · Nov 3, 2023 · 25a1437 · 25a1437
1 parent 7ca2981
commit 25a1437
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/src/components/Exercises/ExerciseGroups/ExerciseGroups.js b/src/components/Exercises/ExerciseGroups/ExerciseGroups.js
@@ -8,7 +8,7 @@ import Icon, { GroupIcon, LoadingIcon } from '../../icons';
 import GroupsNameContainer from '../../../containers/GroupsNameContainer';
 import Button from '../../widgets/TheButton';
 import GroupsTreeContainer from '../../../containers/GroupsTreeContainer';
-import { arrayToObject, identity } from '../../../helpers/common';
+import { arrayToObject, identity, EMPTY_MAP } from '../../../helpers/common';
 
 class ExerciseGroups extends Component {
   state = { dialogOpen: false };
@@ -51,12 +51,14 @@ class ExerciseGroups extends Component {
     );
   };
 
-  buttonsCreator = attachedGroupsIds => group => {
-    return <span>{attachedGroupsIds[group.id] ? this.detachButton(group.id) : this.attachButton(group.id)}</span>;
+  buttonsCreator = (attachedGroupsIds, groupDataAccessor) => group => {
+    return (groupDataAccessor(group.id) || EMPTY_MAP).getIn(['permissionHints', 'createExercise'], false) ? (
+      <span>{attachedGroupsIds[group.id] ? this.detachButton(group.id) : this.attachButton(group.id)}</span>
+    ) : null;
   };
 
   render() {
-    const { groupsIds = [], showButtons = false } = this.props;
+    const { groupsIds = [], showButtons = false, groupDataAccessor } = this.props;
     return (
       <Box
         title={<FormattedMessage id="app.exercise.groups" defaultMessage="Groups of Residence" />}
@@ -82,7 +84,11 @@ class ExerciseGroups extends Component {
                   <td>
                     <GroupsNameContainer groupId={groupId} fullName translations links admins />
                   </td>
-                  <td className="text-right">{showButtons && this.detachButton(groupId)}</td>
+                  <td className="text-right">
+                    {showButtons &&
+                      (groupDataAccessor(groupId) || EMPTY_MAP).getIn(['permissionHints', 'createExercise'], false) &&
+                      this.detachButton(groupId)}
+                  </td>
                 </tr>
               ))}
             </tbody>
@@ -101,7 +107,10 @@ class ExerciseGroups extends Component {
               <Modal.Body>
                 <GroupsTreeContainer
                   onlyEditable
-                  buttonsCreator={this.buttonsCreator(arrayToObject(groupsIds, identity, () => true))}
+                  buttonsCreator={this.buttonsCreator(
+                    arrayToObject(groupsIds, identity, () => true),
+                    groupDataAccessor
+                  )}
                 />
               </Modal.Body>
             </Modal>
@@ -119,6 +128,7 @@ ExerciseGroups.propTypes = {
   detachingGroupId: PropTypes.string,
   attachExerciseToGroup: PropTypes.func.isRequired,
   detachExerciseFromGroup: PropTypes.func.isRequired,
+  groupDataAccessor: PropTypes.func.isRequired,
 };
 
 export default ExerciseGroups;
diff --git a/src/pages/EditExercise/EditExercise.js b/src/pages/EditExercise/EditExercise.js
@@ -34,7 +34,7 @@ import { fetchByIds } from '../../redux/modules/users';
 import { getExercise, getExerciseAttachingGroupId, getExerciseDetachingGroupId } from '../../redux/selectors/exercises';
 import { isSubmitting } from '../../redux/selectors/submission';
 import { loggedInUserSelector } from '../../redux/selectors/users';
-import { getGroupsAdmins } from '../../redux/selectors/groups';
+import { getGroupsAdmins, groupDataAccessorSelector } from '../../redux/selectors/groups';
 
 import { getLocalizedTextsInitialValues, transformLocalizedTextsFormData } from '../../helpers/localizedData';
 import { safeGet } from '../../helpers/common';
@@ -117,6 +117,7 @@ class EditExercise extends Component {
       attachExerciseToGroup,
       detachExerciseFromGroup,
       sendNotification,
+      groupDataAccessor,
     } = this.props;
 
     return (
@@ -158,6 +159,7 @@ class EditExercise extends Component {
                       detachingGroupId={detachingGroupId}
                       attachExerciseToGroup={attachExerciseToGroup}
                       detachExerciseFromGroup={detachExerciseFromGroup}
+                      groupDataAccessor={groupDataAccessor}
                     />
 
                     <Box title={<FormattedMessage id="app.editExercise.editTags" defaultMessage="Edit Tags" />}>
@@ -240,6 +242,7 @@ EditExercise.propTypes = {
   loggedUser: ImmutablePropTypes.map,
   attachingGroupId: PropTypes.string,
   detachingGroupId: PropTypes.string,
+  groupDataAccessor: PropTypes.func.isRequired,
   loadAsync: PropTypes.func.isRequired,
   reset: PropTypes.func.isRequired,
   editExercise: PropTypes.func.isRequired,
@@ -261,6 +264,7 @@ export default withLinks(
       loggedUser: loggedInUserSelector(state),
       attachingGroupId: getExerciseAttachingGroupId(exerciseId)(state),
       detachingGroupId: getExerciseDetachingGroupId(exerciseId)(state),
+      groupDataAccessor: groupDataAccessorSelector(state),
     }),
     (dispatch, { params: { exerciseId } }) => ({
       reset: () => dispatch(reset('editExercise')),