#10414: Remove the list of associated groups of logged in user from t…

…he User Details modal window (#10415)

* #10414: Remove the list of associated groups of logged in user from the User Details modal window
Description:
- handle hide group info in user details modal by adding a cfg in Login plugin 'hideGroupUserInfo'
- add unit test

* #10414: Remove the list of associated groups of logged in user from the User Details modal window
Description:
- add migration guide notes related to the PR changes
- edit in unit tests

* #10414: Remove the list of associated groups of logged in user from the User Details modal window
Description:
- resolve review comments related to edits in migration file

docs/developer-guide/mapstore-migration-guide.md

@@ -20,7 +20,25 @@ This is a list of things to check if you want to update from a previous version
 - Optionally check also accessory files like `.eslinrc`, if you want to keep aligned with lint standards.
 - Follow the instructions below, in order, from your version to the one you want to update to.
 
-## Migration from 2024.01.00 to 2024.02.00
+## Migration from 2024.01.00 to 2024.01.02
+
+### Option to hide the group info of logged in user from user details modal window
+
+Recently, we have added the option to hide the `user group info` from the user details modal.
+To enable this, you have to add a cfg in all `Login` plugin into `localConfig.json` like:
+
+```json
+{
+    "name": "Login",
+    "cfg": { "toolsCfg": [{"hideGroupUserInfo": true}] }
+}
+```
+
+where the first index of toolsCfg is for `userDetails` component that is responsible for displaying the user details including `user group info`
+
+!!! note important notes should be considered:
+
+- if you have customized the Login plugin and in particular the order of toolsCfg, make sure to override the correct one as the propagation of cfg for the tools is based on index value.
 
 ### Integration with openID Connect
 

web/client/components/security/modals/UserDetailsModal.jsx

@@ -18,6 +18,7 @@ import { isArray, isObject, isString } from 'lodash';
 
 /**
  * A Modal window to show password reset form
+  * @prop {bool} hideGroupUserInfo It is a flag from Login plugin (cfg.toolsCfg[0].hideGroupUserInfo): to show/hide user group in user details info, by default `false`
  */
 class UserDetails extends React.Component {
     static propTypes = {
@@ -26,7 +27,8 @@ class UserDetails extends React.Component {
         show: PropTypes.bool,
         options: PropTypes.object,
         onClose: PropTypes.func,
-        includeCloseButton: PropTypes.bool
+        includeCloseButton: PropTypes.bool,
+        hideGroupUserInfo: PropTypes.bool
     };
 
     static defaultProps = {
@@ -35,23 +37,28 @@ class UserDetails extends React.Component {
         },
         onClose: () => {},
         options: {},
-        includeCloseButton: true
+        includeCloseButton: true,
+        hideGroupUserInfo: false
     };
 
     getUserInfo = () => {
-        return {
+        let mainUserInfo = {
             name: v => <strong>{v}</strong>,
             role: v => <strong>{this.capitalCase(v)}</strong>,
             email: v => <strong>{v}</strong>,
             company: v => <strong>{v}</strong>,
-            notes: v => <strong>{v}</strong>,
-            groups: groups => {
+            notes: v => <strong>{v}</strong>
+        };
+
+        if (!this.props.hideGroupUserInfo) {
+            mainUserInfo.groups = groups => {
                 const gr = isArray(groups) && [...groups] || groups.group && isArray(groups.group) && [...groups.group] || groups.group && isObject(groups.group) && [{...groups.group}];
                 return gr && gr.map(group => {
-                    return group.groupName && <div key={group.groupName}><strong>{group.groupName}</strong></div> || null;
+                    return group.groupName && <div className="user-group-info" key={group.groupName}><strong>{group.groupName}</strong></div> || null;
                 }).filter(v => v) || null;
-            }
-        };
+            };
+        }
+        return mainUserInfo;
     }
 
     renderAttributes = () => {

web/client/components/security/modals/__tests__/UserDetailsModal-test.jsx

@@ -75,4 +75,49 @@ describe("Test user details modal", () => {
 
         expect(modalDOM.getElementsByClassName('row').length).toEqual(6);
     });
+    it('test hide group user info if hideGroupUserInfo = true', () => {
+        let testUser = {
+            "attribute": [
+                {
+                    "name": "company",
+                    "value": "Some Company"
+                },
+                {
+                    "name": "email",
+                    "value": "[email protected]"
+                },
+                {
+                    "name": "notes",
+                    "value": "some notes"
+                },
+                {
+                    "name": "UUID",
+                    "value": "260a670e-4dc0-4719-8bc9-85555d7dcbe1"
+                }
+            ],
+            "enabled": true,
+            "groups": {
+                "group": {
+                    "enabled": true,
+                    "groupName": "everyone",
+                    "id": 3
+                }
+            },
+            "id": 6,
+            "name": "admin",
+            "role": "ADMIN"
+        };
+        let displayAttributes = (attr) => {
+            return attr.name && attr.name === "email" || attr.name === "company";
+        };
+        const cmpNormal = ReactDOM.render(<UDModal options={{animation: false}} show displayAttributes={displayAttributes} user={testUser}/>, document.getElementById("container"));
+        expect(cmpNormal).toExist();
+        const modalDOMNormal = document.getElementsByClassName('ms-resizable-modal')[0];
+        expect(modalDOMNormal.querySelector('.user-group-info')).toExist();             // includes group info
+
+        const cmpWithHide = ReactDOM.render(<UDModal hideGroupUserInfo options={{animation: false}} show displayAttributes={displayAttributes} user={testUser}/>, document.getElementById("container"));
+        expect(cmpWithHide).toExist();
+        const modalDOM = document.getElementsByClassName('ms-resizable-modal')[0];
+        expect(modalDOM.querySelector('.user-group-info')).toNotExist();                   // not include group info
+    });
 });