passbolt-styleguide 3.5.3 → 3.6.0-beta1

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

@@ -9,7 +9,7 @@ export function defaultAppContext(appContext) {
   const defaultAppContext = {
     port: new MockPort(),
     userSettings: {
-      getTrustedDomain: () => "some url"
+      getTrustedDomain: () => (new URL(window.location.href)).origin
     },
     siteSettings: {
       getServerTimezone: () => ""

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

@@ -16,7 +16,7 @@ const context = {
       "id": "91d8a7fd-3ab3-5e98-a4a5-0d8694ff23b9",
       "keyId": "91d8a7fd-3ab3-5e98-a4a5-0d8694ff23b9",
       "user_id": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
-      "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-----",
+      "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",

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

@@ -23,9 +23,10 @@ import {withAppContext} from "../../../contexts/AppContext";
 import {withDialog} from "../../../contexts/DialogContext";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import UserAvatar from "../../Common/Avatar/UserAvatar";
-import Icon from "../../Common/Icons/Icon";
-import TooltipHtml from "../../Common/Tooltip/TooltipHtml";
+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";
 
 class CreateUserGroup extends Component {
   /**
@@ -150,7 +151,7 @@ class CreateUserGroup extends Component {
    */
   handleSelectUpdate(event, userId) {
     const target = event.target;
-    const is_admin = target.value === "true";
+    const is_admin = target.value === true;
     const groups_users = Object.assign(this.state.groups_users);
     const index = groups_users.findIndex(groups_user => groups_user.user.id === userId);
     groups_users[index] = Object.assign(groups_users[index], {is_admin});
@@ -243,11 +244,9 @@ class CreateUserGroup extends Component {
    */
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -418,12 +417,36 @@ class CreateUserGroup extends Component {
   }
 
   /**
-   * get fingerprint
+   * Format fingerprint
    * @param fingerprint
-   * @returns {string}
+   * @returns {JSX.Element}
+   */
+  formatFingerprint(fingerprint) {
+    const result = fingerprint.toUpperCase().replace(/.{4}/g, '$& ');
+    return <>{result.substr(0, 24)}<br/>{result.substr(25)}</>;
+  }
+
+  /**
+   * Get the tooltip message
+   * @param groups_user The groups user
+   * @returns {JSX.Element}
    */
-  getFingerprint(fingerprint) {
-    return fingerprint.toUpperCase().replace(/.{4}(?=.)/g, '$& ');
+  getTooltipMessage(groups_user) {
+    return <>
+      <div className="email"><strong>{groups_user.user.username}</strong></div>
+      <div className="fingerprint">{this.formatFingerprint(groups_user.user.gpgkey.fingerprint)}</div>
+    </>;
+  }
+
+  /**
+   * Get permissions
+   * @returns {[{label: *, value: boolean}]}
+   */
+  get permissions() {
+    return [
+      {value: false, label: this.translate("Member")},
+      {value: true, label: this.translate("Group manager")}
+    ];
   }
 
   /**
@@ -471,26 +494,22 @@ class CreateUserGroup extends Component {
                     <div className="aro">
                       <div className="aro-name">
                         <span className="ellipsis">{this.getUserFullname(groups_user.user)}</span>
-                        <TooltipHtml>
-                          <div className="email"><strong>{groups_user.user.username}</strong></div>
-                          <div className="fingerprint">{this.getFingerprint(groups_user.user.gpgkey.fingerprint)}</div>
-                        </TooltipHtml>
+                        <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="select rights">
-                      <select value={groups_user.is_admin} disabled={this.hasAllInputDisabled()}
-                        onChange={event => this.handleSelectUpdate(event, groups_user.user.id)}>
-                        <option value="false">{this.translate("Member")}</option>
-                        <option value="true">{this.translate("Group manager")}</option>
-                      </select>
+                    <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 ${this.hasAllInputDisabled() ? "disabled" : ""}`}
+                      <a className={`remove-item button button-transparent ${this.hasAllInputDisabled() ? "disabled" : ""}`}
                         onClick={event => this.handleDeleteClickEvent(event, groups_user.user.id)} role="button">
-                        <Icon name='close-circle'/>
+                        <Icon name='close'/>
                         <span className="visually-hidden">Remove</span>
                       </a>
                     </div>
@@ -531,8 +550,8 @@ class CreateUserGroup extends Component {
             </div>
           </div>
           <div className="submit-wrapper clearfix">
-            <FormSubmitButton disabled={this.hasSubmitDisabled()} processing={this.state.processing} value={this.translate("Save")}/>
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleClose}/>
+            <FormSubmitButton disabled={this.hasSubmitDisabled()} processing={this.state.processing} value={this.translate("Save")}/>
           </div>
         </form>
       </DialogWrapper>

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

@@ -56,13 +56,13 @@ describe("See the Create Dialog Group", () => {
       expect(context.port.request).toHaveBeenCalledWith("passbolt.keyring.get-public-key-info-by-user", mockUsers[1].id);
       await page.createGroup.click(page.createGroup.userAutocomplete);
 
-      page.createGroup.fillInput(page.createGroup.selectRights(2), "true");
+      await page.createGroup.selectFirstItem(2);
       expect(page.createGroup.warningMessage).toBe('You need to click save for the changes to take place.');
 
       expect(page.createGroup.count()).toBe(2);
       expect(page.createGroup.userFirstNameLastName(2)).toBe('Ada Lovelace');
       expect(page.createGroup.userEmail(2)).toBe('ada@passbolt.com');
-      expect(page.createGroup.userFingerprint(2)).toBe('03F6 0E95 8F4C B297 23AC DF76 1353 B5B1 5D9B 054F');
+      expect(page.createGroup.userFingerprint(2)).toBe('03F6 0E95 8F4C B297 23ACDF76 1353 B5B1 5D9B 054F ');
 
       const requestMockImpl = jest.fn((message, data) => data);
       mockContextRequest(context, requestMockImpl);
@@ -103,7 +103,7 @@ describe("See the Create Dialog Group", () => {
       await waitFor(() => {
         expect(page.createGroup.name.getAttribute("disabled")).not.toBeNull();
         expect(page.createGroup.usernameInput.getAttribute("disabled")).not.toBeNull();
-        expect(page.createGroup.selectRights(1).getAttribute("disabled")).not.toBeNull();
+        expect(page.createGroup.selectRights(1).className).toBe('selected-value disabled');
         expect(page.createGroup.removeUserDisabled(1)).not.toBeNull();
         expect(page.createGroup.cancelButtonDisabled).not.toBeNull();
         expect(page.createGroup.saveButton.getAttribute("disabled")).not.toBeNull();

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

@@ -187,7 +187,15 @@ class CreateGroupPageObject {
    * @param index the display of the permission
    */
   selectRights(index) {
-    return this._container.querySelectorAll('.permissions.groups_users .row')[index - 1].querySelector('.select.rights select');
+    return this._container.querySelectorAll('.permissions.groups_users .row')[index - 1].querySelector('.rights .select .selected-value');
+  }
+
+  /**
+   * Returns the select rights item for the 'index' one
+   * @param index the display of the item permission
+   */
+  selectItem(index) {
+    return this._container.querySelectorAll('.permissions.groups_users .row')[index - 1].querySelector('.rights .select .option');
   }
 
   /**
@@ -210,14 +218,14 @@ class CreateGroupPageObject {
    * Returns the save button element
    */
   get saveButton() {
-    return this._container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**
    * Returns the save button processing element
    */
   get saveButtonProcessing() {
-    return this._container.querySelector('.submit-wrapper input[type=\"submit\"].processing');
+    return this._container.querySelector('.submit-wrapper button[type=\"submit\"].processing');
   }
 
   /**
@@ -269,10 +277,16 @@ class CreateGroupPageObject {
   }
 
   /** fill the input element with data */
-  fillInput(element, data)  {
+  fillInput(element, data) {
     const dataInputEvent = {target: {value: data}};
     fireEvent.change(element, dataInputEvent);
   }
+
+  /** select item */
+  async selectFirstItem(index)  {
+    await this.click(this.selectRights(index));
+    await this.click(this.selectItem(index));
+  }
 }
 
 

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

@@ -13,7 +13,7 @@ export default {
 
 const context = {
   userSettings: {
-    getTrustedDomain: () => 'some url'
+    getTrustedDomain: () => (new URL(window.location.href)).origin
   },
   port: {
     request: () => mockGpgKey
@@ -43,3 +43,7 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  onClose: () => {}
+};

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

@@ -93,11 +93,9 @@ class DeleteUserGroup extends Component {
 
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -137,8 +135,8 @@ class DeleteUserGroup extends Component {
             <p><Trans>Warning: 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">
-            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Delete")} warning={true}/>
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleCloseClick}/>
+            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Delete")} warning={true}/>
           </div>
         </form>
       </DialogWrapper>

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

@@ -58,7 +58,7 @@ describe("See Delete Group Dialog", () => {
       expect(page.displayDeleteGroupDialog.closeButton).not.toBeNull();
       // submit button
       expect(page.displayDeleteGroupDialog.saveButton).not.toBeNull();
-      expect(page.displayDeleteGroupDialog.saveButton.value).toBe('Delete');
+      expect(page.displayDeleteGroupDialog.saveButton.textContent).toBe('Delete');
       // cancel button
       expect(page.displayDeleteGroupDialog.cancelButton).not.toBeNull();
       expect(page.displayDeleteGroupDialog.cancelButton.textContent).toBe('Cancel');

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

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DeleteUserGroup from "./DeleteUserGroup";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -16,10 +17,12 @@ const context = {
       id: 1
     }
   },
+  setContext: () => {},
+  port: new MockPort()
 };
 
 
-const Template = args =>
+const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <Route component={routerProps => <DeleteUserGroup {...args} {...routerProps}/>}></Route>
@@ -31,3 +34,7 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  onClose: () => {}
+};

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

@@ -22,6 +22,7 @@ import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitBut
 import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
 import {withLoading} from "../../../contexts/LoadingContext";
 import {Trans, withTranslation} from "react-i18next";
+import Select from "../../Common/Select/Select";
 
 /**
  * This component allows user to delete a group with conflict to reassign ownership of folders, resources
@@ -265,11 +266,9 @@ class DeleteUserGroupWithConflicts extends Component {
 
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -329,6 +328,16 @@ class DeleteUserGroupWithConflicts extends Component {
     return this.resourcesErrors && this.resourcesErrors.length > 0;
   }
 
+  /**
+   * Get aco permission
+   * @param id
+   * @returns {*}
+   */
+  getAcoPermissionsList(id) {
+    const getLabel = permission => (permission.aro === "User" && this.getUserOptionLabel(permission.user)) || (permission.aro === "Group" && permission.group.name);
+    return this.acosPermissionsOptions[id]?.map(permission => ({value: permission.id, label: getLabel(permission)})) || [];
+  }
+
   /**
    * Get the user label displayed as option
    * @param {object} user
@@ -372,16 +381,9 @@ class DeleteUserGroupWithConflicts extends Component {
               <ul className="ownership-transfer-items">
                 {this.foldersErrors.map(folderError =>
                   <li key={folderError.id}>
-                    <div className="input select required">
+                    <div className="select-wrapper input required">
                       <label htmlFor="transfer_folder_owner">{folderError.name} <Trans>(Folder) new owner:</Trans></label>
-                      <select className="fluid form-element ready" value={this.state.owners[folderError.id]} onChange={event => this.handleOnChangeOwner(event, folderError.id)}>
-                        {this.acosPermissionsOptions[folderError.id].map(permission => (
-                          <option key={permission.id} value={permission.id}>
-                            {permission.aro === "User" && this.getUserOptionLabel(permission.user)}
-                            {permission.aro === "Group" && permission.group.name}
-                          </option>
-                        ))}
-                      </select>
+                      <Select className="form-element" value={this.state.owners[folderError.id]} items={this.getAcoPermissionsList(folderError.id)} onChange={event => this.handleOnChangeOwner(event, folderError.id)}/>
                     </div>
                   </li>
                 )}
@@ -394,16 +396,9 @@ class DeleteUserGroupWithConflicts extends Component {
               <ul className="ownership-transfer-items">
                 {this.resourcesErrors.map(resourceError =>
                   <li key={resourceError.id}>
-                    <div className="input select required">
+                    <div className="select-wrapper input required">
                       <label htmlFor="transfer_resource_owner">{resourceError.name} (<Trans>Password</Trans>) <Trans>new owner</Trans>:</label>
-                      <select className="fluid form-element ready" value={this.state.owners[resourceError.id]} onChange={event => this.handleOnChangeOwner(event, resourceError.id)}>
-                        {this.acosPermissionsOptions[resourceError.id].map(permission => (
-                          <option key={permission.id} value={permission.id}>
-                            {permission.aro === "User" && this.getUserOptionLabel(permission.user)}
-                            {permission.aro === "Group" && permission.group.name}
-                          </option>
-                        ))}
-                      </select>
+                      <Select className="form-element" value={this.state.owners[resourceError.id]} items={this.getAcoPermissionsList(resourceError.id)} onChange={event => this.handleOnChangeOwner(event, resourceError.id)}/>
                     </div>
                   </li>
                 )}
@@ -412,8 +407,8 @@ class DeleteUserGroupWithConflicts extends Component {
             }
           </div>
           <div className="submit-wrapper clearfix">
-            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Delete")} warning={true}/>
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleCloseClick}/>
+            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Delete")} warning={true}/>
           </div>
         </form>
       </DialogWrapper>

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

@@ -72,7 +72,7 @@ describe("See Delete Group Dialog", () => {
       expect(page.displayDeleteGroupWithConflictsDialog.closeButton).not.toBeNull();
       // submit button
       expect(page.displayDeleteGroupWithConflictsDialog.saveButton).not.toBeNull();
-      expect(page.displayDeleteGroupWithConflictsDialog.saveButton.value).toBe('Delete');
+      expect(page.displayDeleteGroupWithConflictsDialog.saveButton.textContent).toBe('Delete');
       // cancel button
       expect(page.displayDeleteGroupWithConflictsDialog.cancelButton).not.toBeNull();
       expect(page.displayDeleteGroupWithConflictsDialog.cancelButton.textContent).toBe('Cancel');

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

@@ -4,6 +4,7 @@ import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DeleteUserGroupWithConflicts from "./DeleteUserGroupWithConflicts";
 import {mockGroups, mockResources, mockUsers} from "./DeleteUserGroupWithConflicts.test.data";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -24,10 +25,12 @@ const context = {
       }
     }
   },
+  setContext: () => {},
+  port: new MockPort()
 };
 
 
-const Template = args =>
+const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <Route component={routerProps => <DeleteUserGroupWithConflicts {...args} {...routerProps}/>}></Route>
@@ -39,3 +42,7 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  onClose: () => {}
+};

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

@@ -12,7 +12,7 @@
  * @since         2.13.0
  */
 import React from "react";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
 import {withUserWorkspace} from "../../../contexts/UserWorkspaceContext";
@@ -108,7 +108,7 @@ class DisplayUserGroupDetails extends React.Component {
               </div>
               <span className="subtitle"><Trans>Group</Trans></span>
             </h3>
-            <a className="dialog-close" onClick={this.handleCloseClick}>
+            <a className="dialog-close button button-transparent" onClick={this.handleCloseClick}>
               <Icon name="close"/>
               <span className="visuallyhidden">Close</span>
             </a>

package/src/react-extension/components/UserGroup/DisplayUserGroupDetails/DisplayUserGroupDetails.test.data.js

@@ -9,7 +9,7 @@ export function defaultAppContext(appContext) {
   const defaultAppContext = {
     port: new MockPort(),
     userSettings: {
-      getTrustedDomain: () => "some url"
+      getTrustedDomain: () => (new URL(window.location.href)).origin
     },
     siteSettings: {
       getServerTimezone: () => ""

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

@@ -38,7 +38,7 @@ describe("Display User Details", () => {
     mockContextRequest(context, () => {});
     jest.spyOn(props.actionFeedbackContext, "displaySuccess").mockImplementationOnce(() => {});
     await page.copyPermalink();
-    expect(context.port.request).toHaveBeenCalledWith("passbolt.clipboard.copy", "some url/app/groups/view/516c2db6-0aed-52d8-854f-b3f3499995e7");
+    expect(context.port.request).toHaveBeenCalledWith("passbolt.clipboard.copy", "http://localhost/app/groups/view/516c2db6-0aed-52d8-854f-b3f3499995e7");
     expect(props.actionFeedbackContext.displaySuccess).toHaveBeenCalled();
   });
 

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

@@ -14,7 +14,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import {withUserWorkspace} from "../../../contexts/UserWorkspaceContext";
 import {withAppContext} from "../../../contexts/AppContext";
 import {Trans, withTranslation} from "react-i18next";

package/src/react-extension/components/UserGroup/DisplayUserGroupDetailsInformation/DisplayUserGroupDetailsInformation.test.data.js

@@ -9,7 +9,7 @@ export function defaultAppContext(appContext) {
   const defaultAppContext = {
     port: new MockPort(),
     userSettings: {
-      getTrustedDomain: () => "some url"
+      getTrustedDomain: () => (new URL(window.location.href)).origin
     },
     siteSettings: {
       getServerTimezone: () => ""

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

@@ -14,7 +14,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import {withUserWorkspace} from "../../../contexts/UserWorkspaceContext";
 import {withAppContext} from "../../../contexts/AppContext";
 import DisplayUserGroupDetailsMembersGroupMember from "./DisplayUserGroupDetailsMembersGroupMember";
@@ -114,12 +114,13 @@ class DisplayUserGroupDetailsMembers extends React.Component {
           </h4>
         </div>
         <div className="accordion-content">
-          <a className="section-action" onClick={this.handleEditGroup}>
-            <Icon name="edit"></Icon>
+          <a className="section-action button button-transparent" onClick={this.handleEditGroup}>
+            <Icon name="edit"/>
             <span className="visuallyhidden">Edit</span>
           </a>
           {this.isLoading() &&
           <div className="processing-wrapper">
+            <Icon name="spinner"/>
             <span className="processing-text"><Trans>Retrieving group members</Trans></span>
           </div>
           }

package/src/react-extension/components/UserGroup/DisplayUserGroupDetailsMembers/DisplayUserGroupDetailsMembers.test.data.js

@@ -9,7 +9,7 @@ export function defaultAppContext(appContext) {
   const defaultAppContext = {
     port: new MockPort(),
     userSettings: {
-      getTrustedDomain: () => "some url"
+      getTrustedDomain: () => (new URL(window.location.href)).origin
     },
     siteSettings: {
       getServerTimezone: () => ""

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

@@ -64,6 +64,7 @@ Initial.args = {
           },
         ],
       },
-    }
+    },
+    onGroupToEdit: () => {}
   }
 };