passbolt-styleguide 3.5.3 → 3.6.0-beta1

package/src/react-extension/components/Administration/DisplaySimulateSynchronizeUserDirectoryAdministration/DisplaySimulateSynchronizeUserDirectoryAdministration.js

@@ -15,7 +15,7 @@ import React, {Component} from "react";
 import PropTypes from "prop-types";
 import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
 import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import DisplayLoadingDialog from "../DisplayLoadingDialog/DisplayLoadingDialog";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withAdministrationWorkspace} from "../../../contexts/AdministrationWorkspaceContext";
@@ -217,9 +217,7 @@ class DisplaySimulateSynchronizeUserDirectoryAdministration extends Component {
   getUsersFullReport() {
     let userFullReport = '';
     if (this.usersSuccess.length > 0 || this.usersError.length > 0 || this.usersIgnored.length > 0) {
-      const usersHeader = `---------------------------------------------------------------------\n
-      ${this.translate("Users")}\n
-      ---------------------------------------------------------------------\n`;
+      const usersHeader = `-----------------------------------------------\n${this.translate("Users")}\n-----------------------------------------------\n`;
       userFullReport = userFullReport.concat(usersHeader);
       const addMessage = user => userFullReport = userFullReport.concat(`- ${user.message}\n`);
       if (this.usersSuccess.length > 0) {
@@ -245,9 +243,7 @@ class DisplaySimulateSynchronizeUserDirectoryAdministration extends Component {
   getGroupsFullReport() {
     let groupFullReport = '';
     if (this.groupsSuccess.length > 0 || this.groupsError.length > 0 || this.groupsIgnored.length > 0) {
-      const groupsHeader = `---------------------------------------------------------------------\n
-       ${this.translate("Groups")}\n
-       ---------------------------------------------------------------------\n`;
+      const groupsHeader = `-----------------------------------------------\n${this.translate("Groups")}\n-----------------------------------------------\n`;
       groupFullReport = groupFullReport.concat(groupsHeader);
       const addMessage = group => groupFullReport = groupFullReport.concat(`- ${group.message}\n`);
       if (this.groupsSuccess.length > 0) {
@@ -305,9 +301,11 @@ class DisplaySimulateSynchronizeUserDirectoryAdministration extends Component {
             }
             <div className={`accordion operation-details ${this.state.openFullReport ? "" : "closed"}`}>
               <div className="accordion-header" onClick={this.handleFullReportClicked}>
-                {this.state.openListGroupsUsers && <Icon name="caret-down" baseline={true}/>}
-                {!this.state.openListGroupsUsers && <Icon name="caret-right" baseline={true}/>}
-                <a role="link"><Trans>Full report</Trans></a>
+                <a role="link">
+                  <Trans>Full report</Trans>
+                  {this.state.openFullReport && <Icon name="caret-down"/>}
+                  {!this.state.openFullReport && <Icon name="caret-right"/>}
+                </a>
               </div>
               <div className="accordion-content">
                 <div className="input text">
@@ -318,8 +316,8 @@ class DisplaySimulateSynchronizeUserDirectoryAdministration extends Component {
             <p></p>
           </div>
           <div className="submit-wrapper clearfix">
-            <a className={`button primary ${this.isLoading() ? "disabled" : ""}`} role="button" onClick={this.handleSynchronize}><Trans>Synchronize</Trans></a>
             <FormCancelButton disabled={this.isLoading()} onClick={this.handleClose}/>
+            <a className={`button primary ${this.isLoading() ? "disabled" : ""}`} role="button" onClick={this.handleSynchronize}><Trans>Synchronize</Trans></a>
           </div>
         </DialogWrapper>
         }

package/src/react-extension/components/Administration/DisplaySubscriptionKey/DisplaySubscriptionKey.js

@@ -20,8 +20,8 @@ import {Trans, withTranslation} from "react-i18next";
 import {withDialog} from "../../../../react-extension/contexts/DialogContext";
 import EditSubscriptionKey from "../EditSubscriptionKey/EditSubscriptionKey";
 import {withNavigationContext} from "../../../contexts/NavigationContext";
-import Icon from "../../Common/Icons/Icon";
-import AnimatedFeedback from "../../Common/Icons/AnimatedFeedback";
+import Icon from "../../../../shared/components/Icons/Icon";
+import AnimatedFeedback from "../../../../shared/components/Icons/AnimatedFeedback";
 
 /**
  * This component allows to display the subscription key for the administration
@@ -315,35 +315,35 @@ class DisplaySubscriptionKey extends React.Component {
     return (
       <div className="row">
         {!this.isLoading() &&
-        <div className="subscription-key col8">
+        <div className="subscription-key col8 main-column">
           <h3><Trans>Subscription key details</Trans></h3>
           <div className="feedback-card">
             {this.hasValidSubscription() && !this.hasSubscriptionKeyGoingToExpire() &&
             <AnimatedFeedback name="success" />
             }
             {this.hasInvalidSubscription() &&
-            <AnimatedFeedback name="warning" />
+            <AnimatedFeedback name="error" />
             }
             {this.hasValidSubscription() && this.hasSubscriptionKeyGoingToExpire() &&
-            <AnimatedFeedback name="error" />
+            <AnimatedFeedback name="warning" />
             }
             <div className="subscription-information">
               {!this.hasSubscriptionKey() &&
               <>
-                <h4><Trans>Your subscription key is either missing or not valid.</Trans></h4>
+                <h4 className="no-border"><Trans>Your subscription key is either missing or not valid.</Trans></h4>
                 <p><Trans>Sorry your subscription is either missing or not readable.</Trans><br/>
                   <Trans>Update the subscription key and try again.</Trans> <Trans>If this does not work get in touch with support.</Trans>
                 </p>
               </>
               }
               {this.hasValidSubscription() && this.hasSubscriptionKeyGoingToExpire() &&
-              <h4><Trans>Your subscription key is going to expire.</Trans></h4>
+              <h4 className="no-border"><Trans>Your subscription key is going to expire.</Trans></h4>
               }
               {this.hasSubscriptionKey() && this.hasInvalidSubscription() &&
-              <h4><Trans>Your subscription key is not valid.</Trans></h4>
+              <h4 className="no-border"><Trans>Your subscription key is not valid.</Trans></h4>
               }
               {this.hasValidSubscription() && !this.hasSubscriptionKeyGoingToExpire() &&
-              <h4><Trans>Your subscription key is valid and up to date!</Trans></h4>
+              <h4 className="no-border"><Trans>Your subscription key is valid and up to date!</Trans></h4>
               }
               {this.hasSubscriptionKey() &&
               <ul>
@@ -378,19 +378,19 @@ class DisplaySubscriptionKey extends React.Component {
               </ul>
               }
               {this.hasSubscriptionToRenew() &&
-              <>
+              <div className="actions-wrapper">
                 {this.hasSubscriptionKey() &&
-                <a className="button primary big" role="button" onClick={this.handleRenewKey}>
+                <button className="button primary" type="button" onClick={this.handleRenewKey}>
                   <Trans>Renew key</Trans>
-                </a>
+                </button>
                 }
                 {!this.hasSubscriptionKey() &&
-                <a className="button primary big" role="button" onClick={this.handleUpdateKey}>
+                <button className="button primary" type="button" onClick={this.handleUpdateKey}>
                   <Trans>Update key</Trans>
-                </a>
+                </button>
                 }
                 <a target="_blank" rel="noopener noreferrer" href="https://www.passbolt.com/contact"><Trans>or, contact us</Trans></a>
-              </>
+              </div>
               }
             </div>
           </div>

package/src/react-extension/components/Administration/DisplaySubscriptionKey/DisplaySubscriptionKey.test.data.js

@@ -5,8 +5,8 @@
 import MockPort from "../../../test/mock/MockPort";
 import {DateTime} from "luxon";
 
-export function defaultProps() {
-  return {
+export function defaultProps(props) {
+  const defaultProps = {
     context: {
       port: new MockPort(),
       onGetSubscriptionKeyRequested: () => mockSubscription,
@@ -25,6 +25,7 @@ export function defaultProps() {
       onGoToNewTab: jest.fn()
     }
   };
+  return Object.assign(defaultProps, props || {});
 }
 
 /**
@@ -43,13 +44,16 @@ export function formatDate(date) {
 const expiredDate = new Date();
 expiredDate.setMonth(expiredDate.getMonth() + 3);
 
+const goingToExpireDate = new Date();
+goingToExpireDate.setDate(goingToExpireDate.getDate() + 3);
+
 export const mockSubscription = {
   "customer_id": "1n6BPvHRWfizhmARz",
   "subscription_id": "1n6BPvHRWfizhmARz",
   "users": 5,
   "email": "ada@passbolt.com",
   "created": "2020-12-01",
-  "expiry": formatDate(expiredDate.toISOString()),
+  "expiry": expiredDate.toISOString(),
   "data": "data"
 };
 
@@ -63,6 +67,16 @@ export const mockSubscriptionUsersExceeded = {
   "data": "data"
 };
 
+export const mockSubscriptionGoingToExpire = {
+  "customer_id": "1n6BPvHRWfizhmARz",
+  "subscription_id": "1n6BPvHRWfizhmARz",
+  "users": 5,
+  "email": "ada@passbolt.com",
+  "created": "2019-12-01",
+  "expiry":  goingToExpireDate.toISOString(),
+  "data": "data"
+};
+
 export const mockSubscriptionExpired = {
   "customer_id": "1n6BPvHRWfizhmARz",
   "subscription_id": "1n6BPvHRWfizhmARz",

package/src/react-extension/components/Administration/DisplaySubscriptionKey/DisplaySubscriptionKey.test.page.js

@@ -66,14 +66,14 @@ export default class DisplaySubscriptionKeyPage {
    * Returns the enew Key button element
    */
   get renewKeyButton() {
-    return this._page.container.querySelector('.subscription-information a.button');
+    return this._page.container.querySelector('.subscription-information button');
   }
 
   /**
    * Returns the contact us element
    */
   get contactUs() {
-    return this._page.container.querySelectorAll('.subscription-information a')[1];
+    return this._page.container.querySelector('.subscription-information a');
   }
 
   /**

package/src/react-extension/components/Administration/DisplaySubscriptionKey/DisplaySubscriptionKey.test.stories.js

@@ -0,0 +1,71 @@
+import React from "react";
+import DisplaySubscriptionKey from "./DisplaySubscriptionKey";
+import {
+  defaultProps,
+  mockSubscriptionExpired, mockSubscriptionGoingToExpire,
+  mockSubscriptionUsersExceeded,
+  mockUsers
+} from "./DisplaySubscriptionKey.test.data";
+
+
+export default {
+  title: 'Passbolt/Administration/DisplaySubscriptionKey',
+  component: DisplaySubscriptionKey
+};
+
+const Template = args =>
+  <div className="grid grid-responsive-12">
+    <DisplaySubscriptionKey {...args}/>
+  </div>;
+
+export const Initial = Template.bind({});
+Initial.args = defaultProps();
+
+const propsSubscriptionGoingToExpire = {
+  context: {
+    port: {
+      request: () => mockUsers
+    },
+    onGetSubscriptionKeyRequested: () => mockSubscriptionGoingToExpire,
+    setContext: jest.fn()
+  }
+};
+export const SubscriptionGoingToExpire = Template.bind({});
+SubscriptionGoingToExpire.args = defaultProps(propsSubscriptionGoingToExpire);
+
+const propsSubscriptionExpired = {
+  context: {
+    port: {
+      request: () => mockUsers
+    },
+    onGetSubscriptionKeyRequested: () => mockSubscriptionExpired,
+    setContext: jest.fn()
+  }
+};
+export const SubscriptionExpired = Template.bind({});
+SubscriptionExpired.args = defaultProps(propsSubscriptionExpired);
+
+const propsSubscriptionUsersExceeded = {
+  context: {
+    port: {
+      request: () => mockUsers
+    },
+    onGetSubscriptionKeyRequested: () => mockSubscriptionUsersExceeded,
+    setContext: jest.fn()
+  }
+};
+export const SubscriptionUsersExceeded = Template.bind({});
+SubscriptionUsersExceeded.args = defaultProps(propsSubscriptionUsersExceeded);
+
+
+const propsNoSubscriptionKey = {
+  context: {
+    port: {
+      request: () => mockUsers
+    },
+    onGetSubscriptionKeyRequested: () => {},
+    setContext: jest.fn()
+  }
+};
+export const NoSubscriptionKey = Template.bind({});
+NoSubscriptionKey.args = defaultProps(propsNoSubscriptionKey);

package/src/react-extension/components/Administration/DisplaySynchronizeUserDirectoryAdministration/DisplaySynchronizeUserDirectoryAdministration.js

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import DisplayLoadingDialog from "../DisplayLoadingDialog/DisplayLoadingDialog";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withAdministrationWorkspace} from "../../../contexts/AdministrationWorkspaceContext";
@@ -215,9 +215,7 @@ class DisplaySynchronizeUserDirectoryAdministration extends Component {
   getUsersFullReport() {
     let userFullReport = '';
     if (this.usersSuccess.length > 0 || this.usersError.length > 0 || this.usersIgnored.length > 0) {
-      const usersHeader = `---------------------------------------------------------------------\n
-      ${this.translate("Users")}\n
-      ---------------------------------------------------------------------\n`;
+      const usersHeader = `-----------------------------------------------\n${this.translate("Users")}\n-----------------------------------------------\n`;
       userFullReport = userFullReport.concat(usersHeader);
       const addMessage = user => userFullReport = userFullReport.concat(`- ${user.message}\n`);
       if (this.usersSuccess.length > 0) {
@@ -243,9 +241,7 @@ class DisplaySynchronizeUserDirectoryAdministration extends Component {
   getGroupsFullReport() {
     let groupFullReport = '';
     if (this.groupsSuccess.length > 0 || this.groupsError.length > 0 || this.groupsIgnored.length > 0) {
-      const groupsHeader = `---------------------------------------------------------------------\n
-       ${this.translate("Groups")}\n
-       ---------------------------------------------------------------------\n`;
+      const groupsHeader = `-----------------------------------------------\n${this.translate("Groups")}\n-----------------------------------------------\n`;
       groupFullReport = groupFullReport.concat(groupsHeader);
       const addMessage = group => groupFullReport = groupFullReport.concat(`- ${group.message}\n`);
       if (this.groupsSuccess.length > 0) {
@@ -303,9 +299,11 @@ class DisplaySynchronizeUserDirectoryAdministration extends Component {
             }
             <div className={`accordion operation-details ${this.state.openFullReport ? "" : "closed"}`}>
               <div className="accordion-header" onClick={this.handleFullReportClicked}>
-                {this.state.openListGroupsUsers && <Icon name="caret-down" baseline={true}/>}
-                {!this.state.openListGroupsUsers && <Icon name="caret-right" baseline={true}/>}
-                <a role="link"><Trans>Full report</Trans></a>
+                <a role="link">
+                  <Trans>Full report</Trans>
+                  {this.state.openFullReport && <Icon name="caret-down"/>}
+                  {!this.state.openFullReport && <Icon name="caret-right"/>}
+                </a>
               </div>
               <div className="accordion-content">
                 <div className="input text">

package/src/react-extension/components/Administration/DisplayTestUserDirectoryAdministration/DisplayTestUserDirectoryAdministration.js

@@ -15,7 +15,7 @@ import React, {Component} from "react";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
 import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import DisplayStructureGroupsUsersTreeItem from "./DisplayStructureGroupsUsersTreeItem";
 import {Trans, withTranslation} from "react-i18next";
 
@@ -172,9 +172,11 @@ class DisplayTestUserDirectoryAdministration extends Component {
             </p>
             <div className={`accordion directory-list ${this.state.openListGroupsUsers ? "" : "closed"}`}>
               <div className="accordion-header" onClick={this.handleListGroupsUsersClicked}>
-                {this.state.openListGroupsUsers && <Icon name="caret-down" baseline={true}/>}
-                {!this.state.openListGroupsUsers && <Icon name="caret-right" baseline={true}/>}
-                <a role="link"><Trans>See list</Trans></a>
+                <a role="link">
+                  <Trans>See list</Trans>
+                  {this.state.openListGroupsUsers && <Icon name="caret-down" baseline={true}/>}
+                  {!this.state.openListGroupsUsers && <Icon name="caret-right" baseline={true}/>}
+                </a>
               </div>
               <div className="accordion-content">
                 <table>
@@ -208,9 +210,11 @@ class DisplayTestUserDirectoryAdministration extends Component {
             </div>
             <div className={`accordion accordion-directory-structure ${this.state.openStructureGroupsUsers ? "" : "closed"}`}>
               <div className="accordion-header" onClick={this.handleStructureGroupsUsersClicked}>
-                {this.state.openStructureGroupsUsers && <Icon name="caret-down" baseline={true}/>}
-                {!this.state.openStructureGroupsUsers && <Icon name="caret-right" baseline={true}/>}
-                <a role="link"><Trans>See structure</Trans></a>
+                <a role="link">
+                  <Trans>See structure</Trans>
+                  {this.state.openStructureGroupsUsers && <Icon name="caret-down" baseline={true}/>}
+                  {!this.state.openStructureGroupsUsers && <Icon name="caret-right" baseline={true}/>}
+                </a>
               </div>
               <div className="accordion-content">
                 <div className="directory-structure">
@@ -231,9 +235,11 @@ class DisplayTestUserDirectoryAdministration extends Component {
               <p className="directory-errors error">{this.translate("{{count}} entry had errors and will be ignored during synchronization.", {count: this.errors.length})}</p>
               <div className={`accordion accordion-directory-errors ${this.state.openErrors ? "" : "closed"}`}>
                 <div className="accordion-header" onClick={this.handleErrorsClicked}>
-                  {this.state.openErrors && <Icon name="caret-down" baseline={true}/>}
-                  {!this.state.openErrors && <Icon name="caret-right" baseline={true}/>}
-                  <a role="link"><Trans>See error details</Trans></a>
+                  <a role="link">
+                    <Trans>See error details</Trans>
+                    {this.state.openErrors && <Icon name="caret-down" baseline={true}/>}
+                    {!this.state.openErrors && <Icon name="caret-right" baseline={true}/>}
+                  </a>
                 </div>
                 <div className="accordion-content">
                   <div className="directory-errors">