passbolt-styleguide 3.3.3 → 3.4.0-alpha2

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

@@ -119,7 +119,7 @@ class TagEditPageObject {
    * Returns the tag name error mesage element
    */
   get tagNameErrorMessage() {
-    return this._container.querySelector('.name.error.message');
+    return this._container.querySelector('.name.error-message');
   }
 
   /**

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

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import EditResourceTag from "./EditResourceTag";
@@ -31,7 +30,6 @@ Template.propTypes = {
 };
 
 
-
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultContext
@@ -44,5 +42,3 @@ Initial.argTypes = {
     }
   }
 };
-
-

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

@@ -254,7 +254,7 @@ class EditResourceTags extends React.Component {
       return false;
     }
     if (this.isTagExceedMaxLength(slug.trim())) {
-      this.setErrorMessage(this.translate("This tag can't be added, the length cannot exceeds {{tagMaxLength}}", {tagMaxLength: TAG_MAX_LENGTH}));
+      this.setErrorMessage(this.translate("This tag can't be added, the length cannot exceed {{tagMaxLength}}", {tagMaxLength: TAG_MAX_LENGTH}));
       return false;
     }
     if (!this.props.isOwner && slug.startsWith("#")) {
@@ -535,7 +535,7 @@ class EditResourceTags extends React.Component {
           </div>
           }
           {this.state.errorMessage &&
-          <div className="message error">{this.state.errorMessage}</div>
+          <div className="error-message">{this.state.errorMessage}</div>
           }
         </div>
         <div className="actions">

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

@@ -43,7 +43,7 @@ export default class EditResourceTagsPageObject {
    * Returns the error message content
    */
   get errorMessage() {
-    return this._container.querySelector('.message.error').textContent;
+    return this._container.querySelector('.error-message').textContent;
   }
 
   /**

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

@@ -86,7 +86,11 @@ class EditResourceTagsItemViewer extends React.Component {
         <ul className="tags tags-list" onClick={this.props.toggleInputTagEditor}>
           {this.getTags().map(tag =>
             <li key={tag.id} className="tag-list-item">
-              <a onClick={event => this.handleOnClickTag(event, tag)} className="tag ellipsis">{tag.slug}</a>
+              <a onClick={event => this.handleOnClickTag(event, tag)} className="tag ellipsis">
+                <span className="tag-content">
+                  {tag.slug}
+                </span>
+              </a>
             </li>)
           }
         </ul>

package/src/react-extension/components/Share/ShareDialog.test.page.js

@@ -82,7 +82,7 @@ export default class ShareDialogPage {
    * Returns the error message element
    */
   get errorMessage() {
-    return this._page.container.querySelector('.message.error').textContent;
+    return this._page.container.querySelector('.error.message').textContent;
   }
 
   /**

package/src/react-extension/components/Share/ShareDialog.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_app.css";
-import MockTranslationProvider from "../../test/mock/components/Internationalisation/MockTranslationProvider";
 import ShareDialog from "./ShareDialog";
 import AppContext from "../../contexts/AppContext";
 import {autocompleteResult, resources} from "./ShareDialog.test.data";
@@ -33,15 +31,19 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <ShareDialog {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
-
+  <AppContext.Provider value={args.context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ShareDialog {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context
+};
 
+export const Loading = Template.bind({});
+Loading.args = {
+  context: {...context, port: {}}
+};

package/src/react-extension/components/User/ConfirmDisableUserMFA/ConfirmDisableUserMFA.test.stories.js

@@ -3,7 +3,6 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import ConfirmDisableUserMFA from "./ConfirmDisableUserMFA";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
 
 export default {
@@ -15,13 +14,11 @@ const context = {};
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <ConfirmDisableUserMFA {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ConfirmDisableUserMFA {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,
@@ -78,4 +75,3 @@ Initial.args = {
     }]
   }
 };
-

package/src/react-extension/components/User/CreateUser/CreateUser.js

@@ -382,7 +382,7 @@ class CreateUser extends Component {
                 autoComplete='off' autoFocus={true}
               />
               {this.state.first_nameError &&
-              <div className="first_name error message">{this.state.first_nameError}</div>
+              <div className="first_name error-message">{this.state.first_nameError}</div>
               }
             </div>
             <div className={`input text required ${this.state.last_nameError ? "error" : ""}`}>
@@ -395,7 +395,7 @@ class CreateUser extends Component {
                 autoComplete='off' autoFocus={true}
               />
               {this.state.last_nameError &&
-              <div className="last_name error message">{this.state.last_nameError}</div>
+              <div className="last_name error-message">{this.state.last_nameError}</div>
               }
             </div>
             <div className={`input text required ${this.state.usernameError ? "error" : ""}`}>
@@ -407,7 +407,7 @@ class CreateUser extends Component {
                 autoComplete='off' autoFocus={true}
               />
               {this.state.usernameError &&
-              <div className="username error message">{this.state.usernameError}</div>
+              <div className="username error-message">{this.state.usernameError}</div>
               }
             </div>
             <div className="input checkbox">
@@ -417,7 +417,7 @@ class CreateUser extends Component {
                   checked={this.state.is_admin} disabled={this.hasAllInputDisabled()} type="checkbox"/>
                 <label htmlFor="is_admin_checkbox"> <Trans>This user is an administrator</Trans></label>
               </div>
-              <div className="message helptext">
+              <div className="help-message">
                 <Trans>Note: Administrators can add and delete users; They can also create groups and assign group managers; Admin can not see all passwords.</Trans>
               </div>
             </div>

package/src/react-extension/components/User/CreateUser/CreateUser.test.page.js

@@ -119,7 +119,7 @@ class CreateUserPageObject {
    * Returns the first name error mesage input element
    */
   get firstNameErrorMessage() {
-    return this._container.querySelector('.first_name.error.message');
+    return this._container.querySelector('.first_name.error-message');
   }
 
   /**
@@ -133,7 +133,7 @@ class CreateUserPageObject {
    * Returns the last name error mesage input element
    */
   get lastNameErrorMessage() {
-    return this._container.querySelector('.last_name.error.message');
+    return this._container.querySelector('.last_name.error-message');
   }
 
   /**
@@ -147,7 +147,7 @@ class CreateUserPageObject {
    * Returns the email error mesage input element
    */
   get usernameErrorMessage() {
-    return this._container.querySelector('.username.error.message');
+    return this._container.querySelector('.username.error-message');
   }
 
   /**

package/src/react-extension/components/User/CreateUser/CreateUser.test.stories.js

@@ -3,7 +3,6 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import CreateUser from "./CreateUser";
-import "../../../../css/themes/default/api_main.css";
 
 
 export default {
@@ -26,3 +25,6 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.parameters = {
+  css: "api_main"
+};

package/src/react-extension/components/User/DeleteUser/DeleteUser.test.stories.js

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

package/src/react-extension/components/User/DeleteUser/DeleteUserWithConflicts.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 DeleteUserWithConflicts from "./DeleteUserWithConflicts";
 
 
@@ -256,13 +255,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DeleteUserWithConflicts {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DeleteUserWithConflicts {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/User/DisplayUserWorkspaceActions/DisplayUserWorkspaceActions.js

@@ -442,9 +442,9 @@ class DisplayUserWorkspaceActions extends React.Component {
           <ul className="ready">
             <li>
               <a
-                className={`button toggle info ${this.hasDetailsLocked() ? "selected" : ""}`}
+                className={`button button-toggle info ${this.hasDetailsLocked() ? "selected" : ""}`}
                 onClick={this.handleDetailsLockedEvent}>
-                <Icon name="info-circle"/>
+                <Icon name="info-circle" big={true}/>
                 <span className="visuallyhidden">View detail</span>
               </a>
             </li>

package/src/react-extension/components/User/DisplayUserWorkspaceActions/DisplayUserWorkspaceActions.test.page.js

@@ -96,7 +96,7 @@ export default class DisplayUserWorkspaceActionsPage {
    * Toggle the lock of the display of the details
    */
   async lockDetails() {
-    const element = this._page.container.querySelector('.button.toggle.info');
+    const element = this._page.container.querySelector('.button-toggle.info');
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});

package/src/react-extension/components/User/DisplayUsers/DisplayUsers.js

@@ -113,6 +113,12 @@ class DisplayUsers extends React.Component {
    * @param user An user
    */
   handleCheckboxWrapperClick(event, user) {
+    // Prevent event fired twice due to the input + label
+    event.preventDefault();
+    /*
+     * We want the td to extend the clickable area of the checkbox.
+     * If we propagate the event, the tr will listen to the click and select only the clicked row.
+     */
     event.stopPropagation();
     this.props.userWorkspaceContext.onUserSelected.single(user);
   }
@@ -257,6 +263,7 @@ class DisplayUsers extends React.Component {
     const isSelected = this.isUserSelected(user);
     const modifiedFormatted = this.formatDateTimeAgo(user.modified);
     const lastLoggedInFormatted = user.last_logged_in ? this.formatDateTimeAgo(user.last_logged_in) : "";
+    const roleName = this.props.userWorkspaceContext.getTranslatedRoleName(user.role_id);
     const mfa = user.is_mfa_enabled ? this.translate("Enabled") : this.translate("Disabled");
     const rowClassName = `${isSelected ? "selected" : ""} ${user.active ? "" : "inactive"}`;
 
@@ -272,7 +279,9 @@ class DisplayUsers extends React.Component {
           <div className="ready">
             <div className="input checkbox">
               <input type="checkbox" id={`checkbox_multiple_select_checkbox_${user.id}`} checked={isSelected} readOnly={true}/>
-              <label htmlFor={`checkbox_multiple_select_checkbox_${user.id}`}></label>
+              <label htmlFor={`checkbox_multiple_select_checkbox_${user.id}`}>
+                <span className="visually-hidden"><Trans>Select user</Trans></span>
+              </label>
             </div>
           </div>
         </td>
@@ -286,6 +295,11 @@ class DisplayUsers extends React.Component {
             {user.username}
           </div>
         </td>
+        <td className="cell-role m-cell role">
+          <div title={roleName}>
+            {roleName}
+          </div>
+        </td>
         <td className="cell-modified m-cell">
           <div title={user.modified}>
             {modifiedFormatted}
@@ -349,7 +363,9 @@ class DisplayUsers extends React.Component {
                         <input
                           type="checkbox"
                           name="select all"/>
-                        <label htmlFor="js-passwords-select-all">select all</label>
+                        <label htmlFor="js-passwords-select-all">
+                          <span className="visually-hidden">select all</span>
+                        </label>
                       </div>
                     </th>
                     <th className="cell-name l-cell sortable">
@@ -386,6 +402,23 @@ class DisplayUsers extends React.Component {
                         </div>
                       </a>
                     </th>
+                    <th className="cell-role m-cell role sortable">
+                      <a onClick={ev => this.handleSortByColumnClick(ev, "role.name")}>
+                        <div className="cell-header">
+                          <span className="cell-header-text">
+                            <Trans>Role</Trans>
+                          </span>
+                          <span className="cell-header-icon-sort">
+                            {this.isSortedColumn("role.name") && this.isSortedAsc() &&
+                            <Icon baseline={true} name="caret-up"/>
+                            }
+                            {this.isSortedColumn("role.name") && !this.isSortedAsc() &&
+                            <Icon baseline={true} name="caret-down"/>
+                            }
+                          </span>
+                        </div>
+                      </a>
+                    </th>
                     <th className="cell-modified m-cell sortable">
                       <a onClick={ev => this.handleSortByColumnClick(ev, "modified")}>
                         <div className="cell-header">

package/src/react-extension/components/User/DisplayUsers/DisplayUsers.test.data.js

@@ -180,7 +180,8 @@ export function defaultProps() {
       }],
       filter: {
         type: UserWorkspaceFilterTypes.ALL
-      }
+      },
+      getTranslatedRoleName: jest.fn(name => name),
     }
   };
 }

package/src/react-extension/components/User/DisplayUsers/DisplayUsers.test.js

@@ -93,6 +93,12 @@ describe("Display Users", () => {
       expect(props.userWorkspaceContext.onSorterChanged).toHaveBeenCalledWith('username');
     });
 
+    it('As LU, I should sort the users by role', async() => {
+      jest.spyOn(props.userWorkspaceContext, 'onSorterChanged').mockImplementationOnce(() => {});
+      await page.sortByRole();
+      expect(props.userWorkspaceContext.onSorterChanged).toHaveBeenCalledWith('role.name');
+    });
+
     it('As LU, I should sort the users by modified', async() => {
       jest.spyOn(props.userWorkspaceContext, 'onSorterChanged').mockImplementationOnce(() => {});
       await page.sortByModified();

package/src/react-extension/components/User/DisplayUsers/DisplayUsers.test.page.js

@@ -20,6 +20,7 @@ import AppContext from "../../../contexts/AppContext";
 import {BrowserRouter as Router} from "react-router-dom";
 import DisplayUsers from "./DisplayUsers";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import {UserWorkspaceContext} from "../../../contexts/UserWorkspaceContext";
 
 /**
  * The FilterUsersByGroups component represented as a page
@@ -34,9 +35,11 @@ export default class DisplayUsersPage {
     this._page = render(
       <MockTranslationProvider>
         <AppContext.Provider value={appContext}>
-          <Router>
-            <DisplayUsers {...props}/>
-          </Router>
+          <UserWorkspaceContext.Provider value={props.userWorkspaceContext}>
+            <Router>
+              <DisplayUsers {...props}/>
+            </Router>
+          </UserWorkspaceContext.Provider>
         </AppContext.Provider>
       </MockTranslationProvider>
     );
@@ -101,11 +104,21 @@ export default class DisplayUsersPage {
     await waitFor(() => {});
   }
 
+  /**
+   * Sort the users by role
+   */
+  async sortByRole() {
+    const element = this._page.container.querySelectorAll('thead th a')[2];
+    const leftClick = {button: 0};
+    fireEvent.click(element, leftClick);
+    await waitFor(() => {});
+  }
+
   /**
    * Sort the users by their last date of modification
    */
   async sortByModified() {
-    const element = this._page.container.querySelectorAll('thead th a')[2];
+    const element = this._page.container.querySelectorAll('thead th a')[3];
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});
@@ -115,7 +128,7 @@ export default class DisplayUsersPage {
    * Sort the users by their last date of login
    */
   async sortByLastLoggedIn() {
-    const element = this._page.container.querySelectorAll('thead th a')[3];
+    const element = this._page.container.querySelectorAll('thead th a')[4];
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});
@@ -125,7 +138,7 @@ export default class DisplayUsersPage {
    * Sort the users by their mfa enable status
    */
   async sortByMFAEnabled() {
-    const element = this._page.container.querySelectorAll('thead th a')[4];
+    const element = this._page.container.querySelectorAll('thead th a')[5];
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});

package/src/react-extension/components/User/EditUser/EditUser.js

@@ -353,7 +353,7 @@ class EditUser extends Component {
                 autoComplete='off' autoFocus={true}
               />
               {this.state.first_nameError &&
-              <div className="first_name error message">{this.state.first_nameError}</div>
+              <div className="first_name error-message">{this.state.first_nameError}</div>
               }
             </div>
             <div className={`input text required ${this.state.last_nameError ? "error" : ""}`}>
@@ -365,7 +365,7 @@ class EditUser extends Component {
                 autoComplete='off' autoFocus={true}
               />
               {this.state.last_nameError &&
-              <div className="last_name error message">{this.state.last_nameError}</div>
+              <div className="last_name error-message">{this.state.last_nameError}</div>
               }
             </div>
             <div className="input text required">
@@ -388,7 +388,7 @@ class EditUser extends Component {
                   type="checkbox"/>
                 <label htmlFor="is_admin_checkbox"> <Trans>This user is an administrator</Trans></label>
               </div>
-              <div className="message helptext">
+              <div className="help-message">
                 <Trans>Note: Administrators can add and delete users; They can also create groups and assign group managers; Admin can not see all passwords.</Trans>
               </div>
             </div>

package/src/react-extension/components/User/EditUser/EditUser.test.page.js

@@ -119,7 +119,7 @@ class EditUserPageObject {
    * Returns the first name error mesage input element
    */
   get firstNameErrorMessage() {
-    return this._container.querySelector('.first_name.error.message');
+    return this._container.querySelector('.first_name.error-message');
   }
 
   /**
@@ -133,7 +133,7 @@ class EditUserPageObject {
    * Returns the last name error mesage input element
    */
   get lastNameErrorMessage() {
-    return this._container.querySelector('.last_name.error.message');
+    return this._container.querySelector('.last_name.error-message');
   }
 
   /**

package/src/react-extension/components/User/EditUser/EditUser.test.stories.js

@@ -3,7 +3,6 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import EditUser from "./EditUser";
-import "../../../../css/themes/default/api_main.css";
 
 
 export default {
@@ -51,3 +50,6 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.parameters = {
+  css: "api_main"
+};

package/src/react-extension/components/User/FilterUsersByBreadcrumb/FilterUsersByBreadcrumb.js

@@ -38,14 +38,14 @@ class FilterUsersByBreadcrumb extends Component {
       case UserWorkspaceFilterTypes.TEXT: {
         const isEmptySearchText = !this.props.userWorkspaceContext.filter.payload;
         const currentSearchText = this.props.userWorkspaceContext.filter.payload;
-        return isEmptySearchText ? items : [...items, this.getLastBreadcrumb(this.translate("Search: {{currentSearchText}}", {currentSearchText}))];
+        return isEmptySearchText ? items : [...items, this.getLastBreadcrumb(`${this.translate("Search:")} ${currentSearchText}`)];
       }
       case UserWorkspaceFilterTypes.RECENTLY_MODIFIED:
         return [...items, this.getLastBreadcrumb(this.translate("Recently modified"))];
       case UserWorkspaceFilterTypes.GROUP: {
         const group = this.props.userWorkspaceContext.filter.payload.group;
         const currentGroupName = (group && group.name) || this.translate("N/A");
-        return [...items, this.getLastBreadcrumb(this.translate("{{currentGroupName}} (group)", {currentGroupName}))];
+        return [...items, this.getLastBreadcrumb(`${currentGroupName} ${this.translate("(group)")}`)];
       }
     }
 

package/src/react-extension/components/User/FilterUsersByBreadcrumb/FilterUsersByBreadcrumb.test.js

@@ -72,7 +72,7 @@ describe("Display User Workspace Breadcrumb", () => {
     page = new FilterUsersByBreadcrumbPage(context, propsWithEmptyGroupNameFilter());
     await waitFor(() => {});
     expect(page.breadcrumbLabels(1)).toBe('All users');
-    expect(page.breadcrumbLabels(2)).toBe("N/A (group)");
+    expect(page.breadcrumbLabels(2)).toBe("N/A (group)");
   });
 });
 

package/src/react-extension/components/User/FilterUsersByBreadcrumb/FilterUsersByBreadcrumb.test.stories.js

@@ -4,7 +4,6 @@ import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import FilterUsersByBreadcrumb from "./FilterUsersByBreadcrumb";
 import {UserWorkspaceFilterTypes} from "../../../contexts/UserWorkspaceContext";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
 
 export default {
@@ -16,13 +15,11 @@ const context = {};
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <FilterUsersByBreadcrumb {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <FilterUsersByBreadcrumb {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/User/FilterUsersByGroups/FilterUsersByGroup.js

@@ -270,7 +270,7 @@ class FilterUsersByGroup extends React.Component {
    */
   render() {
     return (
-      <div className="folders navigation first accordion">
+      <div className="navigation-secondary-tree navigation-secondary navigation-groups accordion">
         <ul className="accordion-header">
           <li className={`node root ${this.state.open ? "open" : "close"}`}>
             <div className="row title">

package/src/react-extension/components/User/FilterUsersByShortcut/FilterUsersByShortcut.js

@@ -79,7 +79,7 @@ class FilterUsersByShortcut extends React.Component {
 
   render() {
     return (
-      <div className="navigation first shortcuts">
+      <div className="navigation-secondary navigation-shortcuts">
         <ul >
           <li>
             <div className={`row ${this.isAllItemsSelected ? "selected" : ""}`}>

package/src/react-extension/components/User/FilterUsersByShortcut/FilterUsersByShortcut.test.stories.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
-import "../../../../css/themes/default/ext_app.css";
 import FilterUsersByShortcut from "./FilterUsersByShortcut";
 
 

package/src/react-extension/components/User/FilterUsersByText/FilterUsersByText.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import FilterUsersByText from "./FilterUsersByText";
 
 
@@ -16,5 +15,4 @@ const Template = args =>
   </MemoryRouter>;
 
 
-
 export const Initial = Template.bind({});