passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/react-extension/components/UserGroup/EditUserGroup/EditUserGroup.js

@@ -12,6 +12,7 @@
  * @since         2.13.0
  */
 import React, {Component} from "react";
+import ReactList from "react-list";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
@@ -21,13 +22,11 @@ import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitBut
 import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {withUserWorkspace} from "../../../contexts/UserWorkspaceContext";
-import UserAvatar from "../../Common/Avatar/UserAvatar";
-import Icon from "../../../../shared/components/Icons/Icon";
 import Autocomplete from "../../Common/Inputs/Autocomplete/Autocomplete";
 import {withRouter} from "react-router-dom";
 import {Trans, withTranslation} from "react-i18next";
-import Tooltip from "../../Common/Tooltip/Tooltip";
-import Select from "../../Common/Select/Select";
+import SharePermissionItemSkeleton from "../../Share/SharePermissionItemSkeleton";
+import EditUserGroupItem from "./EditUserGroupItem";
 
 /**
  * This component allows to edit an user group
@@ -88,11 +87,11 @@ class EditUserGroup extends Component {
     this.references = {
       name: React.createRef()
     };
+    this.listRef = React.createRef();
   }
 
   /**
    * Binds the component handlers
-   * @return {void}
    */
   bindHandlers() {
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -104,24 +103,24 @@ class EditUserGroup extends Component {
     this.handleAutocompleteClose = this.handleAutocompleteClose.bind(this);
     this.handleAutocompleteOpen = this.handleAutocompleteOpen.bind(this);
     this.fetchAutocompleteItems = this.fetchAutocompleteItems.bind(this);
+
+    this.renderItem = this.renderItem.bind(this);
   }
 
   /**
    * Populate the component with initial data
-   * @return {Promise<void>}
    */
-  async populate() {
+  populate() {
     const name = this.groupToEdit.name;
     const groupsUsers = JSON.parse(JSON.stringify(this.groupToEdit.groups_users)); // Clone the groups users to not alter the original
-    await Promise.all(groupsUsers.map(this.decorateGroupUserWithUser.bind(this)));
+    groupsUsers.map(this.decorateGroupUserWithUser.bind(this));
     this.sortGroupsUsersAlphabeticallyByUserFullName(groupsUsers);
-    await this.setState({groupToEdit: {name, groupsUsers}});
+    this.setState({groupToEdit: {name, groupsUsers}});
   }
 
   /**
    * Sort a list of groups users by their
    * @param {array} groupsUsers
-   * @returns {void}
    */
   sortGroupsUsersAlphabeticallyByUserFullName(groupsUsers) {
     const sortGroupsUsersAlphabeticallyByUserFullName = (groupUserA, groupUserB) => this.getUserFullname(groupUserA.user).localeCompare(this.getUserFullname(groupUserB.user));
@@ -131,22 +130,19 @@ class EditUserGroup extends Component {
   /**
    * Decorate a group user with its associated user
    * @param {Object} groupUser The group user to decorate
-   * @returns {Promise<object>}
    */
-  async decorateGroupUserWithUser(groupUser) {
-    groupUser.user = await this.findUser(groupUser.user_id);
+  decorateGroupUserWithUser(groupUser) {
+    groupUser.user = this.findUser(groupUser.user_id);
     return groupUser;
   }
 
   /**
    * Find a user
    * @param {string} userId
-   * @returns {Promise<object>}
+   * @returns {object}
    */
-  async findUser(userId) {
-    const user = this.props.context.users.find(user => user.id === userId);
-    user.gpgkey = await this.findUserGpgkey(user.id);
-    return user;
+  findUser(userId) {
+    return this.props.context.users.find(user => user.id === userId);
   }
 
   /**
@@ -197,7 +193,7 @@ class EditUserGroup extends Component {
    * @type {boolean}
    */
   get areActionsAllowed() {
-    return !this.isProcessing;
+    return !this.isProcessing && !this.isLoading;
   }
 
   /**
@@ -261,46 +257,43 @@ class EditUserGroup extends Component {
 
   /**
    * Whenever the group name change
-   * @return {Promise<void>}
    */
-  async handleNameChange(event) {
-    await this.updateName(event.target.value);
+  handleNameChange(event) {
+    this.updateName(event.target.value);
   }
 
   /**
    * Whenever a member's permission has changed
    * @param {Event} event A select DOM event
    * @param {object} groupUser A group user
-   * @return {Promise<void>}
    */
-  async handleMemberRoleChange(event, groupUser) {
+  handleMemberRoleChange(event, groupUser) {
     const isManager = event.target.value === true;
-    await this.updateMemberRole(groupUser, isManager);
+    this.updateMemberRole(groupUser, isManager);
   }
 
   /**
    * Whenever a member's is removed from the group
    * @param {Event} event A click DOM event
    * @param {object} groupUser A group user
-   * @return {Promise<void>}
    */
-  async handleMemberRemoved(event, groupUser) {
-    await this.removeMember(groupUser);
+  handleMemberRemoved(event, groupUser) {
+    this.removeMember(groupUser);
   }
 
   /**
    * Whenever the user wants to submit the changes
    * @param {Event} event A submit DOM event
-   * @return {Promise<void>}
+   * @returns {Promise<void>}
    */
   async handleSubmit(event) {
     event.preventDefault();
 
-    await this.resetErrors();
+    this.resetErrors();
     const actions = Object.assign(this.state.actions, {processing: true});
     this.setState({actions});
 
-    await this.validate();
+    this.validate();
     if (this.hasErrors()) {
       return this.handleValidateError();
     }
@@ -325,7 +318,6 @@ class EditUserGroup extends Component {
 
   /**
    * Focus the field of the form which is in error state.
-   * @return {void}
    */
   focusFieldError() {
     if (this.hasErrors("name")) {
@@ -335,7 +327,6 @@ class EditUserGroup extends Component {
 
   /**
    * Whenever the user will to close the dialog
-   * @return {void}
    */
   handleClose() {
     this.close();
@@ -343,7 +334,6 @@ class EditUserGroup extends Component {
 
   /**
    * handleAutocompleteOpen
-   * @return {void}
    */
   handleAutocompleteOpen() {
     this.setState({autocompleteOpen: true});
@@ -351,7 +341,6 @@ class EditUserGroup extends Component {
 
   /**
    * handleAutocompleteClose
-   * @return {void}
    */
   handleAutocompleteClose() {
     this.setState({autocompleteOpen: false});
@@ -362,16 +351,15 @@ class EditUserGroup extends Component {
    * What happens when an item in the autocomplete list is selected
    * e.g. if it's not already in the list, add it and scroll
    * @param {object} user The selected user
-   * @return {void}
    */
-  async handleAutocompleteSelect(user) {
+  handleAutocompleteSelect(user) {
     const groupUser = this.groupToEdit.groups_users.find(groupUser => groupUser.user_id === user.id);
     // Case of previously deleted member and re-added
     if (groupUser) {
-      await this.restoreMember(groupUser);
+      this.restoreMember(groupUser);
     } else {
       // Case of fresh member
-      await this.addMember(user);
+      this.addMember(user);
     }
   }
 
@@ -387,7 +375,7 @@ class EditUserGroup extends Component {
   /**
    * Returns true if the group user membership has changed.
    * @param {object} groupUser the group user
-   * @return {boolean}
+   * @returns {boolean}
    */
   isMemberChanged(groupUser) {
     const originalGroupUser = this.groupToEdit.groups_users.find(originalGroupUser => originalGroupUser.id === groupUser.id);
@@ -396,7 +384,7 @@ class EditUserGroup extends Component {
 
   /**
    * Returns true of the member has been added
-   * @return {boolean}
+   * @returns {boolean}
    */
   isMemberAdded(groupUser) {
     return groupUser.id === undefined;
@@ -405,90 +393,90 @@ class EditUserGroup extends Component {
   /**
    * Changes the group name
    * @param name The new name
-   * @return {Promise<*>}
    */
-  async updateName(name) {
-    await this.setState({groupToEdit: Object.assign({}, this.state.groupToEdit, {name})});
+  updateName(name) {
+    this.setState({groupToEdit: Object.assign({}, this.state.groupToEdit, {name})});
     if (this.state.validation.hasAlreadyBeenValidated) {
-      await this.validateName();
+      this.validateName();
     }
   }
 
   /**
    * Changes the group groups users
    * @param {array} The new groups users
-   * @return {Promise<*>}
+   * @param {boolean} shouldScrollToEnd if true triggers a scroll to the end of the list
    */
-  async updateGroupsUsers(groupsUsers) {
+  updateGroupsUsers(groupsUsers, shouldScrollToEnd) {
     const groupToEdit = Object.assign({}, this.state.groupToEdit, {groups_users: groupsUsers});
-    this.setState({groupToEdit});
+    this.setState({groupToEdit}, () => {
+      if (shouldScrollToEnd) {
+        // scroll at the bottom of the group users list
+        this.listRef.current.scrollTo(this.groupsUsers.length - 1);
+      }
+    });
   }
 
   /**
    * Update a member's group membership role
    * @param {object} groupUserToUpdate The group user whose permission will be updated
    * @param {boolean} isManager True if the members will be a group manager
-   * @retrurn {Promise<*>}
    */
-  async updateMemberRole(groupUserToUpdate, isManager) {
+  updateMemberRole(groupUserToUpdate, isManager) {
     const indexToUpdate = this.groupsUsers.findIndex(groupUser => groupUser.user_id === groupUserToUpdate.user_id);
     groupUserToUpdate.is_admin = isManager;
     this.groupsUsers[indexToUpdate] = groupUserToUpdate;
-    return this.updateGroupsUsers(this.groupsUsers);
+    this.updateGroupsUsers(this.groupsUsers);
   }
 
   /**
    * Add a user to the member list
    * @param {object} user The user to create a new group membership for
-   * @retrurn {Promise<*>}
    */
-  async addMember(user) {
+  addMember(user) {
     const mustBeAdmin = !this.hasManager;
     const groupUser = {user_id: user.id, is_admin: mustBeAdmin};
-    await this.decorateGroupUserWithUser(groupUser);
+    this.decorateGroupUserWithUser(groupUser);
     this.groupsUsers.push(groupUser);
-    return this.updateGroupsUsers(this.groupsUsers);
+    this.updateGroupsUsers(this.groupsUsers, true);
   }
 
   /**
    * Restore a previously removed group user to the list
    * @param {object} groupUserToRestore The group user to restore
-   * @retrurn {Promise<*>}
    */
-  async restoreMember(groupUserToRestore) {
-    await this.decorateGroupUserWithUser(groupUserToRestore);
+  restoreMember(groupUserToRestore) {
+    this.decorateGroupUserWithUser(groupUserToRestore);
     this.groupsUsers.push(groupUserToRestore);
-    return this.updateGroupsUsers(this.groupsUsers);
+    this.updateGroupsUsers(this.groupsUsers, true);
   }
 
   /**
    * Removes a member from the list
    * @param {object} groupUserToRemove The group user to remove
    */
-  async removeMember(groupUserToRemove) {
+  removeMember(groupUserToRemove) {
     const indexToRemove = this.groupsUsers.findIndex(groupUser => groupUser.user_id === groupUserToRemove.user_id);
-    const groupsUsers = this.groupsUsers.splice(indexToRemove, 1);
-    return this.updateGroupsUsers(groupsUsers);
+    const groupsUsers = this.groupsUsers;
+    groupsUsers.splice(indexToRemove, 1);
+    this.updateGroupsUsers(groupsUsers);
   }
 
   /**
    * Validate the form
-   * @return {Promise<void>}
    */
-  async validate() {
-    await this.validateName();
-    await this.setState({validation: Object.assign({}, this.state.validation, {hasAlreadyBeenValidated: true})});
+  validate() {
+    this.validateName();
+    this.setState({validation: Object.assign({}, this.state.validation, {hasAlreadyBeenValidated: true})});
   }
 
   /**
    * Validates the group name
-   * @return {Promise<void>}
    */
-  async validateName() {
-    await this.resetErrors("name");
+  validateName() {
+    this.resetErrors("name");
     const name = this.state.groupToEdit.name;
     if (name.trim() === "") {
-      await this.setError("name", "empty");
+      this.setError("name", "empty");
     }
   }
 
@@ -497,9 +485,8 @@ class EditUserGroup extends Component {
    * @param {string} domain The error namespace
    * @param {string} type The error type
    * @param {string|boolean?} value the error value
-   * @returns {Promise<void>}
    */
-  async setError(domain, type, value) {
+  setError(domain, type, value) {
     value = value || true;
     const errors = this.state.errors || {};
     errors[domain] = errors[domain] || {};
@@ -510,15 +497,14 @@ class EditUserGroup extends Component {
   /**
    * Reset the errors
    * @param {string?} domain (Optional) The domain to reset.
-   * @returns {Promise<void>}
    */
-  async resetErrors(domain) {
+  resetErrors(domain) {
     let errors = {};
     if (domain) {
       errors = this.state.errors;
       delete errors[domain];
     }
-    await this.setState({errors});
+    this.setState({errors});
   }
 
   /**
@@ -548,12 +534,12 @@ class EditUserGroup extends Component {
    * @returns {*}
    */
   hasGroupNameAlreadyExists(errorData) {
-    return errorData && errorData.body && errorData.body.name && errorData.body.name.group_unique;
+    return errorData?.body?.name?.group_unique;
   }
 
   /**
    * Edits the current group
-   * @return {Promise<*>}
+   * @returns {Promise<void>}
    */
   async updateGroup() {
     const groupDto = {
@@ -580,14 +566,13 @@ class EditUserGroup extends Component {
 
   /**
    * Whenever the group has been updated successfully
-   * @return {void}
    */
-  async onEditFailure(error) {
+  onEditFailure(error) {
     // It can happen when the user has closed the passphrase entry dialog by instance.
     if (error.name === "UserAbortsOperationError") {
       this.setState({processing: false});
     } else if (this.hasGroupNameAlreadyExists(error.data)) {
-      await this.setError("name", "alreadyExists");
+      this.setError("name", "alreadyExists");
       this.setState({processing: false});
     } else {
       // Unexpected error occurred.
@@ -600,7 +585,6 @@ class EditUserGroup extends Component {
   /**
    * Handle error to display the error dialog
    * @param {object} error The error
-   * @return {void}
    */
   onError(error) {
     const errorDialogProps = {
@@ -659,32 +643,59 @@ class EditUserGroup extends Component {
     const matchUser = (word, user) => matchUsernameProperty(word, user) || matchNameProperty(word, user);
     const matchText = user => words.every(word => matchUser(word, user));
 
-    const usersMatched = this.props.context.users.filter(user => user.active === true && !this.isMember(user))
-      .filter(matchText);
-    return this.decorateUsersWithGpgkey(usersMatched);
+    let currentCount = 0;
+    const firstUsersMatched = this.props.context.users.filter(user => {
+      const isUserMatching = currentCount < Autocomplete.DISPLAY_LIMIT
+        && user.active === true
+        && !this.isMember(user)
+        && matchText(user);
+
+      if (isUserMatching) {
+        currentCount++;
+      }
+      return isUserMatching;
+    });
+    return this.decorateUsersWithGpgkey(firstUsersMatched);
   }
 
   /**
-   * Get the tooltip message
-   * @param groupUser The group user
+   * Use to render a single item of the user group list
+   * @param {integer} index of the item in the source list
+   * @param {integer} key index of the HTML element in the ReactList
    * @returns {JSX.Element}
    */
-  getTooltipMessage(groupUser) {
-    return <>
-      <div className="email"><strong>{groupUser.user.username}</strong></div>
-      <div className="fingerprint">{this.formatFingerprint(groupUser.user.gpgkey.fingerprint)}</div>
-    </>;
+  renderItem(index, key) {
+    const groupUser = this.groupsUsers[index];
+    const isMemberChanged = this.isMemberChanged(groupUser);
+    const isMemberAdded = this.isMemberAdded(groupUser);
+    const editUserGroupItemKey = groupUser.user_id;
+    return (
+      <EditUserGroupItem
+        key={editUserGroupItemKey}
+        itemKey={editUserGroupItemKey}
+        isMemberChanged={isMemberChanged}
+        isMemberAdded={isMemberAdded}
+        groupUser={groupUser}
+        onMemberRoleChange={this.handleMemberRoleChange}
+        onMemberRemoved={this.handleMemberRemoved}
+        areActionsAllowed={this.areActionsAllowed}
+        isLastItemDisplayed={key >= 2}
+      />
+    );
   }
 
   /**
-   * Get permissions
-   * @returns {[{label: *, value: boolean}]}
+   * Use to render the container of the list of the ReactList component
+   * @param {Array<JSX.Element>} items the list of the items to be rendered as children element of the conainer
+   * @param {*} ref the ref ReactList needs to manage the scrll
+   * @returns {JSX.Element}
    */
-  get permissions() {
-    return [
-      {value: false, label: this.translate("Member")},
-      {value: true, label: this.translate("Group manager")}
-    ];
+  renderContainer(items, ref) {
+    return (
+      <ul className="permissions groups_users" ref={ref}>
+        {items}
+      </ul>
+    );
   }
 
   /**
@@ -706,14 +717,14 @@ class EditUserGroup extends Component {
         onClose={this.handleClose}
         disabled={!this.areActionsAllowed}>
 
-        {!this.isLoading &&  this.props.context.loggedInUser &&
+        {this.props.context.loggedInUser &&
         <form
           className="group-form"
           onSubmit={this.handleSubmit}
           noValidate>
 
           <div className="form-content">
-            <div className={`input text required ${this.hasErrors("name") ? "error" : ""}`}>
+            <div className={`input text required ${this.hasErrors("name") ? "error" : ""} ${!this.areActionsAllowed || !this.isLoggedInUserAdmin() ? 'disabled' : ''}`}>
               <label htmlFor="js_field_name"><Trans>Group name</Trans></label>
               <input
                 id="group-name-input"
@@ -742,57 +753,27 @@ class EditUserGroup extends Component {
           </div>
 
           <div className="group_members">
-            <div className="form-content permission-edit">
-              <ul className="permissions scroll groups_users">
-                {this.groupsUsers.map(groupUser => (
-                  <li
-                    key={groupUser.user_id}
-                    className={`row ${this.isMemberChanged(groupUser) ? 'permission-updated' : ''}`}>
-
-                    <UserAvatar
-                      baseUrl={this.props.context.userSettings.getTrustedDomain()}
-                      user={groupUser.user}/>
-
-                    <div className="aro">
-                      <div className="aro-name">
-                        <span className="ellipsis">{this.getUserFullname(groupUser.user)}</span>
-                        <Tooltip message={this.getTooltipMessage(groupUser)}>
-                          <Icon name="info-circle"/>
-                        </Tooltip>
-                      </div>
-                      <div className="permission_changes">
-                        {this.isMemberAdded(groupUser) && <span><Trans>Will be added</Trans></span>}
-                        {this.isMemberChanged(groupUser) && !this.isMemberAdded(groupUser) &&
-                        <span><Trans>Will be updated</Trans></span>}
-                        {!this.isMemberChanged(groupUser) && !this.isMemberAdded(groupUser) && <span><Trans>Unchanged</Trans></span>}
-
-                      </div>
-                    </div>
-
-                    <div className="rights">
-                      <Select
-                        className="permission inline"
-                        value={groupUser.is_admin}
-                        items={this.permissions}
-                        onChange={event => this.handleMemberRoleChange(event, groupUser)}
-                        disabled={!this.areActionsAllowed}/>
-                    </div>
-
-                    <div className="actions">
-                      <a
-                        title="remove"
-                        className={`remove-item button button-transparent ${!this.areActionsAllowed ? "disabled" : ""}`}
-                        onClick={event => this.handleMemberRemoved(event, groupUser)}>
-                        <Icon name="close"/>
-                        <span className="visuallyhidden">remove</span>
-                      </a>
-                    </div>
-                  </li>
-                ))
-                }
-              </ul>
+            <div className="form-content scroll permission-edit">
+              {this.isLoading &&
+                <ul className="permissions groups_users">
+                  <SharePermissionItemSkeleton/>
+                  <SharePermissionItemSkeleton/>
+                  <SharePermissionItemSkeleton/>
+                </ul>
+              }
+              {!this.isLoading &&
+                <ReactList
+                  ref={this.listRef}
+                  itemRenderer={this.renderItem}
+                  itemsRenderer={this.renderContainer}
+                  length={this.groupsUsers.length}
+                  minSize={4}
+                  type={this.groupsUsers.length < 3 ? "simple" : "uniform"}
+                  threshold={30}>
+                </ReactList>
+              }
             </div>
-            {!this.hasMembers &&
+            {!this.isLoading && !this.hasMembers &&
             <div className="message warning">
               <span><Trans>The group is empty, please add a group manager.</Trans></span>
             </div>
@@ -802,7 +783,7 @@ class EditUserGroup extends Component {
               <span><Trans>Please make sure there is at least one group manager.</Trans></span>
             </div>
             }
-            {!this.isManager &&
+            {!this.isLoading && !this.isManager &&
             <div className="message warning feedback cannot-add-user">
               <span><Trans>Only the group manager can add new people to a group.</Trans></span>
             </div>

package/src/react-extension/components/UserGroup/EditUserGroup/EditUserGroup.test.js

@@ -39,8 +39,12 @@ describe("See the Edit User Group", () => {
       const requestGpgMockImpl = jest.fn(() => mockGpgKey);
       requestMock = mockContextRequest(context, requestGpgMockImpl);
       page = new EditUserGroupTestPage(context, props);
+      jest.useFakeTimers();
     });
 
+    afterEach(() => {
+      jest.clearAllTimers();
+    });
 
     it('As AD I should change the name of the group', async() => {
       expect.assertions(3);
@@ -97,7 +101,10 @@ describe("See the Edit User Group", () => {
 
       expect(page.canAdd).toBeTruthy();
 
-      await page.addGroupMember('dame');
+      await page.type('dame', page.usernameInput);
+      jest.runOnlyPendingTimers();
+      await waitFor(() => {});
+      await page.click(page.getAutocompleteItem(0));
 
       expect(page.groupMembersCount).toBe(3);
       expect(page.groupMember(3).name).toBe("Dame Steve Shirley");