passbolt-styleguide 3.3.2 → 3.4.0-alpha1

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

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DeleteUserGroup from "./DeleteUserGroup";
 
 
@@ -21,13 +20,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DeleteUserGroup {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DeleteUserGroup {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

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

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DeleteUserGroupWithConflicts from "./DeleteUserGroupWithConflicts";
 import {mockGroups, mockResources, mockUsers} from "./DeleteUserGroupWithConflicts.test.data";
 
@@ -29,13 +28,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DeleteUserGroupWithConflicts {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DeleteUserGroupWithConflicts {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

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

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserGroupDetailsInformation from "./DisplayUserGroupDetailsInformation";
 import {defaultAppContext} from "./DisplayUserGroupDetailsInformation.test.data";
 
@@ -18,17 +17,15 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <div className="panel aside">
-        <div className="detailed-information">
-          <MemoryRouter initialEntries={['/']}>
-            <Route component={routerProps => <DisplayUserGroupDetailsInformation {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <AppContext.Provider value={context}>
+    <div className="panel aside">
+      <div className="detailed-information">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayUserGroupDetailsInformation {...args} {...routerProps}/>}></Route>
+        </MemoryRouter>
       </div>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+    </div>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

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

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {defaultAppContext} from "./DisplayUserGroupDetailsMembers.test.data";
 import DisplayUserGroupDetailsMembers from "./DisplayUserGroupDetailsMembers";
 
@@ -15,17 +14,15 @@ export default {
 const context = defaultAppContext();
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <div className="panel aside">
-        <div className="detailed-information">
-          <MemoryRouter initialEntries={['/']}>
-            <Route component={routerProps => <DisplayUserGroupDetailsMembers {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <AppContext.Provider value={context}>
+    <div className="panel aside">
+      <div className="detailed-information">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayUserGroupDetailsMembers {...args} {...routerProps}/>}></Route>
+        </MemoryRouter>
       </div>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+    </div>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

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

@@ -3,7 +3,6 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import {defaultProps, mockGpgKey, mockUsers} from "./EditUserGroup.test.data";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import EditUserGroup from "./EditUserGroup";
 
 
@@ -40,13 +39,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <EditUserGroup {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <EditUserGroup {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/ConfirmPassphrase.js

@@ -21,6 +21,7 @@ import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {withDialog} from "../../../contexts/DialogContext";
 import Icon from "../../Common/Icons/Icon";
 import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
 
 /**
  * This component displays the user confirm passphrase information
@@ -46,6 +47,7 @@ class ConfirmPassphrase extends React.Component {
       passphrase: "", // The passphrase input
       passphraseError: null, // The passphrase error input
       isObfuscated: true, // True if the passphrase should not be visible
+      hasPassphraseFocus: false, // The password input has focus
     };
   }
 
@@ -55,6 +57,8 @@ class ConfirmPassphrase extends React.Component {
   bindCallbacks() {
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleToggleObfuscate = this.handleToggleObfuscate.bind(this);
+    this.handleFocusPassphrase = this.handleFocusPassphrase.bind(this);
+    this.handleBlurPassphrase = this.handleBlurPassphrase.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
   }
@@ -99,6 +103,48 @@ class ConfirmPassphrase extends React.Component {
     this.setState({isObfuscated: !this.state.isObfuscated});
   }
 
+  /**
+   * Returns the security token code of the suer
+   */
+  get securityTokenCode() {
+    return this.props.context.userSettings.getSecurityTokenCode();
+  }
+
+  /**
+   * Returns the style of the security token (color and text color)
+   */
+  get securityTokenStyle() {
+    const {userSettings} = this.props.context;
+    const inverseStyle =  {background: userSettings.getSecurityTokenTextColor(), color: userSettings.getSecurityTokenBackgroundColor()};
+    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
+    return this.state.hasPassphraseFocus ? inverseStyle : fullStyle;
+  }
+
+  /**
+   * Get the passphrase input style.
+   * @return {Object}
+   */
+  get passphraseInputStyle() {
+    const {userSettings} = this.props.context;
+    const emptyStyle =  {background: "", color: ""};
+    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
+    return this.state.hasPassphraseFocus ? fullStyle : emptyStyle;
+  }
+
+  /**
+   * Whenever the user focus on the passphrase input
+   */
+  handleFocusPassphrase() {
+    this.setState({hasPassphraseFocus: true});
+  }
+
+  /**
+   * Whenever the user blurs on the passphrase input
+   */
+  handleBlurPassphrase() {
+    this.setState({hasPassphraseFocus: false});
+  }
+
   /**
    * Whenever the user submits the passphrase
    * @param event A form submit event
@@ -179,7 +225,7 @@ class ConfirmPassphrase extends React.Component {
     return (
       <div className="grid grid-responsive-12 profile-passphrase">
         <div className="row">
-          <div className="col6">
+          <div className="col7">
             <form className="enter-passphrase" onSubmit={this.handleSubmit}>
               <h3><Trans>Please enter your passphrase to continue</Trans></h3>
               <div className="form-content">
@@ -194,7 +240,10 @@ class ConfirmPassphrase extends React.Component {
                     className={`required ${this.state.passphraseError ? "error" : ""}`}
                     autoFocus={true}
                     value={this.state.passphrase}
+                    style={this.passphraseInputStyle}
                     onChange={this.handleInputChange}
+                    onFocus={this.handleFocusPassphrase}
+                    onBlur={this.handleBlurPassphrase}
                     disabled={this.hasAllInputDisabled()}
                     autoComplete="off"
                   />
@@ -205,6 +254,9 @@ class ConfirmPassphrase extends React.Component {
                     <Icon name="eye-open"/>
                     <span className="visually-hidden"><Trans>View</Trans></span>
                   </a>
+                  <span className="security-token" style={this.securityTokenStyle}>
+                    {this.securityTokenCode}
+                  </span>
                   {this.state.passphraseError &&
                     <div className="error-message">{this.state.passphraseError}</div>
                   }
@@ -245,9 +297,10 @@ class ConfirmPassphrase extends React.Component {
 }
 
 ConfirmPassphrase.propTypes = {
+  context: PropTypes.any, // The application context
   userSettingsContext: PropTypes.object, // The user settings context
   dialogContext: PropTypes.any, // The dialog context
   t: PropTypes.func, // The translation function
 };
 
-export default withDialog(withUserSettings(withTranslation('common')(ConfirmPassphrase)));
+export default withAppContext(withDialog(withUserSettings(withTranslation('common')(ConfirmPassphrase))));

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/ConfirmPassphrase.test.data.js

@@ -1,9 +1,15 @@
+import UserSettings from "../../../../shared/lib/Settings/UserSettings";
+import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
+
 /**
  * Default props
  * @returns {object}
  */
 export function defaultProps() {
   const props = {
+    context: {
+      userSettings: new UserSettings(userSettingsFixture)
+    },
     userSettingsContext: {
       onCheckProvidePassphraseRequested: jest.fn(),
       onGoToIntroductionPassphraseRequested: jest.fn()

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.js

@@ -24,6 +24,7 @@ import debounce from "debounce-promise";
 import SecurityComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
 
 /**
  * This component displays the user choose passphrase information
@@ -102,6 +103,8 @@ class EnterNewPassphrase extends React.Component {
   bindEventHandlers() {
     this.handlePassphraseChange = this.handlePassphraseChange.bind(this);
     this.handleToggleObfuscate = this.handleToggleObfuscate.bind(this);
+    this.handleFocusPassphrase = this.handleFocusPassphrase.bind(this);
+    this.handleBlurPassphrase = this.handleBlurPassphrase.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
@@ -180,6 +183,48 @@ class EnterNewPassphrase extends React.Component {
     };
   }
 
+  /**
+   * Returns the security token code of the suer
+   */
+  get securityTokenCode() {
+    return this.props.context.userSettings.getSecurityTokenCode();
+  }
+
+  /**
+   * Returns the style of the security token (color and text color)
+   */
+  get securityTokenStyle() {
+    const {userSettings} = this.props.context;
+    const inverseStyle =  {background: userSettings.getSecurityTokenTextColor(), color: userSettings.getSecurityTokenBackgroundColor()};
+    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
+    return this.state.hasPassphraseFocus ? inverseStyle : fullStyle;
+  }
+
+  /**
+   * Get the passphrase input style.
+   * @return {Object}
+   */
+  get passphraseInputStyle() {
+    const {userSettings} = this.props.context;
+    const emptyStyle =  {background: "", color: ""};
+    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
+    return this.state.hasPassphraseFocus ? fullStyle : emptyStyle;
+  }
+
+  /**
+   * Whenever the user focus on the passphrase input
+   */
+  handleFocusPassphrase() {
+    this.setState({hasPassphraseFocus: true});
+  }
+
+  /**
+   * Whenever the user blurs on the passphrase input
+   */
+  handleBlurPassphrase() {
+    this.setState({hasPassphraseFocus: false});
+  }
+
   /**
    * Evaluate if the passphrase is in dictionary
    * @param passphrase The passphrase to evaluate
@@ -244,7 +289,7 @@ class EnterNewPassphrase extends React.Component {
     return (
       <div className="grid grid-responsive-12 profile-passphrase">
         <div className="row">
-          <div className="col6">
+          <div className="col7">
             <form className="enter-passphrase" onSubmit={this.handleSubmit}>
               <h3><Trans>Please enter a new passphrase</Trans></h3>
               <div className="form-content">
@@ -254,7 +299,10 @@ class EnterNewPassphrase extends React.Component {
                     type={this.state.isObfuscated ? "password" : "text"}
                     ref={this.passphraseInput}
                     value={this.state.passphrase}
+                    style={this.passphraseInputStyle}
                     onChange={this.handlePassphraseChange}
+                    onFocus={this.handleFocusPassphrase}
+                    onBlur={this.handleBlurPassphrase}
                     disabled={!this.areActionsAllowed}
                     autoFocus={true}
                     autoComplete="off"/>
@@ -265,13 +313,15 @@ class EnterNewPassphrase extends React.Component {
                     <Icon name="eye-open"/>
                     <span className="visually-hidden">view</span>
                   </a>
+                  <span className="security-token" style={this.securityTokenStyle}>
+                    {this.securityTokenCode}
+                  </span>
                   <div className="password-complexity">
                     <span className="progress">
                       <span className={`progress-bar ${this.state.passphraseStrength.id}`}/>
                     </span>
                   </div>
                 </div>
-
                 <div className="password-hints">
                   <ul>
                     <li className={this.state.hintClassNames.enoughLength}>
@@ -305,9 +355,6 @@ class EnterNewPassphrase extends React.Component {
               <h3><Trans>Tips for choosing a good passphrase</Trans></h3>
               <p><Trans>Make sure your passphrase is hard to guess but also that is long enough. For example you can use your favorite lyric from a song,
                 grab the first couple of characters from the words in your favorite line.</Trans></p>
-              <a className="button">
-                <span><Trans>Learn more</Trans></span>
-              </a>
             </div>
           </div>
         </div>
@@ -317,9 +364,10 @@ class EnterNewPassphrase extends React.Component {
 }
 
 EnterNewPassphrase.propTypes = {
+  context: PropTypes.any, // The application context
   userSettingsContext: PropTypes.object, // The user settings context
   dialogContext: PropTypes.any, // The dialog context
   t: PropTypes.func, // The translation function
 };
 
-export default withDialog(withUserSettings(withTranslation('common')(EnterNewPassphrase)));
+export default withAppContext(withDialog(withUserSettings(withTranslation('common')(EnterNewPassphrase))));

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.test.data.js

@@ -2,8 +2,14 @@
  * Default props
  * @returns {object}
  */
+import UserSettings from "../../../../shared/lib/Settings/UserSettings";
+import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
+
 export function defaultProps() {
   const props = {
+    context: {
+      userSettings: new UserSettings(userSettingsFixture)
+    },
     userSettingsContext: {
       onUpdatePassphraseRequested: jest.fn(),
       onGoToIntroductionPassphraseRequested: jest.fn(),

package/src/react-extension/components/UserSetting/ChangeUserSecurityToken/ChangeUserSecurityToken.js

@@ -379,7 +379,7 @@ class ChangeUserSecurityToken extends Component {
               <p>
                 <Trans>This security token will be displayed when your passphrase is requested,
                   so you can verify quickly the form is coming from passbolt.</Trans>&nbsp;
-                <Trans>This will help protect you from phishing attack</Trans>
+                <Trans>This will help protect you from phishing attacks</Trans>
               </p>
             </div>
           </div>

package/src/react-extension/components/UserSetting/ChangeUserSecurityToken/ChangeUserSecurityToken.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import ChangeUserSecurityToken from "./ChangeUserSecurityToken";
 
 
@@ -20,13 +19,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <ChangeUserSecurityToken {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ChangeUserSecurityToken {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/DisplayUserGpgInformation/DisplayUserGpgInformation.js

@@ -94,13 +94,14 @@ class DisplayUserGpgInformation extends React.Component {
     // format the gpgkey info.
     const keyId = gpgkeyInfo.keyId;
     const type = this.gpgkeyType[gpgkeyInfo.algorithm];
+    const uIds = gpgkeyInfo.userIds;
     const created = this.formatDate(gpgkeyInfo.created);
     const expires = gpgkeyInfo.expires === "Never" ? "Never" : this.formatDate(gpgkeyInfo.expires);
     const armoredKey = gpgkeyInfo.key;
     const fingerprint = gpgkeyInfo.fingerprint;
     const length = gpgkeyInfo.length;
 
-    return {keyId, type, created, expires, armoredKey, fingerprint, length};
+    return {keyId, type, uIds, created, expires, armoredKey, fingerprint, length};
   }
 
   /**
@@ -154,11 +155,25 @@ class DisplayUserGpgInformation extends React.Component {
   }
 
   /**
-   * Get the user fullname
+   * Get fingerprint
+   * @returns {JSX.Element}
+   */
+  get fingerprint() {
+    let fingerprint = this.gpgKeyInfo.fingerprint;
+    if (fingerprint) {
+      fingerprint = fingerprint.toUpperCase().replace(/.{4}(?=.)/g, '$& ');
+      fingerprint = <>{fingerprint.substr(0, 24)}<br/>{fingerprint.substr(25)}</>;
+    }
+    return fingerprint;
+  }
+
+  /**
+   * Get the first uID of the GPG key
    * @returns {string}
    */
-  get userFullname() {
-    return this.user ? `${this.user.profile.first_name} ${this.user.profile.last_name}` : "";
+  get uId() {
+    const uId = this.gpgKeyInfo.uIds && this.gpgKeyInfo.uIds[0];
+    return uId ? `${uId.name} <${uId.email}>` : "";
   }
 
   /**
@@ -198,11 +213,11 @@ class DisplayUserGpgInformation extends React.Component {
                 </tr>
                 <tr>
                   <td><Trans>Uid</Trans></td>
-                  <td className="uid">{this.userFullname}</td>
+                  <td className="uid">{this.uId}</td>
                 </tr>
                 <tr>
                   <td><Trans>Fingerprint</Trans></td>
-                  <td className="fingerprint">{this.gpgKeyInfo.fingerprint}</td>
+                  <td className="fingerprint">{this.fingerprint}</td>
                 </tr>
                 <tr>
                   <td><Trans>Created</Trans></td>

package/src/react-extension/components/UserSetting/DisplayUserGpgInformation/DisplayUserGpgInformation.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserGpgInformation from "./DisplayUserGpgInformation";
 
 
@@ -47,13 +46,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DisplayUserGpgInformation {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayUserGpgInformation {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/DisplayUserProfile/DisplayUserProfile.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserProfile from "./DisplayUserProfile";
 
 
@@ -50,13 +49,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DisplayUserProfile {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayUserProfile {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/DisplayUserSettingsWorkspaceBreadcrumb/DisplayUserSettingsWorkspaceBreadcrumb.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserSettingsWorkspaceBreadcrumb from "./DisplayUserSettingsWorkspaceBreadcrumb";
 
 
@@ -44,13 +43,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/profile']}>
-        <Route component={routerProps => <DisplayUserSettingsWorkspaceBreadcrumb {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/profile']}>
+      <Route component={routerProps => <DisplayUserSettingsWorkspaceBreadcrumb {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/DisplayUserTheme/DisplayUserTheme.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserTheme from "./DisplayUserTheme";
 
 
@@ -31,13 +30,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DisplayUserTheme {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayUserTheme {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,