passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/react-extension/components/UserDetails/DisplayUserDetailsInformation/DisplayUserDetailsInformation.test.stories.js

@@ -1,100 +1,39 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         2.13.0
+ */
 import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
-import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DisplayUserDetailsInformation from "./DisplayUserDetailsInformation";
-import MockPort from "../../../test/mock/MockPort";
-
+import {defaultProps} from "./DisplayUserDetailsInformation.test.data";
 
 export default {
-  title: 'Passbolt/UserDetails/DisplayUserDetailsInformation',
+  title: 'Passbolt Component/UserDetails/DisplayUserDetailsInformation',
   component: DisplayUserDetailsInformation
 };
 
-const context = {
-  port: new MockPort(),
-  userSettings: {
-    getTrustedDomain: () => (new URL(window.location.href)).origin
-  },
-  siteSettings: {
-    getServerTimezone: () => ""
-  },
-  roles: [
-    {
-      id: 'a58de6d3-f52c-5080-b79b-a601a647ac85',
-      name: 'Admin'
-    }
-  ]
-};
-
-
-
 const Template = args =>
-  <AppContext.Provider value={context}>
-    <div className="panel aside">
-      <div className="detailed-information">
-        <MemoryRouter initialEntries={['/']}>
-          <Route component={routerProps => <DisplayUserDetailsInformation {...args} {...routerProps}/>}></Route>
-        </MemoryRouter>
-      </div>
+  <div className="panel aside">
+    <div className="detailed-information">
+      <MemoryRouter initialEntries={['/']}>
+        <Route component={routerProps => <DisplayUserDetailsInformation {...args} {...routerProps}/>}></Route>
+      </MemoryRouter>
     </div>
-  </AppContext.Provider>;
+  </div>;
 
 Template.propTypes = {
   context: PropTypes.object,
 };
 
 export const Initial = Template.bind({});
-Initial.args = {
-  userWorkspaceContext: {
-    onDetailsLocked: () => {},
-    details: {
-      user: {
-        "id": "54c6278e-f824-5fda-91ff-3e946b18d994",
-        "role_id": "a58de6d3-f52c-5080-b79b-a601a647ac85",
-        "role": {
-          "created": "2012-07-04T13:39:25+00:00",
-          "description": "Logged in user",
-          "id": "a58de6d3-f52c-5080-b79b-a601a647ac85",
-          "modified": "2012-07-04T13:39:25+00:00",
-          "name": "user"
-        },
-        "username": "dame@passbolt.com",
-        "active": true,
-        "deleted": false,
-        "created": "2020-05-13T07:32:49+00:00",
-        "modified": "2020-05-13T08:32:49+00:00",
-        "profile": {
-          "id": "2766ff6b-87f1-53a9-98fd-72cd32a3df69",
-          "user_id": "54c6278e-f824-5fda-91ff-3e946b18d994",
-          "first_name": "Dame Steve",
-          "last_name": "Shirley",
-          "created": "2020-05-13T09:32:49+00:00",
-          "modified": "2020-05-13T09:32:49+00:00",
-          "avatar": {
-            "id": "81100609-d60d-4dc8-a8c8-de45522eee1b",
-            "user_id": "54c6278e-f824-5fda-91ff-3e946b18d994",
-            "foreign_key": "2766ff6b-87f1-53a9-98fd-72cd32a3df69",
-            "model": "Avatar",
-            "filename": "dame steve.png",
-            "filesize": 20676,
-            "mime_type": "image\/png",
-            "extension": "png",
-            "hash": "f2695972b9009970ac85aae95f907693268cd249",
-            "path": "Avatar\/1b\/9d\/80\/81100609d60d4dc8a8c8de45522eee1b\/81100609d60d4dc8a8c8de45522eee1b.png",
-            "adapter": "Local",
-            "created": "2020-05-13T09:32:51+00:00",
-            "modified": "2020-05-13T09:32:51+00:00",
-            "url": {
-              "medium": "img\/public\/Avatar\/1b\/9d\/80\/81100609d60d4dc8a8c8de45522eee1b\/81100609d60d4dc8a8c8de45522eee1b.a99472d5.png",
-              "small": "img\/public\/Avatar\/1b\/9d\/80\/81100609d60d4dc8a8c8de45522eee1b\/81100609d60d4dc8a8c8de45522eee1b.65a0ba70.png"
-            }
-          }
-        },
-        "__placeholder_last_logged_in__": "",
-        "last_logged_in": "",
-        is_mfa_enabled: false
-      }
-    }
-  }
-};
+Initial.args = defaultProps();

package/src/react-extension/components/UserDetails/DisplayUserDetailsPublicKey/DisplayUserDetailsPublicKey.js

@@ -91,7 +91,14 @@ class DisplayUserDetailsPublicKey extends React.Component {
     const fingerprint = gpgkeyInfo.fingerprint;
     const type = this.gpgkeyType[gpgkeyInfo.algorithm];
     const created = this.formatDate(gpgkeyInfo.created);
-    const expires = gpgkeyInfo.expires === "Never" ? this.translate("Never") : this.formatDate(gpgkeyInfo.expires);
+    let expires;
+    if (gpgkeyInfo.expires === null) {
+      expires = "n/a";
+    } else if (gpgkeyInfo.expires === "Infinity") {
+      expires = this.translate("Never");
+    } else {
+      expires = this.formatDate(gpgkeyInfo.expires);
+    }
     const armoredKey = gpgkeyInfo.armored_key;
 
     const formatedGpgkeyInfo = {fingerprint, type, created, expires, armoredKey};

package/src/react-extension/components/UserDetails/DisplayUserDetailsPublicKey/DisplayUserDetailsPublicKey.test.data.js

@@ -24,7 +24,6 @@ export function defaultAppContext(appContext) {
   return Object.assign(defaultAppContext, appContext || {});
 }
 
-
 /**
  * Default props
  * @returns {any}
@@ -99,9 +98,28 @@ export const mockGpgKey = {
   "keyId": "5D9B054F",
   "fingerprint": "03F60E958F4CB29723ACDF761353B5B15D9B054F",
   "algorithm": "rsa",
-  "expires": null,
+  "expires": "Infinity",
   "key_created": "2015-08-09T12:48:31+00:00",
   "deleted": false,
   "created": "2020-08-19T14:56:54+00:00",
   "modified": "2020-08-19T14:56:54+00:00"
 };
+
+/**
+ * Mocked a gpg key
+ */
+export const mockInvalidGpgKey = {
+  "id": "04481719-5d9d-5e22-880a-a6b9270601d2",
+  "user_id": "f848277c-5398-58f8-a82a-72397af2d450",
+  "armored_key": "-----BEGIN PGP PRIVATE KEY BLOCK-----\nVersion: OpenPGP.js v0.3.0\nComment: https://openpgpjs.org\n\nxbYEUubX7gEBANDWhzoP+Tr/IyRSv++vl5jBesQIPTYGQBdzF4YDnGEBABEB\nAAH+CQMIfzdw4/PKNl5gVXdtfDFdSIN8yJT2rbeg3+SsWexXZNNdRaONWaiB\nZ5cG9Q6+BoXKsEshIdcYOgwsAgRxlPpRA34Vvmg2QBk7PhdrkbK7aqENsJ1w\ndIlLD6p9GmLE20yVff58/fMiUtPRgsD83SpKTAX6EM1ulpkuQQNjmrVc5qc8\n7AMdF80JdW5kZWZpbmVkwj8EEAEIABMFAlLm1+4JEBD8MASZrpALAhsDAAAs\nQgD8CUrwv7Hrp/INR0/UvAvzS52VztREQwQWTJMrgTNHBGjHtgRS5tfuAQEA\nnys9SaSgR+l6iZc/M8hGIUmbuahE2/+mtw+/l0RO+WcAEQEAAf4JAwjr39Yi\nFzjxImDN1IoYVsonA9M+BtIIJHafuQUHjyEr1paJJK5xS6KlyGgpMTXTD6y/\nqxS3ZSPPzHGRrs2CmkVEiPmurn9Ed05tb0y9OnJkWtuh3z9VVq9d8zHzuENa\nbUfli+P/v+dRaZ+1rSOxUFbFYbFB5XK/A9b/OPFrv+mb4KrtLxugwj8EGAEI\nABMFAlLm1+4JEBD8MASZrpALAhsMAAC3IgD8DnLGbMnpLtrX72RCkPW1ffLq\n71vlXMJNXvoCeuejiRw=\n-----END PGP PRIVATE KEY BLOCK-----",
+  "bits": 256,
+  "uid": "undefined \u003C\u003E",
+  "keyId": "99ae900b",
+  "fingerprint": "C694577FF69DE85C07935DF310FC300499AE900B",
+  "algorithm": "rsa",
+  "expires": null,
+  "key_created": "2014-01-27T22:04:30.000Z",
+  "deleted": false,
+  "created": "2020-08-19T14:56:54+00:00",
+  "modified": "2020-08-19T14:56:54+00:00"
+};

package/src/react-extension/components/UserDetails/DisplayUserDetailsPublicKey/DisplayUserDetailsPublicKey.test.js

@@ -16,13 +16,22 @@
  * Unit tests on FilterUserByShortcut in regard of specifications
  */
 
-import {defaultAppContext, defaultProps, mockGpgKey} from "./DisplayUserDetailsPublicKey.test.data";
+import {defaultAppContext, defaultProps, mockGpgKey, mockInvalidGpgKey} from "./DisplayUserDetailsPublicKey.test.data";
 import DisplayUserDetailsPublicKeyPage from "./DisplayUserDetailsPublicKey.test.page";
+import {DateTime} from "luxon";
 
 beforeEach(() => {
   jest.resetModules();
 });
 
+function formatDate(data) {
+  try {
+    return DateTime.fromJSDate(new Date(data)).setLocale("en-US").toLocaleString(DateTime.DATETIME_FULL);
+  } catch (error) {
+    return "";
+  }
+}
+
 describe("Display User Details Information", () => {
   let page; // The page to test against
   const context = defaultAppContext(); // The applicative context
@@ -37,10 +46,12 @@ describe("Display User Details Information", () => {
   });
 
   it('As LU I should not initially see the information area as expanded', () => {
+    expect.assertions(1);
     expect(page.isCollapsed).toBeTruthy();
   });
 
   it('As LU I should see the information area when I collapse the area', async() => {
+    expect.assertions(2);
     await page.toggleCollapse();
     expect(page.isCollapsed).toBeFalsy();
 
@@ -49,6 +60,7 @@ describe("Display User Details Information", () => {
   });
 
   it('As LU I should copy the public key', async() => {
+    expect.assertions(2);
     jest.spyOn(props.actionFeedbackContext, "displaySuccess").mockImplementationOnce(() => {});
     await page.toggleCollapse();
     await page.copyPublicKey();
@@ -57,8 +69,20 @@ describe("Display User Details Information", () => {
   });
 
   it('As LU I should see the appropriate detailed user fingerprint', async() => {
+    expect.assertions(2);
     await page.toggleCollapse();
     expect(page.fingerprint).toContain('03F6 0E95 8F4C B297 23AC<br>DF76 1353 B5B1 5D9B 054F');
     expect(page.type).toBe('RSA');
   });
+
+  it('As LU I should see the details of an invalid key', async() => {
+    expect.assertions(4);
+    jest.spyOn(context.port, 'request').mockImplementation(jest.fn(() => mockInvalidGpgKey));
+
+    await page.toggleCollapse();
+    expect(page.fingerprint).toContain('C694 577F F69D E85C 0793<br>5DF3 10FC 3004 99AE 900B');
+    expect(page.type).toBe('RSA');
+    expect(page.created).toBe(formatDate('2020-08-19T14:56:54+00:00'));
+    expect(page.expires).toBe('n/a');
+  });
 });

package/src/react-extension/components/UserDetails/DisplayUserDetailsPublicKey/DisplayUserDetailsPublicKey.test.stories.js

@@ -3,38 +3,23 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DisplayUserDetailsPublicKey from "./DisplayUserDetailsPublicKey";
-
+import {mockGpgKey, mockInvalidGpgKey} from "./DisplayUserDetailsPublicKey.test.data";
 
 export default {
-  title: 'Passbolt/UserDetails/DisplayUserDetailsPublicKey',
+  title: 'Passbolt Component/UserDetails/DisplayUserDetailsPublicKey',
   component: DisplayUserDetailsPublicKey
 };
 
-const context = {
-  port: {
-    request: () =>  ({
-      "id": "91d8a7fd-3ab3-5e98-a4a5-0d8694ff23b9",
-      "keyId": "91d8a7fd-3ab3-5e98-a4a5-0d8694ff23b9",
-      "user_id": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
-      "armored_key": "-----BEGIN PGP PUBLIC KEY BLOCK-----\n\nmQINBFY06pcBEADjYRuq05Zatu4qYtXmexbrwtUdakNJJHPlWxcusohdTLUmSXrt\n7LegXBE3OjvV9HbdBQfbpjitFp8eJw5krYQmh1+w\/UYjb5Jy\/A7ma3oawzbVwNpL\nwuAafYma5LLLloZD\/OpYKprhWfW9FHKyq6t+AcH5CFs\/HvixdrdbAO7K1\/z6mgWc\nT6HBP5\/dGTseAlrvUDTsW1kzo6qsrOWoUunrqm31umsvcfNROtDKM16zgZl+GlYY\n1BxNcRKr1\/AcZUrp4zdSSc6IXrYjJ+1kgHz\/ZoSrKn5QiqEn7wQEveJu+jNGSv8j\nMvQgjq+AmzveJ\/4f+RQirbe9JOeDgzX7NqloRil3I0FPFoivbRU0PHi4N2q7sN8e\nYpXxXzuL+OEq1GQe5fTsSotQTRZUJxbdUS8DfPckQaK79HoybTQAgA6mgQf\/C+U0\nX2TiBUzgBuhayiW12kHmKyK02htDeRNOYs4bBMdeZhAFm+5C74LJ3FGQOHe+\/o2o\nBktk0rAZScjizijzNzJviRB\/3nAJSBW6NSNYcbnosk0ET2osg2tLvzegRI6+NQJE\nb0EpByTMypUDhCNKgg5aEDUVWcq4iucps\/1e6\/2vg2XVB7xdphT4\/K44ZeBHdFuf\nhGQvs8rkAPzpkpsEWKgpTR+hdhbMmNiL984Ywk98nNuzgfkgpcP57xawNwARAQAB\ntCtQYXNzYm9sdCBEZWZhdWx0IEFkbWluIDxhZG1pbkBwYXNzYm9sdC5jb20+iQJO\nBBMBCgA4AhsDBQsJCAcDBRUKCQgLBRYCAwEAAh4BAheAFiEEDB0XYRENHjPJAG0a\nWxszLtBkJtMFAl0bmoYACgkQWxszLtBkJtPnxg\/\/Q9WOWUGf7VOnfbaIix3NGAON\nI7rgXuLFc1E0vG20XWT2+C6xGskFwjoJbiyDrbMYnILGn7vDIn3MSoITemLjtt97\n\/lEXK7AgbJEWQWF1lxpXm0nCvjJ6h+qatGK96ncjcua6ecUut10A\/CACpuqxfKOh\nD6CaM5l\/ksEDtwvrv2MIaVajuCvwg+yUx0I0rfAQv0YTXbJ5MRn1pvOo3c6n5Q0z\n5eu\/iiG0UNNIE3Tk5KpT02MTMv5ullpt3mtNjMHH0\/TdPxCtUKVh4q34x3syiYLe\npaddf5Ctv9CL52VWfsG3qFPHp7euOFY8lfzuemoqD9jcE7QIJnkCmwtLXLQrE0O2\nRW\/y\/oXqrETXu2sFyHMr1Xw\/\/QeJgIv63LBGmcPOj93VyHIlcUDarM2oq2+DXKxr\nDs2xfnFKVCZwpSvecIfKXUKsnX3AGrpetoZdfw0jAUVI3nt6YCu8KvczXxetfjOV\n3HHXa40gtOZk5OoKbfuTjzQlpc1oaDyLH8PT1GYsN3wWoDs4zulh6uKDpSt+4z58\nH1BfPFlrO2uhZSfk3E83uBQXZcABeXNxCdrTCJm8P90sbjLu1TlaeOnrWwVT7Yq8\ni8LE7lbAXnT1HjQlDi8GB2+2EnZZmOX+Z84a16jDElZazUNsE8zT7OmyjuB7GGDb\nQEFYzkb9dr1j1sukzty5Ag0EVjTqlwEQAJ37C9s4pq4jvcEF3bJgL+q3SBolgBIp\nN1g1\/woi9vEiOh+7e08Kr8mEhF04cpRDbhY6dcZ8OIXIQ99fgdNXfehlAWnI56NE\n\/FOIyif8TvGBfO6yE35fKSskwGNdUZWIZ0U0pxSXQvB+KEGWlq2c3Uf\/jhTZDnLN\nvfDjnYmn5ycp5sVWhtAmKFha9NJ6LGA0D1MC+jcCJCKtQRGgVvlqOESFDmQ7Pu8\/\nayr2BO0URHJ0Ob30lHluCnoKIv50qGpL9BYuGAdCfLBHXzRQhHIbfc\/cTPkK1kTX\nX5x\/MkiEl88TeGN+yjNVS7qqdxYgs+QYnDDZqevhWEvVyXVQjcCWSIHfjL1x5Ndq\nYL6+ci\/OxyIFoPs4K2umN3JPmpFi+fIPh2CexKy6BnyE8oAgNvgdDb6ZOfAtvShZ\nPM7QG4LZal2+nYp4n7gJRh6kepTQT\/4Bua0xOtRQhgcI4nGtcCxEDRMMzjqbGYlc\nnciMjsiMg9LPpWPDA+xKrRZKYwVFy8vLx\/alOz\/h1BZjx2u7YmuaGENxE62Lfyh0\nxeoCBDTdnWEOQTH6LVsomVtUO1FVap1t5jkYSdpxBuHf8\/2Ye7N3FTMRKe9n4e75\nsAJ00utnMl6P2Zca9mM4T29PK+LPFx2G2h35DQ7MbEid1cAZ8QVR3UyoiR8+u9jM\nek+9uFCm+nAxABEBAAGJAjYEGAEKACACGwwWIQQMHRdhEQ0eM8kAbRpbGzMu0GQm\n0wUCXRuamQAKCRBbGzMu0GQm004PD\/9sFmFkdoSqwU\/En77+h0gt4knlgZbgj0iR\nromnknIwLKBbJJXksHmMPXJB9b3WZ\/gGV3pPVtDWDKg3NZW4HLK13w3s3wQ2ViVV\nA6FzABDSkI3YBqkkasLRZU7oN9XajdFfph5wLhDSgTCjSncGfcjVzPugWKLqPPih\nZO6mpqxSFYEhx+p\/O80Tlj90UsOFRdot7cqn5wOhXZtKsQ0RwaA\/uq\/sFe6UNKHG\n2RBgQfoj5JbazJbvlgMiWxhBalwZKQWs8IBh\/4ag8AFwwoJN+gOtNM9C4UCHu+yt\n0Tv2\/Tu+Apcj0oyFaKJD4uQUmChQ2fDRysqJEIhee+yL29mrdcB4jG7Q2rt8HbhY\nwlsHKgas0YIHdR6dUOCiyw72i0khwrd2PDgxKRu5+cob6wMSqXbIIxFLLLACHy2s\nKd6fQcg8FxoivEiF0lRfMi32A\/YWGJ\/k1OoFCzW55KFXqqBMptYZWh2Jezhttmid\nYHPc7jas7HEPnw3SvVM0gYAcmEVWWvjKfUpOhSYYkk\/B71w9RuIpPyyI7G2XI8Db\nG2ttngDIOL8njS6ybU9Og6yTNUoHL1wWEZN1b3fznKHcC9lyr8MIg00QNeDItt9i\nILCOkjoEdUdauqlRIa+EmUu+AL+JobrlQTzyrCIm7aaT3Hp9EyaEx5xvJDWtmjgf\nFYNCFtV1fw==\n=amwR\n-----END PGP PUBLIC KEY BLOCK-----",
-      "bits": 4096,
-      "uid": "Passbolt Default Admin \u003Cadmin@passbolt.com\u003E",
-      "key_id": "D06426D3",
-      "fingerprint": "0C1D1761110D1E33C9006D1A5B1B332ED06426D3",
-      "type": "RSA",
-      "expires": null,
-      "key_created": "2015-10-31T16:21:43+00:00",
-      "deleted": false,
-      "created": "2020-04-20T11:32:18+00:00",
-      "modified": "2020-04-20T11:32:18+00:00",
-      "algorithm": "rsa_encrypt_sign",
-      "length": 4096
-    })
-  }
-};
-
+function defaultContext(data = {}) {
+  const defaultData = {
+    port: {
+      request: () => mockGpgKey
+    }
+  };
+  return Object.assign(defaultData, data);
+}
 
-const Template = args =>
+const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <div className="panel aside">
       <div className="detailed-information">
@@ -51,6 +36,23 @@ Template.propTypes = {
 
 export const Initial = Template.bind({});
 Initial.args = {
+  context: defaultContext(),
+  userWorkspaceContext: {
+    details: {
+      user: {
+        "id": "54c6278e-f824-5fda-91ff-3e946b18d994",
+      }
+    }
+  }
+};
+
+export const InvalidKey = Template.bind({});
+InvalidKey.args = {
+  context: defaultContext({
+    port: {
+      request: () => mockInvalidGpgKey
+    }
+  }),
   userWorkspaceContext: {
     details: {
       user: {

package/src/react-extension/components/UserGroup/CreateUserGroup/CreateUserGroup.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 FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitButton";
@@ -22,11 +23,8 @@ import Autocomplete from "../../Common/Inputs/Autocomplete/Autocomplete";
 import {withAppContext} from "../../../contexts/AppContext";
 import {withDialog} from "../../../contexts/DialogContext";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
-import UserAvatar from "../../Common/Avatar/UserAvatar";
-import Icon from "../../../../shared/components/Icons/Icon";
 import {Trans, withTranslation} from "react-i18next";
-import Tooltip from "../../Common/Tooltip/Tooltip";
-import Select from "../../Common/Select/Select";
+import EditUserGroupItem from "../EditUserGroup/EditUserGroupItem";
 
 class CreateUserGroup extends Component {
   /**
@@ -77,6 +75,9 @@ class CreateUserGroup extends Component {
     this.handleNameInputKeyUp = this.handleNameInputKeyUp.bind(this);
     this.handleSelectUpdate = this.handleSelectUpdate.bind(this);
     this.handleDeleteClickEvent = this.handleDeleteClickEvent.bind(this);
+
+    this.renderItem = this.renderItem.bind(this);
+    this.renderContainer = this.renderContainer.bind(this);
   }
 
   /**
@@ -320,7 +321,7 @@ class CreateUserGroup extends Component {
     groups_users.push({user: aro, is_admin});
     this.setState({groups_users}, () => {
       // scroll at the bottom of the group users list
-      this.groupUsersListRef.current.scrollTop = this.groupUsersListRef.current.scrollHeight;
+      this.groupUsersListRef.current.scrollTo(groups_users.length - 1);
     });
   }
 
@@ -357,16 +358,26 @@ class CreateUserGroup 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 && !userAlreadyAdded(user))
-      .filter(matchText);
+    let currentCount = 0;
+    const firstUsersMatched = this.props.context.users.filter(user => {
+      const isUserMatching = currentCount < Autocomplete.DISPLAY_LIMIT
+        && user.active === true
+        && !userAlreadyAdded(user)
+        && matchText(user);
+
+      if (isUserMatching) {
+        currentCount++;
+      }
+      return isUserMatching;
+    });
 
-    return this.decorateUsersWithGpgKey(usersMatched);
+    return this.decorateUsersWithGpgKey(firstUsersMatched);
   }
 
   /**
    * Decorate a list of users with their gpg key.
    * @param {array} users
-   * @returns {array}
+   * @returns {Promise<array}
    */
   async decorateUsersWithGpgKey(users) {
     const decorateGroupsUsersWithGpgKey = async user => Object.assign(user, {gpgkey: await this.props.context.port.request('passbolt.keyring.get-public-key-info-by-user', user.id)});
@@ -449,6 +460,44 @@ class CreateUserGroup extends Component {
     ];
   }
 
+  /**
+   * 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}
+   */
+  renderItem(index, key) {
+    const groupUser = this.state.groups_users[index];
+    const createUserGroupItemKey = groupUser.user.id;
+    return (
+      <EditUserGroupItem
+        key={createUserGroupItemKey}
+        itemKey={createUserGroupItemKey}
+        groupUser={groupUser}
+        onMemberRoleChange={event => this.handleSelectUpdate(event, groupUser.user.id)}
+        onMemberRemoved={event => this.handleDeleteClickEvent(event, groupUser.user.id)}
+        isLastItemDisplayed={key >= 2}
+        isMemberChanged={true}
+        isMemberAdded={true}
+        areActionsAllowed={!this.hasAllInputDisabled()}
+      />
+    );
+  }
+
+  /**
+   * 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 scroll
+   * @returns {JSX.Element}
+   */
+  renderContainer(items, ref) {
+    return (
+      <ul className="permissions groups_users" ref={ref}>
+        {items}
+      </ul>
+    );
+  }
+
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -470,11 +519,11 @@ class CreateUserGroup extends Component {
         disabled={this.hasAllInputDisabled()}>
         <form className="group-form" onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
-            <div className={`input text required ${this.state.nameError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="group_name"><Trans>Group name</Trans></label>
               <input id="group-name-input" name="name" className="required" maxLength="50" type="text" placeholder={this.translate("group name")}
                 onKeyUp={this.handleNameInputKeyUp} onChange={this.handleInputChange}
-                disabled={this.state.processing} ref={this.nameInputRef}/>
+                disabled={this.hasAllInputDisabled()} ref={this.nameInputRef}/>
               {this.state.nameError &&
               <div className="name error-message">{this.state.nameError}</div>
               }
@@ -485,55 +534,34 @@ class CreateUserGroup extends Component {
             </div>
           </div>
           <div className="group_members">
-            <div className="form-content permission-edit">
+            <div className="form-content scroll permission-edit">
               {this.hasMembers() &&
-              <ul className="permissions scroll groups_users" ref={this.groupUsersListRef}>
-                {this.state.groups_users.map(groups_user =>
-                  <li key={groups_user.user.id} className="row">
-                    <UserAvatar user={groups_user.user} baseUrl={this.props.context.userSettings.getTrustedDomain()}/>
-                    <div className="aro">
-                      <div className="aro-name">
-                        <span className="ellipsis">{this.getUserFullname(groups_user.user)}</span>
-                        <Tooltip message={this.getTooltipMessage(groups_user)}>
-                          <Icon name="info-circle"/>
-                        </Tooltip>
-                      </div>
-                      <div className="permission_changes">
-                        <span><Trans>Will be added</Trans></span>
-                      </div>
-                    </div>
-                    <div className="rights">
-                      <Select className="inline" items={this.permissions} value={groups_user.is_admin} disabled={this.hasAllInputDisabled()}
-                        onChange={event => this.handleSelectUpdate(event, groups_user.user.id)}/>
-                    </div>
-                    <div className="actions">
-                      <a className={`remove-item button button-transparent ${this.hasAllInputDisabled() ? "disabled" : ""}`}
-                        onClick={event => this.handleDeleteClickEvent(event, groups_user.user.id)} role="button">
-                        <Icon name='close'/>
-                        <span className="visually-hidden">Remove</span>
-                      </a>
-                    </div>
-                  </li>
-                )
-                }
-              </ul>
-              }
-              {!this.hasMembers() &&
-              <div className="message warning">
-                <span><Trans>The group is empty, please add a group manager.</Trans></span>
-              </div>
-              }
-              {this.hasMembers() && !this.hasManager() &&
-              <div className="message error">
-                <span><Trans>Please make sure there is at least one group manager.</Trans></span>
-              </div>
-              }
-              {this.hasManager() &&
-              <div className="message warning">
-                <span><Trans>You need to click save for the changes to take place.</Trans></span>
-              </div>
+                <ReactList
+                  ref={this.groupUsersListRef}
+                  itemRenderer={this.renderItem}
+                  itemsRenderer={this.renderContainer}
+                  length={this.state.groups_users.length}
+                  minSize={4}
+                  type={this.state.groups_users.length < 3 ? "simple" : "uniform"}
+                  threshold={30}>
+                </ReactList>
               }
             </div>
+            {!this.hasMembers() &&
+            <div className="message warning">
+              <span><Trans>The group is empty, please add a group manager.</Trans></span>
+            </div>
+            }
+            {this.hasMembers() && !this.hasManager() &&
+            <div className="message error">
+              <span><Trans>Please make sure there is at least one group manager.</Trans></span>
+            </div>
+            }
+            {this.hasManager() &&
+            <div className="message warning">
+              <span><Trans>You need to click save for the changes to take place.</Trans></span>
+            </div>
+            }
             <div className="form-content permission-add">
               <Autocomplete
                 id="user-name-input"

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

@@ -36,6 +36,11 @@ describe("See the Create Dialog Group", () => {
       const requestGpgMockImpl = jest.fn(() => mockGpgKey);
       mockContextRequest(context, requestGpgMockImpl);
       page = new CreateUserGroupPage(context, props);
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.clearAllTimers();
     });
 
     it('As AD I see a success toaster message after adding a group with success', async() => {
@@ -52,8 +57,10 @@ describe("See the Create Dialog Group", () => {
       const requestGpgMockImpl = jest.fn(() => mockGpgKey);
       mockContextRequest(context, requestGpgMockImpl);
       page.createGroup.fillInput(page.createGroup.usernameInput, "ada");
-      await waitFor(() => {});
+      jest.runOnlyPendingTimers();
+
       expect(context.port.request).toHaveBeenCalledWith("passbolt.keyring.get-public-key-info-by-user", mockUsers[1].id);
+      await waitFor(() => {});
       await page.createGroup.click(page.createGroup.userAutocomplete);
 
       await page.createGroup.selectFirstItem(2);
@@ -86,8 +93,10 @@ describe("See the Create Dialog Group", () => {
       const requestGpgMockImpl = jest.fn(() => mockGpgKey);
       mockContextRequest(context, requestGpgMockImpl);
       page.createGroup.fillInput(page.createGroup.usernameInput, "ada");
-      await waitFor(() => {});
+      jest.runOnlyPendingTimers();
+
       expect(context.port.request).toHaveBeenCalledWith("passbolt.keyring.get-public-key-info-by-user", mockUsers[1].id);
+      await waitFor(() => {});
       await page.createGroup.click(page.createGroup.userAutocomplete);
 
       // Mock the request function to make it the expected result
@@ -118,10 +127,12 @@ describe("See the Create Dialog Group", () => {
       const requestGpgMockImpl = jest.fn(() => mockGpgKey);
       mockContextRequest(context, requestGpgMockImpl);
       page.createGroup.fillInput(page.createGroup.usernameInput, "ada");
-      await waitFor(() => {});
+      jest.runOnlyPendingTimers();
+
       expect(context.port.request).toHaveBeenCalledWith("passbolt.keyring.get-public-key-info-by-user", mockUsers[1].id);
-      await page.createGroup.click(page.createGroup.userAutocomplete);
+      await waitFor(() => {});
 
+      await page.createGroup.click(page.createGroup.userAutocomplete);
       await page.createGroup.click(page.createGroup.saveButton);
 
       // Throw error message
@@ -153,8 +164,10 @@ describe("See the Create Dialog Group", () => {
       const requestGpgMockImpl = jest.fn(() => mockGpgKey);
       mockContextRequest(context, requestGpgMockImpl);
       page.createGroup.fillInput(page.createGroup.usernameInput, "ada");
-      await waitFor(() => {});
+      jest.runOnlyPendingTimers();
+
       expect(context.port.request).toHaveBeenCalledWith("passbolt.keyring.get-public-key-info-by-user", mockUsers[1].id);
+      await waitFor(() => {});
       await page.createGroup.click(page.createGroup.userAutocomplete);
 
       // Mock the request function to make it return an error.
@@ -176,8 +189,10 @@ describe("See the Create Dialog Group", () => {
       const requestGpgMockImpl = jest.fn(() => mockGpgKey);
       mockContextRequest(context, requestGpgMockImpl);
       page.createGroup.fillInput(page.createGroup.usernameInput, "ada");
-      await waitFor(() => {});
+      jest.runOnlyPendingTimers();
+
       expect(context.port.request).toHaveBeenCalledWith("passbolt.keyring.get-public-key-info-by-user", mockUsers[1].id);
+      await waitFor(() => {});
       await page.createGroup.click(page.createGroup.userAutocomplete);
 
       const data = {

package/src/react-extension/components/UserGroup/CreateUserGroup/CreateUserGroup.test.stories.js

@@ -7,7 +7,7 @@ import {mockGpgKey, mockUsers} from "./CreateUserGroup.test.data";
 
 
 export default {
-  title: 'Passbolt/UserGroup/CreateUserGroup',
+  title: 'Passbolt Component/UserGroup/CreateUserGroup',
   component: CreateUserGroup
 };
 

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

@@ -132,7 +132,7 @@ class DeleteUserGroup extends Component {
                 Are you sure you want to delete the group <strong>{{groupName: this.group.name}}</strong>?
               </Trans>
             </p>
-            <p><Trans>Warning: This action can’t be undone. Users in this group may lose access to the content shared with it.</Trans></p>
+            <p><Trans>This action can’t be undone. Users in this group may lose access to the content shared with it.</Trans></p>
           </div>
           <div className="submit-wrapper clearfix">
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleCloseClick}/>

package/src/react-extension/components/UserGroup/DeleteUserGroup/DeleteUserGroup.test.stories.js

@@ -7,7 +7,7 @@ import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
-  title: 'Passbolt/UserGroup/DeleteUserGroup',
+  title: 'Passbolt Component/UserGroup/DeleteUserGroup',
   component: DeleteUserGroup
 };
 

package/src/react-extension/components/UserGroup/DeleteUserGroup/DeleteUserGroupWithConflicts.js

@@ -381,7 +381,7 @@ class DeleteUserGroupWithConflicts extends Component {
               <ul className="ownership-transfer-items">
                 {this.foldersErrors.map(folderError =>
                   <li key={folderError.id}>
-                    <div className="select-wrapper input required">
+                    <div className={`select-wrapper input required ${this.state.processing ? 'disabled' : ''}`}>
                       <label htmlFor="transfer_folder_owner">{folderError.name} <Trans>(Folder) new owner:</Trans></label>
                       <Select className="form-element" value={this.state.owners[folderError.id]} items={this.getAcoPermissionsList(folderError.id)} onChange={event => this.handleOnChangeOwner(event, folderError.id)}/>
                     </div>
@@ -396,7 +396,7 @@ class DeleteUserGroupWithConflicts extends Component {
               <ul className="ownership-transfer-items">
                 {this.resourcesErrors.map(resourceError =>
                   <li key={resourceError.id}>
-                    <div className="select-wrapper input required">
+                    <div className={`select-wrapper input required ${this.state.processing ? 'disabled' : ''}`}>
                       <label htmlFor="transfer_resource_owner">{resourceError.name} (<Trans>Password</Trans>) <Trans>new owner</Trans>:</label>
                       <Select className="form-element" value={this.state.owners[resourceError.id]} items={this.getAcoPermissionsList(resourceError.id)} onChange={event => this.handleOnChangeOwner(event, resourceError.id)}/>
                     </div>