passbolt-styleguide 3.8.4 → 3.9.0-alpha2

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

@@ -18,10 +18,12 @@ import {DateTime} from "luxon";
 import {withAdministrationWorkspace} from "../../../contexts/AdministrationWorkspaceContext";
 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 "../../../../shared/components/Icons/Icon";
 import AnimatedFeedback from "../../../../shared/components/Icons/AnimatedFeedback";
+import SubscriptionActionService from '../../../../shared/services/actions/subscription/SubscriptionActionService';
+import DisplayAdministrationSubscriptionActions from "../DisplayAdministrationWorkspaceActions/DisplayAdministrationSubscriptionActions/DisplayAdministrationSubscriptionActions";
+import {withAdminSubscription} from "../../../contexts/Administration/AdministrationSubscription/AdministrationSubscription";
 
 /**
  * This component allows to display the subscription key for the administration
@@ -35,6 +37,7 @@ class DisplaySubscriptionKey extends React.Component {
     super(props);
     this.state = this.defaultState;
     this.bindCallbacks();
+    this.subscriptionActionService = SubscriptionActionService.getInstance(this.props);
   }
 
   /**
@@ -43,34 +46,31 @@ class DisplaySubscriptionKey extends React.Component {
    */
   get defaultState() {
     return {
-      loading: true, // component is loading or not
-
-      // Subscription Key
-      customerId: "", // Chargebee customer id
-      subscriptionId: "", // Chargebee subscription id
-      users: null, // The number of users the subscription is valid for
-      email: "", // The email used to manage the subscription
-      expiry: null, // The date when the license key expires
-      created: null, // The date when the license key was created
-      data: null, // Base64 encoded subscription, the original subscription key
-
       // active users
       activeUsers: null // The number of active users
     };
   }
 
+  /**
+   * ComponentDidMount
+   * Invoked immediately after component is inserted into the tree
+   * @return {void}
+   */
   async componentDidMount() {
+    this.props.administrationWorkspaceContext.setDisplayAdministrationWorkspaceAction(DisplayAdministrationSubscriptionActions);
     this.findActiveUsers();
-    this.findSubscriptionKey();
+    await this.findSubscriptionKey();
   }
 
   /**
-   * Whenever the component has updated in terms of props or state
-   * @param prevProps
+   * componentWillUnmount
+   * Use to clear the data from the form in case the user put something that needs to be cleared.
    */
-  async componentDidUpdate(prevProps) {
-    await this.handleMustRefreshSubscriptionKey(prevProps.administrationWorkspaceContext.must.refreshSubscriptionKey);
-    await this.handleMustEditSubscriptionKey(prevProps.administrationWorkspaceContext.must.editSubscriptionKey);
+  componentWillUnmount() {
+    this.props.administrationWorkspaceContext.resetDisplayAdministrationWorkspaceAction();
+    this.props.adminSubcriptionContext.clearContext();
+    SubscriptionActionService.killInstance();
+    this.mfaFormService = null;
   }
 
   /**
@@ -81,44 +81,11 @@ class DisplaySubscriptionKey extends React.Component {
     this.handleUpdateKey = this.handleUpdateKey.bind(this);
   }
 
-  /**
-   * Handle the must refresh subscription key
-   * @param previousRefreshSubscriptionKey Previous refresh subscription key
-   */
-  async handleMustRefreshSubscriptionKey(previousRefreshSubscriptionKey) {
-    const hasRefreshSubscriptionKeyChanged = this.props.administrationWorkspaceContext.must.refreshSubscriptionKey !== previousRefreshSubscriptionKey;
-    if (hasRefreshSubscriptionKeyChanged && this.props.administrationWorkspaceContext.must.refreshSubscriptionKey) {
-      await this.findActiveUsers();
-      await this.findSubscriptionKey();
-      this.props.administrationWorkspaceContext.onResetActionsSettings();
-    }
-  }
-
-  /**
-   * Handle the must edit subscription key
-   * @param previousEditSubscriptionKey Previous edit subscription key
-   */
-  async handleMustEditSubscriptionKey(previousEditSubscriptionKey) {
-    const hasEditSubscriptionKeyChanged = this.props.administrationWorkspaceContext.must.editSubscriptionKey !== previousEditSubscriptionKey;
-    if (hasEditSubscriptionKeyChanged && this.props.administrationWorkspaceContext.must.editSubscriptionKey) {
-      this.openEditSubscriptionKey();
-      this.props.administrationWorkspaceContext.onResetActionsSettings();
-    }
-  }
-
-  openEditSubscriptionKey() {
-    const editSubscriptionKey = {
-      key: this.state.data
-    };
-    this.props.context.setContext({editSubscriptionKey});
-    this.props.dialogContext.open(EditSubscriptionKey);
-  }
-
   /**
    * fetch the active users
    */
   async findActiveUsers() {
-    const activeUsers = await this.getActiveUsers();
+    const activeUsers = await this.props.adminSubcriptionContext.getActiveUsers();
     this.setState({activeUsers});
   }
 
@@ -126,69 +93,18 @@ class DisplaySubscriptionKey extends React.Component {
    * fetch the subscription key
    */
   async findSubscriptionKey() {
-    try {
-      const subscription = await this.props.context.onGetSubscriptionKeyRequested();
-      const customerId = subscription.customer_id;
-      const subscriptionId = subscription.subscription_id;
-      const users = subscription.users;
-      const email = subscription.email;
-      const expiry = subscription.expiry;
-      const created = subscription.created;
-      const data = subscription.data;
-
-      this.setState({
-        loading: false,
-        customerId,
-        subscriptionId,
-        users,
-        email,
-        expiry,
-        created,
-        data
-      });
-    } catch (error) {
-      this.handleSubscriptionError(error);
-    }
-  }
-
-  /**
-   * Handle subscription error
-   * @param error
-   */
-  handleSubscriptionError(error) {
-    if (error.name === "PassboltSubscriptionError") {
-      const subscription = error.subscription;
-      const customerId = subscription.customer_id || "N/A";
-      const subscriptionId = subscription.subscription_id;
-      const users = subscription.users;
-      const email = subscription.email || "N/A";
-      const expiry = subscription.expiry;
-      const created = subscription.created;
-      const data = subscription.data;
-
-      this.setState({
-        loading: false,
-        customerId,
-        subscriptionId,
-        users,
-        email,
-        expiry,
-        created,
-        data,
-      });
-    } else {
-      this.setState({loading: false});
-    }
+    this.props.adminSubcriptionContext.findSubscriptionKey();
   }
 
   /**
    * Handle renew key click event
    */
   handleRenewKey() {
+    const subscription = this.props.adminSubcriptionContext.getSubscription();
     if (this.hasLimitUsersExceeded()) {
-      this.props.navigationContext.onGoToNewTab(`https://www.passbolt.com/subscription/ee/update/qty?subscription_id=${this.state.subscriptionId}&customer_id=${this.state.customerId}`);
+      this.props.navigationContext.onGoToNewTab(`https://www.passbolt.com/subscription/ee/update/qty?subscription_id=${subscription.subscriptionId}&customer_id=${subscription.customerId}`);
     } else if (this.hasSubscriptionKeyExpired() || this.hasSubscriptionKeyGoingToExpire()) {
-      this.props.navigationContext.onGoToNewTab(`https://www.passbolt.com/subscription/ee/update/renew?subscription_id=${this.state.subscriptionId}&customer_id=${this.state.customerId}`);
+      this.props.navigationContext.onGoToNewTab(`https://www.passbolt.com/subscription/ee/update/renew?subscription_id=${subscription.subscriptionId}&customer_id=${subscription.customerId}`);
     }
   }
 
@@ -196,15 +112,7 @@ class DisplaySubscriptionKey extends React.Component {
    * Handle update key click event
    */
   handleUpdateKey() {
-    this.openEditSubscriptionKey();
-  }
-
-  /**
-   * True if state is loading
-   * @returns {boolean}
-   */
-  isLoading() {
-    return this.state.loading;
+    this.subscriptionActionService.editSubscription();
   }
 
   /**
@@ -212,7 +120,7 @@ class DisplaySubscriptionKey extends React.Component {
    * @returns {boolean}
    */
   hasSubscriptionKeyExpired() {
-    return DateTime.fromISO(this.state.expiry) < DateTime.now();
+    return DateTime.fromISO(this.props.adminSubcriptionContext.getSubscription().expiry) < DateTime.now();
   }
 
   /**
@@ -220,7 +128,7 @@ class DisplaySubscriptionKey extends React.Component {
    * @returns {boolean}
    */
   hasSubscriptionKeyGoingToExpire() {
-    return DateTime.fromISO(this.state.expiry) < DateTime.now().plus({days: 30}) && !this.hasSubscriptionKeyExpired();
+    return DateTime.fromISO(this.props.adminSubcriptionContext.getSubscription().expiry) < DateTime.now().plus({days: 30}) && !this.hasSubscriptionKeyExpired();
   }
 
   /**
@@ -228,7 +136,7 @@ class DisplaySubscriptionKey extends React.Component {
    * @returns {boolean}
    */
   hasSubscriptionKey() {
-    return Boolean(this.state.data);
+    return Boolean(this.props.adminSubcriptionContext.getSubscription().data);
   }
 
   /**
@@ -236,7 +144,8 @@ class DisplaySubscriptionKey extends React.Component {
    * @returns {boolean}
    */
   hasLimitUsersExceeded() {
-    return this.state.users < this.state.activeUsers;
+    const subscription = this.props.adminSubcriptionContext.getSubscription();
+    return subscription.users < this.state.activeUsers;
   }
 
   /**
@@ -288,17 +197,6 @@ class DisplaySubscriptionKey extends React.Component {
     return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative({locale: this.props.context.locale});
   }
 
-  /**
-   * Get active users
-   * @returns {*}
-   * @constructor
-   */
-  async getActiveUsers() {
-    const users = await this.props.context.port.request("passbolt.users.get-all");
-    const filterActiveUsers = user => user.active;
-    return users.filter(filterActiveUsers).length;
-  }
-
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -312,9 +210,11 @@ class DisplaySubscriptionKey extends React.Component {
    * @returns {JSX}
    */
   render() {
+    const subscription = this.props.adminSubcriptionContext.getSubscription();
+    const isProcessing = this.props.adminSubcriptionContext.isProcessing();
     return (
       <div className="row">
-        {!this.isLoading() &&
+        {!isProcessing &&
         <div className="subscription-key col8 main-column">
           <h3><Trans>Subscription key details</Trans></h3>
           <div className="feedback-card">
@@ -349,31 +249,31 @@ class DisplaySubscriptionKey extends React.Component {
               <ul>
                 <li className="customer-id">
                   <span className="label"><Trans>Customer id:</Trans></span>
-                  <span className="value">{this.state.customerId}</span>
+                  <span className="value">{subscription.customerId}</span>
                 </li>
                 <li className="subscription-id">
                   <span className="label"><Trans>Subscription id:</Trans></span>
-                  <span className="value">{this.state.subscriptionId}</span>
+                  <span className="value">{subscription.subscriptionId}</span>
                 </li>
                 <li className="email">
                   <span className="label"><Trans>Email:</Trans></span>
-                  <span className="value">{this.state.email}</span>
+                  <span className="value">{subscription.email}</span>
                 </li>
                 <li className="users">
                   <span
                     className={`label ${this.hasLimitUsersExceeded() ? "error" : ""}`}><Trans>Users limit:</Trans></span>
                   <span
-                    className={`value ${this.hasLimitUsersExceeded() ? "error" : ""}`}>{this.state.users} (<Trans>currently:</Trans> {this.state.activeUsers})</span>
+                    className={`value ${this.hasLimitUsersExceeded() ? "error" : ""}`}>{subscription.users} (<Trans>currently:</Trans> {this.state.activeUsers})</span>
                 </li>
                 <li className="created">
                   <span className="label"><Trans>Valid from:</Trans></span>
-                  <span className="value">{this.formatDate(this.state.created)}</span>
+                  <span className="value">{this.formatDate(subscription.created)}</span>
                 </li>
                 <li className="expiry">
                   <span
                     className={`label ${this.hasSubscriptionKeyExpired() ? "error" : ""} ${this.hasSubscriptionKeyGoingToExpire() ? "warning" : ""}`}><Trans>Expires on:</Trans></span>
                   <span
-                    className={`value ${this.hasSubscriptionKeyExpired() ? "error" : ""} ${this.hasSubscriptionKeyGoingToExpire() ? "warning" : ""}`}>{this.formatDate(this.state.expiry)} ({`${this.hasSubscriptionKeyExpired() ? this.translate("expired ") : ""}${this.formatDateTimeAgo(this.state.expiry)}`})</span>
+                    className={`value ${this.hasSubscriptionKeyExpired() ? "error" : ""} ${this.hasSubscriptionKeyGoingToExpire() ? "warning" : ""}`}>{this.formatDate(subscription.expiry)} ({`${this.hasSubscriptionKeyExpired() ? this.translate("expired ") : ""}${this.formatDateTimeAgo(subscription.expiry)}`})</span>
                 </li>
               </ul>
               }
@@ -396,7 +296,7 @@ class DisplaySubscriptionKey extends React.Component {
           </div>
         </div>
         }
-        {!this.isLoading() &&
+        {!isProcessing &&
         <div className="col4 last">
           <div className="sidebar-help">
             <h3><Trans>Need help?</Trans></h3>
@@ -417,8 +317,9 @@ DisplaySubscriptionKey.propTypes = {
   context: PropTypes.any, // The application context
   navigationContext: PropTypes.any, // The application navigation context
   administrationWorkspaceContext: PropTypes.object, // The administration workspace context
+  adminSubcriptionContext: PropTypes.object, // The administration subscription context
   dialogContext: PropTypes.any, // The dialog congtext
   t: PropTypes.func,
 };
 
-export default withAppContext(withNavigationContext(withAdministrationWorkspace(withDialog(withTranslation('common')(DisplaySubscriptionKey)))));
+export default withAppContext(withNavigationContext(withAdminSubscription(withAdministrationWorkspace(withDialog(withTranslation('common')(DisplaySubscriptionKey))))));

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

@@ -20,7 +20,6 @@ import {DateTime} from "luxon";
 import {defaultAppContext} from "../../../contexts/ExtAppContext.test.data";
 import {defaultDialogContext} from "../../../contexts/DialogContext.test.data";
 import {defaultNavigationContext} from "../../../contexts/NavigationContext.test.data";
-import {defaultAdministrationWorkspaceContext} from "../../../contexts/AdministrationWorkspaceContext.test.data";
 import MockPort from "../../../test/mock/MockPort";
 
 /**
@@ -33,12 +32,15 @@ export function defaultProps(props = {}) {
   port.addRequestListener('passbolt.users.get-all', () => mockUsers);
   const defaultContext = {
     onGetSubscriptionKeyRequested: () => mockSubscription,
-    port: port
+    port: port,
   };
 
   const defaultProps = {
     context: defaultAppContext(Object.assign(defaultContext, props?.context)),
-    administrationWorkspaceContext: defaultAdministrationWorkspaceContext(),
+    administrationWorkspaceContext: {
+      setDisplayAdministrationWorkspaceAction: jest.fn(),
+      resetDisplayAdministrationWorkspaceAction: jest.fn()
+    },
     dialogContext: defaultDialogContext(),
     navigationContext: defaultNavigationContext()
   };
@@ -120,6 +122,16 @@ export const mockSubscription = {
   "data": "data"
 };
 
+export const mockSubscriptionModel = {
+  "created": "2020-12-01T00:00:00.661Z",
+  "customerId": "1n6BPvHRWfizhmARz",
+  "data": "data",
+  "email": "ada@passbolt.com",
+  "expiry": expiredDate.toISOString(),
+  "subscriptionId": "1n6BPvHRWfizhmARz",
+  "users": 5,
+};
+
 export const mockSubscriptionUsersExceeded = {
   "customer_id": "1n6BPvHRWfizhmARz",
   "subscription_id": "1n6BPvHRWfizhmARz",

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

@@ -17,7 +17,7 @@
  */
 import {
   defaultProps, formatDate,
-  mockSubscription, mockSubscriptionExpired, mockSubscriptionUpdated,
+  mockSubscription, mockSubscriptionExpired,
   mockSubscriptionUsersExceeded,
   mockUsers
 } from "./DisplaySubscriptionKey.test.data";
@@ -27,16 +27,14 @@ import {waitFor} from "@testing-library/react";
 import {DateTime} from "luxon";
 import EditSubscriptionKey from "../EditSubscriptionKey/EditSubscriptionKey";
 import PassboltSubscriptionError from "../../../lib/Error/PassboltSubscriptionError";
-import {defaultAdministrationWorkspaceContext} from "../../../contexts/AdministrationWorkspaceContext.test.data";
 
 beforeEach(() => {
   jest.resetModules();
 });
 
-describe("As AD I should see the subscription", () => {
+describe("DisplaySubscriptionKeyPage", () => {
   let page; // The page to test against
   const props = defaultProps(); // The props to pass
-
   describe(' As AD I can see the subscription', () => {
     /**
      * Given a valid subscription
@@ -47,7 +45,7 @@ describe("As AD I should see the subscription", () => {
      * And I should be able to identify when the subscription expire
      */
     it('As AD I should see all details about the subscription', async() => {
-      page = new DisplaySubscriptionKeyPage(props);
+      page = new DisplaySubscriptionKeyPage(props.context, props);
       await waitFor(() => {});
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe("Subscription key details");
@@ -68,7 +66,7 @@ describe("As AD I should see the subscription", () => {
       jest.spyOn(props.context, 'onGetSubscriptionKeyRequested').mockImplementationOnce(() => {
         throw new PassboltSubscriptionError("users exceeded", mockSubscriptionUsersExceeded);
       });
-      page = new DisplaySubscriptionKeyPage(props);
+      page = new DisplaySubscriptionKeyPage(props.context, props);
       await waitFor(() => {});
 
       expect(page.subscriptionDetailsTitle).toBe("Your subscription key is not valid.");
@@ -90,7 +88,7 @@ describe("As AD I should see the subscription", () => {
       jest.spyOn(props.context, 'onGetSubscriptionKeyRequested').mockImplementationOnce(() => {
         throw new PassboltSubscriptionError("key expired", mockSubscriptionExpired);
       });
-      page = new DisplaySubscriptionKeyPage(props);
+      page = new DisplaySubscriptionKeyPage(props.context, props);
       await waitFor(() => {});
 
       expect(page.subscriptionDetailsTitle).toBe("Your subscription key is not valid.");
@@ -108,11 +106,13 @@ describe("As AD I should see the subscription", () => {
       expect(props.navigationContext.onGoToNewTab).toHaveBeenCalledWith(`https://www.passbolt.com/subscription/ee/update/renew?subscription_id=${mockSubscriptionExpired.subscription_id}&customer_id=${mockSubscriptionExpired.customer_id}`);
     });
 
+
     it('As AD I should be able to identify if the key is missing', async() => {
+      expect.assertions(4);
       jest.spyOn(props.context, 'onGetSubscriptionKeyRequested').mockImplementationOnce(() => {
         throw new PassboltApiFetchError("missing key", {});
       });
-      page = new DisplaySubscriptionKeyPage(props);
+      page = new DisplaySubscriptionKeyPage(props.context, props);
       await waitFor(() => {});
 
       expect(page.subscriptionDetailsTitle).toBe("Your subscription key is either missing or not valid.");
@@ -126,67 +126,40 @@ describe("As AD I should see the subscription", () => {
       expect(props.context.setContext).toHaveBeenCalledWith({editSubscriptionKey});
     });
 
+
     it('As AD I should open edit subscription key', async() => {
-      page = new DisplaySubscriptionKeyPage(props);
+      expect.assertions(2);
+      page = new DisplaySubscriptionKeyPage(props.context, props);
+
       await waitFor(() => {});
 
-      props.administrationWorkspaceContext = defaultAdministrationWorkspaceContext({
-        must: {
-          editSubscriptionKey: true,
-          refreshSubscriptionKey: false
-        },
-      });
       const editSubscriptionKey = {
         key: mockSubscription.data
       };
 
-      page.rerender(props);
-      await waitFor(() => {});
+      await page.updateKey();
+
       expect(props.dialogContext.open).toHaveBeenCalledWith(EditSubscriptionKey);
       expect(props.context.setContext).toHaveBeenCalledWith({editSubscriptionKey});
-      expect(props.administrationWorkspaceContext.onResetActionsSettings).toHaveBeenCalled();
-    });
-
-    it('As AD I should refresh the subscription key', async() => {
-      page = new DisplaySubscriptionKeyPage(props);
-      await waitFor(() => {});
-
-      props.context.onGetSubscriptionKeyRequested = () => mockSubscriptionUpdated;
-      props.administrationWorkspaceContext = defaultAdministrationWorkspaceContext({
-        must: {
-          editSubscriptionKey: false,
-          refreshSubscriptionKey: true
-        },
-      });
-
-      page.rerender(props);
-      await waitFor(() => {
-        expect(page.customerId).toBe(mockSubscriptionUpdated.customer_id);
-        expect(page.subscriptionId).toBe(mockSubscriptionUpdated.subscription_id);
-        expect(page.email).toBe(mockSubscriptionUpdated.email);
-        expect(page.users).toBe(`${mockSubscriptionUpdated.users} (currently: ${mockUsers.length})`);
-        expect(page.created).toBe(`${formatDate(mockSubscriptionUpdated.created)}`);
-        expect(page.expiry).toBe(`${formatDate(mockSubscriptionUpdated.expiry)} (expired ${DateTime.fromISO(mockSubscriptionUpdated.expiry).toRelative()})`);
-        expect(props.administrationWorkspaceContext.onResetActionsSettings).toHaveBeenCalled();
-      });
     });
   });
 
   describe(' As AD I see an error if no subscription was found', () => {
-    /**
-     * Given no subscription was found
-     * When I go to the subscription
-     * Then I should see an error
-     */
+  /**
+   * Given no subscription was found
+   * When I go to the subscription
+   * Then I should see an error
+   */
+
 
     it('As AD I should see an error if no subscription key was found', async() => {
+      expect.assertions(4);
       jest.spyOn(props.context, 'onGetSubscriptionKeyRequested').mockImplementationOnce(() => {
         throw new PassboltApiFetchError("no subscription key", "");
       });
 
-      page = new DisplaySubscriptionKeyPage(props);
+      page = new DisplaySubscriptionKeyPage(props.context, props);
       await waitFor(() => {});
-
       expect(page.subscriptionDetailsTitle).toBe("Your subscription key is either missing or not valid.");
       expect(page.contactUs.getAttribute("href")).toBe("https://www.passbolt.com/contact");
 

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

@@ -14,7 +14,10 @@
 import {fireEvent, render, waitFor} from "@testing-library/react";
 import React from "react";
 import DisplaySubscriptionKey from "./DisplaySubscriptionKey";
+import DisplaySubscriptionKeyActions from "../DisplayAdministrationWorkspaceActions/DisplayAdministrationSubscriptionActions/DisplayAdministrationSubscriptionActions";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import AppContext from "../../../contexts/AppContext";
+import {AdminSubscriptionContextProvider} from '../../../contexts/Administration/AdministrationSubscription/AdministrationSubscription';
 
 /**
  * The DisplaySubscriptionKey component represented as a page
@@ -25,18 +28,15 @@ export default class DisplaySubscriptionKeyPage {
    * @param appContext An app context
    * @param props Props to attach
    */
-  constructor(props) {
+  constructor(appContext, props) {
     this._page = render(
       <MockTranslationProvider>
-        <DisplaySubscriptionKey {...props}/>
-      </MockTranslationProvider>
-    );
-  }
-
-  rerender(props) {
-    this._page.rerender(
-      <MockTranslationProvider>
-        <DisplaySubscriptionKey {...props}/>
+        <AppContext.Provider value={appContext}>
+          <AdminSubscriptionContextProvider {...props}>
+            <DisplaySubscriptionKeyActions {...props}/>
+            <DisplaySubscriptionKey {...props}/>
+          </AdminSubscriptionContextProvider>
+        </AppContext.Provider>
       </MockTranslationProvider>
     );
   }
@@ -132,6 +132,14 @@ export default class DisplaySubscriptionKeyPage {
     return this._page.container.querySelector('.col4.last a');
   }
 
+  /**
+   * Returns the HTMLElement button of the toolbar that is the "Update key"
+   * @returns {HTMLElement}
+   */
+  get toolbarActionsUpdateButton() {
+    return this._page.container.querySelectorAll(".actions-wrapper .actions a")[0];
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -153,7 +161,7 @@ export default class DisplaySubscriptionKeyPage {
    */
   async updateKey() {
     const leftClick = {button: 0};
-    fireEvent.click(this.renewKeyButton, leftClick);
+    fireEvent.click(this.toolbarActionsUpdateButton, leftClick);
     await waitFor(() => {});
   }
 }

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

@@ -1,5 +1,6 @@
 import React from "react";
 import DisplaySubscriptionKey from "./DisplaySubscriptionKey";
+import {AdminSubscriptionContextProvider} from '../../../contexts/Administration/AdministrationSubscription/AdministrationSubscription';
 import {
   defaultProps, expiredProps, goingToExpireProps, notFoundProps, usersExceededProps
 } from "./DisplaySubscriptionKey.test.data";
@@ -11,9 +12,14 @@ export default {
 };
 
 const Template = args =>
-  <div className="grid grid-responsive-12">
-    <DisplaySubscriptionKey {...args}/>
-  </div>;
+  <AdminSubscriptionContextProvider{...args}>
+    <div className="panel middle">
+      <div className="grid grid-responsive-12">
+        <DisplaySubscriptionKey {...args}/>
+      </div>
+    </div>
+  </AdminSubscriptionContextProvider>
+;
 
 
 export const Initial = Template.bind({});

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

@@ -17,8 +17,8 @@ import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
 import Icon from "../../../../shared/components/Icons/Icon";
 import DisplayLoadingDialog from "../DisplayLoadingDialog/DisplayLoadingDialog";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
-import {withAdministrationWorkspace} from "../../../contexts/AdministrationWorkspaceContext";
 import {Trans, withTranslation} from "react-i18next";
+import {withAdminUserDirectory} from "../../../contexts/Administration/AdministrationUserDirectory/AdministrationUserDirectoryContext";
 
 class DisplaySynchronizeUserDirectoryAdministration extends Component {
   /**
@@ -62,9 +62,8 @@ class DisplaySynchronizeUserDirectoryAdministration extends Component {
    */
   async componentDidMount() {
     try {
-      const result = await this.props.administrationWorkspaceContext.onGetSynchronizeUsersDirectoryRequested();
-      const userDirectorySynchronizeResult = result.body;
-      this.setState({loading: false, userDirectorySynchronizeResult});
+      const result = await this.props.adminUserDirectoryContext.synchronizeUsers();
+      this.setState({loading: false, userDirectorySynchronizeResult: result});
     } catch (error) {
       await this.handleError(error);
     }
@@ -350,8 +349,8 @@ class DisplaySynchronizeUserDirectoryAdministration extends Component {
 DisplaySynchronizeUserDirectoryAdministration.propTypes = {
   onClose: PropTypes.func,
   actionFeedbackContext: PropTypes.any, // The action feedback context
-  administrationWorkspaceContext: PropTypes.object, // The administration workspace context
+  adminUserDirectoryContext: PropTypes.object, // The administration user directory context
   t: PropTypes.func, // The translation function
 };
 
-export default withActionFeedback(withAdministrationWorkspace(withTranslation('common')(DisplaySynchronizeUserDirectoryAdministration)));
+export default withActionFeedback(withAdminUserDirectory(withTranslation('common')(DisplaySynchronizeUserDirectoryAdministration)));