passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/components/Authentication/DisplayBrowserNotSupported/DisplayBrowserNotSupported.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import DisplayBrowserNotSupported from "./DisplayBrowserNotSupported";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <DisplayBrowserNotSupported {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <DisplayBrowserNotSupported {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/Authentication/DisplayExpiredTokenError/DisplayExpiredTokenError.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import DisplayExpiredTokenError from "./DisplayExpiredTokenError";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <DisplayExpiredTokenError {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <DisplayExpiredTokenError {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/Authentication/DisplayRequireInvitationError/DisplayRequireInvitationError.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import DisplayRequireInvitationError from "./DisplayRequireInvitationError";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <DisplayRequireInvitationError {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <DisplayRequireInvitationError {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/Authentication/DisplayUnexpectedError/DisplayUnexpectedError.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import DisplayUnexpectedError from "./DisplayUnexpectedError";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <DisplayUnexpectedError {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <DisplayUnexpectedError {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/Authentication/DownloadRecoveryKit/DownloadRecoveryKit.js

@@ -98,7 +98,7 @@ class DownloadRecoveryKit extends Component {
             className={`button primary big full-width`}
             onClick={this.handleNext}
             role="button">
-            Next
+            <Trans>Next</Trans>
           </button>
           <a
             id="download-kit"

package/src/react-extension/components/Authentication/DownloadRecoveryKit/DownloadRecoveryKit.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import DownloadRecoveryKit from "./DownloadRecoveryKit";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <DownloadRecoveryKit {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <DownloadRecoveryKit {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/Authentication/EnterNameForm/EnterNameForm.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import EnterNameForm from "./EnterNameForm";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <EnterNameForm {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <EnterNameForm {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/Authentication/EnterUsernameForm/EnterUsernameForm.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import EnterUsernameForm from "./EnterUsernameForm";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <EnterUsernameForm {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <EnterUsernameForm {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/Authentication/HandleSessionExpired/HandleSessionExpired.test.data.js

@@ -0,0 +1,14 @@
+/**
+ * Default props
+ * @returns {{dialogContext: {open: jest.Mock}, context: {onCheckIsAuthenticatedRequested: jest.Mock}}}
+ */
+export function defaultProps() {
+  return {
+    context: {
+      onCheckIsAuthenticatedRequested: jest.fn()
+    },
+    dialogContext: {
+      open: jest.fn()
+    }
+  };
+}

package/src/react-extension/components/Authentication/HandleSessionExpired/HandleSessionExpired.test.js

@@ -0,0 +1,65 @@
+/**
+ * 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.1
+ */
+
+/**
+ * Unit tests on SessionExpired in regard of specifications
+ */
+import {defaultProps} from "./HandleSessionExpired.test.data";
+import HandleSessionExpiredPage from "./HandleSessionExpired.test.page";
+import NotifyExpiredSession from "../NotifyExpiredSession/NotifyExpiredSession";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("As LU I should handle session expired", () => {
+  const props = defaultProps(); // The props to pass
+  const mockContextRequest = implementation => jest.spyOn(props.context, 'onCheckIsAuthenticatedRequested').mockImplementation(implementation);
+
+  /**
+   * I should see the session expired dialog
+   */
+  beforeEach(() => {
+    jest.useFakeTimers();
+    new HandleSessionExpiredPage(props);
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
+  it('As LU I should have no change if the session is not expired', () => {
+    // Mock the request function to make it the expected result
+    const requestMockImpl = () => true;
+    mockContextRequest(requestMockImpl);
+    expect(props.context.onCheckIsAuthenticatedRequested).not.toBeCalled();
+    // Fast-forward until all timers have been executed
+    jest.runOnlyPendingTimers();
+    expect(props.context.onCheckIsAuthenticatedRequested).toHaveBeenCalled();
+    expect(props.dialogContext.open).not.toBeCalled();
+  });
+
+
+  it('As LU I should open a dialog if the session is expired',  async () => {
+    const requestMockImpl = () => false;
+    mockContextRequest(requestMockImpl);
+    // Fast-forward until all timers have been executed
+    jest.runOnlyPendingTimers();
+    // Need 2 promises resolved to open the dialog
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(props.context.onCheckIsAuthenticatedRequested).toHaveBeenCalled();
+    expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyExpiredSession);
+  });
+});

package/src/react-extension/components/Authentication/HandleSessionExpired/HandleSessionExpired.test.page.js

@@ -0,0 +1,38 @@
+
+/**
+ * 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.1
+ */
+import {render} from "@testing-library/react";
+import React from "react";
+import {BrowserRouter as Router} from "react-router-dom";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import HandleSessionExpired from "./HandleSessionExpired";
+
+/**
+ * The HandleSessionExpired component represented as a page
+ */
+export default class HandleSessionExpiredPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <Router>
+          <HandleSessionExpired {...props}/>
+        </Router>
+      </MockTranslationProvider>
+    );
+  }
+}

package/src/react-extension/components/Authentication/ImportGpgKey/ImportGpgKey.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import ImportGpgKey from "./ImportGpgKey";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <ImportGpgKey {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <ImportGpgKey {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/Authentication/InstallExtension/InstallExtension.js

@@ -18,7 +18,8 @@ import PropTypes from "prop-types";
 import {Trans, withTranslation} from "react-i18next";
 
 const CHROME_STORE_BROWSER_EXTENSION_URL = "https://chrome.google.com/webstore/detail/passbolt-extension/didegimhafipceonhjepacocaffmoppf";
-const FIREFOX_STORE_BROWSER_EXTENSION_URL = "https://addons.mozilla.org/fr/firefox/addon/passbolt";
+const FIREFOX_STORE_BROWSER_EXTENSION_URL = "https://addons.mozilla.org/firefox/addon/passbolt";
+const EDGE_STORE_BROWSER_EXTENSION_URL = "https://microsoftedge.microsoft.com/addons/detail/passbolt-extension/ljeppgjhohmhpbdhjjjbiflabdgfkhpo";
 
 class InstallExtension extends Component {
   constructor(props) {
@@ -31,8 +32,11 @@ class InstallExtension extends Component {
    * Returns the default component state
    */
   getDefaultState() {
+    const currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
+
     return {
-      browserName: detectBrowserName()
+      browserName: detectBrowserName(),
+      theme: currentTheme
     };
   }
 
@@ -50,13 +54,16 @@ class InstallExtension extends Component {
    * @returns {string}
    */
   get browserStoreThumbnailUrl() {
+    const color = this.state.theme === "dark" ? "white" : "black";
+
     switch (this.state.browserName) {
-      case BROWSER_NAMES.CHROME:
-        return `${this.props.context.trustedDomain}/img/third_party/ChromeWebStore_black.png`; // @todo _white if theme midgar
       case BROWSER_NAMES.FIREFOX:
-        return `${this.props.context.trustedDomain}/img/third_party/FirefoxAMO_black.svg`; // @todo _white if theme midgar
+        return `${this.props.context.trustedDomain}/img/third_party/FirefoxAMO_${color}.svg`;
+      case BROWSER_NAMES.EDGE:
+        return `${this.props.context.trustedDomain}/img/third_party/edge-addon-${color}.svg`;
+      case BROWSER_NAMES.CHROME:
       default:
-        return `${this.props.context.trustedDomain}/img/third_party/ChromeWebStore_black.png`;
+        return `${this.props.context.trustedDomain}/img/third_party/ChromeWebStore_${color}.svg`;
     }
   }
 
@@ -72,6 +79,8 @@ class InstallExtension extends Component {
         return CHROME_STORE_BROWSER_EXTENSION_URL;
       case BROWSER_NAMES.FIREFOX:
         return FIREFOX_STORE_BROWSER_EXTENSION_URL;
+      case BROWSER_NAMES.EDGE:
+        return EDGE_STORE_BROWSER_EXTENSION_URL;
       default:
         return CHROME_STORE_BROWSER_EXTENSION_URL;
     }

package/src/react-extension/components/Authentication/InstallExtension/InstallExtension.test.js

@@ -19,6 +19,22 @@
 import InstallExtensionTestPage from "./InstallExtension.test.page";
 import {defaultProps} from "./InstallExtension.test.data";
 
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+});
+
 beforeEach(() => {
   jest.resetModules();
 });
@@ -68,6 +84,17 @@ describe("As AN I should see install extension page", () => {
       expect(page.linkContent).toBe('Refresh to detect extension');
     });
 
+    it('As AN I should see the install extension for Edge', () => {
+      Object.defineProperty(window, "navigator", {
+        value: {userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34"},
+        writable: true
+      });
+      window.chrome = {runtime: "true"};
+      page = new InstallExtensionTestPage();
+      // browser image
+      expect(page.browser.className).toBe("browser-webstore edge");
+    });
+
     it('As AN I should be able to refresh the page', async() => {
       Object.defineProperty(window, "location", {
         value: {reload: jest.fn()},

package/src/react-extension/components/Authentication/InstallExtension/InstallExtension.test.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import InstallExtension from "./InstallExtension";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <InstallExtension {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <InstallExtension {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};