passbolt-styleguide 3.3.2 → 3.4.0-alpha1

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"
+};

package/src/react-extension/components/Authentication/IntroduceSetupExtension/IntroduceSetupExtension.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 IntroduceSetupExtension from "./IntroduceSetupExtension";
 
@@ -17,21 +15,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 => <IntroduceSetupExtension {...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 => <IntroduceSetupExtension {...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/NotifyExpiredSession/NotifyExpiredSession.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 NotifyExpiredSession from "./NotifyExpiredSession";
 
@@ -16,15 +14,14 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <NotifyExpiredSession {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+  <AuthenticationContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <NotifyExpiredSession {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.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 AcceptLoginServerKeyChange from "./AcceptLoginServerKeyChange";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 
@@ -17,21 +15,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <div id="container" className="container page login">
-          <div className="content">
-            <div className="login-form">
-              <Route component={routerProps => <AcceptLoginServerKeyChange {...args} {...routerProps}/>}></Route>
-            </div>
+  <AuthenticationContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <div id="container" className="container page login">
+        <div className="content">
+          <div className="login-form">
+            <Route component={routerProps => <AcceptLoginServerKeyChange {...args} {...routerProps}/>}></Route>
           </div>
         </div>
-      </MemoryRouter>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+      </div>
+    </MemoryRouter>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/AuthenticationLogin/DisplayLoginError/DisplayLoginError.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 DisplayLoginError from "./DisplayLoginError";
 
@@ -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 => <DisplayLoginError {...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 => <DisplayLoginError {...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/AuthenticationLogin/DisplayLoginInProgress/DisplayLoginProgress.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 DisplayLoginInProgress from "./DisplayLoginInProgress";
 
@@ -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 => <DisplayLoginInProgress {...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 => <DisplayLoginInProgress {...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/AuthenticationLogin/Login/Login.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 Login from "./Login";
 
@@ -24,21 +22,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 => <Login {...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 => <Login {...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/AuthenticationPassphrase/InputPassphrase/InputPassphrase.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 InputPassphrase from "./InputPassphrase";
 import AppContext from "../../../contexts/AppContext";
 
@@ -25,15 +23,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <InputPassphrase {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
-
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <InputPassphrase {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 
 export const Initial = Template.bind({});
-

package/src/react-extension/components/AuthenticationRecover/RecoverAuthentication/RecoverAuthentication.js

@@ -78,7 +78,7 @@ class RecoverAuthentication extends Component {
       case AuthenticationContextState.RECOVER_INITIALIZED:
       case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_COMPLETED:
         return <ImportGpgKey
-          title={this.translate("Welcome back, please enter your private key to begin with the recovery process.")}
+          title={this.translate("Welcome back, please enter your private key to begin the recovery process.")}
           secondaryAction={<HelpOnPrivateKeyLostSecondaryAction/>}/>;
       case AuthenticationContextState.GPG_KEY_VALIDATED:
         return <CheckPassphrase canRememberMe={this.canRememberMe} secondaryAction={<HelpOnPassphraseLostSecondaryAction/>}/>;

package/src/react-extension/components/Common/Error/ShowErrorDetails/ShowErrorDetails.js

@@ -101,7 +101,7 @@ class ShowErrorDetails extends Component {
         <div className="accordion-header">
           <a onClick={this.handleErrorDetailsToggle}>
             <Icon baseline={true} name={this.state.showErrorDetails ? "caret-down" : "caret-right"}/>
-            <Trans>Errors details</Trans>
+            <Trans>Error details</Trans>
           </a>
         </div>
         {this.state.showErrorDetails &&

package/src/react-extension/components/Common/Icons/Icon.test.stories.js

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Icon from "./Icon";
-import "../../../../css/themes/default/api_main.css";
 
 
 export default {
@@ -74,3 +73,6 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.parameters = {
+  css: "api_main"
+};

package/src/react-extension/components/Common/Loading/LoadingSpinner/LoadingSpinner.js

@@ -12,6 +12,7 @@
  * @since         2.13.0
  */
 import React from "react";
+import {Trans} from "react-i18next";
 
 /**
  * This component displays a waiting loading spinner
@@ -27,7 +28,7 @@ class LoadingSpinner extends React.Component {
           <div  className="processing">
           </div>
         </div>
-        <h1>Please wait...</h1>
+        <h1><Trans>Please wait...</Trans></h1>
       </div>
     );
   }

package/src/react-extension/components/Common/Progress/DisplayProgress/DisplayProgress.js

@@ -60,7 +60,7 @@ class DisplayProgress extends Component {
               </div>
               {displayDetailsSection &&
               <div className="progress-details">
-                <span className="progress-step-label">&nbsp; {this.props.context.progressDialogProps.message ||  this.translate("Please wait...") }</span>
+                <span className="progress-step-label">{this.props.context.progressDialogProps.message ||  this.translate("Please wait...") }</span>
                 <span style={progressLabelStyle} className="progress-percent">{progress}%</span>
               </div>
               }

package/src/react-extension/components/Common/Progress/DisplayProgress/DisplayProgress.test.js

@@ -76,7 +76,7 @@ describe("DisplayProgress", () => {
     // Details message.
     const progressStepLabel = container.querySelector(".progress-step-label");
     //   translate to unix code \u00a0
-    expect(progressStepLabel.textContent).toBe("\u00a0 Step 0");
+    expect(progressStepLabel.textContent).toBe("Step 0");
 
     // Details percent.
     const progressPercent = container.querySelector(".progress-percent");

package/src/react-extension/components/Common/Progress/DisplayProgress/DisplayProgress.test.stories.js

@@ -0,0 +1,34 @@
+import {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import DisplayProgress from "./DisplayProgress";
+
+
+export default {
+  title: 'Passbolt/Common/DisplayProgress',
+  component: DisplayProgress
+};
+
+const Template = args =>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayProgress {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>;
+
+
+export const Initial = Template.bind({});
+Initial.args = {
+  context: {
+    progressDialogProps: {}
+  }
+};
+
+export const ProgressMessage = Template.bind({});
+ProgressMessage.args = {
+  context: {
+    progressDialogProps: {
+      title: "Title",
+      goals: 100,
+      completed: 50,
+      message: "message"
+    }
+  }
+};

package/src/react-extension/components/Resource/CreateResource/CreateResource.test.stories.js

@@ -3,12 +3,19 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import CreateResource from "./CreateResource";
-import "../../../../css/themes/default/ext_app.css";
 
 
 export default {
   title: 'Passbolt/Resource/CreateResource',
-  component: CreateResource
+  component: CreateResource,
+  argTypes: {
+    language: {
+      control: {
+        type: 'select',
+        options: ['en-US', 'fr']
+      }
+    }
+  }
 };
 
 const context = {
@@ -80,7 +87,7 @@ const context = {
 };
 
 
-const Template = args =>
+const Template =  ({context, ...args})  =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <Route component={routerProps => <CreateResource {...args} {...routerProps}/>}></Route>
@@ -88,7 +95,10 @@ const Template = args =>
   </AppContext.Provider>;
 
 Template.propTypes = {
-  context: PropTypes.object,
+  context: PropTypes.object
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+};

package/src/react-extension/components/Resource/DisplayResourcesList/DisplayDragResource.js

@@ -0,0 +1,68 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 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) 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";
+import AppContext from "../../../contexts/AppContext";
+import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
+
+class DisplayDragResource extends React.Component {
+  /**
+   * the resource selected
+   * @returns {*}
+   */
+  get selectedResources() {
+    return this.props.resourceWorkspaceContext.selectedResources;
+  }
+
+  /**
+   * is multiple resources selected
+   * @returns {boolean}
+   */
+  isMultipleSelected() {
+    return this.props.resourceWorkspaceContext.selectedResources.length > 1;
+  }
+
+  /**
+   * Get the number of resources
+   * @returns {string|*}
+   */
+  get numberOfResources() {
+    return this.props.resourceWorkspaceContext.selectedResources.length > 99 ? '99+' : this.props.resourceWorkspaceContext.selectedResources.length;
+  }
+
+  /**
+   * Render the component.
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className={`${this.isMultipleSelected() ? "drag-and-drop-multiple" : "drag-and-drop"}`}>
+        {this.selectedResources[0].name}
+        {this.isMultipleSelected() &&
+        <span className="count">
+          {this.numberOfResources}
+        </span>
+        }
+      </div>
+    );
+  }
+}
+
+DisplayDragResource.contextType = AppContext;
+
+DisplayDragResource.propTypes = {
+  resourceWorkspaceContext: PropTypes.any
+};
+
+export default withResourceWorkspace(DisplayDragResource);

package/src/react-extension/components/Resource/DisplayResourcesList/DisplayResourcesList.js

@@ -29,6 +29,8 @@ import {withContextualMenu} from "../../../contexts/ContextualMenuContext";
 import sanitizeUrl, {urlProtocols} from "../../../lib/Sanitize/sanitizeUrl";
 import {Trans, withTranslation} from "react-i18next";
 import {DateTime} from "luxon";
+import {withDrag} from "../../../contexts/DragContext";
+import DisplayDragResource from "./DisplayDragResource";
 
 /**
  * This component allows to display the filtered resources into a grid
@@ -53,7 +55,6 @@ class DisplayResourcesList extends React.Component {
     return {
       resources: [], // The current list of resources to display
       selectStrategy: "",
-      previewedPassword: null, // The previewed password.
     };
   }
 
@@ -109,7 +110,6 @@ class DisplayResourcesList extends React.Component {
    */
   createRefs() {
     this.listRef = React.createRef();
-    this.dragFeedbackElement = React.createRef();
   }
 
   /**
@@ -378,17 +378,15 @@ class DisplayResourcesList extends React.Component {
     if (!this.isResourceSelected(resource)) {
       await this.props.resourceWorkspaceContext.onResourceSelected.single(resource);
     }
-    event.dataTransfer.setDragImage(this.dragFeedbackElement.current, 5, 5);
     const draggedItems = {resources:  this.props.resourceWorkspaceContext.selectedResources, folders: []};
-    const triggerEvent = document.createEvent("CustomEvent");
-    triggerEvent.initCustomEvent("passbolt.resources.drag-start", true, true, draggedItems);
-    document.dispatchEvent(triggerEvent);
+    this.props.dragContext.onDragStart(event, DisplayDragResource, draggedItems);
   }
 
+  /**
+   * Handle when the user stop dragging content.
+   */
   handleDragEndEvent() {
-    const trigerEvent = document.createEvent("CustomEvent");
-    trigerEvent.initCustomEvent("passbolt.resources.drag-end", true, true);
-    document.dispatchEvent(trigerEvent);
+    this.props.dragContext.onDragEnd();
   }
 
   /**
@@ -611,37 +609,6 @@ class DisplayResourcesList extends React.Component {
     );
   }
 
-  /**
-   * Render the drag tooltip of the selected resources
-   * @returns {JSX.Element}
-   */
-  renderDragFeedback() {
-    const isSelected = this.props.resourceWorkspaceContext.selectedResources.length > 0;
-    const isMultipleSelected = this.props.resourceWorkspaceContext.selectedResources.length > 1;
-    let dragFeedbackText = "";
-    let dragElementClassname = "";
-
-    if (isSelected) {
-      const isSelected = resource => resource.id === this.props.resourceWorkspaceContext.selectedResources[0].id;
-      const firstSelectedResource = this.resources.find(isSelected);
-      if (firstSelectedResource) {
-        dragElementClassname = isMultipleSelected ? "drag-and-drop-multiple" : "drag-and-drop";
-        dragFeedbackText = firstSelectedResource.name;
-      }
-    }
-
-    return (
-      <div ref={this.dragFeedbackElement} className={dragElementClassname}>
-        {dragFeedbackText}
-        {isMultipleSelected &&
-        <span className="count">
-          {this.props.resourceWorkspaceContext.selectedResources.length}
-        </span>
-        }
-      </div>
-    );
-  }
-
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -709,7 +676,6 @@ class DisplayResourcesList extends React.Component {
           }
           {!isEmpty &&
           <React.Fragment>
-            {this.renderDragFeedback()}
             <div className="tableview-header">
               <table>
                 <thead>
@@ -846,7 +812,8 @@ DisplayResourcesList.propTypes = {
   actionFeedbackContext: PropTypes.any, // The action feedback context
   contextualMenuContext: PropTypes.any, // The contextual menu context
   history: PropTypes.any,
+  dragContext: PropTypes.any,
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withRouter(withActionFeedback(withContextualMenu(withResourceWorkspace(withTranslation('common')(DisplayResourcesList))))));
+export default withAppContext(withRouter(withActionFeedback(withContextualMenu(withResourceWorkspace(withDrag(withTranslation('common')(DisplayResourcesList)))))));