Merge pull request #688 from dhis2/DHIS2-10475-remove-user-field-from…

…-user-group-form

fix(user-group): remove users field from form to prevent app freezing

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2021-02-11T14:12:34.322Z\n"
-"PO-Revision-Date: 2021-02-11T14:12:34.322Z\n"
+"POT-Creation-Date: 2021-02-19T11:14:25.649Z\n"
+"PO-Revision-Date: 2021-02-19T11:14:25.649Z\n"
 
 msgid "Use database locale / no translation"
 msgstr ""
@@ -422,10 +422,9 @@ msgstr ""
 msgid "Code"
 msgstr ""
 
-msgid "Available users"
-msgstr ""
-
-msgid "Group members"
+msgid ""
+"To add a user to this group, go to the User section and edit the user group "
+"settings for a specific user."
 msgstr ""
 
 msgid "Available user groups"

src/api/index.js

@@ -301,6 +301,16 @@ class Api {
      ***** USER GROUPS ********
      **************************/
 
+    saveUserGroup(data) {
+        if (data.id) {
+            return this.d2Api.update(
+                `/userGroups/${data.id}?mergeMode=MERGE`,
+                data
+            )
+        }
+        return this.d2Api.post('/userGroups', data)
+    }
+
     getManagedUsers = () => {
         const data = {
             fields: ['id', 'displayName', 'userCredentials[username]'],

src/constants/queryFields.js

@@ -40,7 +40,7 @@ export const USER_ROLE_DETAILS = [
     'displayName',
 ]
 
-export const USER_GROUP_DETAILS = [':owner', 'access', 'displayName']
+export const USER_GROUP_DETAILS = [':owner', 'access', 'displayName', '!users']
 
 export const CURRENT_USER_ORG_UNITS_FIELDS = {
     fields: [

src/containers/GroupForm/GroupForm.js

@@ -8,17 +8,13 @@ import CircularProgress from 'material-ui/CircularProgress'
 import makeTrashable from 'trashable'
 import navigateTo from '../../utils/navigateTo'
 import { asyncValidatorSwitch } from '../../utils/validatorsAsync'
-import { renderSearchableGroupEditor } from '../../utils/fieldRenderers'
+import {
+    renderSearchableGroupEditor,
+    renderText,
+} from '../../utils/fieldRenderers'
 import createHumanErrorMessage from '../../utils/createHumanErrorMessage'
 import { clearItem, showSnackbar, getList } from '../../actions'
-import {
-    FORM_NAME,
-    NAME,
-    CODE,
-    USERS,
-    MANAGED_GROUPS,
-    getFields,
-} from './config'
+import { FORM_NAME, NAME, CODE, MANAGED_GROUPS, getFields } from './config'
 import { userGroupFormInitialValuesSelector } from '../../selectors'
 import { USER_GROUP } from '../../constants/entityTypes'
 import detectCurrentUserChanges from '../../utils/detectCurrentUserChanges'
@@ -90,7 +86,6 @@ class GroupForm extends Component {
 
         group[NAME] = values[NAME]
         group[CODE] = values[CODE]
-        group[USERS] = values[USERS].map(this.createIdValueObject)
         group[MANAGED_GROUPS] = values[MANAGED_GROUPS].map(
             this.createIdValueObject
         )
@@ -100,7 +95,7 @@ class GroupForm extends Component {
         )
 
         try {
-            await group.save()
+            await api.saveUserGroup(group.toJSON())
             const msg = i18n.t(
                 'User group "{{displayName}}" saved successfully',
                 {
@@ -142,6 +137,10 @@ class GroupForm extends Component {
             const labelText = label + suffix
             const validators = []
 
+            if (fieldRenderer === renderText) {
+                return renderText(fieldConfig)
+            }
+
             if (fieldRenderer === renderSearchableGroupEditor) {
                 conf.availableItemsQuery = api[conf.availableItemsQuery]
                 if (isRequiredField) {

src/containers/GroupForm/collectValidators.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-params */
 
-import { required, requiredArray, code } from '../../utils/validators'
-import { USERS, NAME, CODE } from './config'
+import { required, code } from '../../utils/validators'
+import { NAME, CODE } from './config'
 
 export default function collectValidators(
     props,
@@ -17,10 +17,6 @@ export default function collectValidators(
         validatorsToApply.push(required)
     }
 
-    if (name === USERS) {
-        validatorsToApply.push(requiredArray)
-    }
-
     if (name === CODE) {
         validatorsToApply.push(code)
     }

src/containers/GroupForm/config.js

@@ -1,4 +1,5 @@
 import {
+    renderText,
     renderTextField,
     renderSearchableGroupEditor,
 } from '../../utils/fieldRenderers'
@@ -7,11 +8,10 @@ import i18n from '@dhis2/d2-i18n'
 
 export const FORM_NAME = 'groupForm'
 export const NAME = 'name'
-export const USERS = 'users'
 export const CODE = 'code'
 export const MANAGED_GROUPS = 'managedGroups'
 
-export const GROUP_PROPS = [NAME, CODE, USERS, MANAGED_GROUPS]
+export const GROUP_PROPS = [NAME, CODE, MANAGED_GROUPS]
 
 export const STYLES = {
     loaderWrap: {
@@ -33,13 +33,16 @@ export const getFields = () => [
         fieldRenderer: renderTextField,
     },
     {
-        name: USERS,
-        fieldRenderer: renderSearchableGroupEditor,
-        isRequiredField: true,
-        initialItemsSelector: group => asArray(group[USERS]),
-        availableItemsQuery: 'getManagedUsers',
-        availableItemsLabel: i18n.t('Available users'),
-        assignedItemsLabel: i18n.t('Group members'),
+        name: 'manage_users_info',
+        fieldRenderer: renderText,
+        label: i18n.t(
+            'To add a user to this group, go to the User section and edit the user group settings for a specific user.'
+        ),
+        style: {
+            border: '1px solid #bdbdbd',
+            backgroundColor: '#e5e5e5',
+            padding: 12,
+        },
     },
     {
         name: MANAGED_GROUPS,