passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationAccountRecoveryAction/DisplayAdministrationAccountRecoveryActions.js

@@ -15,7 +15,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Icon from "../../../../../shared/components/Icons/Icon";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {withAdminAccountRecovery} from "../../../../contexts/AdminAccountRecoveryContext";
 import {AccountRecoveryUserContextProvider} from "../../../../contexts/AccountRecoveryUserContext";
 import {withWorkflow} from "../../../../contexts/WorkflowContext";
@@ -90,15 +90,6 @@ class DisplayAdministrationWorkspaceActions extends React.Component {
     return this.props.adminAccountRecoveryContext.hasPolicyChanges();
   }
 
-
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -132,7 +123,6 @@ class DisplayAdministrationWorkspaceActions extends React.Component {
 DisplayAdministrationWorkspaceActions.propTypes = {
   adminAccountRecoveryContext: PropTypes.object, // The admin account recovery context
   workflowContext: PropTypes.any, // the workflow context
-  t: PropTypes.func, // The translation function
 };
 
-export default withWorkflow(withAdminAccountRecovery(withTranslation('common')(DisplayAdministrationWorkspaceActions)));
+export default withWorkflow(withAdminAccountRecovery(DisplayAdministrationWorkspaceActions));

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationWorkspaceActions.js

@@ -24,7 +24,7 @@ import DisplaySimulateSynchronizeUserDirectoryAdministration
 import {withDialog} from "../../../contexts/DialogContext";
 import DisplaySynchronizeUserDirectoryAdministration
   from "../DisplaySynchronizeUserDirectoryAdministration/DisplaySynchronizeUserDirectoryAdministration";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 /**
  * This component is a container of multiple actions applicable on setting
@@ -141,14 +141,6 @@ class DisplayAdministrationWorkspaceActions extends React.Component {
     return AdministrationWorkspaceMenuTypes.SUBSCRIPTION === this.props.administrationWorkspaceContext.selectedAdministration;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -208,7 +200,6 @@ class DisplayAdministrationWorkspaceActions extends React.Component {
 DisplayAdministrationWorkspaceActions.propTypes = {
   administrationWorkspaceContext: PropTypes.object, // The administration workspace context
   dialogContext: PropTypes.any, // The dialog context
-  t: PropTypes.func, // The translation function
 };
 
-export default withDialog(withAdministrationWorkspace(withTranslation('common')(DisplayAdministrationWorkspaceActions)));
+export default withDialog(withAdministrationWorkspace(DisplayAdministrationWorkspaceActions));

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceBreadcrumb/DisplayAdministrationWorkspaceBreadcrumb.js

@@ -50,7 +50,7 @@ class DisplayAdministrationWorkspaceBreadcrumb extends Component {
   getLastBreadcrumbItemName() {
     switch (this.props.administrationWorkspaceContext.selectedAdministration) {
       case AdministrationWorkspaceMenuTypes.MFA:
-        return this.translate("Multi factor authentication");
+        return this.translate("Multi Factor Authentication");
       case AdministrationWorkspaceMenuTypes.USER_DIRECTORY:
         return this.translate("Users Directory");
       case AdministrationWorkspaceMenuTypes.EMAIL_NOTIFICATION:

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceBreadcrumb/DisplayAdministrationWorkspaceBreadcrumb.test.js

@@ -45,7 +45,7 @@ describe("As AD I can see a Breadcrumb", () => {
     page = new DisplayAdministrationWorkspaceBreadcrumbPage(context, props);
     expect(page.count).toBe(3);
     expect(page.item(1)).toBe("Administration");
-    expect(page.item(2)).toBe("Multi factor authentication");
+    expect(page.item(2)).toBe("Multi Factor Authentication");
     expect(page.item(3)).toBe("Settings");
   });
 

package/src/react-extension/components/Administration/DisplayEmailNotificationsAdministration/DisplayEmailNotificationsAdministration.js

@@ -321,7 +321,7 @@ class DisplayEmailNotificationsAdministration extends React.Component {
    * Handle save operation success.
    */
   async handleSaveSuccess() {
-    await this.props.actionFeedbackContext.displaySuccess(this.translate("The email notification settings were updated."));
+    await this.props.actionFeedbackContext.displaySuccess(this.props.t("The email notification settings were updated."));
     this.setState({processing: false});
   }
 
@@ -390,14 +390,6 @@ class DisplayEmailNotificationsAdministration extends React.Component {
     return this.props.context.siteSettings.canIUse("accountRecovery");
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}

package/src/react-extension/components/Administration/DisplayEmailNotificationsAdministration/DisplayEmailNotificationsAdministration.test.stories.js

@@ -19,7 +19,7 @@ import PropTypes from "prop-types";
 import DisplayEmailNotificationsAdministration from "./DisplayEmailNotificationsAdministration";
 
 export default {
-  title: 'Passbolt/Administration/DisplayEmailNotificationsAdministration',
+  title: 'Passbolt Component/Administration/DisplayEmailNotificationsAdministration',
   component: DisplayEmailNotificationsAdministration
 };
 

package/src/react-extension/components/Administration/DisplayInternationalizationAdministration/DisplayInternationalizationAdministration.js

@@ -131,7 +131,7 @@ class DisplayInternationalizationAdministration extends React.Component {
    */
   async handleSaveSuccess() {
     this.props.context.onRefreshLocaleRequested(this.state.locale);
-    await this.props.actionFeedbackContext.displaySuccess(this.translate("The internationalization settings were updated."));
+    await this.props.actionFeedbackContext.displaySuccess(this.props.t("The internationalization settings were updated."));
     this.setState({processing: false});
   }
 
@@ -179,14 +179,6 @@ class DisplayInternationalizationAdministration 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/Administration/DisplayInternationalizationAdministration/DisplayInternationalizationAdministration.test.page.js

@@ -93,6 +93,6 @@ export default class DisplayInternationalizationAdministrationPage {
   /** select the french language */
   async selectLanguageFr() {
     await this.click(this.locale);
-    await this.click(this.getLocaleList(2));
+    await this.click(this.getLocaleList(3));
   }
 }

package/src/react-extension/components/Administration/DisplayInternationalizationAdministration/DisplayInternationalizationAdministration.test.stories.js

@@ -17,7 +17,7 @@ import PropTypes from "prop-types";
 import DisplayInternationalizationAdministration from "./DisplayInternationalizationAdministration";
 
 export default {
-  title: 'Passbolt/Administration/DisplayInternationalizationAdministration',
+  title: 'Passbolt Component/Administration/DisplayInternationalizationAdministration',
   component: DisplayInternationalizationAdministration
 };
 
@@ -45,21 +45,27 @@ Initial.args = {
         }, {
           locale: "en-UK",
           label: "English"
+        }, {
+          locale: "es-ES",
+          label: "Español"
         }, {
           locale: "fr-FR",
-          "label": "Français"
+          label: "Français"
         }, {
           locale: "ja-JP",
-          "label": "日本語"
+          label: "日本語"
+        }, {
+          locale: "lt-LT",
+          label: "Lietuvių"
         }, {
           locale: "nl-NL",
-          "label": "Nederlands"
+          label: "Nederlands"
         }, {
           locale: "pl-PL",
-          "label": "Polski"
+          label: "Polski"
         }, {
           locale: "sv-SE",
-          "label": "Svenska"
+          label: "Svenska"
         }
       ]
     }

package/src/react-extension/components/Administration/DisplayLoadingDialog/DisplayLoadingDialog.js

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import Icon from "../../../../shared/components/Icons/Icon";
 
 class DisplayLoadingDialog extends Component {
@@ -89,14 +89,6 @@ class DisplayLoadingDialog extends Component {
     this.props.onClose();
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render
    * @returns {JSX}
@@ -127,7 +119,6 @@ class DisplayLoadingDialog extends Component {
 DisplayLoadingDialog.propTypes = {
   onClose: PropTypes.func,
   title: PropTypes.string,
-  t: PropTypes.func, // The translation function
 };
 
-export default withTranslation('common')(DisplayLoadingDialog);
+export default DisplayLoadingDialog;

package/src/react-extension/components/Administration/DisplayMfaAdministration/DisplayMfaAdministration.js

@@ -446,7 +446,7 @@ class DisplayMfaAdministration extends React.Component {
             <p className="description">
               <Trans>The Yubikey provider is enabled for all users. They can setup this provider in their profile and use it as second factor authentication.</Trans>
             </p>
-            <div className={`input text required ${this.state.yubikeyClientIdentifierError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.yubikeyClientIdentifierError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label><Trans>Client identifier</Trans></label>
               <input id="yubikeyClientIdentifier" type="text" name="yubikeyClientIdentifier" required="required" className="required fluid form-element ready" placeholder="123456789"
                 onChange={this.handleInputChange} value={this.state.yubikeyClientIdentifier} disabled={this.hasAllInputDisabled()}/>
@@ -454,7 +454,7 @@ class DisplayMfaAdministration extends React.Component {
               <div className="yubikey_client_identifier error-message">{this.state.yubikeyClientIdentifierError}</div>
               }
             </div>
-            <div className={`input text required ${this.state.yubikeySecretKeyError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.yubikeySecretKeyError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label><Trans>Secret key</Trans></label>
               <input id="yubikeySecretKey" name="yubikeySecretKey" required="required" className="required fluid form-element" placeholder="**********" type="password"
                 onChange={this.handleInputChange} value={this.state.yubikeySecretKey} disabled={this.hasAllInputDisabled()}/>
@@ -481,7 +481,7 @@ class DisplayMfaAdministration extends React.Component {
             <p className="description enabled">
               <Trans>The Duo provider is enabled for all users. They can setup this provider in their profile and use it as second factor authentication.</Trans>
             </p>
-            <div className={`input text required ${this.state.duoHostnameError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.duoHostnameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label><Trans>Hostname</Trans></label>
               <input id="duoHostname" type="text" name="duoHostname" required="required" className="required fluid form-element ready"
                 placeholder="api-24zlkn4.duosecurity.com" value={this.state.duoHostname}
@@ -490,7 +490,7 @@ class DisplayMfaAdministration extends React.Component {
               <div className="duo_hostname error-message">{this.state.duoHostnameError}</div>
               }
             </div>
-            <div className={`input text required ${this.state.duoIntegrationKeyError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.duoIntegrationKeyError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label><Trans>Integration key</Trans></label>
               <input id="duoIntegrationKey" type="text" name="duoIntegrationKey" required="required" className="required fluid form-element ready"
                 placeholder="HASJKDSQJO213123KQSLDF" value={this.state.duoIntegrationKey}
@@ -499,7 +499,7 @@ class DisplayMfaAdministration extends React.Component {
               <div className="duo_integration_key error-message">{this.state.duoIntegrationKeyError}</div>
               }
             </div>
-            <div className={`input text required ${this.state.duoSaltError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.duoSaltError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label><Trans>Salt</Trans></label>
               <input id="duoSalt" name="duoSalt" required="required" className="required fluid form-element ready" placeholder="**********" type="password"
                 value={this.state.duoSalt} onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>
@@ -507,7 +507,7 @@ class DisplayMfaAdministration extends React.Component {
               <div className="duo_salt error-message">{this.state.duoSaltError}</div>
               }
             </div>
-            <div className={`input text required ${this.state.duoSecretKeyError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.duoSecretKeyError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label><Trans>Secret key</Trans></label>
               <input id="duoSecretKey" name="duoSecretKey" required="required" className="required fluid form-element ready" placeholder="**********" type="password"
                 value={this.state.duoSecretKey} onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>

package/src/react-extension/components/Administration/DisplayMfaAdministration/DisplayMfaAdministration.test.stories.js

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

package/src/react-extension/components/Administration/DisplaySimulateSynchronizeUserDirectoryAdministration/DisplaySimulateSynchronizeUserDirectoryAdministration.js

@@ -191,6 +191,22 @@ class DisplaySimulateSynchronizeUserDirectoryAdministration extends Component {
     return this.usersSuccess.length > 0 || this.groupsSuccess.length > 0;
   }
 
+  /**
+   * Has success user resource
+   * @returns {boolean}
+   */
+  hasSuccessUserResource() {
+    return this.usersSuccess.length > 0;
+  }
+
+  /**
+   * Has success resource
+   * @returns {boolean}
+   */
+  hasSuccessGroupResource() {
+    return this.groupsSuccess.length > 0;
+  }
+
   /**
    * Has error or ignore resource
    * @returns {boolean}
@@ -289,7 +305,15 @@ class DisplaySimulateSynchronizeUserDirectoryAdministration extends Component {
             </p>
             <p></p>
             {this.hasSuccessResource() &&
-            <p id="resources-synchronize"> {this.translate("{{users}} and {{groups}} will be synchronized.", {users: this.translate("{{count}} user", {count: this.usersSuccess.length}), groups: this.translate("{{count}} group", {count: this.groupsSuccess.length})})} </p>
+              <p id="resources-synchronize">
+                {this.hasSuccessUserResource() &&
+                  <>{this.translate("{{count}} user will be synchronized.", {count: this.usersSuccess.length})}</>
+                }
+                {this.hasSuccessUserResource() && this.hasSuccessGroupResource() && <br/>}
+                {this.hasSuccessGroupResource() &&
+                  <>{this.translate("{{count}} group will be synchronized.", {count: this.groupsSuccess.length})}</>
+                }
+              </p>
             }
             {!this.hasSuccessResource() &&
             <p id="no-resources"> <Trans>No resources will be synchronized.</Trans> </p>

package/src/react-extension/components/Administration/DisplaySimulateSynchronizeUserDirectoryAdministration/DisplaySimulateSynchronizeUserDirectoryAdministration.test.js

@@ -42,7 +42,7 @@ describe("See the simulate synchronize user directory administration dialog", ()
     it('As AD I should see The full report in the dialog for my simulate synchronize report', async() => {
       expect(page.title.hyperlink.textContent).toBe("Synchronize simulation report");
       expect(page.displaySimulateSynchronizeUserDirectoryAdministrationDialog.exists()).toBeTruthy();
-      expect(page.displaySimulateSynchronizeUserDirectoryAdministrationDialog.resourceSynchronize).toBe(' 2 users and 60 groups will be synchronized. ');
+      expect(page.displaySimulateSynchronizeUserDirectoryAdministrationDialog.resourceSynchronize).toBe('2 users will be synchronized.60 groups will be synchronized.');
       expect(page.displaySimulateSynchronizeUserDirectoryAdministrationDialog.error).toBe('Some resources will not be synchronized and will require your attention, see the full report.');
       expect(page.displaySimulateSynchronizeUserDirectoryAdministrationDialog.noResource).toBeNull();
       await page.displaySimulateSynchronizeUserDirectoryAdministrationDialog.click(page.displaySimulateSynchronizeUserDirectoryAdministrationDialog.fullReport);

package/src/react-extension/components/Administration/DisplaySimulateSynchronizeUserDirectoryAdministration/DisplaySimulateSynchronizeUserDirectoryAdministration.test.stories.js

@@ -6,7 +6,7 @@ import DisplaySimulateSynchronizeUserDirectoryAdministration
   from "./DisplaySimulateSynchronizeUserDirectoryAdministration";
 
 export default {
-  title: 'Passbolt/Administration/DisplaySimulateSynchronizeUserDirectoryAdministration',
+  title: 'Passbolt Component/Administration/DisplaySimulateSynchronizeUserDirectoryAdministration',
   component: DisplaySimulateSynchronizeUserDirectoryAdministration
 };
 

package/src/react-extension/components/Administration/DisplaySubscriptionKey/DisplaySubscriptionKey.test.stories.js

@@ -9,7 +9,7 @@ import {
 
 
 export default {
-  title: 'Passbolt/Administration/DisplaySubscriptionKey',
+  title: 'Passbolt Component/Administration/DisplaySubscriptionKey',
   component: DisplaySubscriptionKey
 };
 

package/src/react-extension/components/Administration/DisplaySynchronizeUserDirectoryAdministration/DisplaySynchronizeUserDirectoryAdministration.js

@@ -189,6 +189,22 @@ class DisplaySynchronizeUserDirectoryAdministration extends Component {
     return this.usersSuccess.length > 0 || this.groupsSuccess.length > 0;
   }
 
+  /**
+   * Has success user resource
+   * @returns {boolean}
+   */
+  hasSuccessUserResource() {
+    return this.usersSuccess.length > 0;
+  }
+
+  /**
+   * Has success resource
+   * @returns {boolean}
+   */
+  hasSuccessGroupResource() {
+    return this.groupsSuccess.length > 0;
+  }
+
   /**
    * Has error or ignore resource
    * @returns {boolean}
@@ -287,7 +303,15 @@ class DisplaySynchronizeUserDirectoryAdministration extends Component {
             </p>
             <p></p>
             {this.hasSuccessResource() &&
-            <p id="resources-synchronize"> {this.translate("{{users}} and {{groups}} have been synchronized.", {users: this.translate("{{count}} user", {count: this.usersSuccess.length}), groups: this.translate("{{count}} group", {count: this.groupsSuccess.length})})} </p>
+              <p id="resources-synchronize">
+                {this.hasSuccessUserResource() &&
+                  <>{this.translate("{{count}} user has been synchronized.", {count: this.usersSuccess.length})}</>
+                }
+                {this.hasSuccessUserResource() && this.hasSuccessGroupResource() && <br/>}
+                {this.hasSuccessGroupResource() &&
+                  <>{this.translate("{{count}} group has been synchronized.", {count: this.groupsSuccess.length})}</>
+                }
+              </p>
             }
             {!this.hasSuccessResource() &&
             <p id="no-resources"> <Trans>No resources have been synchronized.</Trans> </p>

package/src/react-extension/components/Administration/DisplaySynchronizeUserDirectoryAdministration/DisplaySynchronizeUserDirectoryAdministration.test.js

@@ -42,7 +42,7 @@ describe("See the synchronize user directory administration dialog", () => {
     it('As AD I should see The full report in the dialog for my synchronize report', async() => {
       expect(page.title.hyperlink.textContent).toBe("Synchronize report");
       expect(page.displaySynchronizeUserDirectoryAdministrationDialog.exists()).toBeTruthy();
-      expect(page.displaySynchronizeUserDirectoryAdministrationDialog.resourceSynchronize).toBe(' 2 users and 60 groups have been synchronized. ');
+      expect(page.displaySynchronizeUserDirectoryAdministrationDialog.resourceSynchronize).toBe('2 users have been synchronized.60 groups have been synchronized.');
       expect(page.displaySynchronizeUserDirectoryAdministrationDialog.error).toBe('Some resources will not be synchronized and will require your attention, see the full report.');
       expect(page.displaySynchronizeUserDirectoryAdministrationDialog.noResource).toBeNull();
       await page.displaySynchronizeUserDirectoryAdministrationDialog.click(page.displaySynchronizeUserDirectoryAdministrationDialog.fullReport);

package/src/react-extension/components/Administration/DisplaySynchronizeUserDirectoryAdministration/DisplaySynchronizeUserDirectoryAdministration.test.stories.js

@@ -6,7 +6,7 @@ import DisplaySynchronizeUserDirectoryAdministration from "./DisplaySynchronizeU
 
 
 export default {
-  title: 'Passbolt/Administration/DisplaySynchronizeUserDirectoryAdministration',
+  title: 'Passbolt Component/Administration/DisplaySynchronizeUserDirectoryAdministration',
   component: DisplaySynchronizeUserDirectoryAdministration
 };
 

package/src/react-extension/components/Administration/DisplayTestUserDirectoryAdministration/DisplayTestUserDirectoryAdministration.js

@@ -157,7 +157,7 @@ class DisplayTestUserDirectoryAdministration extends Component {
    */
   render() {
     return (
-      <DialogWrapper className='ldap-test-settings-dialog' title="Test settings report"
+      <DialogWrapper className='ldap-test-settings-dialog' title={this.translate("Test settings report")}
         onClose={this.handleClose} disabled={this.hasAllInputDisabled()}>
         <div className="form-content">
           <p>
@@ -168,7 +168,17 @@ class DisplayTestUserDirectoryAdministration extends Component {
           <p></p>
           <div className="ldap-test-settings-report">
             <p>
-              {this.translate("{{users}} and {{groups}} have been found.", {users: this.translate("{{count}} user", {count: this.users.length}), groups: this.translate("{{count}} group", {count: this.groups.length})})}
+              {this.users.length > 0 &&
+                <>
+                  {this.translate("{{count}} user has been found.", {count: this.users.length})}
+                </>
+              }
+              {this.users.length > 0 && this.groups.length > 0 && <br/>}
+              {this.groups.length > 0 &&
+                <>
+                  {this.translate("{{count}} group has been found.", {count: this.groups.length})}
+                </>
+              }
             </p>
             <div className={`accordion directory-list ${this.state.openListGroupsUsers ? "" : "closed"}`}>
               <div className="accordion-header" onClick={this.handleListGroupsUsersClicked}>

package/src/react-extension/components/Administration/DisplayTestUserDirectoryAdministration/DisplayTestUserDirectoryAdministration.test.js

@@ -46,7 +46,7 @@ describe("See the test user directory administration Dialog", () => {
     it('As AD I should see the number of user(s) and group(s) founds on the LDAP server in the dialog for my Test settings report', async() => {
       expect(page.title.hyperlink.textContent).toBe("Test settings report");
       expect(page.displayTestUserDirectoryAdministrationDialog.exists()).toBeTruthy();
-      expect(page.displayTestUserDirectoryAdministrationDialog.usersAndGroupsFound).toBe('12 users and 58 groups have been found.');
+      expect(page.displayTestUserDirectoryAdministrationDialog.usersAndGroupsFound).toBe('12 users have been found.58 groups have been found.');
       await page.displayTestUserDirectoryAdministrationDialog.click(page.displayTestUserDirectoryAdministrationDialog.buttonOk);
       expect(props.onClose).toBeCalled();
     });

package/src/react-extension/components/Administration/DisplayTestUserDirectoryAdministration/DisplayTestUserDirectoryAdministration.test.stories.js

@@ -6,7 +6,7 @@ import DisplayTestUserDirectoryAdministration from "./DisplayTestUserDirectoryAd
 
 
 export default {
-  title: 'Passbolt/Administration/DisplayTestUserDirectoryAdministration',
+  title: 'Passbolt Component/Administration/DisplayTestUserDirectoryAdministration',
   component: DisplayTestUserDirectoryAdministration
 };