passbolt-styleguide 3.3.3 → 3.4.0-alpha2

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

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

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";
@@ -15,7 +14,7 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container page quickaccess"><FilterResourcesByRecentlyModifiedPage {...args} {...routerProps}/></div>}/>
+      <Route component={routerProps => <div className="container quickaccess"><FilterResourcesByRecentlyModifiedPage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -23,12 +22,15 @@ Template.propTypes = {
   context: PropTypes.object,
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const InitialLoad = Template.bind({});
 InitialLoad.args = {
   context: defaultAppContext()
 };
+InitialLoad.parameters = parameters;
 
 const contextNoResource = {
   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.js

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

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";
@@ -15,7 +14,7 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container page quickaccess"><FilterResourcesBySharedWithMePage {...args} {...routerProps}/></div>}/>
+      <Route component={routerProps => <div className="container quickaccess"><FilterResourcesBySharedWithMePage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -23,12 +22,15 @@ Template.propTypes = {
   context: PropTypes.object,
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const InitialLoad = Template.bind({});
 InitialLoad.args = {
   context: defaultAppContext()
 };
+InitialLoad.parameters = parameters;
 
 const contextNoResource = {
   port: {
@@ -39,6 +41,7 @@ export const 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;

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

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

package/src/react-quickaccess/components/FilterResourcesByTagPage/FilterResourcesByTagPage.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 FilterResourcesByTagPage from "./FilterResourcesByTagPage";
 import AppContext from "../../contexts/AppContext";
@@ -14,8 +13,8 @@ export default {
 const Template = ({context, initialEntries, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={initialEntries}>
-      <Route exact path="/" component={routerProps => <div className="container page quickaccess"><FilterResourcesByTagPage {...args} {...routerProps}/></div>}/>
-      <Route path="/:id" component={routerProps => <div className="container page quickaccess"><FilterResourcesByTagPage {...args} {...routerProps}/></div>}/>
+      <Route exact path="/" component={routerProps => <div className="container quickaccess"><FilterResourcesByTagPage {...args} {...routerProps}/></div>}/>
+      <Route path="/:id" component={routerProps => <div className="container quickaccess"><FilterResourcesByTagPage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -24,13 +23,16 @@ Template.propTypes = {
   initialEntries: PropTypes.array
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const InitialLoad = Template.bind({});
 InitialLoad.args = {
   context: defaultAppContext(),
   initialEntries: ['/']
 };
+InitialLoad.parameters = parameters;
 
 const contextNoTag = {
   port: {
@@ -42,6 +44,7 @@ NoTags.args = {
   context: defaultAppContext(contextNoTag),
   initialEntries: ['/']
 };
+NoTags.parameters = parameters;
 
 const contextResourcesTags = {
   port: {
@@ -52,4 +55,5 @@ export const TagsResourcesMatched = Template.bind({});
 TagsResourcesMatched.args = {
   context: defaultAppContext(contextResourcesTags),
   initialEntries: ['/']
-};
+};
+TagsResourcesMatched.parameters = parameters;

package/src/react-quickaccess/components/GeneratePasswordPage/ConfigurePassphraseGenerator.js

@@ -0,0 +1,150 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+
+class ConfigurePassphraseGenerator extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.getDefaultState(props);
+    this.initEventHandlers();
+  }
+
+  getDefaultState(props) {
+    return {
+      configuration: JSON.parse(JSON.stringify(props.configuration)),
+    };
+  }
+
+  initEventHandlers() {
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleWordCountChange = this.handleWordCountChange.bind(this);
+  }
+
+  /**
+   * Handle form input change.
+   * @params {ReactEvent} The react event.
+   */
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+    const configuration = {...this.state.configuration};
+    configuration.default_options[name] = value;
+
+    this.setState({configuration});
+    this.props.onChanged(configuration);
+  }
+
+  /**
+   * Handle form word count input change.
+   * @params {ReactEvent} The react event.
+   */
+  handleWordCountChange(event) {
+    const configuration = {...this.state.configuration};
+    configuration.default_options.word_count = event.target.value;
+
+    this.setState({configuration});
+    this.props.onChanged(configuration);
+  }
+
+  /**
+   * Returns the current number of words option
+   * @return {{default: number, min: number, max: number}}
+   */
+  get numberOfWords() {
+    const {default_options} = this.state.configuration;
+    return {
+      default: default_options.word_count,
+      min: default_options.min_word,
+      max: default_options.max_word,
+    };
+  }
+
+  /**
+   * Returns the current separator option
+   * @returns {string}
+   */
+  get separator() {
+    return this.state.configuration.default_options.separator;
+  }
+
+  /**
+   * Returns the current word case option
+   * @returns {string}
+   */
+  get wordCase() {
+    return this.state.configuration.default_options.word_case;
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <>
+        <div className="input text">
+          <label htmlFor="configure-passphrase-generator-form-word-count"><Trans>Number of words</Trans></label>
+          <div className="slider">
+            <input
+              name="word_count"
+              min={this.numberOfWords.min}
+              max={this.numberOfWords.max}
+              value={this.numberOfWords.default}
+              type="range"
+              onChange={this.handleInputChange}/>
+            <input
+              type="number"
+              id="configure-passphrase-generator-form-word-count"
+              name="word_count"
+              min={this.numberOfWords.min} max={this.numberOfWords.max}
+              value={this.numberOfWords.default}
+              onChange={this.handleWordCountChange}/>
+          </div>
+        </div>
+        <div className="input text">
+          <label htmlFor="configure-passphrase-generator-form-words-separator"><Trans>Words separator</Trans></label>
+          <input type="text" id="configure-passphrase-generator-form-words-separator" name="separator" value={this.separator} onChange={this.handleInputChange}
+            placeholder={this.translate("Type one or more characters")}/>
+        </div>
+        <div className="input select">
+          <label htmlFor="configure-passphrase-generator-form-words-case"><Trans>Words case</Trans></label>
+          <select id="configure-passphrase-generator-form-words-case" name="word_case" value={this.word_case} onChange={this.handleInputChange}>
+            <option key="lowercase" value="lowercase">{this.translate("Lower case")}</option>
+            <option key="uppercase" value="uppercase">{this.translate("Upper case")}</option>
+            <option key="camelcase" value="camelcase">{this.translate("Camel case")}</option>
+          </select>
+        </div>
+      </>
+    );
+  }
+}
+
+ConfigurePassphraseGenerator.propTypes = {
+  configuration: PropTypes.object, // The default generator configuration
+  onChanged: PropTypes.func, // Called whenever the generator configuration changed
+  t: PropTypes.func, // The translation function
+};
+
+export default withTranslation('common')(ConfigurePassphraseGenerator);

package/src/react-quickaccess/components/GeneratePasswordPage/ConfigurePassphraseGenerator.test.data.js

@@ -0,0 +1,20 @@
+/**
+ * Default props
+ * @returns {*}
+ */
+export function defaultProps() {
+  return {
+    configuration: {
+      name: "Passphrase",
+      type: "passphrase",
+      default_options: {
+        word_count: 8,
+        word_case: "lowercase",
+        min_word: 4,
+        max_word: 40,
+        separator: " "
+      }
+    },
+    onChanged: jest.fn()
+  };
+}

package/src/react-quickaccess/components/GeneratePasswordPage/ConfigurePassphraseGenerator.test.js

@@ -0,0 +1,67 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+
+/**
+ * Unit tests on ConfigurePassphraseGenerator in regard of specifications
+ */
+import ConfigurePassphraseGeneratorPage from "./ConfigurePassphraseGenerator.test.page";
+import {defaultProps} from "./ConfigurePassphraseGenerator.test.data";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("Configure Passphrase Generator", () => {
+  let page; // The page to test against
+  let props = null; // The page props
+
+  beforeEach(() => {
+    props = defaultProps(); // The props to pass
+    page = new ConfigurePassphraseGeneratorPage(props);
+  });
+
+  describe('As LU I should update the passphrase configuration', () => {
+    it('As LU I should change the range of word count', async() => {
+      expect(page.rangeWordCount.value).toBe("8");
+      expect(page.numberWordCount.value).toBe("8");
+      await page.changeRangeWordCount("20");
+      expect(page.rangeWordCount.value).toBe("20");
+      expect(page.numberWordCount.value).toBe("20");
+      expect(props.onChanged).toHaveBeenCalled();
+    });
+
+    it('As LU I should change the number of word count', async() => {
+      expect(page.rangeWordCount.value).toBe("8");
+      expect(page.numberWordCount.value).toBe("8");
+      await page.changeNumberWordCount("20");
+      expect(page.rangeWordCount.value).toBe("20");
+      expect(page.numberWordCount.value).toBe("20");
+      expect(props.onChanged).toHaveBeenCalled();
+    });
+
+    it('As LU I should change the separator', async() => {
+      expect(page.separator.value).toBe(' ');
+      await page.changeSeparator('{}');
+      expect(page.separator.value).toBe('{}');
+      expect(props.onChanged).toHaveBeenCalled();
+    });
+
+    it('As LU I should change the separator', async() => {
+      expect(page.wordCase.value).toBe('lowercase');
+      await page.changeWordCase('camelcase');
+      expect(page.wordCase.value).toBe('camelcase');
+      expect(props.onChanged).toHaveBeenCalled();
+    });
+  });
+});

package/src/react-quickaccess/components/GeneratePasswordPage/ConfigurePassphraseGenerator.test.page.js

@@ -0,0 +1,109 @@
+
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider
+  from "../../../react-extension/test/mock/components/Internationalisation/MockTranslationProvider";
+import ConfigurePassphraseGenerator from "./ConfigurePassphraseGenerator";
+
+/**
+ * The ConfigurePassphraseGenerator component represented as a page
+ */
+export default class ConfigurePassphraseGeneratorPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <ConfigurePassphraseGenerator {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Get the range word count input
+   */
+  get rangeWordCount() {
+    return this._page.container.querySelector('.slider input[type="range"]');
+  }
+
+  /**
+   * Get the number word count input
+   */
+  get numberWordCount() {
+    return this._page.container.querySelector('.slider input[type="number"]');
+  }
+
+  /**
+   * Get the separator
+   */
+  get separator() {
+    return this._page.container.querySelector('#configure-passphrase-generator-form-words-separator');
+  }
+
+  /**
+   * Get the word case
+   */
+  get wordCase() {
+    return this._page.container.querySelector('#configure-passphrase-generator-form-words-case');
+  }
+
+  /**
+   * Change range word count
+   * @param data
+   * @returns {Promise<void>}
+   */
+  async changeRangeWordCount(data) {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(this.rangeWordCount, dataInputEvent);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Change number word count
+   * @param data
+   * @returns {Promise<void>}
+   */
+  async changeNumberWordCount(data) {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(this.numberWordCount, dataInputEvent);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Change separator
+   * @param data
+   * @returns {Promise<void>}
+   */
+  async changeSeparator(data) {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(this.separator, dataInputEvent);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Change word case
+   * @param data
+   * @returns {Promise<void>}
+   */
+  async changeWordCase(data) {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(this.wordCase, dataInputEvent);
+    await waitFor(() => {});
+  }
+}