passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/components/Resource/CreateResource/CreateResource.js

@@ -17,7 +17,6 @@ import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
 import Icon from "../../Common/Icons/Icon";
 import Tooltip from "../../Common/Tooltip/Tooltip";
-import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {withDialog} from "../../../contexts/DialogContext";
@@ -27,6 +26,11 @@ import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitBut
 import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
 
 import {Trans, withTranslation} from "react-i18next";
+import GenerateResourcePassword from "../../ResourcePassword/GenerateResourcePassword/GenerateResourcePassword";
+import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGenerator";
+import {withResourcePasswordGeneratorContext} from "../../../contexts/ResourcePasswordGeneratorContext";
+import {SecretGeneratorComplexity} from "../../../../shared/lib/SecretGenerator/SecretGeneratorComplexity";
+
 
 /** Resource password max length */
 const RESOURCE_PASSWORD_MAX_LENGTH = 4096;
@@ -75,6 +79,8 @@ class CreateResource extends Component {
     this.handleGeneratePasswordButtonClick = this.handleGeneratePasswordButtonClick.bind(this);
     this.handleDescriptionToggle = this.handleDescriptionToggle.bind(this);
     this.handleDescriptionInputKeyUp = this.handleDescriptionInputKeyUp.bind(this);
+    this.handleOpenGenerator = this.handleOpenGenerator.bind(this);
+    this.handleLastGeneratedPasswordChanged = this.handleLastGeneratedPasswordChanged.bind(this);
   }
 
   /**
@@ -85,12 +91,45 @@ class CreateResource extends Component {
     this.passwordInputRef = React.createRef();
   }
 
+  /**
+   * Whenever the component has been mounted
+   */
   componentDidMount() {
     if (this.isEncryptedDescriptionEnabled()) {
       this.setState({encryptDescription: true});
     }
   }
 
+  /**
+   * Whenever the component has been changed (props)
+   * @param prevProps The previous component props
+   */
+  componentDidUpdate(prevProps) {
+    this.handleLastGeneratedPasswordChanged(prevProps.resourcePasswordGeneratorContext.lastGeneratedPassword);
+  }
+
+  /*
+   * =============================================================
+   *  Resource password generator
+   * =============================================================
+   */
+  get currentGeneratorConfiguration() {
+    const type = this.props.resourcePasswordGeneratorContext.settings.default_generator;
+    return this.props.resourcePasswordGeneratorContext.settings.generators.find(generator => generator.type === type);
+  }
+
+  /**
+   * Whenever a new password has been generated through the generator
+   * @param previousLastGeneratedPassword The previous last generated password value
+   */
+  handleLastGeneratedPasswordChanged(previousLastGeneratedPassword) {
+    const currentLastGeneratedPassword = this.props.resourcePasswordGeneratorContext.lastGeneratedPassword;
+    const hasLastGeneratedPasswordChanged = previousLastGeneratedPassword !== currentLastGeneratedPassword;
+    if (hasLastGeneratedPasswordChanged) {
+      this.setState({password: currentLastGeneratedPassword});
+    }
+  }
+
   /*
    * =============================================================
    *  Resource type helpers
@@ -258,7 +297,6 @@ class CreateResource extends Component {
    */
   async createResourceLegacy(resourceDto, secretString) {
     resourceDto.description = this.state.description;
-
     return this.props.context.port.request("passbolt.resources.create", resourceDto, secretString);
   }
 
@@ -451,13 +489,21 @@ class CreateResource extends Component {
     if (this.state.processing) {
       return;
     }
-    const password = SecretComplexity.generate();
+
+    const password = SecretGenerator.generate(this.currentGeneratorConfiguration);
     this.setState({
       password: password,
       passwordError: ""
     });
   }
 
+  /**
+   * Whenever the user wants to open the password generator
+   */
+  handleOpenGenerator() {
+    this.props.dialogContext.open(GenerateResourcePassword);
+  }
+
   /**
    * Handle close
    */
@@ -492,51 +538,12 @@ class CreateResource extends Component {
     }
   }
 
-  /*
-   * =============================================================
-   *  Security token style
-   * =============================================================
-   */
-  /**
-   * Get the password input style.
-   * @return {Object}
-   */
-  getPasswordInputStyle() {
-    if (this.state.passwordInputHasFocus) {
-      const backgroundColor = this.props.context.userSettings.getSecurityTokenBackgroundColor();
-      const textColor = this.props.context.userSettings.getSecurityTokenTextColor();
-
-      return {
-        background: backgroundColor,
-        color: textColor
-      };
-    }
-
-    return {
-      background: "",
-      color: "",
-    };
-  }
-
   /**
-   * Get the security token style.
-   * @return {Object}
+   * Returns true if the logged in user can use the password generator capability.
+   * @returns {boolean}
    */
-  getSecurityTokenStyle() {
-    const backgroundColor = this.props.context.userSettings.getSecurityTokenBackgroundColor();
-    const textColor = this.props.context.userSettings.getSecurityTokenTextColor();
-
-    if (this.state.passwordInputHasFocus) {
-      return {
-        background: textColor,
-        color: backgroundColor,
-      };
-    }
-
-    return {
-      background: backgroundColor,
-      color: textColor,
-    };
+  get canUsePasswordGenerator() {
+    return this.props.context.siteSettings.canIUse('passwordGenerator');
   }
 
   /**
@@ -553,10 +560,8 @@ class CreateResource extends Component {
    * =============================================================
    */
   render() {
-    const passwordInputStyle = this.getPasswordInputStyle();
-    const securityTokenStyle = this.getSecurityTokenStyle();
-    const securityTokenCode = this.props.context.userSettings.getSecurityTokenCode();
-    const passwordStrength = SecretComplexity.getStrength(this.state.password);
+    const passwordEntropy = SecretGenerator.entropy(this.state.password);
+    const passwordStrength = SecretGeneratorComplexity.strength(passwordEntropy);
     /*
      * The parser can't find the translation for passwordStrength.label
      * To fix that we can use it in comment
@@ -580,7 +585,7 @@ class CreateResource extends Component {
                 disabled={this.state.processing} ref={this.nameInputRef} className="required fluid" maxLength="64"
                 required="required" autoComplete="off" autoFocus={true} placeholder={this.translate("Name")}/>
               {this.state.nameError &&
-              <div className="name error message">{this.state.nameError}</div>
+              <div className="name error-message">{this.state.nameError}</div>
               }
             </div>
             <div className={`input text ${this.state.uriError ? "error" : ""}`}>
@@ -589,7 +594,7 @@ class CreateResource extends Component {
                 autoComplete="off" value={this.state.uri} onChange={this.handleInputChange} placeholder={this.translate("URI")}
                 disabled={this.state.processing}/>
               {this.state.uriError &&
-              <div className="error message">{this.state.uriError}</div>
+              <div className="error-message">{this.state.uriError}</div>
               }
             </div>
             <div className={`input text ${this.state.usernameError ? "error" : ""}`}>
@@ -598,7 +603,7 @@ class CreateResource extends Component {
                 autoComplete="off" value={this.state.username} onChange={this.handleInputChange} placeholder={this.translate("Username")}
                 disabled={this.state.processing}/>
               {this.state.usernameError &&
-              <div className="error message">{this.state.usernameError}</div>
+              <div className="error-message">{this.state.usernameError}</div>
               }
             </div>
             <div className={`input-password-wrapper input required ${this.state.passwordError ? "error" : ""}`}>
@@ -609,19 +614,16 @@ class CreateResource extends Component {
                   onKeyUp={this.handlePasswordInputKeyUp} value={this.state.password}
                   onFocus={this.handlePasswordInputFocus} onBlur={this.handlePasswordInputBlur}
                   onChange={this.handleInputChange} disabled={this.state.processing}
-                  style={passwordInputStyle} ref={this.passwordInputRef}/>
-                <div className="security-token"
-                  style={securityTokenStyle}>{securityTokenCode}</div>
+                  autoComplete="new-password"
+                  ref={this.passwordInputRef}/>
+                <a onClick={this.handleViewPasswordButtonClick}
+                  className={`password-view button button-icon toggle ${this.state.viewPassword ? "selected" : ""}`}>
+                  <Icon name='eye-open' big={true}/>
+                  <span className="visually-hidden">view</span>
+                </a>
 
               </div>
               <ul className="actions inline">
-                <li>
-                  <a onClick={this.handleViewPasswordButtonClick}
-                    className={`password-view button button-icon toggle ${this.state.viewPassword ? "selected" : ""}`}>
-                    <Icon name='eye-open' big={true}/>
-                    <span className="visually-hidden">view</span>
-                  </a>
-                </li>
                 <li>
                   <a onClick={this.handleGeneratePasswordButtonClick}
                     className="password-generate button-icon button">
@@ -629,16 +631,32 @@ class CreateResource extends Component {
                     <span className="visually-hidden">generate</span>
                   </a>
                 </li>
+                {this.canUsePasswordGenerator &&
+                <li>
+                  <a onClick={this.handleOpenGenerator}
+                    className="password-generator button-icon button">
+                    <Icon name='cog' big={true}/>
+                    <span className="visually-hidden">open generator</span>
+                  </a>
+                </li>
+                }
               </ul>
               <div className={`password-complexity ${passwordStrength.id}`}>
                 <span className="progress">
                   <span className={`progress-bar ${passwordStrength.id}`} />
                 </span>
-                <span className="complexity-text"><Trans>complexity:</Trans> <strong>{this.translate(passwordStrength.label)}</strong></span>
+                <span className="complexity-text">
+                  <div>
+                    <Trans>Complexity:</Trans> <strong>{this.translate(passwordStrength.label)}</strong>
+                  </div>
+                  <div>
+                    <Trans>Entropy:</Trans> <strong>{passwordEntropy.toFixed(1)} bits</strong>
+                  </div>
+                </span>
               </div>
               {this.state.passwordError &&
               <div className="input text">
-                <div className="password message error">{this.state.passwordError}</div>
+                <div className="password error-message">{this.state.passwordError}</div>
               </div>
               }
               {this.state.passwordWarning &&
@@ -689,9 +707,10 @@ CreateResource.propTypes = {
   context: PropTypes.any, // The application context
   history: PropTypes.object, // Router history
   onClose: PropTypes.func, // Whenever the component must be closed
+  resourcePasswordGeneratorContext: PropTypes.any, // The resource password generator context
   actionFeedbackContext: PropTypes.any, // The action feedback context
   dialogContext: PropTypes.any, // The dialog context
   t: PropTypes.func, // The translation function
 };
 
-export default  withAppContext(withActionFeedback(withRouter(withDialog(withTranslation('common')(CreateResource)))));
+export default  withResourcePasswordGeneratorContext(withAppContext(withActionFeedback(withRouter(withDialog(withTranslation('common')(CreateResource))))));

package/src/react-extension/components/Resource/CreateResource/CreateResource.test.data.js

@@ -36,6 +36,85 @@ export function defaultAppContext(appContext) {
  */
 export function defaultProps() {
   return {
-    onClose: jest.fn()
+    resourcePasswordGeneratorContext: {
+      settings: {
+        "default_generator": "passphrase",
+        "generators": [
+          {
+            "name": "Password",
+            "type": "password",
+            "default_options": {
+              "length": 18,
+              "look_alike": true,
+              "min_length": 8,
+              "max_length": 128,
+            },
+            "masks": [
+              {
+                "name": "upper",
+                "label": "A-Z",
+                "characters": "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+              },
+              {
+                "name": "lower",
+                "label": "a-z",
+                "characters": "abcdefghijklmnopqrstuvwxyz",
+              },
+              {
+                "name": "digit",
+                "label": "0-9",
+                "characters": "0123456789",
+                "required": true,
+              },
+              {
+                "name": "parenthesis",
+                "label": "{ [ ( | ) ] ] }",
+                "characters": "([|])",
+              },
+              {
+                "name": "special_char1",
+                "label": "# $ % & @ ^ ~",
+                "characters": "#$%&@^~"
+              },
+              {
+                "name": "special_char2",
+                "label": ". , : ;",
+                "characters": ".,:;"
+              },
+              {
+                "name": "special_char5",
+                "label": "< * + ! ? =",
+                "characters": "<*+!?="
+              },
+              {
+                "name": "emoji",
+                "label": "😘",
+                "characters": "😀😃😄😁😆😅😂🤣🥲☺️😊😇🙂🙃😉😌😍🥰😘😗😙😚😋😛😝😜🤪🤨🧐🤓😎🥸🤩🥳😏😒😞😔😟😕🙁☹️😣😖😫😩🥺😢😭😤😠😡🤬🤯😳🥵🥶😱😨😰😥😓🤗🤔🤭🤫🤥😶😐😑😬🙄😯😦😧😮😲🥱😴🤤😪😵🤐🥴🤢🤮🤧😷🤒🤕🤑🤠😈👿👹👺🤡💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾"
+              },
+              {
+                "name": "ascii",
+                "label": "ascii",
+                "characters": "%&¡¢£¤¥¦§¨©ª«¬®¯°±²³µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿŒœŠšŸƒ—„†‡•…‰€™"
+              }
+            ],
+          },
+          {
+            "name": "Passphrase",
+            "type": "passphrase",
+            "default_options": {
+              "word_count": 8,
+              "word_case": "lowercase",
+              "min_word": 4,
+              "max_word": 40,
+              "separator": " "
+            },
+          }
+        ]
+      }
+    },
+    onClose: jest.fn(),
+    dialogContext: {
+      open: jest.fn()
+    }
   };
 }

package/src/react-extension/components/Resource/CreateResource/CreateResource.test.js

@@ -21,6 +21,7 @@ import {waitFor} from "@testing-library/react";
 import {defaultAppContext, defaultProps} from "./CreateResource.test.data";
 import CreateResourcePage from "./CreateResource.test.page";
 import "../../../test/lib/crypto/cryptoGetRandomvalues";
+import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 
 beforeEach(() => {
   jest.resetModules();
@@ -68,14 +69,7 @@ describe("See the Create Resource", () => {
       expect(passwordInputStyle.color).toBe("");
 
       // Complexity label exists but is not yet defined.
-      expect(page.passwordCreate.complexityText.textContent).toBe("complexity: n/a");
-
-      // Security token element exists.
-      expect(page.passwordCreate.securityToken.textContent).toBe("TST");
-      // And the default style is applied.
-      const securityTokenStyle = window.getComputedStyle(page.passwordCreate.securityToken);
-      expect(securityTokenStyle.background).toBe("rgb(0, 0, 0)");
-      expect(securityTokenStyle.color).toBe("rgb(255, 255, 255)");
+      expect(page.passwordCreate.complexityText.textContent).toBe("Complexity: n/aEntropy: 0.0 bits");
 
       // Password view button exists.
       expect(page.passwordCreate.passwordViewButton).not.toBeNull();
@@ -94,36 +88,10 @@ describe("See the Create Resource", () => {
       expect(page.passwordCreate.cancelButton.textContent).toBe("Cancel");
     });
 
-    it('changes the style of its security token when the password input get or lose focus when the password is already decrypted', async() => {
-      /*
-       * Password input got focus.
-       * Assert style change.
-       */
-      page.passwordCreate.focusInput(page.passwordCreate.password);
-      let securityTokenStyle = window.getComputedStyle(page.passwordCreate.securityToken);
-      let passwordInputStyle = window.getComputedStyle(page.passwordCreate.password);
-      expect(passwordInputStyle.background).toBe("rgb(0, 0, 0)");
-      expect(passwordInputStyle.color).toBe("rgb(255, 255, 255)");
-      expect(securityTokenStyle.background).toBe("rgb(255, 255, 255)");
-      expect(securityTokenStyle.color).toBe("rgb(0, 0, 0)");
-
-      /*
-       * Password input lost focus.
-       * Assert style
-       */
-      page.passwordCreate.blurInput(page.passwordCreate.password);
-      securityTokenStyle = window.getComputedStyle(page.passwordCreate.securityToken);
-      passwordInputStyle = window.getComputedStyle(page.passwordCreate.password);
-      expect(passwordInputStyle.background).toBe("white");
-      expect(passwordInputStyle.color).toBe("");
-      expect(securityTokenStyle.background).toBe("rgb(0, 0, 0)");
-      expect(securityTokenStyle.color).toBe("rgb(255, 255, 255)");
-    });
-
     it('generates password when clicking on the generate button.', async() => {
       page.passwordCreate.focusInput(page.passwordCreate.password);
       await page.passwordCreate.click(page.passwordCreate.passwordGenerateButton);
-      expect(page.passwordCreate.complexityText.textContent).not.toBe("complexity: n/a");
+      expect(page.passwordCreate.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
       expect(page.passwordCreate.progressBar.classList.contains("not_available")).toBe(false);
     });
 
@@ -161,7 +129,7 @@ describe("See the Create Resource", () => {
       page.passwordCreate.fillInput(page.passwordCreate.uri, resourceMeta.uri);
       page.passwordCreate.fillInput(page.passwordCreate.username, resourceMeta.username);
       page.passwordCreate.fillInput(page.passwordCreate.password, resourceMeta.password);
-      expect(page.passwordCreate.complexityText.textContent).not.toBe("complexity: n/a");
+      expect(page.passwordCreate.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
       expect(page.passwordCreate.progressBar.classList.contains("not_available")).toBe(false);
       page.passwordCreate.fillInput(page.passwordCreate.description, resourceMeta.description);
       await page.passwordCreate.click(page.passwordCreate.descriptionEncryptedLock);
@@ -203,7 +171,7 @@ describe("See the Create Resource", () => {
       page.passwordCreate.fillInput(page.passwordCreate.uri, resourceMeta.uri);
       page.passwordCreate.fillInput(page.passwordCreate.username, resourceMeta.username);
       page.passwordCreate.fillInput(page.passwordCreate.password, resourceMeta.password);
-      expect(page.passwordCreate.complexityText.textContent).not.toBe("complexity: n/a");
+      expect(page.passwordCreate.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
       expect(page.passwordCreate.progressBar.classList.contains("not_available")).toBe(false);
       page.passwordCreate.fillInput(page.passwordCreate.description, resourceMeta.description);
 
@@ -293,12 +261,23 @@ describe("See the Create Resource", () => {
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => {
         throw new PassboltApiFetchError("Jest simulate API error.");
       });
+      jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn);
 
       await page.passwordCreate.click(page.passwordCreate.saveButton);
 
       // Throw general error message
-      expect(page.passwordCreate.errorDialog).not.toBeNull();
-      expect(page.passwordCreate.errorDialogMessage).not.toBeNull();
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+    });
+
+    it('As LU I should access to the password generator dialog', async() => {
+      jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn);
+      await page.passwordCreate.openPasswordGenerator();
+      expect(props.dialogContext.open).toBeCalled();
+    });
+
+    it('As LU I should access to the password generator dialog', async() => {
+      await page.passwordCreate.openPasswordGenerator();
+      expect(page.passwordCreate.passwordGeneratorDialog).not.toBeNull();
     });
   });
 });

package/src/react-extension/components/Resource/CreateResource/CreateResource.test.page.js

@@ -71,6 +71,13 @@ export default class CreateResourcePage {
   get passwordCreate() {
     return this._passwordCreate;
   }
+
+  /**
+   * REturns the password generator dialog element
+   */
+  get passwordGeneratorDialog() {
+    return this._page.container.querySelector('.password-generator-dialog');
+  }
 }
 
 /**
@@ -126,7 +133,7 @@ class PasswordCreatePageObject {
    * Returns the name error mesage input element
    */
   get nameErrorMessage() {
-    return this._container.querySelector('.name.error.message');
+    return this._container.querySelector('.name.error-message');
   }
 
   /**
@@ -154,7 +161,7 @@ class PasswordCreatePageObject {
    * Returns the password error mesage input element
    */
   get passwordErrorMessage() {
-    return this._container.querySelector('.password.error.message');
+    return this._container.querySelector('.password.error-message');
   }
 
   /**
@@ -164,12 +171,6 @@ class PasswordCreatePageObject {
     return this._container.querySelector('.complexity-text');
   }
 
-  /**
-   * Returns the security token input element
-   */
-  get securityToken() {
-    return this._container.querySelector('.security-token');
-  }
 
   /**
    * Returns the description input element
@@ -206,6 +207,15 @@ class PasswordCreatePageObject {
     return this._container.querySelector('.password-generate');
   }
 
+  /**
+   * Returns the password generator button element
+   */
+  get passwordGeneratorButton() {
+    return this._container.querySelector('.password-generator');
+  }
+
+
+
   /**
    * Returns the save button element
    */
@@ -213,6 +223,8 @@ class PasswordCreatePageObject {
     return this._container.querySelector('.submit-wrapper input[type=\"submit\"]');
   }
 
+
+
   /**
    * Returns the cancel button element
    */
@@ -228,6 +240,8 @@ class PasswordCreatePageObject {
     return this._container.querySelector('.error-dialog .dialog .dialog-content .form-content');
   }
 
+
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -270,4 +284,9 @@ class PasswordCreatePageObject {
   blurInput(element)  {
     fireEvent.blur(element);
   }
+
+  /** Open the password generator*/
+  async openPasswordGenerator() {
+    await this.click(this.passwordGeneratorButton);
+  }
 }

package/src/react-extension/components/Resource/CreateResource/CreateResource.test.stories.js

@@ -3,12 +3,19 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import CreateResource from "./CreateResource";
-import "../../../../css/themes/default/ext_app.css";
 
 
 export default {
   title: 'Passbolt/Resource/CreateResource',
-  component: CreateResource
+  component: CreateResource,
+  argTypes: {
+    language: {
+      control: {
+        type: 'select',
+        options: ['en-US', 'fr']
+      }
+    }
+  }
 };
 
 const context = {
@@ -20,11 +27,67 @@ const context = {
   resourceTypesSettings: {
     areResourceTypesEnabled: () => true,
     isEncryptedDescriptionEnabled: () => true
+  },
+  siteSettings: {
+    generatorConfiguration: {
+      "default_generator": "passphrase",
+      "generators": [
+        {
+          "name": "Password",
+          "type": "password",
+          "default_options": {
+            "length": 18,
+            "look_alike": true,
+            "min_length": 8,
+            "max_length": 128,
+          },
+          "masks": [
+            {
+              "name": "upper",
+              "label": "A-Z",
+              "characters": "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+            },
+            {
+              "name": "lower",
+              "label": "a-z",
+              "characters": "abcdefghijklmnopqrstuvwxyz",
+            },
+            {
+              "name": "digit",
+              "label": "0-9",
+              "characters": "0123456789",
+              "required": true,
+            },
+            {
+              "name": "parenthesis",
+              "label": "([|])",
+              "characters": "([|])",
+            },
+            {
+              "name": "TBD",
+              "label": "TBD",
+              "characters": ""
+            },
+          ],
+        },
+        {
+          "name": "Passphrase",
+          "type": "passphrase",
+          "default_options": {
+            "word_count": 8,
+            "word_case": "lowercase",
+            "min_word": 4,
+            "max_word": 40,
+            "separator": " "
+          }
+        }
+      ]
+    }
   }
 };
 
 
-const Template = args =>
+const Template =  ({context, ...args})  =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <Route component={routerProps => <CreateResource {...args} {...routerProps}/>}></Route>
@@ -32,7 +95,10 @@ const Template = args =>
   </AppContext.Provider>;
 
 Template.propTypes = {
-  context: PropTypes.object,
+  context: PropTypes.object
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+};

package/src/react-extension/components/Resource/DeleteResource/DeleteResource.js

@@ -150,7 +150,7 @@ class DeleteResource extends Component {
   render() {
     return (
       <DialogWrapper
-        title={this.translate("Delete password?")}
+        title={this.translate("Delete password?", {count: this.resources.length})}
         onClose={this.handleCloseClick}
         disabled={this.state.processing}
         className="delete-password-dialog">