feat: help users with user role assignment [DHIS2-18422] [DHIS2-18446]

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: 2024-03-27T09:03:25.496Z\n"
-"PO-Revision-Date: 2024-03-27T09:03:25.496Z\n"
+"POT-Creation-Date: 2024-12-18T07:54:11.061Z\n"
+"PO-Revision-Date: 2024-12-18T07:54:11.062Z\n"
 
 msgid "Yes"
 msgstr "Yes"
@@ -53,12 +53,6 @@ msgstr "Will be added"
 msgid "Will be removed"
 msgstr "Will be removed"
 
-msgid "Network error"
-msgstr "Network error"
-
-msgid "Could not load current user information."
-msgstr "Could not load current user information."
-
 msgid "Filter options"
 msgstr "Filter options"
 
@@ -167,12 +161,31 @@ msgstr "Code is already taken"
 msgid "There was a problem whilst checking the availability of this group code"
 msgstr "There was a problem whilst checking the availability of this group code"
 
-msgid "Only show selected metadata authorities"
-msgstr "Only show selected metadata authorities"
+msgid ""
+"You cannot assign this role because you are assigned to this role, and your "
+"system does not allow you to assign roles of which you are a member."
+msgstr ""
+"You cannot assign this role because you are assigned to this role, and your "
+"system does not allow you to assign roles of which you are a member."
+
+msgid "You cannot assign this role because it has authorities that you do not have."
+msgstr "You cannot assign this role because it has authorities that you do not have."
+
+msgid "There are no legacy or nonstandard authorities assigned to this user role."
+msgstr "There are no legacy or nonstandard authorities assigned to this user role."
+
+msgid "Remove"
+msgstr "Remove"
 
 msgid "Authority"
 msgstr "Authority"
 
+msgid "Remove authority"
+msgstr "Remove authority"
+
+msgid "Only show selected metadata authorities"
+msgstr "Only show selected metadata authorities"
+
 msgid "Add/Update Public"
 msgstr "Add/Update Public"
 
@@ -233,6 +246,16 @@ msgstr "Available system authorities"
 msgid "Selected system authorities"
 msgstr "Selected system authorities"
 
+msgid "Legacy and nonstandard authorities"
+msgstr "Legacy and nonstandard authorities"
+
+msgid ""
+"Authorities not recognized as standard authorities. These authorities may "
+"be legacy authorities if you have upgraded versions."
+msgstr ""
+"Authorities not recognized as standard authorities. These authorities may "
+"be legacy authorities if you have upgraded versions."
+
 msgid "All (Full authority)"
 msgstr "All (Full authority)"
 
@@ -574,6 +597,9 @@ msgstr "Available user roles"
 msgid "User roles this user is assigned"
 msgstr "User roles this user is assigned"
 
+msgid "You do not have permission to assign certain user roles"
+msgstr "You do not have permission to assign certain user roles"
+
 msgid "User groups this user is a member of"
 msgstr "User groups this user is a member of"
 
@@ -1042,3 +1068,12 @@ msgstr "Interests"
 
 msgid "Birthday"
 msgstr "Birthday"
+
+msgid "Network error"
+msgstr "Network error"
+
+msgid "Could not load current user information."
+msgstr "Could not load current user information."
+
+msgid "Could not load system information."
+msgstr "Could not load system information."

jest.config.js

@@ -1,4 +1,4 @@
 module.exports = {
     setupFilesAfterEnv: ['<rootDir>/src/test-utils/setup-tests.js'],
-    transformIgnorePatterns: ['/node_modules/(?!(lodash-es)/)'],
+    transformIgnorePatterns: ['/node_modules/(?!(lodash-es|p-debounce)/)'],
 }

package.json

@@ -18,9 +18,9 @@
         "cypress:live": "start-server-and-test 'yarn start:nobrowser' http://localhost:3000 'yarn cypress open --env networkMode=live'"
     },
     "dependencies": {
-        "@dhis2/app-runtime": "^3.9.0",
-        "@dhis2/d2-i18n": "^1.1.0",
-        "@dhis2/ui": "^8.12.1",
+        "@dhis2/app-runtime": "^3.12.0",
+        "@dhis2/d2-i18n": "^1.1.3",
+        "@dhis2/ui": "9.15.0",
         "classnames": "^2.3.1",
         "lodash-es": "^4.17.21",
         "memoize-one": "^6.0.0",
@@ -34,7 +34,7 @@
     "devDependencies": {
         "@badeball/cypress-cucumber-preprocessor": "^20.0.7",
         "@cypress/webpack-preprocessor": "^6.0.2",
-        "@dhis2/cli-app-scripts": "^10.3.1",
+        "@dhis2/cli-app-scripts": "^11.7.5",
         "@dhis2/cli-style": "^10.4.1",
         "@dhis2/cypress-commands": "10.0.6",
         "@dhis2/cypress-plugins": "10.0.6",

src/AppWrapper.js

@@ -3,14 +3,16 @@ import './locales/index.js'
 import { CssVariables } from '@dhis2/ui'
 import React from 'react'
 import App from './App.js'
-import { CurrentUserProvider } from './components/CurrentUserProvider.js'
-import { ReferrerProvider } from './providers/index.js'
+import { CurrentUserProvider } from './providers/current-user/CurrentUserProvider.js'
+import { ReferrerProvider, SystemProvider } from './providers/index.js'
 
 const AppWrapper = () => (
     <CurrentUserProvider>
         <ReferrerProvider>
-            <CssVariables spacers colors theme />
-            <App />
+            <SystemProvider>
+                <CssVariables spacers colors theme />
+                <App />
+            </SystemProvider>
         </ReferrerProvider>
     </CurrentUserProvider>
 )

src/components/GroupForm/GroupForm.js

@@ -4,8 +4,7 @@ import { NoticeBox, FinalForm } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useHistory } from 'react-router-dom'
-import { useCurrentUser } from '../../hooks/useCurrentUser.js'
-import { useReferrerInfo } from '../../providers/index.js'
+import { useCurrentUser, useReferrerInfo } from '../../providers/index.js'
 import navigateTo from '../../utils/navigateTo.js'
 import Attributes from '../Attributes/index.js'
 import Form, { FormSection } from '../Form.js'

src/components/RoleForm/AssignmentRestrictionsWarning.js

@@ -0,0 +1,101 @@
+import i18n from '@dhis2/d2-i18n'
+import { IconChevronDown24, IconChevronUp24, NoticeBox } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { useSystemInformation } from '../../providers/index.js'
+import styles from './AssignmentRestrictionsWarning.module.css'
+
+export const AssignmentRestrictionWarning = ({
+    currentUser,
+    roleId,
+    roleAuthorities,
+    initiallyExpanded,
+}) => {
+    const [detailsExpanded, setDetailsExpanded] = useState(
+        initiallyExpanded ?? false
+    )
+
+    // check if user is able to assign this role if they are a member
+    const {
+        userRoleIds,
+        authorities: userAuthorities,
+        hasAllAuthority,
+    } = currentUser
+    const { usersCanAssignOwnUserRoles, authorityIdToNameMap } =
+        useSystemInformation()
+    const cannotAssignThisRole =
+        !hasAllAuthority &&
+        !usersCanAssignOwnUserRoles &&
+        userRoleIds.includes(roleId)
+
+    // check if role has authorities that user does not have
+    const authoritiesUserDoesNotHave = hasAllAuthority
+        ? []
+        : roleAuthorities.filter(
+              (roleAuth) => !userAuthorities.includes(roleAuth)
+          )
+
+    if (!cannotAssignThisRole && authoritiesUserDoesNotHave.length === 0) {
+        return null
+    }
+
+    return (
+        <NoticeBox className={styles.noticeBox}>
+            {cannotAssignThisRole && (
+                <div>
+                    {i18n.t(
+                        'You cannot assign this role because you are assigned to this role, and your system does not allow you to assign roles of which you are a member.'
+                    )}
+                </div>
+            )}
+            {authoritiesUserDoesNotHave?.length > 0 && (
+                <div>
+                    <div className={styles.missingRolesMessage}>
+                        <span>
+                            {i18n.t(
+                                'You cannot assign this role because it has authorities that you do not have.'
+                            )}
+                        </span>
+                        <div
+                            onClick={() => {
+                                setDetailsExpanded((prev) => !prev)
+                            }}
+                            data-test="roles-details-expand"
+                        >
+                            {detailsExpanded ? (
+                                <IconChevronUp24 />
+                            ) : (
+                                <IconChevronDown24 />
+                            )}
+                        </div>
+                    </div>
+
+                    {detailsExpanded && (
+                        <ul data-test="authorities-user-does-not-have-list">
+                            {authoritiesUserDoesNotHave
+                                .sort((a, b) =>
+                                    (
+                                        authorityIdToNameMap.get(a) ?? a
+                                    ).localeCompare(
+                                        authorityIdToNameMap.get(b) ?? b
+                                    )
+                                )
+                                .map((auth) => (
+                                    <li key={auth}>
+                                        {authorityIdToNameMap.get(auth) ?? auth}
+                                    </li>
+                                ))}
+                        </ul>
+                    )}
+                </div>
+            )}
+        </NoticeBox>
+    )
+}
+
+AssignmentRestrictionWarning.propTypes = {
+    roleId: PropTypes.string.isRequired,
+    currentUser: PropTypes.object,
+    initiallyExpanded: PropTypes.bool,
+    roleAuthorities: PropTypes.arrayOf(PropTypes.string),
+}

src/components/RoleForm/AssignmentRestrictionsWarning.module.css

@@ -0,0 +1,13 @@
+.noticeBox {
+    max-width: 700px;
+    margin-bottom: var(--spacers-dp16);
+}
+
+.noticeBox > div {
+    margin-block-end: var(--spacers-dp8);
+}
+
+.missingRolesMessage {
+    display: flex;
+    align-items: center;
+}