passbolt-styleguide 3.3.2 → 3.4.0-alpha1

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

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

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

@@ -336,11 +336,11 @@ class UploadUserProfileAvatar extends React.Component {
                     className={`button primary ${this.areActionsAllowed ? "" : "disabled"}`}
                     onClick={this.handleSelectFile}>
                     <Icon name="upload-a"/>
-                    <span><Trans>Choose a file</Trans></span>
+                    <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/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/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/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/components/AnimatedSwitch/AnimatedSwitch.js

@@ -13,6 +13,7 @@ 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";
     }
@@ -164,7 +165,7 @@ 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.
@@ -181,8 +182,7 @@ 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 (

package/src/react-quickaccess/components/ExtensionSetup/SetupExtensionInProgress/SetupExtensionInProgressPage.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 SetupExtensionInProgress from "./SetupExtensionInProgress";
 import Header from "../../Header/Header";
 
@@ -15,10 +14,10 @@ const Template = () =>
   </MemoryRouter>;
 
 
-
 export const Initial = Template.bind({});
 Initial.args = {
 };
 
-
-
+Initial.parameters = {
+  css: "api_main"
+};

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";
@@ -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.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";
@@ -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.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";
@@ -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;

package/src/react-quickaccess/components/FilterResourcesByRecentlyModifiedPage/FilterResourcesByRecentlyModifiedPage.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 FilterResourcesByRecentlyModifiedPage from "./FilterResourcesByRecentlyModifiedPage";
 import AppContext from "../../contexts/AppContext";
@@ -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 = {
   storage: {
@@ -41,6 +43,7 @@ export const NoRecentlyModifiedResource = Template.bind({});
 NoRecentlyModifiedResource.args = {
   context: defaultAppContext(contextNoResource)
 };
+NoRecentlyModifiedResource.parameters = parameters;
 
 const contextResources = {
   storage: {
@@ -53,7 +56,4 @@ export const RecentlyModifiedResources = Template.bind({});
 RecentlyModifiedResources.args = {
   context: defaultAppContext(contextResources)
 };
-
-
-
-
+RecentlyModifiedResources.parameters = parameters;

package/src/react-quickaccess/components/FilterResourcesBySharedWithMePage/FilterResourcesBySharedWithMePage.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 FilterResourcesBySharedWithMePage from "./FilterResourcesBySharedWithMePage";
 import AppContext from "../../contexts/AppContext";
@@ -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 NoSharedWithMeResource = Template.bind({});
 NoSharedWithMeResource.args = {
   context: defaultAppContext(contextNoResource)
 };
+NoSharedWithMeResource.parameters = parameters;
 
 const contextResources = {
   port: {
@@ -49,7 +52,4 @@ export const SharedWithMeResources = Template.bind({});
 SharedWithMeResources.args = {
   context: defaultAppContext(contextResources)
 };
-
-
-
-
+SharedWithMeResources.parameters = parameters;