passbolt-styleguide 3.5.3 → 3.6.0-beta1

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMenu.test.data.js

@@ -13,7 +13,8 @@ export function defaultAppContext(appContext) {
     userSettings: new UserSettings(userSettingsFixture),
     siteSettings: {
       canIUse: () => true
-    }
+    },
+    setContext: () => jest.fn()
   };
   return Object.assign(defaultAppContext, appContext || {});
 }
@@ -28,6 +29,7 @@ export function defaultPropsOneResourceOwned() {
       selectedResources: [resourcesMock[0]],
       lockDisplayDetail: true,
       onLockDetail: jest.fn(),
+      onResourcesToExport: () => jest.fn()
     }
   };
 }
@@ -42,6 +44,7 @@ export function defaultPropsOneResourceNotOwned() {
       selectedResources: [resourcesMock[1]],
       lockDisplayDetail: false,
       onLockDetail: jest.fn(),
+      onResourcesToExport: () => jest.fn()
     }
   };
 }
@@ -56,6 +59,7 @@ export function defaultPropsNoResource() {
       selectedResources: [],
       lockDisplayDetail: true,
       onLockDetail: jest.fn(),
+      onResourcesToExport: () => jest.fn()
     }
   };
 }
@@ -70,6 +74,7 @@ export function defaultPropsMultipleResource() {
       selectedResources: resourcesMock,
       lockDisplayDetail: true,
       onLockDetail: jest.fn(),
+      onResourcesToExport: () => jest.fn()
     }
   };
 }
@@ -85,6 +90,7 @@ export function defaultPropsMultipleResourceUpdateRights() {
       selectedResources,
       lockDisplayDetail: true,
       onLockDetail: jest.fn(),
+      onResourcesToExport: () => jest.fn()
     }
   };
 }

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMenu.test.page.js

@@ -83,56 +83,56 @@ class DisplayMenuPageObject {
    * Returns the edit menu elements of password workspace menu
    */
   get editMenu() {
-    return this._container.querySelector('#edit_action .button.ready');
+    return this._container.querySelector('#edit_action .button');
   }
 
   /**
    * Returns the edit menu disabled elements of password workspace menu
    */
   get editMenuDisabled() {
-    return this._container.querySelector('#edit_action .button.ready.disabled');
+    return this._container.querySelector('#edit_action .button.disabled');
   }
 
   /**
    * Returns the share menu elements of password workspace menu
    */
   get shareMenu() {
-    return this._container.querySelector('#share_action .button.ready');
+    return this._container.querySelector('#share_action .button');
   }
 
   /**
    * Returns the share menu disabled elements of password workspace menu
    */
   get shareMenuDisabled() {
-    return this._container.querySelector('#share_action .button.ready.disabled');
+    return this._container.querySelector('#share_action .button.disabled');
   }
 
   /**
    * Returns the share menu elements of password workspace menu
    */
   get copyMenu() {
-    return this._container.querySelector('#password_action .button.ready');
+    return this._container.querySelector('#password_action .button');
   }
 
   /**
    * Returns the share menu disabled elements of password workspace menu
    */
   get copyMenuDisabled() {
-    return this._container.querySelector('#password_action .button.ready.disabled');
+    return this._container.querySelector('#password_action .button.disabled');
   }
 
   /**
    * Returns the more menu elements of password workspace menu
    */
   get moreMenu() {
-    return this._container.querySelector('.dropdown .button.ready');
+    return this._container.querySelector('.dropdown .button');
   }
 
   /**
    * Returns the more menu elements of password workspace menu
    */
   get moreMenuDisabled() {
-    return this._container.querySelector('.dropdown .button.ready.disabled');
+    return this._container.querySelector('.dropdown .button.disabled');
   }
 
   /**
@@ -195,14 +195,14 @@ class DisplayMenuPageObject {
    * Returns the detail information button menu elements of password workspace menu
    */
   get menuDetailInformation() {
-    return this._container.querySelector('.actions.secondary .ready .button.button-toggle');
+    return this._container.querySelector('.actions.secondary .button.button-toggle');
   }
 
   /**
    * Returns the detail information button menu elements of password workspace menu
    */
   get menuDetailInformationSelected() {
-    return this._container.querySelector('.actions.secondary .ready .button.button-toggle.selected');
+    return this._container.querySelector('.actions.secondary .button.button-toggle.selected');
   }
 
   /**

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

@@ -0,0 +1,58 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.6.0
+ */
+import React from "react";
+import DisplayResourcesWorkspaceMenu from "./DisplayResourcesWorkspaceMenu";
+import {
+  defaultAppContext,
+  defaultPropsMultipleResource,
+  defaultPropsNoResource,
+  defaultPropsOneResourceNotOwned,
+  defaultPropsOneResourceOwned
+} from "./DisplayResourcesWorkspaceMenu.test.data";
+
+/**
+ * DisplayResourcesWorkspaceMenu stories
+ */
+export default {
+  title: 'Passbolt/Resource/DisplayResourcesWorkspaceMenu',
+  component: DisplayResourcesWorkspaceMenu
+};
+
+const Template = ({...args}) =>
+  <div className="header third">
+    <div className="col1 main-action-wrapper">
+      <DisplayResourcesWorkspaceMenu {...args}/>
+    </div>
+  </div>;
+
+const props = defaultPropsOneResourceOwned();
+props.context = defaultAppContext();
+
+export const OneResourceOwned = Template.bind({});
+OneResourceOwned.args = {...props};
+
+const propsResourcesNotOwned = defaultPropsOneResourceNotOwned();
+propsResourcesNotOwned.context = defaultAppContext();
+export const ResourceNotOwned = Template.bind({});
+ResourceNotOwned.args = {...propsResourcesNotOwned};
+
+const propsNoResource = defaultPropsNoResource();
+propsNoResource.context = defaultAppContext();
+export const NoResource = Template.bind({});
+NoResource.args = {...propsNoResource};
+
+const propsMultipleResource = defaultPropsMultipleResource();
+propsMultipleResource.context = defaultAppContext();
+export const MultipleResource = Template.bind({});
+MultipleResource.args = {...propsMultipleResource};

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

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import Tooltip from "../../Common/Tooltip/Tooltip";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withDialog} from "../../../contexts/DialogContext";
@@ -27,7 +27,8 @@ import {Trans, withTranslation} from "react-i18next";
 import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGenerator";
 import GenerateResourcePassword from "../../ResourcePassword/GenerateResourcePassword/GenerateResourcePassword";
 import {withResourcePasswordGeneratorContext} from "../../../contexts/ResourcePasswordGeneratorContext";
-import {SecretGeneratorComplexity} from "../../../../shared/lib/SecretGenerator/SecretGeneratorComplexity";
+import Password from "../../../../shared/components/Password/Password";
+import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
 
 /** Resource password max length */
 const RESOURCE_PASSWORD_MAX_LENGTH = 4096;
@@ -60,8 +61,6 @@ class EditResource extends Component {
       description: resource.description || "",
       descriptionError: "",
       descriptionWarning: "",
-      viewPassword: false,
-      passwordInputHasFocus: false,
       isSecretDecrypting: true,
       encryptDescription: null,
       resourceTypeId: resource.resource_type_id || ""
@@ -72,11 +71,8 @@ class EditResource extends Component {
     this.handleClose = this.handleClose.bind(this);
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
-    this.handlePasswordInputFocus = this.handlePasswordInputFocus.bind(this);
-    this.handlePasswordInputBlur = this.handlePasswordInputBlur.bind(this);
     this.handleNameInputKeyUp = this.handleNameInputKeyUp.bind(this);
     this.handlePasswordInputKeyUp = this.handlePasswordInputKeyUp.bind(this);
-    this.handleViewPasswordButtonClick = this.handleViewPasswordButtonClick.bind(this);
     this.handleOpenGenerator = this.handleOpenGenerator.bind(this);
     this.handleGeneratePasswordButtonClick = this.handleGeneratePasswordButtonClick.bind(this);
     this.handleDescriptionInputFocus = this.handleDescriptionInputFocus.bind(this);
@@ -377,11 +373,9 @@ class EditResource extends Component {
    */
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -426,15 +420,6 @@ class EditResource extends Component {
     });
   }
 
-  /**
-   * Handle password input focus.
-   */
-  async handlePasswordInputFocus() {
-    const passwordInputHasFocus = true;
-    this.setState({passwordInputHasFocus: passwordInputHasFocus});
-    this.passwordInputRef.current.focus();
-  }
-
   /**
    * Handle description input focus.
    */
@@ -444,13 +429,6 @@ class EditResource extends Component {
     this.descriptionInputRef.current.focus();
   }
 
-  /**
-   * Handle password input blur.
-   */
-  handlePasswordInputBlur() {
-    this.setState({passwordInputHasFocus: false});
-  }
-
   /**
    * Handle description input blur.
    */
@@ -477,16 +455,6 @@ class EditResource extends Component {
     this.setState({passwordWarning});
   }
 
-  /**
-   * Handle view password button click.
-   */
-  async handleViewPasswordButtonClick() {
-    if (this.hasAllInputDisabled()) {
-      return;
-    }
-    this.setState({viewPassword: !this.state.viewPassword});
-  }
-
   /**
    * Handle generate password button click.
    */
@@ -660,18 +628,7 @@ class EditResource extends Component {
    */
   render() {
     const passwordEntropy = SecretGenerator.entropy(this.state.password);
-    const passwordStrength = SecretGeneratorComplexity.strength(passwordEntropy);
     const passwordPlaceholder = this.getPasswordInputPlaceholder();
-    /*
-     * The parser can't find the translation for passwordStrength.label
-     * To fix that we can use it in comment
-     * this.translate("n/a")
-     * this.translate("very weak")
-     * this.translate("weak")
-     * this.translate("fair")
-     * this.translate("strong")
-     * this.translate("very strong")
-     */
 
     return (
       <DialogWrapper title={this.translate("Edit resource")} subtitle={this.state.nameOriginal} className="edit-password-dialog"
@@ -708,77 +665,52 @@ class EditResource extends Component {
             </div>
             <div className={`input-password-wrapper input required ${this.state.passwordError ? "error" : ""}`}>
               <label htmlFor="edit-password-form-password"><Trans>Password</Trans></label>
-              <div className="input text password">
-                <input id="edit-password-form-password" name="password" className={`required ${this.state.isSecretDecrypting ? "" : "decrypted"}`}
-                  required="required" maxLength="4096" type={this.state.viewPassword ? "text" : "password"}
+              <div className="password-button-inline">
+                <Password id="edit-password-form-password" name="password"
                   onKeyUp={this.handlePasswordInputKeyUp} value={this.state.password}
-                  placeholder={passwordPlaceholder} onFocus={this.handlePasswordInputFocus}
-                  onBlur={this.handlePasswordInputBlur} onChange={this.handleInputChange}
-                  disabled={this.hasAllInputDisabled() || this.isPasswordDisabled()}
-                  autoComplete="new-password"
-                  ref={this.passwordInputRef}/>
-                <a onClick={this.handleViewPasswordButtonClick}
-                  className={`password-view button button-icon toggle ${this.state.viewPassword ? "selected" : ""}`}>
-                  <Icon name='eye-open' big={true}/>
-                  <span className="visually-hidden">view</span>
+                  placeholder={passwordPlaceholder} onChange={this.handleInputChange}
+                  autoComplete="new-password" disabled={this.hasAllInputDisabled() || this.isPasswordDisabled()}
+                  preview={true} inputRef={this.passwordInputRef}/>
+                <a onClick={this.handleGeneratePasswordButtonClick}
+                  className={`password-generate button-icon button ${this.hasAllInputDisabled() ? "disabled" : ""}`}>
+                  <Icon name='dice' big={true}/>
+                  <span className="visually-hidden">generate</span>
                 </a>
-              </div>
-              <ul className="actions inline">
-                <li>
-                  <a onClick={this.handleGeneratePasswordButtonClick}
-                    className={`password-generate button-icon button ${this.hasAllInputDisabled() ? "disabled" : ""}`}>
-                    <Icon name='magic-wand' big={true}/>
-                    <span className="visually-hidden">generate</span>
-                  </a>
-                </li>
                 {this.canUsePasswordGenerator &&
-                <li>
                   <a onClick={this.handleOpenGenerator}
                     className="password-generator button-icon button">
-                    <Icon name='cog' big={true}/>
+                    <Icon name='settings' big={true}/>
                     <span className="visually-hidden">open generator</span>
                   </a>
-                </li>
                 }
-              </ul>
-              <div className={`password-complexity ${passwordStrength.id}`}>
-                <span className="progress">
-                  <span className={`progress-bar ${passwordStrength.id}`}/>
-                </span>
-                <span className="complexity-text">
-                  <div>
-                    <Trans>Complexity:</Trans> <strong>{this.translate(passwordStrength.label)}</strong>
-                  </div>
-                  <div>
-                    <Trans>Entropy:</Trans> <strong>{passwordEntropy.toFixed(1)} bits</strong>
-                  </div>
-                </span>
               </div>
+              <PasswordComplexity entropy={passwordEntropy} error={Boolean(this.state.passwordError)}/>
               {this.state.passwordError &&
-              <div className="input text">
                 <div className="password error-message">{this.state.passwordError}</div>
-              </div>
               }
               {this.state.passwordWarning &&
-              <div className="input text">
                 <div className="password warning message">{this.state.passwordWarning}</div>
-              </div>
               }
             </div>
             <div className="input textarea">
-              <label htmlFor="edit-password-form-description"><Trans>Description</Trans>&nbsp;
+              <label htmlFor="edit-password-form-description"><Trans>Description</Trans>
                 {!this.areResourceTypesEnabled() &&
-                <Tooltip message={this.translate("Do not store sensitive data. Unlike the password, this data is not encrypted. Upgrade to version 3 to encrypt this information.")}
-                  icon="info-circle"/>
+                <Tooltip message={this.translate("Do not store sensitive data. Unlike the password, this data is not encrypted. Upgrade to version 3 to encrypt this information.")}>
+                  <Icon name="info-circle"/>
+                </Tooltip>
                 }
                 {this.areResourceTypesEnabled() && !this.state.encryptDescription &&
                 <a role="button" onClick={this.handleDescriptionToggle} className="lock-toggle">
-                  <Tooltip message={this.translate("Do not store sensitive data or click here to enable encryption for the description field.")} icon="lock-open" />
+                  <Tooltip message={this.translate("Do not store sensitive data or click here to enable encryption for the description field.")}>
+                    <Icon name="lock-open"/>
+                  </Tooltip>
                 </a>
                 }
                 {this.areResourceTypesEnabled() && this.state.encryptDescription &&
                 <a role="button" onClick={this.handleDescriptionToggle} className="lock-toggle">
-                  <Tooltip message={this.translate("The description content will be encrypted.")} icon="lock" />
+                  <Tooltip message={this.translate("The description content will be encrypted.")}>
+                    <Icon name="lock"/>
+                  </Tooltip>
                 </a>
                 }
               </label>
@@ -797,8 +729,8 @@ class EditResource extends Component {
             </div>
           </div>
           <div className="submit-wrapper clearfix">
-            <FormSubmitButton value={this.translate("Save")} disabled={this.hasAllInputDisabled() || this.isPasswordDisabled() || this.isDescriptionDisabled()} processing={this.hasAllInputDisabled()}/>
             <FormCancelButton disabled={this.hasAllInputDisabled() || this.isPasswordDisabled() || this.isDescriptionDisabled()} onClick={this.handleClose}/>
+            <FormSubmitButton value={this.translate("Save")} disabled={this.hasAllInputDisabled() || this.isPasswordDisabled() || this.isDescriptionDisabled()} processing={this.hasAllInputDisabled()}/>
           </div>
         </form>
       </DialogWrapper>

package/src/react-extension/components/Resource/EditResource/EditResource.test.data.js

@@ -109,9 +109,9 @@ export function defaultProps() {
         ]
       }
     },
-    onClose: jest.fn(),
+    onClose: () => {},
     dialogContext: {
-      open: jest.fn()
+      open: () => {}
     }
   };
 }

package/src/react-extension/components/Resource/EditResource/EditResource.test.js

@@ -29,6 +29,9 @@ beforeEach(() => {
 describe("See the Edit Resource", () => {
   let page; // The page to test against
   const props = defaultProps(); // The props to pass
+  props.onClose = jest.fn();
+  props.dialogContext.open = jest.fn();
+
   const passwordEditDialogProps = {
     id: "8e3874ae-4b40-590b-968a-418f704b9d9a"
   };
@@ -68,11 +71,12 @@ describe("See the Edit Resource", () => {
       expect(passwordInputStyle.color).toBe("");
 
       // Complexity label exists but is not yet defined.
-      expect(page.passwordEdit.complexityText.textContent).toBe("Complexity: n/aEntropy: 0.0 bits");
+      expect(page.passwordEdit.complexityText.textContent).toBe("Quality");
 
       // Password view button exists.
       expect(page.passwordEdit.passwordViewButton).not.toBeNull();
-      expect(page.passwordEdit.passwordViewButton.classList.contains("selected")).toBe(false);
+      expect(page.passwordEdit.passwordViewButton.classList.contains("eye-open")).toBe(true);
+      expect(page.passwordEdit.passwordViewButton.classList.contains("eye-close")).toBe(false);
 
       // Password generate button exists.
       expect(page.passwordEdit.passwordGenerateButton).not.toBeNull();
@@ -81,7 +85,7 @@ describe("See the Edit Resource", () => {
       expect(page.passwordEdit.description.value).toBe(mockResource.description);
 
       // Save button exists
-      expect(page.passwordEdit.saveButton.value).toBe("Save");
+      expect(page.passwordEdit.saveButton.textContent).toBe("Save");
 
       // Cancel button exists
       expect(page.passwordEdit.cancelButton.textContent).toBe("Cancel");
@@ -91,31 +95,33 @@ describe("See the Edit Resource", () => {
     it('generates password when clicking on the generate button.', async() => {
       page.passwordEdit.focusInput(page.passwordEdit.password);
       await waitFor(() => {
-        expect(page.passwordEdit.password.classList).toContain("decrypted");
+        expect(page.passwordEdit.password.disabled).toBeFalsy();
       });
       await page.passwordEdit.click(page.passwordEdit.passwordGenerateButton);
-      expect(page.passwordEdit.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
+      expect(page.passwordEdit.complexityText.textContent).not.toBe("n/a (entropy: 0.0 bits)");
       expect(page.passwordEdit.progressBar.classList.contains("not_available")).toBe(false);
     });
 
     it('views password when clicking on the view button.', async() => {
       const passwordValue = "secret-decrypted";
       // View password
-      await page.passwordEdit.click(page.passwordEdit.passwordViewButton);
       await waitFor(() => {
-        expect(page.passwordEdit.password.classList).toContain("decrypted");
+        expect(page.passwordEdit.password.disabled).toBeFalsy();
       });
+      await page.passwordEdit.click(page.passwordEdit.passwordViewButton);
       expect(page.passwordEdit.password.value).toBe(passwordValue);
       let passwordInputType = page.passwordEdit.password.getAttribute("type");
       expect(passwordInputType).toBe("text");
-      expect(page.passwordEdit.passwordViewButton.classList.contains("selected")).toBe(true);
+      expect(page.passwordEdit.passwordViewButton.classList.contains("eye-open")).toBe(false);
+      expect(page.passwordEdit.passwordViewButton.classList.contains("eye-close")).toBe(true);
 
       // Hide password
       await page.passwordEdit.click(page.passwordEdit.passwordViewButton);
       expect(page.passwordEdit.password.value).toBe(passwordValue);
       passwordInputType = page.passwordEdit.password.getAttribute("type");
       expect(passwordInputType).toBe("password");
-      expect(page.passwordEdit.passwordViewButton.classList.contains("selected")).toBe(false);
+      expect(page.passwordEdit.passwordViewButton.classList.contains("eye-open")).toBe(true);
+      expect(page.passwordEdit.passwordViewButton.classList.contains("eye-close")).toBe(false);
     });
 
     it('requests the addon to edit a resource with encrypted description when clicking on the submit button.', async() => {
@@ -134,12 +140,12 @@ describe("See the Edit Resource", () => {
       page.passwordEdit.fillInput(page.passwordEdit.username, resourceMeta.username);
       page.passwordEdit.focusInput(page.passwordEdit.password);
       await waitFor(() => {
-        expect(page.passwordEdit.password.classList).toContain("decrypted");
+        expect(page.passwordEdit.password.disabled).toBeTruthy();
       });
       page.passwordEdit.fillInput(page.passwordEdit.password, resourceMeta.password);
       page.passwordEdit.blurInput(page.passwordEdit.password);
-      expect(page.passwordEdit.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
-      expect(page.passwordEdit.progressBar.classList.contains("not_available")).toBe(false);
+      expect(page.passwordEdit.complexityText.textContent).not.toBe("Quality");
+      expect(page.passwordEdit.progressBar.classList.contains("error")).toBe(false);
       page.passwordEdit.fillInput(page.passwordEdit.description, resourceMeta.description);
 
       const requestMockImpl = jest.fn();

package/src/react-extension/components/Resource/EditResource/EditResource.test.page.js

@@ -200,7 +200,7 @@ class PasswordEditPageObject {
    * Returns the password view button element
    */
   get passwordViewButton() {
-    return this._container.querySelector('.password-view.button');
+    return this._container.querySelector('.password-view.button .svg-icon');
   }
 
   /**
@@ -221,7 +221,7 @@ class PasswordEditPageObject {
    * Returns the save button element
    */
   get saveButton() {
-    return this._container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**

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

@@ -1,7 +1,9 @@
-import {defaultAppContext} from "./EditResource.test.data";
+import React from "react";
+import {MemoryRouter, Route} from "react-router-dom";
+import {defaultProps} from "./EditResource.test.data";
 import EditResource from "./EditResource";
-import {EditResourcePageTemplate} from "./EditResource.test.page";
-
+import AppContext from "../../../contexts/AppContext";
+import PropTypes from "prop-types";
 
 /**
  * EditResource stories
@@ -11,7 +13,19 @@ export default {
   component: EditResource
 };
 
+const props = defaultProps();
+props.context.setContext = () => {};
+
+const Template = ({context, ...args}) =>
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <EditResource {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
-const Template = () => EditResourcePageTemplate(defaultAppContext(), {});
+Template.propTypes = {
+  context: PropTypes.object
+};
 
 export const Initial = Template.bind({});
+Initial.args = {...props};

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

@@ -24,6 +24,7 @@ import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import ExportResourcesCredentials from "./ExportResourcesCredentials";
 import {Trans, withTranslation} from "react-i18next";
+import Select from "../../Common/Select/Select";
 
 /**
  * This component allows to export resources to a specified format
@@ -248,20 +249,18 @@ class ExportResources extends React.Component {
   /**
    * Whenever the export has been performed with failure
    */
-  async onExportFailure(error) {
+  onExportFailure(error) {
     const isUserAbortsOperation = error.name === "UserAbortsOperationError";
     if (isUserAbortsOperation) {
-      await this.setState({actions: {processing: false}});
+      this.setState({actions: {processing: false}});
       return;
     }
 
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    await this.setState({actions: {processing: false}});
-    await this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.setState({actions: {processing: false}});
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -297,23 +296,14 @@ class ExportResources extends React.Component {
 
           <div className="form-content">
 
-            <div className="input select required">
+            <div className="select-wrapper input required">
               <label htmlFor="export-format"><Trans>Choose the export format (csv and kdbx are supported)</Trans></label>
-              <select
+              <Select
                 id="export-format"
                 value={this.state.selectedExportFormat}
+                items={this.exportFormats}
                 onChange={this.handleExportFormatSelected}
-                disabled={!this.areActionsAllowed}>
-                {
-                  this.exportFormats.map(format =>
-                    <option
-                      key={format.value}
-                      value={format.value}>
-                      {format.label}
-                    </option>
-                  )
-                }
-              </select>
+                disabled={!this.areActionsAllowed}/>
             </div>
             <p>
               {this.hasFoldersToExport && !this.hasResourcesToExport &&
@@ -329,14 +319,14 @@ class ExportResources extends React.Component {
           </div>
 
           <div className="submit-wrapper clearfix">
-            <FormSubmitButton
-              disabled={!this.areActionsAllowed}
-              processing={this.isProcessing}
-              value={this.translate("Export")}/>
             <FormCancelButton
               disabled={!this.areActionsAllowed}
               processing={this.isProcessing}
               onClick={this.handleCancel}/>
+            <FormSubmitButton
+              disabled={!this.areActionsAllowed}
+              processing={this.isProcessing}
+              value={this.translate("Export")}/>
           </div>
 
         </form>