passbolt-styleguide 3.3.3 → 3.4.0-alpha2

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

@@ -0,0 +1,32 @@
+import MockPort from "../../../test/mock/MockPort";
+
+/**
+ * Returns the default app context for the unit test
+ * @param appContext An existing app context
+ * @returns {any}
+ */
+export function defaultAppContext(appContext) {
+  const defaultAppContext = {
+    port: new MockPort(),
+    loggedInUser: {id: 'f848277c-5398-58f8-a82a-72397af2d450'},
+    setContext: function(newContext) {
+      // In this scope this reference the object context.
+      Object.assign(this, newContext);
+    },
+  };
+  return Object.assign(defaultAppContext, appContext || {});
+}
+
+/**
+ * Default props
+ * @returns {object}
+ */
+export function defaultProps() {
+  const props = {
+    userSettingsContext: {
+      //onDownloadRecoveryKitRequested: jest.fn(),
+    },
+  };
+
+  return props;
+}

package/src/react-extension/components/UserSetting/TransferToMobile/TransferToMobile.test.js

@@ -0,0 +1,60 @@
+/**
+ * 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.2.0
+ */
+
+/**
+ * Unit tests on TransferToMobile in regard of specifications
+ */
+import TransferToMobilePage from "./TransferToMobile.test.page";
+import {defaultAppContext, defaultProps} from "./TransferToMobile.test.data";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("As LU I should be able to configure my account on my mobile phone", () => {
+  let page; // The page to test against
+  const context = defaultAppContext(); // The applicative context
+  const props = defaultProps(); // The props to pass
+
+  describe('As LU I can start the mobile phone account transfer', () => {
+    /**
+     * Prerequisite:
+     * Given I am a logged in user
+     * And I am on the transfer to mobile page
+     */
+    beforeEach(() => {
+      page = new TransferToMobilePage(context, props);
+    });
+
+    it('As LU I should be able to start the transfer to mobile', async() => {
+      expect(page.exists()).toBeTruthy();
+      expect(page.title).toContain('mobile');
+      expect(page.isStep('start')).toBe(true);
+
+      /*
+       * await page.clickStart();
+       *
+       * let expectedData = context.user.id;
+       * let expectedParameters =  ['passbolt.keyring.get-public-key-info-by-user', expectedData];
+       * expect(context.port.request).toHaveBeenCalledWith(...expectedParameters);
+       */
+
+      /*
+       * expectedData = {folder_parent_id: "some folder parent id", name: "My super folder"};
+       * expectedParameters =  ['passbolt.mobile.transfer.create', expectedData];
+       * expect(context.port.request).toHaveBeenCalledWith(...expectedParameters);
+       */
+    });
+  });
+});

package/src/react-extension/components/UserSetting/TransferToMobile/TransferToMobile.test.page.js

@@ -0,0 +1,110 @@
+/**
+ * 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.2.0
+ */
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import AppContext from "../../../contexts/AppContext";
+import TransferToMobile from "./TransferToMobile";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+/**
+ * The TransferToMobile component represented as a page
+ */
+export default class TransferToMobileTestPage {
+  /**
+   * Default constructor
+   * @param appContext An app context
+   * @param props Props to attach
+   */
+  constructor(appContext, props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <AppContext.Provider value={appContext}>
+          <TransferToMobile {...props}/>
+        </AppContext.Provider>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the user confirm passphrase element
+   */
+  get transferToMobile() {
+    return this._page.container.querySelector('.profile-mobile-transfer');
+  }
+
+  /**
+   * Returns the title element
+   */
+  get title() {
+    return this._page.container.querySelector('.profile-mobile-transfer h3').textContent;
+  }
+
+  /**
+   * Start button
+   */
+  get startButton() {
+    return this._page.container.querySelector('.profile-mobile-transfer .mobile-transfer-step-start a.button');
+  }
+
+  /**
+   * Cancel button
+   */
+  get cancelButton() {
+    return this._page.container.querySelector('.profile-mobile-transfer a.cancel.button');
+  }
+
+  /**
+   * Check current step
+   * @param {string} step
+   * @returns {boolean}
+   */
+  isStep(step) {
+    switch (step) {
+      case 'start':
+        return this._page.container.querySelector('.profile-mobile-transfer .mobile-transfer-step-start') !== null;
+      case 'in progress':
+        return this._page.container.querySelector('.profile-mobile-transfer .mobile-transfer-step-in-progress') !== null;
+      case 'cancel':
+        return this._page.container.querySelector('.profile-mobile-transfer .mobile-transfer-step-cancel') !== null;
+      case 'complete':
+        return this._page.container.querySelector('.profile-mobile-transfer .mobile-transfer-step-complete') !== null;
+      default:
+        throw new Error('Unknown step in TransferToMobile test page.');
+    }
+  }
+
+  /**
+   * Returns true if the page object exists in the container
+   */
+  exists() {
+    return this.transferToMobile !== null;
+  }
+
+  /** Click on the element */
+  async click(element)  {
+    const leftClick = {button: 0};
+    fireEvent.click(element, leftClick);
+    await waitFor(() => {});
+  }
+
+  /** click start transfer */
+  async clickStart() {
+    await this.click(this.startButton);
+  }
+
+  /** click cancel */
+  async clickCancel() {
+    await this.click(this.cancelButton);
+  }
+}

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

@@ -335,11 +335,12 @@ class UploadUserProfileAvatar extends React.Component {
                     id="dialog-upload-avatar-input"
                     className={`button primary ${this.areActionsAllowed ? "" : "disabled"}`}
                     onClick={this.handleSelectFile}>
-                    <Icon name="upload-a"/> <Trans>Choose a file</Trans>
+                    <Icon name="upload-a"/>
+                    <span className='ellipsis'><Trans>Choose a file</Trans></span>
                   </a>
                 </div>
                 {this.state.errors.message &&
-                <div className="error message">{this.state.errors.message}</div>
+                <div className="error-message">{this.state.errors.message}</div>
                 }
               </div>
             </div>

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

package/src/react-extension/contexts/AdministrationWorkspaceContext.js

@@ -322,9 +322,9 @@ class AdministrationWorkspaceContextProvider extends React.Component {
    * @return {Promise<object>}
    */
   async onGetSynchronizeUsersDirectoryRequested() {
-    const apiClientOptions = this.props.context.getApiClientOptions().setResourceName("directorysync");
+    const apiClientOptions = this.props.context.getApiClientOptions().setResourceName("directorysync/synchronize");
     const apiClient = new ApiClient(apiClientOptions);
-    return apiClient.get("synchronize");
+    return apiClient.create({});
   }
 
   /**

package/src/react-extension/contexts/ApiAppContext.js

@@ -207,7 +207,7 @@ class ApiAppContextProvider extends React.Component {
       return true;
     } catch (error) {
       if (error instanceof PassboltApiFetchError) {
-        if (error.data.code === 403) {
+        if (error.data.code === 401) {
           return false;
         }
       }

package/src/react-extension/contexts/ApiRecoverContext.js

@@ -102,7 +102,7 @@ class ApiRecoverContextProvider extends React.Component {
    */
   isBrowserSupported() {
     const browserName = detectBrowserName();
-    const supportedBrowserNames = [BROWSER_NAMES.CHROME, BROWSER_NAMES.FIREFOX];
+    const supportedBrowserNames = [BROWSER_NAMES.CHROME, BROWSER_NAMES.FIREFOX, BROWSER_NAMES.EDGE];
     return supportedBrowserNames.includes(browserName);
   }
 

package/src/react-extension/contexts/ApiSetupContext.js

@@ -102,7 +102,7 @@ class ApiSetupContextProvider extends React.Component {
    */
   isBrowserSupported() {
     const browserName = detectBrowserName();
-    const supportedBrowserNames = [BROWSER_NAMES.CHROME, BROWSER_NAMES.FIREFOX];
+    const supportedBrowserNames = [BROWSER_NAMES.CHROME, BROWSER_NAMES.FIREFOX, BROWSER_NAMES.EDGE];
     return supportedBrowserNames.includes(browserName);
   }
 

package/src/react-extension/contexts/AuthenticationContext.js

@@ -15,6 +15,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import UserSettings from "../../shared/lib/Settings/UserSettings";
 import {withAppContext} from "./AppContext";
+import {BROWSER_NAMES, detectBrowserName} from "../../shared/lib/Browser/detectBrowserName";
 
 export const AuthenticationContext = React.createContext({
   port: null, // The contextual port
@@ -60,6 +61,8 @@ export const AuthenticationContext = React.createContext({
   }, // Whenever the check of server key is requested
   onGetServerKeyRequested: () => {
   }, // Whenever the server key is requested.
+  onCompleteIntroduceSetupExtension: () => {
+  }, // Whenever the setup extension is completed.
   onUnexpectedError: () => {
   }, // Whenever an unexpected error occurred.
 });
@@ -103,6 +106,7 @@ export class AuthenticationContextProvider extends React.Component {
       onVerifyServerKeyRequested: this.onVerifyServerKeyRequested.bind(this),
       onGetServerKeyRequested: this.onGetServerKeyRequested.bind(this),
       onTryLoginAgainRequested: this.onTryLoginAgainRequested.bind(this),
+      onCompleteIntroduceSetupExtension: this.onCompleteIntroduceSetupExtension.bind(this),
       onUnexpectedError: this.onUnexpectedError.bind(this),
     };
   }
@@ -111,12 +115,14 @@ export class AuthenticationContextProvider extends React.Component {
    * Initialize the authentication setup
    */
   async onInitializeSetupRequested() {
+    const isFirstInstall = await this.state.port.request('passbolt.setup.is-first-install');
+    const isChromeBrowser = detectBrowserName() === BROWSER_NAMES.CHROME;
     const setupInfo = await this.state.port.request('passbolt.setup.info');
     // update the locale to use the user locale
     this.props.context.onRefreshLocaleRequested(setupInfo.locale);
     // In case of error the background page should just disconnect the extension setup application.
     await this.setState({
-      state: AuthenticationContextState.SETUP_INITIALIZED,
+      state: isFirstInstall && isChromeBrowser ? AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_INITIALIZED : AuthenticationContextState.SETUP_INITIALIZED,
       setupInfo,
       process: AuthenticationContextProcess.SETUP
     });
@@ -127,12 +133,14 @@ export class AuthenticationContextProvider extends React.Component {
    * Initialize the authentication recover
    */
   async onInitializeRecoverRequested() {
+    const isFirstInstall = await this.state.port.request('passbolt.recover.first-install');
+    const isChromeBrowser = detectBrowserName() === BROWSER_NAMES.CHROME;
     const recoverInfo = await this.state.port.request('passbolt.recover.info');
     // The user might have already set a locale, the recover info update the background page locale, refresh the locale.
     this.props.context.onRefreshLocaleRequested(recoverInfo.locale);
     // In case of error the background page should just disconnect the extension setup application.
     await this.setState({
-      state: AuthenticationContextState.RECOVER_INITIALIZED,
+      state: isFirstInstall && isChromeBrowser ? AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_INITIALIZED : AuthenticationContextState.RECOVER_INITIALIZED,
       recoverInfo,
       process: AuthenticationContextProcess.RECOVER
     });
@@ -194,6 +202,15 @@ export class AuthenticationContextProvider extends React.Component {
     await this.setState({state, error});
   }
 
+  /**
+   * Whenever a setup extension is required for first install
+   * @returns {Promise<void>}
+   */
+  async onCompleteIntroduceSetupExtension() {
+    const state = AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_COMPLETED;
+    await this.setState({state});
+  }
+
   /**
    * Whenever the generates of a gpgp key given an user passphrase is requested
    * @param passphrase A passphrase
@@ -424,6 +441,8 @@ export const AuthenticationContextProcess = {
  */
 export const AuthenticationContextState = {
   INITIAL_STATE: 'Initial State',
+  INTRODUCE_SETUP_EXTENSION_INITIALIZED: 'Introduce Setup Extension Initialized',
+  INTRODUCE_SETUP_EXTENSION_COMPLETED: 'Introduce Setup Extension Completed',
   SETUP_INITIALIZED: 'Setup Initialized',
   RECOVER_INITIALIZED: 'Recover Initialized',
   SETUP_COMPLETED: 'Setup Completed',

package/src/react-extension/contexts/AuthenticationContext.test.js

@@ -14,10 +14,12 @@
 
 import {defaultProps} from "./AuthenticationContext.test.data";
 import {AuthenticationContextProvider, AuthenticationContextState} from "./AuthenticationContext";
+import {clear, mockUserAgent} from 'jest-useragent-mock';
 
 beforeEach(() => {
   jest.resetModules();
   jest.clearAllMocks();
+  clear();
 });
 
 describe("Authentication Context", () => {
@@ -42,14 +44,33 @@ describe("Authentication Context", () => {
         locale: "fr-FR"
       };
       const requestSetupInfoMock = jest.fn(() => setupInfo);
+      jest.spyOn(authenticationContext.state.port, 'request').mockImplementationOnce(jest.fn(() => false));
       jest.spyOn(authenticationContext.state.port, 'request').mockImplementation(requestSetupInfoMock);
       await authenticationContext.onInitializeSetupRequested();
+      expect(authenticationContext.state.port.request).toHaveBeenCalledWith("passbolt.setup.is-first-install");
       expect(authenticationContext.state.port.request).toHaveBeenCalledWith("passbolt.setup.info");
       expect(authenticationContext.props.context.onRefreshLocaleRequested).toHaveBeenCalledWith(setupInfo.locale);
       expect(authenticationContext.state.state).toBe(AuthenticationContextState.SETUP_INITIALIZED);
       expect(authenticationContext.state.process).toBe('setup');
     });
 
+    it('As AN I should start initially with the INTRODUCE_SETUP_EXTENSION_INITIALIZED state when on chrome with a plugin just installed', async() => {
+      mockUserAgent('chrome');
+      const setupInfo = {
+        locale: "fr-FR"
+      };
+      const requestSetupInfoMock = jest.fn(() => setupInfo);
+      jest.spyOn(authenticationContext.state.port, 'request').mockImplementation(requestSetupInfoMock);
+      await authenticationContext.onInitializeSetupRequested();
+      expect(authenticationContext.state.port.request).toHaveBeenCalledWith("passbolt.setup.is-first-install");
+      expect(authenticationContext.state.port.request).toHaveBeenCalledWith("passbolt.setup.info");
+      expect(authenticationContext.props.context.onRefreshLocaleRequested).toHaveBeenCalledWith(setupInfo.locale);
+      expect(authenticationContext.state.state).toBe(AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_INITIALIZED);
+      await authenticationContext.onCompleteIntroduceSetupExtension();
+      expect(authenticationContext.state.state).toBe(AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_COMPLETED);
+      expect(authenticationContext.state.process).toBe('setup');
+    });
+
     it('As AN I should request to generate a private key', async() => {
       const passphrase = 'some passphrase';
       await authenticationContext.onGenerateGpgKeyRequested(passphrase);
@@ -146,14 +167,33 @@ describe("Authentication Context", () => {
         locale: "fr-FR"
       };
       const requestRecoverInfoMock = jest.fn(() => recoverInfo);
+      jest.spyOn(authenticationContext.state.port, 'request').mockImplementationOnce(jest.fn(() => false));
       jest.spyOn(authenticationContext.state.port, 'request').mockImplementation(requestRecoverInfoMock);
       await authenticationContext.onInitializeRecoverRequested();
       expect(authenticationContext.state.port.request).toHaveBeenCalledWith("passbolt.recover.info");
+      expect(authenticationContext.state.port.request).toHaveBeenCalledWith("passbolt.recover.first-install");
       expect(authenticationContext.props.context.onRefreshLocaleRequested).toHaveBeenCalledWith(recoverInfo.locale);
       expect(authenticationContext.state.state).toBe(AuthenticationContextState.RECOVER_INITIALIZED);
       expect(authenticationContext.state.process).toBe('recover');
     });
 
+    it('As AN I should start initially with the INTRODUCE_SETUP_EXTENSION_INITIALIZED state when on chrome with a plugin just installed', async() => {
+      mockUserAgent('chrome');
+      const recoverInfo = {
+        locale: "fr-FR"
+      };
+      const requestRecoverInfoMock = jest.fn(() => recoverInfo);
+      jest.spyOn(authenticationContext.state.port, 'request').mockImplementation(requestRecoverInfoMock);
+      await authenticationContext.onInitializeRecoverRequested();
+      expect(authenticationContext.state.port.request).toHaveBeenCalledWith("passbolt.recover.info");
+      expect(authenticationContext.state.port.request).toHaveBeenCalledWith("passbolt.recover.first-install");
+      expect(authenticationContext.props.context.onRefreshLocaleRequested).toHaveBeenCalledWith(recoverInfo.locale);
+      expect(authenticationContext.state.state).toBe(AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_INITIALIZED);
+      await authenticationContext.onCompleteIntroduceSetupExtension();
+      expect(authenticationContext.state.state).toBe(AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_COMPLETED);
+      expect(authenticationContext.state.process).toBe('recover');
+    });
+
     it('As AN I should import a gpg key ', async() => {
       const recoverInfo = {
         locale: "fr-FR"

package/src/react-extension/contexts/DragContext.js

@@ -0,0 +1,122 @@
+/**
+ * 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.4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+/**
+ * The drag and drop context
+ */
+export const DragContext = React.createContext({
+  dragAndDrops: null, // The current component displayed for drag and drop
+  dragging: false, // The user dragging or not items
+  draggedItems: null, // the dragged items
+  onDragStart: () => {}, // on drag start
+  onDragEnd: () => {}, // on drag end
+});
+
+/**
+ * The related context provider
+ */
+export default class dragContextProvider extends React.Component {
+  /**
+   * Default constructor
+   * @param props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.createRefs();
+  }
+
+  /**
+   * Create DOM nodes or React elements references in order to be able to access them programmatically.
+   */
+  createRefs() {
+    this.elementRef = React.createRef();
+  }
+
+  /**
+   * Returns the default component state
+   */
+  get defaultState() {
+    return {
+      displayDraggedItemsComponent: [],
+      dragging: false,
+      draggedItems: null,
+      onDragStart: this.handleDragStart.bind(this),
+      onDragEnd: this.handleDragEnd.bind(this),
+    };
+  }
+
+  /**
+   * Handle drag start
+   * @param event
+   * @param draggedItemComponent
+   * @param draggedItems
+   */
+  async handleDragStart(event, draggedItemComponent, draggedItems) {
+    await this.setState({displayDraggedItemsComponent: [{draggedItemComponent}], dragging: true, draggedItems});
+    event.dataTransfer.setDragImage(this.elementRef.current, 5, 5);
+  }
+
+  /**
+   * Handle drag end
+   */
+  async handleDragEnd() {
+    await this.setState({displayDraggedItemsComponent: [], dragging: false, draggedItems: null});
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <DragContext.Provider value={this.state}>
+        <div ref={this.elementRef}>
+          {this.state.displayDraggedItemsComponent.map((displayDraggedItemComponent, index) =>
+            <displayDraggedItemComponent.draggedItemComponent
+              key={index}/>
+          )
+          }
+        </div>
+        {this.props.children}
+      </DragContext.Provider>
+    );
+  }
+}
+
+dragContextProvider.displayName = 'dragContextProvider';
+dragContextProvider.propTypes = {
+  children: PropTypes.any
+};
+
+/**
+ * Contextual Menu Context Consumer HOC
+ * @param WrappedComponent
+ */
+export function withDrag(WrappedComponent) {
+  return class withDrag extends React.Component {
+    render() {
+      return (
+        <DragContext.Consumer>
+          {
+            dragContext => <WrappedComponent dragContext={dragContext} {...this.props} />
+          }
+        </DragContext.Consumer>
+      );
+    }
+  };
+}

package/src/react-extension/contexts/DragContext.test.js

@@ -0,0 +1,53 @@
+/**
+ * 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.1.0
+ */
+
+import DragContextProvider from "./DragContext";
+
+beforeEach(() => {
+  jest.resetModules();
+  jest.clearAllMocks();
+});
+
+describe("Drag Context", () => {
+  let dragContext; // The context to text
+
+  describe('As LU I should be able to drag', () => {
+    beforeEach(() => {
+      dragContext = new DragContextProvider();
+      const setStateMock = state => dragContext.state = Object.assign(dragContext.state, state);
+      jest.spyOn(dragContext, 'setState').mockImplementation(setStateMock);
+    });
+
+    it('As LU I should start dragging', async() => {
+      const event = {
+        dataTransfer: {
+          setDragImage: jest.fn()
+        }
+      };
+      const component = jest.fn();
+      const draggedItems = {
+        item: "item"
+      };
+      await dragContext.state.onDragStart(event, component, draggedItems);
+      expect(dragContext.state.dragging).toBeTruthy();
+      expect(dragContext.state.draggedItems).toBe(draggedItems);
+    });
+
+    it('As LU I should end the dragging', async() => {
+      await dragContext.state.onDragEnd();
+      expect(dragContext.state.dragging).toBeFalsy();
+      expect(dragContext.state.draggedItems).toBe(null);
+    });
+  });
+});

package/src/react-extension/contexts/NavigationContext.js

@@ -50,6 +50,8 @@ export const NavigationContext = React.createContext({
   }, // Whenever the user wants to navigate to the users settings workspace mfa section.
   onGoToUserSettingsKeysRequested: () => {
   }, // Whenever the user wants to navigate to the users settings workspace keys section.
+  onGoToUserSettingsMobileRequested: () => {
+  }, // Whenever the user wants to navigate to the users settings workspace mobile section.
   onGoToNewTab: () => {
   }, // Whenever the user want to navigate to a new url.
 });
@@ -92,6 +94,7 @@ class NavigationContextProvider extends React.Component {
       onGoToUserSettingsThemeRequested: this.onGoToUserSettingsThemeRequested.bind(this), // Whenever the user wants to navigate to the users settings workspace theme section.
       onGoToUserSettingsMfaRequested: this.onGoToUserSettingsMfaRequested.bind(this), // Whenever the user wants to navigate to the users settings workspace mfa section.
       onGoToUserSettingsKeysRequested: this.onGoToUserSettingsKeysRequested.bind(this), // Whenever the user wants to navigate to the users settings workspace keys section.
+      onGoToUserSettingsMobileRequested: this.onGoToUserSettingsMobileRequested.bind(this), // Whenever the user wants to navigate to the users settings workspace mobile section.
     };
   }
 
@@ -279,6 +282,14 @@ class NavigationContextProvider extends React.Component {
     await this.goTo("browser-extension", "/app/settings/keys");
   }
 
+  /**
+   * Whenever the user wants to navigate to the users settings workspace keys section.
+   * @returns {Promise<void>}
+   */
+  async onGoToUserSettingsMobileRequested() {
+    await this.goTo("browser-extension", "/app/settings/mobile");
+  }
+
   /**
    * Render the component
    * @returns {JSX}