passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/test/mock/components/Internationalisation/MockTranslationProvider.js

@@ -15,6 +15,8 @@ import i18n from 'i18next';
 import {initReactI18next} from 'react-i18next';
 import {Component} from "react";
 import PropTypes from "prop-types";
+import enTranslations from "../../../../../locales/en-UK/common.json";
+import frTranslations from "../../../../../locales/fr/common.json";
 
 /**
  * This component set up the translation process
@@ -25,15 +27,22 @@ class MockTranslationProvider extends Component {
    * @returns {Promise<void>}
    * @constructor
    */
-  async UNSAFE_componentWillMount() {
-    await i18n
+  constructor(props) {
+    super();
+    i18n
       // pass the i18n instance to react-i18next.
       .use(initReactI18next)
       // init i18next, for all options read: https://www.i18next.com/overview/configuration-options
       .init({
-        lng: 'en-UK',
-        load: 'currentOnly',
-        resources: [],
+        lng: props.language || 'en-UK',
+        resources: {
+          "en-UK": {
+            common: enTranslations
+          },
+          fr: {
+            common: frTranslations
+          }
+        },
         react: {
           useSuspense: false,
         },
@@ -42,10 +51,34 @@ class MockTranslationProvider extends Component {
         defaultNS: 'common',
         keySeparator: false, // don't use the dot for separator of nested json object
         nsSeparator: false, // allowed ':' in key to avoid namespace separator
-        debug: false,
+        debug: true
       });
   }
 
+  /**
+   * Applies a language change whenever it's needed.
+   * This method is use isntead of the others to provide the new locale before an updates occur.
+   * This way the translation used and displayed is the right one.
+   *
+   * @param {*} nextProps
+   * @returns
+   */
+  async shouldComponentUpdate(nextProps) {
+    await this.handleChangeLanguage(nextProps.language);
+    return nextProps.language !== this.props.language;
+  }
+
+  /**
+   * Whenever the translation language change
+   * @param nextLanguage The previous language
+   * @returns {Promise<void>}
+   */
+  async handleChangeLanguage(nextLanguage) {
+    if (nextLanguage !== this.props.language) {
+      await i18n.changeLanguage(nextLanguage);
+    }
+  }
+
   /**
    * Render the component.
    * @returns {JSX}
@@ -56,7 +89,9 @@ class MockTranslationProvider extends Component {
 }
 
 MockTranslationProvider.propTypes = {
-  children: PropTypes.any, // The children components
+  children: PropTypes.any, // The children components,
+  language: PropTypes.string // The current translation language
 };
 
 export default MockTranslationProvider;
+

package/src/react-quickaccess/ExtQuickAccess.js

@@ -17,13 +17,18 @@ import ResourceCreatePage from "./components/ResourceCreatePage/ResourceCreatePa
 import ResourceViewPage from "./components/ResourceViewPage/ResourceViewPage";
 import Search from "./components/Search/Search";
 import {BrowserRouter as Router, Route} from "react-router-dom";
-import PrivateRoute from "./components/PrivateRoute/PrivateRoute";
 import AnimatedSwitch from "./components/AnimatedSwitch/AnimatedSwitch";
 import PassphraseDialog from "./components/PassphraseDialog/PassphraseDialog";
 import PropTypes from "prop-types";
 import SiteSettings from "../shared/lib/Settings/SiteSettings";
 import UserSettings from "../shared/lib/Settings/UserSettings";
-import TranslationProvider from "./components/Internationalisation/TranslationProvider";
+import TranslationProvider from "../shared/components/Internationalisation/TranslationProvider";
+import SetupExtensionInProgress from "./components/ExtensionSetup/SetupExtensionInProgress/SetupExtensionInProgress";
+import ManageQuickAccessMode from "./components/ManageQuickAccessMode/ManageQuickAccessMode";
+import PrivateRoute from "./components/PrivateRoute/PrivateRoute";
+import SaveResource from "./components/ResourceAutoSave/SaveResource";
+import GeneratePasswordPage from "./components/GeneratePasswordPage/GeneratePasswordPage";
+import PrepareResourceContextProvider from "./contexts/PrepareResourceContext";
 
 const SEARCH_VISIBLE_ROUTES = [
   '/data/quickaccess.html',
@@ -66,6 +71,7 @@ class ExtQuickAccess extends React.Component {
 
   async componentDidMount() {
     this.state.port.on('passbolt.passphrase.request', this.handleBackgroundPageRequiresPassphraseEvent);
+    this.handlePassphraseRequest();
     await this.checkPluginIsConfigured();
     await this.getUser();
     this.checkAuthStatus();
@@ -88,10 +94,21 @@ class ExtQuickAccess extends React.Component {
       focusSearch: this.focusSearch,
       // Passphrase
       passphraseRequired: false,
-      passphraseRequestId: ''
+      passphraseRequestId: '',
+      // Tab id to refer to the good one if detached mode
+      tabId: this.getTabIdFromUrl()
     };
   }
 
+  /**
+   * Get the tabId from URL
+   * @returns {string}
+   */
+  getTabIdFromUrl() {
+    const queryParameters = new URLSearchParams(window.location.search);
+    return queryParameters.get('tabId');
+  }
+
   updateSearch(search) {
     this.setState({search});
   }
@@ -127,6 +144,16 @@ class ExtQuickAccess extends React.Component {
     this.setState({locale});
   }
 
+  /**
+   * Is feature is present
+   * @param feature {string}
+   * @returns {boolean}
+   */
+  isInFeature(feature) {
+    const queryParameters = new URLSearchParams(window.location.search);
+    return queryParameters.get("feature") === feature;
+  }
+
   /**
    * Retrieve the authentication status.
    *
@@ -151,7 +178,12 @@ class ExtQuickAccess extends React.Component {
   }
 
   loginSuccessCallback() {
-    this.setState({isAuthenticated: true});
+    if (!this.isInFeature('login')) {
+      this.getSiteSettings();
+      this.setState({isAuthenticated: true});
+    } else {
+      window.close();
+    }
   }
 
   logoutSuccessCallback() {
@@ -170,7 +202,18 @@ class ExtQuickAccess extends React.Component {
   }
 
   handlePassphraseDialogCompleted() {
-    this.setState({passphraseRequired: false, passphraseRequestId: null});
+    if (this.isInFeature("request-passphrase")) {
+      window.close();
+    } else {
+      this.setState({passphraseRequired: false, passphraseRequestId: null});
+    }
+  }
+
+  handlePassphraseRequest() {
+    if (this.isInFeature("request-passphrase")) {
+      const queryParameters = new URLSearchParams(window.location.search);
+      this.handleBackgroundPageRequiresPassphraseEvent(queryParameters.get("requestId"));
+    }
   }
 
   isReady() {
@@ -185,26 +228,27 @@ class ExtQuickAccess extends React.Component {
 
     return (
       <AppContext.Provider value={this.state}>
-        <TranslationProvider loadingPath="/data/locales/{{lng}}/{{ns}}.json">
+        <TranslationProvider loadingPath="/data/locales/{{lng}}/{{ns}}.json" locale={this.state?.locale}>
           <Router>
-            <Route render={props => (
-              <div className="container page quickaccess" onKeyDown={this.handleKeyDown}>
-                <Header logoutSuccessCallback={this.logoutSuccessCallback}/>
-                {!isReady &&
-                <div className="processing-wrapper">
-                  <p className="processing-text">Connecting your account</p>
-                </div>
+            <div className="container quickaccess" onKeyDown={this.handleKeyDown}>
+              <Header logoutSuccessCallback={this.logoutSuccessCallback}/>
+              {!isReady &&
+              <div className="processing-wrapper">
+                <p className="processing-text">Connecting your account</p>
+              </div>
+              }
+              {isReady &&
+              <React.Fragment>
+                <ManageQuickAccessMode/>
+                {this.state.passphraseRequired &&
+                <PassphraseDialog requestId={this.state.passphraseRequestId} onComplete={this.handlePassphraseDialogCompleted}/>
                 }
-                {isReady &&
-                <React.Fragment>
-                  {this.state.passphraseRequired &&
-                  <PassphraseDialog requestId={this.state.passphraseRequestId} onComplete={this.handlePassphraseDialogCompleted}/>
-                  }
-                  <div className={`${this.state.passphraseRequired ? "visually-hidden" : ""}`}>
-                    <Route path={SEARCH_VISIBLE_ROUTES} render={() => (
-                      <Search ref={el => this.searchRef = el}/>
-                    )}/>
-                    <AnimatedSwitch location={props.location}>
+                <div className={`${this.state.passphraseRequired ? "visually-hidden" : ""}`}>
+                  <Route path={SEARCH_VISIBLE_ROUTES} render={() => (
+                    <Search ref={el => this.searchRef = el}/>
+                  )}/>
+                  <PrepareResourceContextProvider>
+                    <AnimatedSwitch>
                       <Route path="/data/quickaccess/login" render={() => (
                         <LoginPage loginSuccessCallback={this.loginSuccessCallback} canRememberMe={this.canRememberMe}/>
                       )}/>
@@ -217,15 +261,18 @@ class ExtQuickAccess extends React.Component {
                       <PrivateRoute exact path="/data/quickaccess/resources/recently-modified" component={FilterResourcesByRecentlyModifiedPage}/>
                       <PrivateRoute exact path="/data/quickaccess/resources/shared-with-me" component={FilterResourcesBySharedWithMePage}/>
                       <PrivateRoute path="/data/quickaccess/resources/create" component={ResourceCreatePage}/>
+                      <PrivateRoute exact path="/data/quickaccess/resources/autosave" component={SaveResource}/>
                       <PrivateRoute path="/data/quickaccess/resources/view/:id" component={ResourceViewPage}/>
                       <PrivateRoute exact path="/data/quickaccess/more-filters" component={MoreFiltersPage}/>
+                      <PrivateRoute exact path="/data/quickaccess/setup-extension-in-progress" component={SetupExtensionInProgress}/>
+                      <PrivateRoute path="/data/quickaccess/resources/generate-password" component={GeneratePasswordPage}/>
                       <PrivateRoute exact path="/data/quickaccess.html" component={HomePage}/>
                     </AnimatedSwitch>
-                  </div>
-                </React.Fragment>
-                }
-              </div>
-            )}/>
+                  </PrepareResourceContextProvider>
+                </div>
+              </React.Fragment>
+              }
+            </div>
           </Router>
         </TranslationProvider>
       </AppContext.Provider>

package/src/react-quickaccess/components/AnimatedSwitch/AnimatedSwitch.js

@@ -1,8 +1,9 @@
 import React from "react";
-import { Switch } from "react-router-dom";
+import {Switch, withRouter} from "react-router-dom";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
+import PropTypes from "prop-types";
 
-export default class AnimatedSwitch extends React.Component {
+class AnimatedSwitch extends React.Component {
   constructor(props) {
     super(props);
     this._previousLocationPathname = "";
@@ -12,6 +13,7 @@ export default class AnimatedSwitch extends React.Component {
   getTransition(currentLocationPath, _previousLocationPathname) {
     let transition = null;
 
+    // Resource view transition
     if (currentLocationPath.indexOf("/data/quickaccess/resources/view") != -1 && this._previousLocationPathname === "/data/quickaccess.html") {
       transition = "slideLeft";
     }
@@ -20,12 +22,18 @@ export default class AnimatedSwitch extends React.Component {
     }
 
     // Resource create transition
+    else if (currentLocationPath === "/data/quickaccess/resources/create" && this._previousLocationPathname === "/data/quickaccess/resources/generate-password") {
+      transition = "slideRight";
+    }
     else if (currentLocationPath == "/data/quickaccess/resources/create") {
       transition = "slideLeft";
     }
     else if (currentLocationPath.indexOf("/data/quickaccess/resources/view") != -1 && this._previousLocationPathname == "/data/quickaccess/resources/create") {
       transition = "slideLeft";
     }
+    else if (currentLocationPath === "/data/quickaccess/resources/generate-password" && this._previousLocationPathname === "/data/quickaccess/resources/create") {
+      transition = "slideLeft";
+    }
     // Whatever current location is, if the previous location was the resource create page then slide right
     else if (this._previousLocationPathname === "/data/quickaccess/resources/create") {
       transition = "slideRight";
@@ -157,7 +165,7 @@ export default class AnimatedSwitch extends React.Component {
       // The page has changed but not transition has been defined for it.
       // Use the default noTransition transition
       if (currentLocationPath !== this._previousLocationPathname) {
-        transition = "noTransition";
+        transition = "slideNoTransition";
       } else {
         // The transition is recalculated because of a status change.
         // Return the previous transition. The transition won't be played twice, and it will allow to complete it properly.
@@ -174,8 +182,7 @@ export default class AnimatedSwitch extends React.Component {
     const currentLocationPathname = this.props.location.pathname;
     const transition = this.getTransition(currentLocationPathname, this._previousLocationPathname);
     // If no transition, the previous component should be hidden immediately.
-    const transitionTimeout = transition !== "noTransition" ? 210 : 0;
-    console.debug(`AnimatedSwitch render from ${this._previousLocationPathname} to ${currentLocationPathname} with transition ${transition}`);
+    const transitionTimeout = transition !== "slideNoTransition" ? 210 : 0;
     this._previousLocationPathname = currentLocationPathname;
 
     return (
@@ -187,3 +194,13 @@ export default class AnimatedSwitch extends React.Component {
     );
   }
 }
+
+AnimatedSwitch.propTypes = {
+  // Match, location and history props are injected by the withRouter decoration call.
+  match: PropTypes.object,
+  location: PropTypes.object,
+  history: PropTypes.object,
+  t: PropTypes.func, // The translation function
+};
+
+export default withRouter(AnimatedSwitch);

package/src/react-quickaccess/components/ExtensionSetup/SetupExtensionInProgress/SetupExtensionInProgress.js

@@ -0,0 +1,41 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+import React from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {withRouter} from "react-router-dom";
+
+/**
+ * The component display that setup extension is in progress
+ */
+class SetupExtensionInProgress extends React.Component {
+  render() {
+    return (
+      <div className="setup-extension">
+        <span className="icon fa">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z" /></svg>
+        </span>
+        <h3><Trans>The extension is not configured yet</Trans></h3>
+        <p><Trans>First complete the configuration steps described in the current tab.</Trans></p>
+      </div>
+    );
+  }
+}
+
+SetupExtensionInProgress.propTypes = {
+  history: PropTypes.object,
+  t: PropTypes.func, // The translation function
+};
+
+export default withRouter(withTranslation('common')(SetupExtensionInProgress));

package/src/react-quickaccess/components/ExtensionSetup/SetupExtensionInProgress/SetupExtensionInProgressPage.test.stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import {MemoryRouter, Route} from "react-router-dom";
+import SetupExtensionInProgress from "./SetupExtensionInProgress";
+import Header from "../../Header/Header";
+
+export default {
+  title: 'Passbolt/QuickAccess/SetupExtensionInProgress',
+  component: SetupExtensionInProgress
+};
+
+const Template = () =>
+  <MemoryRouter initialEntries={['/']}>
+    <Route component={routerProps => <div className="container quickaccess"><Header/><SetupExtensionInProgress {...routerProps}/></div>}/>
+  </MemoryRouter>;
+
+
+export const Initial = Template.bind({});
+Initial.args = {
+};
+
+Initial.parameters = {
+  css: "api_main"
+};

package/src/react-quickaccess/components/FilterResourcesByFavoritePage/FilterResourcesByFavoritePage.js

@@ -189,11 +189,15 @@ class FilterResourcesByFavoritePage extends React.Component {
                 }
                 {(browsedResources.length > 0) &&
                   browsedResources.map(resource =>
-                    <li className="resource-entry" key={resource.id}>
+                    <li className="browse-resource-entry" key={resource.id}>
                       <a href="#" onClick={ev => this.handleSelectResourceClick(ev, resource.id)}>
-                        <span className="title">{resource.name}</span>
-                        <span className="username"> {resource.username ? `(${resource.username})` : ""}</span>
-                        <span className="url">{resource.uri}</span>
+                        <div className="inline-resource-entry">
+                          <div className='inline-resource-name'>
+                            <span className="title">{resource.name}</span>
+                            <span className="username"> {resource.username ? `(${resource.username})` : ""}</span>
+                          </div>
+                          <span className="url">{resource.uri}</span>
+                        </div>
                       </a>
                     </li>
                   )}

package/src/react-quickaccess/components/FilterResourcesByFavoritePage/FilterResourcesByFavoritePage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import FilterResourcesByFavoritePage from "./FilterResourcesByFavoritePage";
 import AppContext from "../../contexts/AppContext";
@@ -15,7 +14,7 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container page quickaccess"><FilterResourcesByFavoritePage {...args} {...routerProps}/></div>}/>
+      <Route component={routerProps => <div className="container quickaccess"><FilterResourcesByFavoritePage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -23,12 +22,15 @@ Template.propTypes = {
   context: PropTypes.object,
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const InitialLoad = Template.bind({});
 InitialLoad.args = {
   context: defaultAppContext()
 };
+InitialLoad.parameters = parameters;
 
 const contextNoResource = {
   port: {
@@ -39,6 +41,7 @@ export const NoFavoriteResource = Template.bind({});
 NoFavoriteResource.args = {
   context: defaultAppContext(contextNoResource)
 };
+NoFavoriteResource.parameters = parameters;
 
 const contextWithResources = {
   port: {
@@ -49,7 +52,4 @@ export const FavoriteResources = Template.bind({});
 FavoriteResources.args = {
   context: defaultAppContext(contextWithResources)
 };
-
-
-
-
+FavoriteResources.parameters = parameters;

package/src/react-quickaccess/components/FilterResourcesByGroupPage/FilterResourcesByGroupPage.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
-import {withRouter} from "react-router";
+import {withRouter} from "react-router-dom";
 import {Link} from "react-router-dom";
 import {withAppContext} from "../../contexts/AppContext";
 import SimpleBar from "../SimpleBar/SimpleBar";
@@ -310,11 +310,15 @@ class FilterResourcesByGroupPage extends React.Component {
                     }
                     {(browsedResources.length > 0) &&
                       browsedResources.map(resource =>
-                        <li className="resource-entry" key={resource.id}>
+                        <li className="browse-resource-entry" key={resource.id}>
                           <a href="#" onClick={ev => this.handleSelectResourceClick(ev, resource.id)}>
-                            <span className="title">{resource.name}</span>
-                            <span className="username"> {resource.username ? `(${resource.username})` : ""}</span>
-                            <span className="url">{resource.uri}</span>
+                            <div className="inline-resource-entry">
+                              <div className='inline-resource-name'>
+                                <span className="title">{resource.name}</span>
+                                <span className="username"> {resource.username ? `(${resource.username})` : ""}</span>
+                              </div>
+                              <span className="url">{resource.uri}</span>
+                            </div>
                           </a>
                         </li>
                       )}
@@ -343,4 +347,4 @@ FilterResourcesByGroupPage.propTypes = {
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withTranslation('common')(withRouter(FilterResourcesByGroupPage)));
+export default withAppContext(withRouter(withTranslation('common')(FilterResourcesByGroupPage)));

package/src/react-quickaccess/components/FilterResourcesByGroupPage/FilterResourcesByGroupPage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import FilterResourcesByGroupPage from "./FilterResourcesByGroupPage";
 import AppContext from "../../contexts/AppContext";
@@ -14,8 +13,8 @@ export default {
 const Template = ({context, initialEntries, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={initialEntries}>
-      <Route exact path="/" component={routerProps => <div className="container page quickaccess"><FilterResourcesByGroupPage {...args} {...routerProps}/></div>}/>
-      <Route path="/:id" component={routerProps => <div className="container page quickaccess"><FilterResourcesByGroupPage {...args} {...routerProps}/></div>}/>
+      <Route exact path="/" component={routerProps => <div className="container quickaccess"><FilterResourcesByGroupPage {...args} {...routerProps}/></div>}/>
+      <Route path="/:id" component={routerProps => <div className="container quickaccess"><FilterResourcesByGroupPage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -24,13 +23,16 @@ Template.propTypes = {
   initialEntries: PropTypes.array
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const InitialLoad = Template.bind({});
 InitialLoad.args = {
   context: defaultAppContext(),
   initialEntries: ['/']
 };
+InitialLoad.parameters = parameters;
 
 const contextNoGroup = {
   port: {
@@ -42,6 +44,7 @@ NoGroups.args = {
   context: defaultAppContext(contextNoGroup),
   initialEntries: ['/']
 };
+NoGroups.parameters = parameters;
 
 const contextGroupsAndResources = {
   port: {
@@ -52,4 +55,5 @@ export const GroupsResourcesMatched = Template.bind({});
 GroupsResourcesMatched.args = {
   context: defaultAppContext(contextGroupsAndResources),
   initialEntries: ['/']
-};
+};
+GroupsResourcesMatched.parameters = parameters;

package/src/react-quickaccess/components/FilterResourcesByItemsIOwnPage/FilterResourcesByItemsIOwnPage.js

@@ -1,7 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
-import {withRouter} from "react-router";
-import {Link} from "react-router-dom";
+import {Link, withRouter} from "react-router-dom";
 import {withAppContext} from "../../contexts/AppContext";
 import SimpleBar from "../SimpleBar/SimpleBar";
 import {Trans, withTranslation} from "react-i18next";
@@ -189,11 +188,15 @@ class FilterResourcesByItemsIOwnPage extends React.Component {
                 }
                 {(browsedResources.length > 0) &&
                   browsedResources.map(resource =>
-                    <li className="resource-entry" key={resource.id}>
+                    <li className="browse-resource-entry" key={resource.id}>
                       <a href="#" onClick={ev => this.handleSelectResourceClick(ev, resource.id)}>
-                        <span className="title">{resource.name}</span>
-                        <span className="username"> {resource.username ? `(${resource.username})` : ""}</span>
-                        <span className="url">{resource.uri}</span>
+                        <div className="inline-resource-entry">
+                          <div className='inline-resource-name'>
+                            <span className="title">{resource.name}</span>
+                            <span className="username"> {resource.username ? `(${resource.username})` : ""}</span>
+                          </div>
+                          <span className="url">{resource.uri}</span>
+                        </div>
                       </a>
                     </li>
                   )}
@@ -220,4 +223,4 @@ FilterResourcesByItemsIOwnPage.propTypes = {
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withTranslation('common')(withRouter(FilterResourcesByItemsIOwnPage)));
+export default withAppContext(withRouter(withTranslation('common')(FilterResourcesByItemsIOwnPage)));

package/src/react-quickaccess/components/FilterResourcesByItemsIOwnPage/FilterResourcesByItemsIOwnPage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import FilterResourcesByItemsIOwnPage from "./FilterResourcesByItemsIOwnPage";
 import AppContext from "../../contexts/AppContext";
@@ -15,7 +14,7 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container page quickaccess"><FilterResourcesByItemsIOwnPage {...args} {...routerProps}/></div>}/>
+      <Route component={routerProps => <div className="container quickaccess"><FilterResourcesByItemsIOwnPage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -23,12 +22,15 @@ Template.propTypes = {
   context: PropTypes.object,
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const InitialLoad = Template.bind({});
 InitialLoad.args = {
   context: defaultAppContext()
 };
+InitialLoad.parameters = parameters;
 
 const contextNoItem = {
   port: {
@@ -39,6 +41,7 @@ export const NoItemsIOwnResource = Template.bind({});
 NoItemsIOwnResource.args = {
   context: defaultAppContext(contextNoItem)
 };
+NoItemsIOwnResource.parameters = parameters;
 
 const contextResources = {
   port: {
@@ -49,7 +52,4 @@ export const ItemsIOwnResources = Template.bind({});
 ItemsIOwnResources.args = {
   context: defaultAppContext(contextResources)
 };
-
-
-
-
+ItemsIOwnResources.parameters = parameters;