passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/react-extension/components/ResourceFolder/CreateResourceFolder/CreateResourceFolder.test.stories.js

@@ -5,7 +5,7 @@ import CreateResourceFolder from "./CreateResourceFolder";
 
 
 export default {
-  title: 'Passbolt/ResourceFolder/CreateResourceFolder',
+  title: 'Passbolt Component/ResourceFolder/CreateResourceFolder',
   component: CreateResourceFolder
 };
 

package/src/react-extension/components/ResourceFolder/DefineResourceFolderMoveStrategy/DefineResourceFolderMoveStrategy.test.stories.js

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

package/src/react-extension/components/ResourceFolder/DeleteResourceFolder/DeleteResourceFolder.js

@@ -217,7 +217,7 @@ class DeleteResourceFolder extends Component {
                 Are you sure you want to delete the folder <strong>{{folderName: this.state.name}}</strong>?
               </Trans>
             </p>
-            <p><Trans>Warning: This action can’t be undone. Other users may lose access.</Trans></p>
+            <p><Trans>This action can’t be undone. Other users may lose access.</Trans></p>
             <div className="input checkbox">
               <input id="delete-cascade" type="checkbox" name="cascade" onChange={this.handleInputChange}
                 autoFocus={true} disabled={this.hasAllInputDisabled()} />&nbsp;

package/src/react-extension/components/ResourceFolder/DeleteResourceFolder/DeleteResourceFolder.test.stories.js

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

package/src/react-extension/components/ResourceFolder/RenameResourceFolder/RenameResourceFolder.js

@@ -318,7 +318,7 @@ class RenameResourceFolder extends Component {
         onClose={this.handleClose} disabled={this.hasAllInputDisabled()}>
         <form className="folder-rename-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="folder-name-input"><Trans>Folder name</Trans></label>
               <input id="folder-name-input" name="name"
                 ref={this.nameRef}

package/src/react-extension/components/ResourceFolder/RenameResourceFolder/RenameResourceFolder.test.stories.js

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

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetails.js

@@ -89,7 +89,7 @@ class DisplayResourceFolderDetails extends React.Component {
             </h3>
             <a className="dialog-close" onClick={this.handleCloseClick}>
               <Icon name="close"/>
-              <span className="visuallyhidden">Close</span>
+              <span className="visuallyhidden"><Trans>Close</Trans></span>
             </a>
           </div>
           <DisplayResourceFolderDetailsInformation/>

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsActivity.test.stories.js

@@ -7,7 +7,7 @@ import DisplayResourceFolderDetailsActivity from "./DisplayResourceFolderDetails
 
 
 export default {
-  title: 'Passbolt/ResourceFolderDetails/DisplayResourceFolderDetailsActivity',
+  title: 'Passbolt Component/ResourceFolderDetails/DisplayResourceFolderDetailsActivity',
   component: DisplayResourceFolderDetailsActivity
 };
 

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsInformation.js

@@ -85,7 +85,7 @@ class DisplayResourceFolderDetailsInformation extends React.Component {
   formatDateTimeAgo(date) {
     const dateTime = DateTime.fromISO(date);
     const duration = dateTime.diffNow().toMillis();
-    return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative({locale: this.props.context.locale});
+    return duration > -1000 && duration < 0 ? this.props.t('Just now') : dateTime.toRelative({locale: this.props.context.locale});
   }
 
   /**
@@ -121,14 +121,6 @@ class DisplayResourceFolderDetailsInformation extends React.Component {
     return "";
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsInformation.test.stories.js

@@ -5,7 +5,7 @@ import DisplayResourceFolderDetailsInformation from "./DisplayResourceFolderDeta
 
 
 export default {
-  title: 'Passbolt/ResourceFolderDetails/DisplayResourceFolderDetailsInformation',
+  title: 'Passbolt Component/ResourceFolderDetails/DisplayResourceFolderDetailsInformation',
   component: DisplayResourceFolderDetailsInformation
 };
 

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsPermissions.test.stories.js

@@ -7,7 +7,7 @@ import DisplayResourceFolderDetailsPermissions from "./DisplayResourceFolderDeta
 
 
 export default {
-  title: 'Passbolt/ResourceFolderDetails/DisplayResourceFolderDetailsPermissions',
+  title: 'Passbolt Component/ResourceFolderDetails/DisplayResourceFolderDetailsPermissions',
   component: DisplayResourceFolderDetailsPermissions
 };
 

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePassphraseGenerator.js

@@ -117,7 +117,7 @@ class ConfigurePassphraseGenerator extends Component {
   render() {
     return (
       <>
-        <div className="input text">
+        <div className={`input text ${this.props.disabled ? 'disabled' : ''}`}>
           <label htmlFor="configure-passphrase-generator-form-word-count"><Trans>Number of words</Trans></label>
           <div className="slider">
             <input
@@ -126,24 +126,26 @@ class ConfigurePassphraseGenerator extends Component {
               max={this.numberOfWords.max}
               value={this.numberOfWords.default}
               type="range"
-              onChange={this.handleInputChange}/>
+              onChange={this.handleInputChange}
+              disabled={this.props.disabled}/>
             <input
               type="number"
               id="configure-passphrase-generator-form-word-count"
               name="word_count"
               min={this.numberOfWords.min} max={this.numberOfWords.max}
               value={this.numberOfWords.default}
-              onChange={this.handleWordCountChange}/>
+              onChange={this.handleWordCountChange}
+              disabled={this.props.disabled}/>
           </div>
         </div>
-        <div className="input text">
+        <div className={`input text ${this.props.disabled ? 'disabled' : ''}`}>
           <label htmlFor="configure-passphrase-generator-form-words-separator"><Trans>Words separator</Trans></label>
           <input type="text" id="configure-passphrase-generator-form-words-separator" name="separator" value={this.separator} onChange={this.handleInputChange}
-            placeholder={this.translate("Type one or more characters")}/>
+            placeholder={this.translate("Type one or more characters")} disabled={this.props.disabled}/>
         </div>
-        <div className="select-wrapper input">
+        <div className={`select-wrapper input ${this.props.disabled ? 'disabled' : ''}`}>
           <label htmlFor="configure-passphrase-generator-form-words-case"><Trans>Words case</Trans></label>
-          <Select id="configure-passphrase-generator-form-words-case" name="word_case" items={this.wordCaseList} value={this.wordCase} onChange={this.handleInputChange}/>
+          <Select id="configure-passphrase-generator-form-words-case" name="word_case" items={this.wordCaseList} value={this.wordCase} onChange={this.handleInputChange} disabled={this.props.disabled}/>
         </div>
       </>
     );
@@ -153,6 +155,7 @@ class ConfigurePassphraseGenerator extends Component {
 ConfigurePassphraseGenerator.propTypes = {
   configuration: PropTypes.object, // The default generator configuration
   onChanged: PropTypes.func, // Called whenever the generator configuration changed
+  disabled: PropTypes.bool, // The disabled attribute
   t: PropTypes.func, // The translation function
 };
 

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePassphraseGenerator.test.stories.js

@@ -4,7 +4,7 @@ import ConfigurePassphraseGenerator from "./ConfigurePassphraseGenerator";
 
 
 export default {
-  title: 'Passbolt/ResourcePassword/ConfigurePassphraseGenerator',
+  title: 'Passbolt Component/ResourcePassword/ConfigurePassphraseGenerator',
   component: ConfigurePassphraseGenerator
 };
 

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePasswordGenerator.js

@@ -13,7 +13,7 @@
  */
 import React from "react";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class ConfigurePasswordGenerator extends React.Component {
   /**
@@ -121,7 +121,7 @@ class ConfigurePasswordGenerator extends React.Component {
   render() {
     return (
       <>
-        <div className="input text">
+        <div className={`input text ${this.props.disabled ? 'disabled' : ''}`}>
           <label htmlFor="configure-password-generator-form-length">
             <Trans>Length</Trans>
           </label>
@@ -133,18 +133,20 @@ class ConfigurePasswordGenerator extends React.Component {
               value={this.length.default}
               step="1"
               type="range"
-              onChange={this.handleLengthChanged}/>
+              onChange={this.handleLengthChanged}
+              disabled={this.props.disabled}/>
             <input
               id="configure-password-generator-form-length"
               type="number"
               min={this.length.min}
               max={this.length.max}
               value={this.length.default}
-              onChange={this.handleLengthChanged}/>
+              onChange={this.handleLengthChanged}
+              disabled={this.props.disabled}/>
           </div>
         </div>
 
-        <div className="input text">
+        <div className={`input text ${this.props.disabled ? 'disabled' : ''}`}>
           <label htmlFor="configure-password-generator-form-masks">
             <Trans>Character Types</Trans>
           </label>
@@ -154,7 +156,7 @@ class ConfigurePasswordGenerator extends React.Component {
                 <button
                   key={mask.name}
                   className={`button button-toggle ${(mask.active || mask.required ? 'selected' : '')}`}
-                  onClick={event => this.handleMaskToggled(mask.name, event)}>
+                  onClick={event => this.handleMaskToggled(mask.name, event)} disabled={this.props.disabled}>
                   {mask.label}
                 </button>
               ))
@@ -168,7 +170,8 @@ class ConfigurePasswordGenerator extends React.Component {
             type="checkbox"
             name="exclude-look-alike"
             checked={this.isExcludeLookAlikeCharacters}
-            onChange={this.handleExcludeLookAlikeCharactersToggled}/>
+            onChange={this.handleExcludeLookAlikeCharactersToggled}
+            disabled={this.props.disabled}/>
           <label htmlFor="configure-password-generator-form-exclude-look-alike">
             <Trans>Exclude look-alike characters</Trans>
           </label>
@@ -182,7 +185,7 @@ class ConfigurePasswordGenerator extends React.Component {
 ConfigurePasswordGenerator.propTypes = {
   configuration: PropTypes.object, // The current generator options configuration
   onChanged: PropTypes.func, // Called whenever the generator configuration changed
-  t: PropTypes.func, // The translation function
+  disabled: PropTypes.bool, // The disabled attribute
 };
 
-export default withTranslation('common')(ConfigurePasswordGenerator);
+export default ConfigurePasswordGenerator;

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePasswordGenerator.test.stories.js

@@ -19,7 +19,7 @@ import ConfigurePasswordGenerator from "./ConfigurePasswordGenerator";
 
 
 export default {
-  title: 'Passbolt/ResourcePassword/ConfigurePasswordGenerator',
+  title: 'Passbolt Component/ResourcePassword/ConfigurePasswordGenerator',
   component: ConfigurePasswordGenerator
 };
 

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/GenerateResourcePassword.js

@@ -182,7 +182,7 @@ class GenerateResourcePassword extends Component {
           onClose={this.handleClose}>
           <form onSubmit={this.handleSubmit} noValidate>
             <div className="form-content">
-              <div className="input-password-wrapper input">
+              <div className={`input-password-wrapper input ${this.state.processing ? 'disabled' : ''}`}>
                 <label htmlFor="generate-resource-password-form-password"><Trans>Password</Trans></label>
                 <div className="password-button-inline">
                   <Password
@@ -195,14 +195,15 @@ class GenerateResourcePassword extends Component {
                     value={this.state.password}
                     onChange={this.handleInputChange}
                     disabled={this.state.processing}/>
-                  <a onClick={this.handleGeneratePassword} className="password-generate button-icon button">
+                  <a onClick={this.handleGeneratePassword}
+                    className={`password-generate button-icon button ${this.state.processing ? 'disabled' : ''}`}>
                     <Icon name='dice' big={true}/>
-                    <span className="visually-hidden">generate</span>
+                    <span className="visually-hidden"><Trans>Generate</Trans></span>
                   </a>
                   <a onClick={this.handleCopyPassword}
-                    className={`copy-to-clipboard button button-icon`}>
+                    className={`copy-to-clipboard button button-icon ${this.state.processing ? 'disabled' : ''}`}>
                     <Icon name='copy-to-clipboard' big={true}/>
-                    <span className="visually-hidden">view</span>
+                    <span className="visually-hidden"><Trans>View</Trans></span>
                   </a>
                 </div>
                 <PasswordComplexity entropy={passwordEntropy}/>
@@ -218,12 +219,14 @@ class GenerateResourcePassword extends Component {
                     {generator.type === "password" &&
                     <ConfigurePasswordGenerator
                       configuration={this.state.generator}
-                      onChanged={this.handleGeneratorChanged}/>
+                      onChanged={this.handleGeneratorChanged}
+                      disabled={this.state.processing}/>
                     }
                     {generator.type === "passphrase" &&
                     <ConfigurePassphraseGenerator
                       configuration={this.state.generator}
-                      onChanged={this.handleGeneratorChanged}/>
+                      onChanged={this.handleGeneratorChanged}
+                      disabled={this.state.processing}/>
                     }
                   </Tab>
                 )}

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/GenerateResourcePassword.test.stories.js

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

package/src/react-extension/components/ResourceTag/DeleteResourceTag/DeleteResourceTag.js

@@ -118,7 +118,7 @@ class DeleteResourceTag extends Component {
   render() {
     return (
       <DialogWrapper
-        title="Delete tag?"
+        title={this.translate("Delete tag?")}
         onClose={this.handleCloseClick}
         disabled={this.state.processing}
         className="delete-tag-dialog">
@@ -129,7 +129,7 @@ class DeleteResourceTag extends Component {
                 Are you sure you want to delete the tag <strong>{{tagName: this.props.context.tagToDelete.slug}}</strong>?
               </Trans>
             </p>
-            <p><Trans>Warning: Once the tag is deleted, it’ll be removed permanently and will not be recoverable.</Trans></p>
+            <p><Trans>Once the tag is deleted, it’ll be removed permanently and will not be recoverable.</Trans></p>
           </div>
           <div className="submit-wrapper clearfix">
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleCloseClick}/>

package/src/react-extension/components/ResourceTag/DeleteResourceTag/DeleteResourceTag.test.stories.js

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

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.js

@@ -264,7 +264,7 @@ class EditResourceTag extends Component {
         className="edit-tag-dialog">
         <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="edit-tag-form-name"><Trans>Tag name</Trans></label>
               <input id="edit-tag-form-name" name="name" type="text" value={this.state.name}
                 onKeyUp={this.handleNameInputKeyUp} onChange={this.handleInputChange}

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.test.stories.js

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

package/src/react-extension/components/ResourceTag/EditResourceTags/EditResourceTags.js

@@ -89,7 +89,7 @@ class EditResourceTags extends React.Component {
   }
 
   componentDidMount() {
-    document.addEventListener('click', this.handleEditorClickEvent);
+    document.addEventListener('click', this.handleEditorClickEvent, {capture: true});
     this.fetchAllTags();
     this.setState({loading: false}, () => {
       this.focusOnInputTag();
@@ -97,7 +97,7 @@ class EditResourceTags extends React.Component {
   }
 
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleEditorClickEvent);
+    document.removeEventListener('click', this.handleEditorClickEvent, {capture: true});
   }
 
   focusOnInputTag() {

package/src/react-extension/components/ResourceTag/EditResourceTags/EditResourceTagsItemViewer.js

@@ -15,7 +15,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import {withRouter} from "react-router-dom";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import Icon from "../../../../shared/components/Icons/Icon";
 
 class EditResourceTagsItemViewer extends React.Component {
@@ -58,14 +58,6 @@ class EditResourceTagsItemViewer extends React.Component {
     return null;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -107,7 +99,6 @@ EditResourceTagsItemViewer.propTypes = {
   toggleInputTagEditor: PropTypes.func,
   resourceWorkspaceContext: PropTypes.any,
   history: PropTypes.any,
-  t: PropTypes.func, // The translation function
 };
 
-export default withRouter(withResourceWorkspace(withTranslation('common')(EditResourceTagsItemViewer)));
+export default withRouter(withResourceWorkspace(EditResourceTagsItemViewer));

package/src/react-extension/components/Share/ShareDialog.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";
@@ -60,7 +61,7 @@ class ShareDialog extends Component {
     const permissions = this.shareChanges.aggregatePermissionsByAro();
     this.setState({loading: false, name: '', permissions: permissions}, () => {
       // scroll at the top of the permission list
-      this.permissionListRef.current.scrollTop = 0;
+      this.permissionListRef.current.scrollTo(0);
     });
   }
 
@@ -97,6 +98,9 @@ class ShareDialog extends Component {
 
     this.handlePermissionUpdate = this.handlePermissionUpdate.bind(this);
     this.handlePermissionDelete = this.handlePermissionDelete.bind(this);
+
+    this.renderItem = this.renderItem.bind(this);
+    this.renderContainer = this.renderContainer.bind(this);
   }
 
   /**
@@ -210,7 +214,7 @@ class ShareDialog extends Component {
     permissions.push(permission);
     this.setState({permissions: permissions}, () => {
       // scroll at the bottom of the permission list
-      this.permissionListRef.current.scrollTop = this.permissionListRef.current.scrollHeight;
+      this.permissionListRef.current.scrollTo(this.state.permissions.length - 1);
     });
   }
 
@@ -267,12 +271,70 @@ class ShareDialog extends Component {
    * @returns {Promise<Object>} aros,
    */
   async fetchAutocompleteItems(keyword) {
-    const ids = this.props.context.shareDialogProps.resourcesIds || this.props.context.shareDialogProps.foldersIds;
-    const items = await this.props.context.port.request('passbolt.share.search-aros', keyword, ids);
-    return items.filter(item => {
-      const found = this.state.permissions.filter(permission => (permission.aro.id === item.id));
-      return found.length === 0;
+    keyword = keyword.toLowerCase();
+    const words = (keyword && keyword.split(/\s+/)) || [''];
+    // Test match of some escaped test words against the name / username
+    const escapeWord = word => word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const wordToRegex = word => new RegExp(escapeWord(word), 'i');
+    const matchWord = (word, value) => wordToRegex(word).test(value);
+
+    const matchUsernameProperty = (word, user) => matchWord(word, user.username);
+    const matchNameProperty = (word, user) => matchWord(word, user.profile.first_name) || matchWord(word, user.profile.last_name);
+    const matchUser = (word, user) => matchUsernameProperty(word, user) || matchNameProperty(word, user);
+    const matchUserText = user => words.every(word => matchUser(word, user));
+
+    const matchGroup = (word, group) => matchWord(word, group.name);
+    const matchGroupText = group => words.every(word => matchGroup(word, group));
+
+    const permissions = this.state.permissions;
+
+    const hasPermissionsOnResources = aro_id =>
+      permissions.some(permission => permission.id === aro_id);
+
+    let currentcount = 0;
+    const groups = this.props.context.groups.filter(group => {
+      const isMatching = currentcount < Autocomplete.DISPLAY_LIMIT
+        && matchGroupText(group)
+        && !hasPermissionsOnResources(group.id);
+
+      if (isMatching) {
+        currentcount++;
+      }
+
+      return isMatching;
     });
+
+    const users = this.props.context.users.filter(user => {
+      const isMatching = currentcount < Autocomplete.DISPLAY_LIMIT
+        && user.active === true
+        && matchUserText(user)
+        && !hasPermissionsOnResources(user.id);
+
+      if (isMatching) {
+        currentcount++;
+      }
+
+      return isMatching;
+    });
+
+    await Promise.all(users.map(async user => {
+      if (!user.gpgkey) {
+        user.gpgkey = {
+          fingerprint: await this.getFingerprintForUser(user.id)
+        };
+      }
+    }));
+    return [...users, ...groups];
+  }
+
+  /**
+   * Find a user gpg key
+   * @param {string} userId
+   * @returns {Promise<object>}
+   */
+  async getFingerprintForUser(userId) {
+    const keyInfo = await this.props.context.port.request('passbolt.keyring.get-public-key-info-by-user', userId);
+    return keyInfo.fingerprint;
   }
 
   /**
@@ -419,6 +481,45 @@ class ShareDialog extends Component {
     return this.hasNoOwner() || this.hasAllInputDisabled() || !this.hasChanges();
   }
 
+  /**
+   * Use to render a single item of the share permission 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 permission = this.state.permissions[index];
+    const sharePermissionItemKey = permission.aro.id;
+    return (
+      <SharePermissionItem
+        id={permission.aro.id}
+        key={sharePermissionItemKey}
+        aro={permission.aro}
+        permissionType={permission.type}
+        variesDetails={permission.variesDetails}
+        updated={permission.updated}
+        disabled={this.hasAllInputDisabled()}
+        onUpdate={this.handlePermissionUpdate}
+        onDelete={this.handlePermissionDelete}
+        isLastItemDisplayed={key >= 2}
+      />
+    );
+  }
+
+  /**
+   * 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" ref={ref}>
+        {items}
+      </ul>
+    );
+  }
+
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -440,28 +541,24 @@ class ShareDialog extends Component {
         onClose={this.handleClose}
         disabled={this.hasAllInputDisabled()}>
         <form className="share-form" onSubmit={this.handleFormSubmit} noValidate>
-          <div className="form-content permission-edit">
+          <div className="form-content scroll permission-edit">
             {(this.state.loading) &&
-              <ul className="permissions scroll">
+              <ul className="permissions">
                 <SharePermissionItemSkeleton/>
                 <SharePermissionItemSkeleton/>
                 <SharePermissionItemSkeleton/>
               </ul>
             }
             {!(this.state.loading) &&
-              <ul className="permissions scroll" ref={this.permissionListRef}>
-                {(this.state.permissions && (this.state.permissions).map((permission, key) => <SharePermissionItem
-                  id={permission.aro.id}
-                  key={key}
-                  aro={permission.aro}
-                  permissionType={permission.type}
-                  variesDetails={permission.variesDetails}
-                  updated={permission.updated}
-                  disabled={this.hasAllInputDisabled()}
-                  onUpdate={this.handlePermissionUpdate}
-                  onDelete={this.handlePermissionDelete}
-                />))}
-              </ul>
+              <ReactList
+                itemRenderer={this.renderItem}
+                itemsRenderer={this.renderContainer}
+                length={this.state.permissions.length}
+                minSize={this.props.listMinSize}
+                type={this.state.permissions.length < 3 ? "simple" : "uniform"}
+                ref={this.permissionListRef}
+                threshold={30}>
+              </ReactList>
             }
           </div>
           {(this.hasNoOwner()) &&
@@ -498,12 +595,17 @@ class ShareDialog extends Component {
   }
 }
 
+ShareDialog.defaultProps = {
+  listMinSize: 4
+};
+
 ShareDialog.propTypes = {
   context: PropTypes.any, // The application context
   onClose: PropTypes.func,
   resourceWorkspaceContext: PropTypes.any, // The resource workspace context
   actionFeedbackContext: PropTypes.any, // The action feedback context
   dialogContext: PropTypes.any, // The dialog context
+  listMinSize: PropTypes.number, // The minimum size to be renderered in the permission list
   t: PropTypes.func, // The translation function
 };