Group relocation form added on the Edit Group page.

Martin Krulis · Martin Kruliš · commit f7182ba214ba · 2019-10-14T19:51:29.000+02:00
diff --git a/src/components/forms/RelocateGroupForm/RelocateGroupForm.js b/src/components/forms/RelocateGroupForm/RelocateGroupForm.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
+import { Alert, Form } from 'react-bootstrap';
+import { reduxForm, Field } from 'redux-form';
+import { defaultMemoize } from 'reselect';
+
+import { SelectField } from '../Fields';
+import SubmitButton from '../SubmitButton';
+import Icon, { WarningIcon } from '../../../components/icons';
+import { getGroupCanonicalLocalizedName } from '../../../helpers/localizedData';
+import { hasPermissions } from '../../../helpers/common';
+
+export const getPossibleParentsOfGroup = defaultMemoize((groups, group) =>
+  groups.filter(g => g.id !== group.id && hasPermissions(g, 'addSubgroup') && !g.parentGroupsIds.includes(group.id))
+);
+
+const RelocateGroupForm = ({
+  submitting,
+  handleSubmit,
+  submitFailed,
+  submitSucceeded,
+  invalid,
+  groups,
+  groupsAccessor,
+  intl: { locale },
+}) => (
+  <div>
+    {submitFailed && (
+      <Alert bsStyle="danger">
+        <WarningIcon gapRight />
+        <FormattedMessage id="generic.savingFailed" defaultMessage="Saving failed. Please try again later." />
+      </Alert>
+    )}
+    <Form>
+      <Field
+        name={'groupId'}
+        component={SelectField}
+        label={<FormattedMessage id="app.relocateGroupForm.parentGroup" defaultMessage="Parent Group:" />}
+        options={groups
+          .map(group => ({
+            key: group.id,
+            name: getGroupCanonicalLocalizedName(group, groupsAccessor, locale),
+          }))
+          .sort((a, b) => a.name.localeCompare(b.name, locale))}
+      />
+
+      <div className="text-center">
+        <SubmitButton
+          id="relocateGroup"
+          disabled={invalid}
+          submitting={submitting}
+          hasSucceeded={submitSucceeded}
+          hasFailed={submitFailed}
+          handleSubmit={handleSubmit}
+          defaultIcon={<Icon icon="people-carry" gapRight />}
+          messages={{
+            submit: <FormattedMessage id="app.relocateGroupForm.submit" defaultMessage="Relocate" />,
+            submitting: <FormattedMessage id="app.relocateGroupForm.submitting" defaultMessage="Relocating..." />,
+            success: <FormattedMessage id="app.relocateGroupForm.success" defaultMessage="Group Relocated" />,
+          }}
+        />
+      </div>
+    </Form>
+  </div>
+);
+
+RelocateGroupForm.propTypes = {
+  history: PropTypes.shape({
+    push: PropTypes.func.isRequired,
+    replace: PropTypes.func.isRequired,
+  }),
+  submitting: PropTypes.bool,
+  submitFailed: PropTypes.bool,
+  submitSucceeded: PropTypes.bool,
+  invalid: PropTypes.bool,
+  handleSubmit: PropTypes.func.isRequired,
+  links: PropTypes.object,
+  groups: PropTypes.array,
+  groupsAccessor: PropTypes.func.isRequired,
+  intl: intlShape,
+};
+
+export default reduxForm({
+  form: 'relocateGroup',
+  enableReinitialize: true,
+  keepDirtyOnReinitialize: false,
+})(injectIntl(RelocateGroupForm));
diff --git a/src/components/forms/RelocateGroupForm/index.js b/src/components/forms/RelocateGroupForm/index.js
@@ -0,0 +1,3 @@
+import RelocateGroupForm from './RelocateGroupForm';
+export default RelocateGroupForm;
+export { getPossibleParentsOfGroup } from './RelocateGroupForm';
diff --git a/src/locales/cs.json b/src/locales/cs.json
@@ -350,6 +350,7 @@
   "app.editGroup.deleteGroupWarning": "Smazání skupiny způsobí, že všechny navázané entity (zadané úlohy, odevzdaná řešení, ...) nebudou přístupné.",
   "app.editGroup.description": "Změnit nastavení skupiny",
   "app.editGroup.organizationalExplain": "Běžné skupiny jsou platformou spojující studenty a zadané úlohy. Organizační skupiny slouží pouze k vytváření hierarchie, takže v nich nesmí být přihlášení studenti a nesmí obsahovat zadané úlohy.",
+  "app.editGroup.relocateGroup": "Přemístit skupinu",
   "app.editGroup.title": "Upravit skupinu",
   "app.editGroupForm.createGroup": "Vytvořit skupinu",
   "app.editGroupForm.description": "Popis skupiny:",
@@ -1030,6 +1031,10 @@
   "app.registrationForm.validation.passwordDontMatch": "Hesla se neshodují.",
   "app.registrationForm.validation.shortFirstName": "Jméno musí obsahovat alespoň 2 znaky.",
   "app.registrationForm.validation.shortLastName": "Příjmení musí obsahovat alespoň 2 znaky.",
+  "app.relocateGroupForm.parentGroup": "Rodičovská skupina:",
+  "app.relocateGroupForm.submit": "Přemístit",
+  "app.relocateGroupForm.submitting": "Přemísťuji...",
+  "app.relocateGroupForm.success": "Skupina přemístěna",
   "app.removeFromGroup.confirm": "Opravdu chcete odstranit uživatele z této skupiny?",
   "app.resendEmailVerification.failed": "Opětovné odeslání selhalo. Prosíme opakujte akci později",
   "app.resendEmailVerification.resend": "Znovu odeslat ověřovací email",
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -346,10 +346,11 @@
   "app.editGroup.archivedExplain": "Archived groups are containers for students, assignments and results after the course is finished. They are immutable and can be accessed through separate Archive page.",
   "app.editGroup.cannotDeleteGroupWithSubgroups": "Group with nested sub-groups cannot be deleted.",
   "app.editGroup.cannotDeleteRootGroup": "This is a so-called root group and it cannot be deleted.",
-  "app.editGroup.deleteGroup": "Delete the group",
+  "app.editGroup.deleteGroup": "Delete Group",
   "app.editGroup.deleteGroupWarning": "Deleting a group will make all attached entities (assignments, solutions, ...) inaccessible.",
   "app.editGroup.description": "Change group settings",
   "app.editGroup.organizationalExplain": "Regular groups are containers for students and assignments. Organizational groups are intended to create hierarchy, so they are forbidden to hold any students or assignments.",
+  "app.editGroup.relocateGroup": "Relocate Group",
   "app.editGroup.title": "Edit Group",
   "app.editGroupForm.createGroup": "Create Group",
   "app.editGroupForm.description": "Group description:",
@@ -1030,6 +1031,10 @@
   "app.registrationForm.validation.passwordDontMatch": "Passwords do not match.",
   "app.registrationForm.validation.shortFirstName": "First name must contain at least 2 characters.",
   "app.registrationForm.validation.shortLastName": "Last name must contain at least 2 characters.",
+  "app.relocateGroupForm.parentGroup": "Parent Group:",
+  "app.relocateGroupForm.submit": "Relocate",
+  "app.relocateGroupForm.submitting": "Relocating...",
+  "app.relocateGroupForm.success": "Group Relocated",
   "app.removeFromGroup.confirm": "Are you sure you want to remove the user from this group?",
   "app.resendEmailVerification.failed": "Resending failed",
   "app.resendEmailVerification.resend": "Resend verification email",
diff --git a/src/locales/whitelist_en.json b/src/locales/whitelist_en.json
@@ -350,6 +350,7 @@
   "app.editGroup.deleteGroupWarning",
   "app.editGroup.description",
   "app.editGroup.organizationalExplain",
+  "app.editGroup.relocateGroup",
   "app.editGroup.title",
   "app.editGroupForm.createGroup",
   "app.editGroupForm.description",
@@ -1030,6 +1031,10 @@
   "app.registrationForm.validation.passwordDontMatch",
   "app.registrationForm.validation.shortFirstName",
   "app.registrationForm.validation.shortLastName",
+  "app.relocateGroupForm.parentGroup",
+  "app.relocateGroupForm.submit",
+  "app.relocateGroupForm.submitting",
+  "app.relocateGroupForm.success",
   "app.removeFromGroup.confirm",
   "app.resendEmailVerification.failed",
   "app.resendEmailVerification.resend",
diff --git a/src/pages/EditGroup/EditGroup.js b/src/pages/EditGroup/EditGroup.js
@@ -8,15 +8,22 @@ import { reset, formValueSelector } from 'redux-form';
 import { defaultMemoize } from 'reselect';
 
 import Page from '../../components/layout/Page';
+import ResourceRenderer from '../../components/helpers/ResourceRenderer';
 import EditGroupForm, { EDIT_GROUP_FORM_LOCALIZED_TEXTS_DEFAULT } from '../../components/forms/EditGroupForm';
+import RelocateGroupForm, { getPossibleParentsOfGroup } from '../../components/forms/RelocateGroupForm';
 import OrganizationalGroupButtonContainer from '../../containers/OrganizationalGroupButtonContainer';
 import ArchiveGroupButtonContainer from '../../containers/ArchiveGroupButtonContainer';
 import DeleteGroupButtonContainer from '../../containers/DeleteGroupButtonContainer';
 import Box from '../../components/widgets/Box';
 import { BanIcon, InfoIcon } from '../../components/icons';
 
-import { fetchGroup, fetchGroupIfNeeded, editGroup } from '../../redux/modules/groups';
-import { groupSelector, canViewParentDetailSelector } from '../../redux/selectors/groups';
+import { fetchGroup, fetchGroupIfNeeded, editGroup, relocateGroup } from '../../redux/modules/groups';
+import {
+  groupSelector,
+  canViewParentDetailSelector,
+  notArchivedGroupsSelector,
+  groupDataAccessorSelector,
+} from '../../redux/selectors/groups';
 import { loggedInUserIdSelector, selectedInstanceId } from '../../redux/selectors/auth';
 import { isSupervisorOf, isLoggedAsSuperAdmin } from '../../redux/selectors/users';
 import {
@@ -29,6 +36,10 @@ import withLinks from '../../helpers/withLinks';
 import { hasPermissions } from '../../helpers/common';
 import GroupArchivedWarning from '../../components/Groups/GroupArchivedWarning/GroupArchivedWarning';
 
+const canRelocate = group => hasPermissions(group, 'relocate') && !group.archived;
+
+const getRelocateFormInitialValues = defaultMemoize(group => ({ groupId: group.parentGroupId }));
+
 class EditGroup extends Component {
   componentDidMount = () => this.props.loadAsync();
 
@@ -57,9 +68,12 @@ class EditGroup extends Component {
       },
       history: { replace },
       group,
+      groups,
+      groupsAccessor,
       isSuperAdmin,
       links: { GROUP_INFO_URI_FACTORY, GROUP_DETAIL_URI_FACTORY, INSTANCE_URI_FACTORY },
       editGroup,
+      relocateGroup,
       hasThreshold,
       canViewParentDetail,
       instanceId,
@@ -156,10 +170,29 @@ class EditGroup extends Component {
               />
             )}
 
+            {canRelocate(group) && (
+              <ResourceRenderer resource={groups.toArray()} returnAsArray>
+                {groups =>
+                  getPossibleParentsOfGroup(groups, group).length > 1 && (
+                    <Box
+                      type="warning"
+                      title={<FormattedMessage id="app.editGroup.relocateGroup" defaultMessage="Relocate Group" />}>
+                      <RelocateGroupForm
+                        initialValues={getRelocateFormInitialValues(group)}
+                        groups={getPossibleParentsOfGroup(groups, group)}
+                        groupsAccessor={groupsAccessor}
+                        onSubmit={relocateGroup}
+                      />
+                    </Box>
+                  )
+                }
+              </ResourceRenderer>
+            )}
+
             {hasPermissions(group, 'remove') && (
               <Box
                 type="danger"
-                title={<FormattedMessage id="app.editGroup.deleteGroup" defaultMessage="Delete the group" />}>
+                title={<FormattedMessage id="app.editGroup.deleteGroup" defaultMessage="Delete Group" />}>
                 <div>
                   <p>
                     <FormattedMessage
@@ -225,9 +258,12 @@ EditGroup.propTypes = {
     }).isRequired,
   }).isRequired,
   group: ImmutablePropTypes.map,
+  groups: ImmutablePropTypes.map,
+  groupsAccessor: PropTypes.func.isRequired,
   canViewParentDetail: PropTypes.bool.isRequired,
   instanceId: PropTypes.string,
   editGroup: PropTypes.func.isRequired,
+  relocateGroup: PropTypes.func.isRequired,
   hasThreshold: PropTypes.bool,
   isSuperAdmin: PropTypes.bool,
   intl: intlShape,
@@ -248,6 +284,8 @@ export default withLinks(
       const userId = loggedInUserIdSelector(state);
       return {
         group: groupSelector(state, groupId),
+        groups: notArchivedGroupsSelector(state),
+        groupsAccessor: groupDataAccessorSelector(state),
         userId,
         isStudentOf: groupId => isSupervisorOf(userId, groupId)(state),
         hasThreshold: editGroupFormSelector(state, 'hasThreshold'),
@@ -280,6 +318,7 @@ export default withLinks(
         }
         return dispatch(editGroup(groupId, transformedData));
       },
+      relocateGroup: ({ groupId: newParentId }) => dispatch(relocateGroup(groupId, newParentId)),
     })
   )(injectIntl(EditGroup))
 );
diff --git a/src/redux/modules/groups.js b/src/redux/modules/groups.js
@@ -60,6 +60,10 @@ export const additionalActionTypes = {
   SET_ARCHIVED_PENDING: 'recodex/groups/SET_ARCHIVED_PENDING',
   SET_ARCHIVED_FULFILLED: 'recodex/groups/SET_ARCHIVED_FULFILLED',
   SET_ARCHIVED_REJECTED: 'recodex/groups/SET_ARCHIVED_REJECTED',
+  RELOCATE: 'recodex/groups/RELOCATE',
+  RELOCATE_PENDING: 'recodex/groups/RELOCATE_PENDING',
+  RELOCATE_FULFILLED: 'recodex/groups/RELOCATE_FULFILLED',
+  RELOCATE_REJECTED: 'recodex/groups/RELOCATE_REJECTED',
 };
 
 export const loadGroup = actions.pushResource;
@@ -193,6 +197,13 @@ export const setArchived = (groupId, archived) =>
     meta: { groupId },
   });
 
+export const relocateGroup = (groupId, newParentId) =>
+  createApiAction({
+    type: additionalActionTypes.RELOCATE,
+    method: 'POST',
+    endpoint: `/groups/${groupId}/relocate/${newParentId}`,
+  });
+
 /**
  * Reducer
  */
@@ -293,6 +304,12 @@ const reducer = handleActions(
     [additionalActionTypes.SET_ARCHIVED_REJECTED]: (state, { payload, meta: { groupId } }) =>
       state.deleteIn(['resources', groupId, 'pending-archived']),
 
+    [additionalActionTypes.RELOCATE_FULFILLED]: (state, { payload }) =>
+      payload.reduce(
+        (state, data) => state.setIn(['resources', data.id], createRecord({ state: resourceStatus.FULFILLED, data })),
+        state
+      ),
+
     [additionalActionTypes.LOAD_USERS_GROUPS_FULFILLED]: (state, { payload, ...rest }) => {
       const groups = [...payload.supervisor, ...payload.student];
       return reduceActions[actionTypes.FETCH_MANY_FULFILLED](state, {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import RelocateGroupForm from './RelocateGroupForm';`
	`2`	`+export default RelocateGroupForm;`
	`3`	`+export { getPossibleParentsOfGroup } from './RelocateGroupForm';`