passbolt-styleguide 3.5.3 → 3.6.0-beta1

package/src/react-extension/components/Share/ShareDialog.test.js

@@ -48,6 +48,7 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I see a success toaster message after sharing resources to users and groups with success', async() => {
+      expect.assertions(19);
       expect(context.port.request).toHaveBeenCalledWith('passbolt.share.get-resources', shareDialogProps.resourcesIds);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share 3 resources');
@@ -70,7 +71,7 @@ describe("As Lu I should see the share dialog", () => {
       expect(page.aroDetails(3)).toBe('Group');
       expect(page.aroName(12)).toBe('Administrator');
       expect(page.aroDetails(12)).toBe('Group');
-      expect(page.selectRights(12).value).toBe('1');
+      expect(page.selectRights(12).textContent).toBe('can read');
 
       const requestMockImpl = jest.fn();
       mockContextRequest(requestMockImpl);
@@ -89,6 +90,7 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I can remove a permission', async() => {
+      expect.assertions(2);
       expect(page.count).toBe(11);
       await page.selectRemovePermission(1);
       expect(page.count).toBe(10);
@@ -113,8 +115,8 @@ describe("As Lu I should see the share dialog", () => {
       // API calls are made on submit, wait they are resolved.
       await waitFor(() => {
         expect(page.shareNameInput.getAttribute("disabled")).not.toBeNull();
-        expect(page.selectRights(1).getAttribute("disabled")).not.toBeNull();
-        expect(page.removeAro(1).className).toBe('remove-item disabled');
+        expect(page.selectRights(1).className).toBe("selected-value disabled");
+        expect(page.removeAro(1).className).toBe('remove-item button button-transparent disabled');
         expect(page.cancelButton.className).toBe('cancel disabled');
         expect(page.saveButton.getAttribute("disabled")).not.toBeNull();
         expect(page.saveButton.className).toBe("button primary disabled processing");
@@ -123,30 +125,35 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I shouldn’t be able to submit the form if there is no owner', async() => {
-      await page.selectCanReadRights(1);
+      expect.assertions(2);
+      await page.selectFirstItemRights(1);
       expect(page.errorMessage).toBe('Please make sure there is at least one owner.');
       expect(page.saveButton.getAttribute("disabled")).not.toBeNull();
     });
 
     it('As LU I can stop sharing resources by clicking on the cancel button', async() => {
+      expect.assertions(2);
       expect(page.exists()).toBeTruthy();
       await page.click(page.cancelButton);
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop sharing resources by closing the dialog', async() => {
+      expect.assertions(2);
       expect(page.exists()).toBeTruthy();
       await page.click(page.dialogClose);
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop sharing resources with the keyboard (escape)', async() => {
+      expect.assertions(2);
       expect(page.exists()).toBeTruthy();
       await page.escapeKey(page.dialogClose);
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I should see an error dialog if the submit operation fails for an unexpected reason', async() => {
+      expect.assertions(2);
       const requestAutocompleteResultMockImpl = jest.fn(() => autocompleteResult);
       mockContextRequest(requestAutocompleteResultMockImpl);
       await page.searchName("adm");
@@ -154,14 +161,15 @@ describe("As Lu I should see the share dialog", () => {
       await page.selectUserOrGroup(1);
 
       // Mock the request function to make it return an error.
+      const error = new PassboltApiFetchError("Jest simulate API error.");
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => {
-        throw new PassboltApiFetchError("Jest simulate API error.");
+        throw error;
       });
 
       await page.savePermissions();
 
       // Throw general error message
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
   });
 
@@ -180,6 +188,7 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I see a success toaster message after sharing one resource to users and groups with success', async() => {
+      expect.assertions(13);
       expect(context.port.request).toHaveBeenCalledWith('passbolt.share.get-resources', shareDialogProps.resourcesIds);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share resource');
@@ -195,7 +204,7 @@ describe("As Lu I should see the share dialog", () => {
       expect(page.count).toBe(12);
       expect(page.aroName(12)).toBe('Administrator');
       expect(page.aroDetails(12)).toBe('Group');
-      expect(page.selectRights(12).value).toBe('1');
+      expect(page.selectRights(12).textContent).toBe('can read');
 
       const requestMockImpl = jest.fn();
       mockContextRequest(requestMockImpl);
@@ -229,6 +238,7 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I see a success toaster message after sharing one folder to users and groups with success', async() => {
+      expect.assertions(13);
       expect(context.port.request).toHaveBeenCalledWith('passbolt.share.get-folders', shareDialogProps.foldersIds);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share folder');
@@ -244,7 +254,7 @@ describe("As Lu I should see the share dialog", () => {
       expect(page.count).toBe(3);
       expect(page.aroName(3)).toBe('Admin User');
       expect(page.aroDetails(3)).toBe('admin@passbolt.com');
-      expect(page.selectRights(3).value).toBe('1');
+      expect(page.selectRights(3).textContent).toBe('can read');
 
       const requestMockImpl = jest.fn();
       mockContextRequest(requestMockImpl);
@@ -276,6 +286,7 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I see a error dialog message after try to sharing folders and resources at the same time', async() => {
+      expect.assertions(4);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share 2 items');
 
@@ -287,7 +298,7 @@ describe("As Lu I should see the share dialog", () => {
 
       await page.savePermissions();
       // Throw general error message
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: new Error("Multi resource and folder share is not implemented.")});
     });
   });
 });

package/src/react-extension/components/Share/ShareDialog.test.page.js

@@ -121,7 +121,15 @@ export default class ShareDialogPage {
    * @param index the display of the permission
    */
   selectRights(index) {
-    return this._page.container.querySelectorAll('.permissions .row')[index - 1].querySelector('.select.rights select');
+    return this._page.container.querySelectorAll('.permissions .row')[index - 1].querySelector('.select .selected-value');
+  }
+
+  /**
+   * Returns the select item rights for the 'index' one
+   * @param index the display of the permission
+   */
+  selectFirstItem(index) {
+    return this._page.container.querySelectorAll('.permissions .row')[index - 1].querySelector('.select .option');
   }
 
   /**
@@ -136,7 +144,7 @@ export default class ShareDialogPage {
    * Returns the save button element
    */
   get saveButton() {
-    return this._page.container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._page.container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**
@@ -191,8 +199,9 @@ export default class ShareDialogPage {
   }
 
   /** Select is owner rights */
-  async selectCanReadRights(index) {
-    await this.fillInput(this.selectRights(index), "1");
+  async selectFirstItemRights(index) {
+    await this.click(this.selectRights(index));
+    await this.click(this.selectFirstItem(index));
   }
 
   /** Save permissions */

package/src/react-extension/components/Share/ShareDialog.test.stories.js

@@ -12,7 +12,7 @@ export default {
 
 const context = {
   userSettings: {
-    getTrustedDomain: () => "some url"
+    getTrustedDomain: () => (new URL(window.location.href)).origin
   },
   shareDialogProps: {
     resourcesIds: resources.map(resource => resource.id)
@@ -26,7 +26,8 @@ const context = {
           return autocompleteResult;
       }
     }
-  }
+  },
+  setContext: () => {}
 };
 
 
@@ -40,7 +41,8 @@ const Template = args =>
 
 export const Initial = Template.bind({});
 Initial.args = {
-  context: context
+  context: context,
+  onClose: () => {}
 };
 
 export const Loading = Template.bind({});

package/src/react-extension/components/Share/SharePermissionDeleteButton.js

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 
-import Icon from "../Common/Icons/Icon";
+import Icon from "../../../shared/components/Icons/Icon";
 
 class SharePermissionDeleteButton extends Component {
   handleCloseClick() {
@@ -22,7 +22,7 @@ class SharePermissionDeleteButton extends Component {
   }
 
   getClassName() {
-    let className = 'remove-item';
+    let className = 'remove-item button button-transparent';
     if (this.props.disabled) {
       className += ' disabled';
     }
@@ -32,7 +32,7 @@ class SharePermissionDeleteButton extends Component {
   render() {
     return (
       <a className={this.getClassName()} onClick={this.handleCloseClick.bind(this)} role="button">
-        <Icon name='close-circle' />
+        <Icon name='close' />
         <span className="visually-hidden">Remove</span>
       </a>
     );

package/src/react-extension/components/Share/SharePermissionItem.js

@@ -15,12 +15,14 @@ import React, {Component} from "react";
 import PropTypes from "prop-types";
 
 import SharePermissionDeleteButton from "./SharePermissionDeleteButton";
-import TooltipHtml from "../Common/Tooltip/TooltipHtml";
 import ShareVariesDetails from "./ShareVariesDetails";
 import {withAppContext} from "../../contexts/AppContext";
 import UserAvatar from "../Common/Avatar/UserAvatar";
 import GroupAvatar from "../Common/Avatar/GroupAvatar";
 import {withTranslation} from "react-i18next";
+import Icon from "../../../shared/components/Icons/Icon";
+import Tooltip from "../Common/Tooltip/Tooltip";
+import Select from "../Common/Select/Select";
 
 class SharePermissionItem extends Component {
   /**
@@ -70,9 +72,9 @@ class SharePermissionItem extends Component {
 
   getSelectClassName() {
     if (this.isInputDisabled()) {
-      return 'permission disabled';
+      return 'permission inline disabled';
     }
-    return 'permission';
+    return 'permission inline';
   }
 
   getAroName() {
@@ -117,6 +119,22 @@ class SharePermissionItem extends Component {
     this.props.onDelete(this.props.id);
   }
 
+  /**
+   * Get the permissions
+   * @returns {[{label: string, value: string}]}
+   */
+  get permissions() {
+    const permissions = [
+      {value: "1", label: this.translate("can read")},
+      {value: "7", label: this.translate("can update")},
+      {value: "15", label: this.translate("is owner")},
+    ];
+    if (this.props.variesDetails) {
+      permissions.push({value: "-1", label: this.translate("varies")});
+    }
+    return permissions;
+  }
+
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -144,26 +162,20 @@ class SharePermissionItem extends Component {
           </div>
         </div>
 
-        <div className="select rights">
-          <select name="permissionSelect"
+        {(this.props.variesDetails) &&
+          <Tooltip message={<ShareVariesDetails variesDetails={this.props.variesDetails} />} direction="left">
+            <Icon name="info-circle"/>
+          </Tooltip>
+        }
+
+        <div className="rights">
+          <Select name="permissionSelect"
             className={this.getSelectClassName()}
-            value={this.state.permissionType}
+            items={this.permissions}
+            value={this.state.permissionType.toString()}
             disabled={this.isInputDisabled()}
             onChange={this.handleUpdate}
-          >
-            <option value="1">{this.translate("can read")}</option>
-            <option value="7">{this.translate("can update")}</option>
-            <option value="15">{this.translate("is owner")}</option>
-            { (this.props.variesDetails) &&
-            <option value="-1">{this.translate("varies")}</option>
-            }
-          </select>
-
-          {(this.props.variesDetails) &&
-          <TooltipHtml offset={true}>
-            <ShareVariesDetails variesDetails={this.props.variesDetails} />
-          </TooltipHtml>
-          }
+          />
         </div>
 
         <div className="actions">

package/src/react-extension/components/User/ConfirmDisableUserMFA/ConfirmDisableUserMFA.js

@@ -112,14 +112,12 @@ class ConfirmDisableUserMFA extends Component {
   /**
    * Whenever the user MFA has been disabled with failure
    */
-  async onDisableMFAFailure(error) {
-    await this.setState({actions: {processing: false}});
+  onDisableMFAFailure(error) {
+    this.setState({actions: {processing: false}});
     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);
   }
 
   /**
@@ -162,14 +160,14 @@ class ConfirmDisableUserMFA extends Component {
           </div>
 
           <div className="submit-wrapper clearfix">
+            <FormCancelButton
+              disabled={this.areActionsDisabled}
+              onClick={this.handleClose}/>
             <FormSubmitButton
               value={this.translate("Disable MFA")}
               warning={true}
               processing={this.isProcessing}
               disabled={this.areActionsDisabled}/>
-            <FormCancelButton
-              disabled={this.areActionsDisabled}
-              onClick={this.handleClose}/>
           </div>
 
         </form>

package/src/react-extension/components/User/ConfirmDisableUserMFA/ConfirmDisableUserMFA.test.js

@@ -38,6 +38,7 @@ describe("See the Create Dialog User", () => {
     });
 
     it('As AD I should see a success toaster message after disabling a user MFA with success', async() => {
+      expect.assertions(2);
       mockContextRequest(context, () => Promise.resolve());
       jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(() => {});
       await page.confirm();
@@ -62,15 +63,18 @@ describe("See the Create Dialog User", () => {
     });
 
     it('As AD I should cancel the operation', async() => {
+      expect.assertions(1);
       await page.cancel();
       expect(props.onClose).toBeCalled();
     });
 
     it('As AD I should see an error message if the user MFA disabling goes wrong', async() => {
-      mockContextRequest(context, () => Promise.reject("Some error"));
+      expect.assertions(1);
+      const error = new Error("Some error");
+      mockContextRequest(context, () => Promise.reject(error));
       jest.spyOn(props.dialogContext, 'open').mockImplementation(() => {});
       await page.confirm();
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
   });
 });

package/src/react-extension/components/User/ConfirmDisableUserMFA/ConfirmDisableUserMFA.test.page.js

@@ -32,7 +32,7 @@ export default class ConfirmDisableUserMFATestPage {
    * Returns the confirm button element
    */
   get confirmButton() {
-    return this._page.container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._page.container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**

package/src/react-extension/components/User/ConfirmDisableUserMFA/ConfirmDisableUserMFA.test.stories.js

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import ConfirmDisableUserMFA from "./ConfirmDisableUserMFA";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -73,5 +74,9 @@ Initial.args = {
       "last_logged_in": "",
       is_mfa_enabled: false
     }]
+  },
+  onClose: () => {},
+  context: {
+    port: new MockPort()
   }
 };

package/src/react-extension/components/User/CreateUser/CreateUser.js

@@ -225,11 +225,9 @@ class CreateUser 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);
   }
 
   /**
@@ -410,9 +408,9 @@ class CreateUser extends Component {
               <div className="username error-message">{this.state.usernameError}</div>
               }
             </div>
-            <div className="input checkbox">
-              <label htmlFor="is_admin"><Trans>Role</Trans></label>
-              <div id="is_admin">
+            <div className="input checkbox-wrapper">
+              <label htmlFor="is_admin_checkbox"><Trans>Role</Trans></label>
+              <div className="input checkbox">
                 <input id="is_admin_checkbox" name="is_admin" onChange={this.handleCheckboxClick}
                   checked={this.state.is_admin} disabled={this.hasAllInputDisabled()} type="checkbox"/>
                 <label htmlFor="is_admin_checkbox"> <Trans>This user is an administrator</Trans></label>
@@ -423,8 +421,8 @@ class CreateUser extends Component {
             </div>
           </div>
           <div className="submit-wrapper clearfix">
-            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Save")}/>
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleClose}/>
+            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Save")}/>
           </div>
         </form>
       </DialogWrapper>

package/src/react-extension/components/User/CreateUser/CreateUser.test.page.js

@@ -161,14 +161,14 @@ class CreateUserPageObject {
    * 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\"]');
   }
 
   /**
    * Returns the save button processing element
    */
   get saveButtonProcessing() {
-    return this._container.querySelector('.submit-wrapper input[type=\"submit\"].processing');
+    return this._container.querySelector('.submit-wrapper button[type=\"submit\"].processing');
   }
 
   /**

package/src/react-extension/components/User/CreateUser/CreateUser.test.stories.js

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import CreateUser from "./CreateUser";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -10,10 +11,16 @@ export default {
   component: CreateUser
 };
 
-const context = {};
-
+const context = {
+  setContext: () => {},
+  roles: [
+    {name: "admin"},
+    {name: "user"}
+  ],
+  port: new MockPort()
+};
 
-const Template = args =>
+const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <Route component={routerProps => <CreateUser {...args} {...routerProps}/>}></Route>
@@ -25,6 +32,10 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  onClose: () => {}
+};
 Initial.parameters = {
   css: "api_main"
 };

package/src/react-extension/components/User/DeleteUser/DeleteUser.js

@@ -93,11 +93,9 @@ class DeleteUser 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);
   }
 
   /**
@@ -145,8 +143,8 @@ class DeleteUser extends Component {
             <p><Trans>Warning: This action can’t be undone. All the data associated with this user will be permanently deleted.</Trans></p>
           </div>
           <div className="submit-wrapper clearfix">
-            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Delete")} warning={true}/>
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleCloseClick}/>
+            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Delete")} warning={true}/>
           </div>
         </form>
       </DialogWrapper>

package/src/react-extension/components/User/DeleteUser/DeleteUser.test.js

@@ -58,7 +58,7 @@ describe("See Delete User Dialog", () => {
       expect(page.displayDeleteUserDialog.closeButton).not.toBeNull();
       // submit button
       expect(page.displayDeleteUserDialog.saveButton).not.toBeNull();
-      expect(page.displayDeleteUserDialog.saveButton.value).toBe('Delete');
+      expect(page.displayDeleteUserDialog.saveButton.textContent).toBe('Delete');
       // cancel button
       expect(page.displayDeleteUserDialog.cancelButton).not.toBeNull();
       expect(page.displayDeleteUserDialog.cancelButton.textContent).toBe('Cancel');

package/src/react-extension/components/User/DeleteUser/DeleteUser.test.stories.js

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DeleteUser from "./DeleteUser";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -50,11 +51,13 @@ const context = {
       "__placeholder_last_logged_in__": "",
       "last_logged_in": ""
     }
-  }
+  },
+  setContext: () => {},
+  port: new MockPort()
 };
 
 
-const Template = args =>
+const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <Route component={routerProps => <DeleteUser {...args} {...routerProps}/>}></Route>
@@ -66,3 +69,7 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  onClose: () => {}
+};