passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationUserDirectoryActions/DisplayAdministrationUserDirectoryActions.js

@@ -0,0 +1,228 @@
+/**
+ * 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.8.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../../../../shared/components/Icons/Icon";
+import DisplaySimulateSynchronizeUserDirectoryAdministration from "../../DisplaySimulateSynchronizeUserDirectoryAdministration/DisplaySimulateSynchronizeUserDirectoryAdministration";
+import DisplaySynchronizeUserDirectoryAdministration from "../../DisplaySynchronizeUserDirectoryAdministration/DisplaySynchronizeUserDirectoryAdministration";
+import UserDirectoryFormService from '../../../../../shared/services/forms/userDirectory/UserDirectoryFormService';
+import {withAdminUserDirectory} from "../../../../contexts/Administration/AdministrationUserDirectory/AdministrationUserDirectoryContext";
+import {withActionFeedback} from "../../../../contexts/ActionFeedbackContext";
+import {withDialog} from "../../../../contexts/DialogContext";
+import DisplayTestUserDirectoryAdministration from "../../DisplayTestUserDirectoryAdministration/DisplayTestUserDirectoryAdministration";
+import {withAppContext} from "../../../../contexts/AppContext";
+
+
+/**
+ * This component is a container of multiple actions applicable on setting
+ */
+
+class DisplayAdministrationUserDirectoryActions extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallbacks();
+    this.state = this.defaultState;
+    this.userDirectoryFormService = UserDirectoryFormService.getInstance(this.props.adminUserDirectoryContext, this.props.t);
+  }
+
+  /**
+   * Whenever the component has updated in terms of props or state
+   * @param prevProps
+   */
+  componentDidUpdate() {
+    if (this.props.adminUserDirectoryContext.mustOpenSynchronizePopUp()) {
+      this.props.adminUserDirectoryContext.requestSynchronization(false);
+      this.handleSynchronizeClick();
+    }
+  }
+
+  /**
+   * Handle save settings
+   */
+  async handleSaveClick() {
+    const settings = this.props.adminUserDirectoryContext.getSettings();
+    if (settings.userDirectoryToggle) {
+      await this.props.adminUserDirectoryContext.save();
+    } else {
+      await this.props.adminUserDirectoryContext.delete();
+    }
+    this.handleSaveSuccess();
+  }
+
+
+  async handleFormSubmit(action) {
+    try {
+      const isValid = await this.userDirectoryFormService.validate();
+      if (isValid) {
+        switch (action) {
+          case 'save':
+            await this.handleSaveClick();
+            break;
+          case 'test':
+            await this.handleTestClick();
+            break;
+        }
+      }
+    } catch (error) {
+      this.handleSubmitError(error);
+    } finally {
+      this.props.adminUserDirectoryContext.setSubmitted(true);
+      this.props.adminUserDirectoryContext.setProcessing(false);
+    }
+  }
+
+  /**
+   * handle test settings
+   */
+  async handleTestClick() {
+    const result = await this.props.adminUserDirectoryContext.test();
+    const displayTestUserDirectoryDialogProps = {
+      userDirectoryTestResult: result.body
+    };
+    this.props.context.setContext({displayTestUserDirectoryDialogProps});
+    this.props.dialogContext.open(DisplayTestUserDirectoryAdministration);
+  }
+
+  /**
+   * Is save button enable
+   * @returns {boolean}
+   */
+  isSaveEnabled() {
+    return !this.props.adminUserDirectoryContext.isProcessing() && this.props.adminUserDirectoryContext.hasSettingsChanges();
+  }
+
+  /**
+   * Is test button is enable
+   * @returns {boolean}
+   */
+  isTestEnabled() {
+    return !this.props.adminUserDirectoryContext.isProcessing() && this.props.adminUserDirectoryContext.getSettings().userDirectoryToggle;
+  }
+
+
+  /**
+   * Is Synchronize button is enable
+   * @returns {boolean}
+   */
+  isSynchronizeEnabled() {
+    return !this.props.adminUserDirectoryContext.isProcessing() && this.props.adminUserDirectoryContext.getSettings().userDirectoryToggle && this.props.adminUserDirectoryContext.getCurrentSettings().userDirectoryToggle;
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSaveClick = this.handleSaveClick.bind(this);
+    this.handleTestClick = this.handleTestClick.bind(this);
+    this.handleSimulateSynchronizeClick = this.handleSimulateSynchronizeClick.bind(this);
+    this.handleSynchronizeClick = this.handleSynchronizeClick.bind(this);
+  }
+
+  /**
+   * Handle simulate synchronize settings
+   */
+  handleSimulateSynchronizeClick() {
+    this.props.dialogContext.open(DisplaySimulateSynchronizeUserDirectoryAdministration);
+  }
+
+  /**
+   * Handle synchronize settings
+   */
+  handleSynchronizeClick() {
+    this.props.dialogContext.open(DisplaySynchronizeUserDirectoryAdministration);
+  }
+
+  /**
+   * Handle save operation success.
+   */
+  async handleSaveSuccess() {
+    await this.props.actionFeedbackContext.displaySuccess(this.props.t("The user directory settings for the organization were updated."));
+  }
+
+  /**
+   * Handle save operation error.
+   * @param {object} error The returned error
+   */
+  async handleSubmitError(error) {
+    // It can happen when the userx has closed the passphrase entry dialog by instance.
+    if (error.name !== "UserAbortsOperationError") {
+      // Unexpected error occurred.
+      console.error(error);
+      await this.handleError(error);
+    }
+  }
+
+  /**
+   * handle error to display the error dialog
+   * @param error
+   */
+  async handleError(error) {
+    await this.props.actionFeedbackContext.displayError(error.message);
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="col2_3 actions-wrapper">
+        <div className="actions">
+          <div>
+            <li>
+              <a className={`button ${this.isSaveEnabled() ? "" : "disabled"}`} onClick={() => this.handleFormSubmit('save')}>
+                <Icon name="save"/>
+                <span><Trans>Save settings</Trans></span>
+              </a>
+            </li>
+            <li>
+              <a className={`button ${this.isTestEnabled() ? "" : "disabled"}`} onClick={() => this.handleFormSubmit('test')}>
+                <Icon name="plug"/>
+                <span><Trans>Test settings</Trans></span>
+              </a>
+            </li>
+            <li>
+              <a className={`button ${this.isSynchronizeEnabled() ? "" : "disabled"}`} onClick={this.handleSimulateSynchronizeClick}>
+                <Icon name="magic-wand"/>
+                <span><Trans>Simulate synchronize</Trans></span>
+              </a>
+            </li>
+            <li>
+              <a className={`button ${this.isSynchronizeEnabled() ? "" : "disabled"}`} onClick={this.handleSynchronizeClick}>
+                <Icon name="refresh"/>
+                <span><Trans>Synchronize</Trans></span>
+              </a>
+            </li>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+DisplayAdministrationUserDirectoryActions.propTypes = {
+  context: PropTypes.object, // Application context
+  dialogContext: PropTypes.object, // The dialog notification context
+  adminUserDirectoryContext: PropTypes.object, // The email notification context
+  actionFeedbackContext: PropTypes.object, // The action feedback context
+  t: PropTypes.func, // The translation function
+};
+
+export default withAppContext(withActionFeedback(withDialog(withAdminUserDirectory(withTranslation("common")(DisplayAdministrationUserDirectoryActions)))));

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

@@ -63,6 +63,10 @@ class DisplayAdministrationWorkspaceBreadcrumb extends Component {
         return this.translate("Account Recovery");
       case AdministrationWorkspaceMenuTypes.SMTP_SETTINGS:
         return this.translate("Email server");
+      case AdministrationWorkspaceMenuTypes.SELF_REGISTRATION:
+        return this.translate("Self Registration");
+      case AdministrationWorkspaceMenuTypes.SSO:
+        return this.translate("Single Sign-On");
       default:
         return "";
     }

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

@@ -93,4 +93,13 @@ describe("As AD I can see a Breadcrumb", () => {
     expect(page.item(2)).toBe("Account Recovery");
     expect(page.item(3)).toBe("Settings");
   });
+
+  it('As AD I should see a breadcrumb for self registration', () => {
+    const props = defaultProps(AdministrationWorkspaceMenuTypes.SELF_REGISTRATION); // The props to pass
+    page = new DisplayAdministrationWorkspaceBreadcrumbPage(context, props);
+    expect(page.count).toBe(3);
+    expect(page.item(1)).toBe("Administration");
+    expect(page.item(2)).toBe("Self Registration");
+    expect(page.item(3)).toBe("Settings");
+  });
 });

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

@@ -320,21 +320,21 @@ class DisplayEmailNotificationsAdministration extends React.Component {
                     <input type="checkbox" className="toggle-switch-checkbox checkbox" name="accountRecoveryRequestAdmin" disabled={this.hasAllInputDisabled()}
                       onChange={this.handleInputChange} checked={settings.accountRecoveryRequestAdmin} id="account-recovery-request-admin-toggle-button"/>
                     <label className="text" htmlFor="account-recovery-request-admin-toggle-button">
-                      <Trans>When an account recovery is requested, notify the administrators.</Trans>
+                      <Trans>When an account recovery is requested, notify all the administrators.</Trans>
                     </label>
                   </span>
                   <span className="input toggle-switch form-element">
                     <input type="checkbox" className="toggle-switch-checkbox checkbox" name="accountRecoveryRequestPolicyUpdate" disabled={this.hasAllInputDisabled()}
                       onChange={this.handleInputChange} checked={settings.accountRecoveryRequestPolicyUpdate} id="account-recovery-policy-update-toggle-button"/>
                     <label className="text" htmlFor="account-recovery-policy-update-toggle-button">
-                      <Trans>When an account recovery policy is updated, notify the administrators.</Trans>
+                      <Trans>When an account recovery policy is updated, notify all the administrators.</Trans>
                     </label>
                   </span>
                   <span className="input toggle-switch form-element">
                     <input type="checkbox" className="toggle-switch-checkbox checkbox" name="accountRecoveryRequestCreatedAmin" disabled={this.hasAllInputDisabled()}
                       onChange={this.handleInputChange} checked={settings.accountRecoveryRequestCreatedAmin} id="account-recovery-response-created-admin-toggle-button"/>
                     <label className="text" htmlFor="account-recovery-response-created-admin-toggle-button">
-                      <Trans>When an administrator answered to an account recovery request, notify the administrator.</Trans>
+                      <Trans>When an administrator answered to an account recovery request, notify the administrator at the origin of the action.</Trans>
                     </label>
                   </span>
                   <span className="input toggle-switch form-element">

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

@@ -1,3 +1,17 @@
+/**
+ * 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.8.0
+ */
+
 import {defaultAppContext} from "../../../contexts/ApiAppContext.test.data";
 
 /**

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

@@ -217,23 +217,6 @@ export default class DisplayEmailNotificationsAdministrationPage {
     });
   }
 
-  /**
-   * Simulates a click on the given HTML element.
-   * The clicks is consider done when the callback returns {true}.
-   * @param {HTMLElement} element The HTML element onto simulate the click
-   * @param {function} callback The callback to be used in the waitFor method to ensure the click is done (returns true when it's done)
-   * @returns {Promise<void>}
-   */
-  async clickOn(element, callback) {
-    const leftClick = {button: 0};
-    fireEvent.click(element, leftClick);
-    await waitFor(() => {
-      if (!callback()) {
-        throw new Error("Page didn't react yet on the event.");
-      }
-    });
-  }
-
   /**
    * Returns true if the save button in the toolbar is enabled.
    * @returns {boolean}

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

@@ -13,12 +13,13 @@
  */
 import React from "react";
 import PropTypes from "prop-types";
-import {withActionFeedback} from "../../../../react-extension/contexts/ActionFeedbackContext";
 import {withAdministrationWorkspace} from "../../../contexts/AdministrationWorkspaceContext";
 import {Trans, withTranslation} from "react-i18next";
 import {withAppContext} from "../../../contexts/AppContext";
 import Icon from "../../../../shared/components/Icons/Icon";
 import Select from "../../Common/Select/Select";
+import DisplayAdministrationInternationalisationActions from "../DisplayAdministrationWorkspaceActions/DisplayAdministrationInternationalisationActions/DisplayAdministrationInternationalisationActions";
+import {withAdminInternationalization} from "../../../contexts/Administration/AdministrationInternationalizationContext/AdministrationInternationalizationContext";
 
 /**
  * This component allows to display the internationalisation for the administration
@@ -35,28 +36,22 @@ class DisplayInternationalizationAdministration extends React.Component {
   }
 
   /**
-   * Get default state
-   * @returns {*}
+   * ComponentDidMount
+   * Invoked immediately after component is inserted into the tree
+   * @return {void}
    */
-  get defaultState() {
-    return {
-      loading: true, // component is loading or not
-      processing: false, // component is processing or not
-
-      locale: "" // The default app locale
-    };
-  }
-
   async componentDidMount() {
-    this.setState({locale: this.props.context.siteSettings.locale});
+    this.props.administrationWorkspaceContext.setDisplayAdministrationWorkspaceAction(DisplayAdministrationInternationalisationActions);
+    this.props.adminInternationalizationContext.findLocale();
   }
 
   /**
-   * 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.handleMustSave(prevProps.administrationWorkspaceContext.must.save);
+  componentWillUnmount() {
+    this.props.administrationWorkspaceContext.resetDisplayAdministrationWorkspaceAction();
+    this.props.adminInternationalizationContext.clearContext();
   }
 
   /**
@@ -66,108 +61,14 @@ class DisplayInternationalizationAdministration extends React.Component {
     this.handleInputChange = this.handleInputChange.bind(this);
   }
 
-  /**
-   * Handle the must save change
-   * @param previousMustSaveSettings Previous must save settings
-   */
-  async handleMustSave(previousMustSaveSettings) {
-    const hasMustSaveChanged = this.props.administrationWorkspaceContext.must.save !== previousMustSaveSettings;
-    if (hasMustSaveChanged && this.props.administrationWorkspaceContext.must.save) {
-      await this.handleFormSubmit();
-      this.props.administrationWorkspaceContext.onResetActionsSettings();
-    }
-  }
-
   /**
    * Handle form input changes.
    * @params {ReactEvent} The react event
    * @returns {void}
    */
   handleInputChange(event) {
-    const target = event.target;
-    const value = target.value;
-    const name = target.name;
-    this.setState({[name]: value});
-    this.handleEnabledSaveButton();
-  }
-
-  /**
-   * Handle enabled the save button
-   */
-  handleEnabledSaveButton() {
-    if (!this.props.administrationWorkspaceContext.can.save) {
-      this.props.administrationWorkspaceContext.onSaveEnabled();
-    }
+    this.props.adminInternationalizationContext.setLocale(event.target.value);
   }
-
-  /**
-   * Should input be disabled? True if state is loading or processing
-   * @returns {boolean}
-   */
-  hasAllInputDisabled() {
-    return this.state.processing || this.state.loading;
-  }
-
-  /**
-   * Handle form submit event.
-   * @params {ReactEvent} The react event
-   * @returns {void}
-   */
-  async handleFormSubmit() {
-    // Do not re-submit an already processing form
-    if (!this.state.processing) {
-      await this.toggleProcessing();
-      try {
-        await this.props.administrationWorkspaceContext.onSaveLocaleRequested(this.state.locale);
-        await this.handleSaveSuccess();
-      } catch (error) {
-        await this.handleSaveError(error);
-      }
-    }
-  }
-
-  /**
-   * Handle save operation success.
-   */
-  async handleSaveSuccess() {
-    this.props.context.onRefreshLocaleRequested(this.state.locale);
-    await this.props.actionFeedbackContext.displaySuccess(this.props.t("The internationalization settings were updated."));
-    this.setState({processing: false});
-  }
-
-  /**
-   * Handle save operation error.
-   * @param {object} error The returned error
-   */
-  async handleSaveError(error) {
-    // It can happen when the user has closed the passphrase entry dialog by instance.
-    if (error.name === "UserAbortsOperationError") {
-      this.setState({processing: false});
-    } else {
-      // Unexpected error occurred.
-      console.error(error);
-      await this.handleError(error);
-      this.setState({processing: false});
-    }
-  }
-
-  /**
-   * handle error to display the error dialog
-   * @param error
-   */
-  async handleError(error) {
-    await this.props.actionFeedbackContext.displayError(error.message);
-  }
-
-  /**
-   * Toggle processing state
-   * @returns {Promise<void>}
-   */
-  async toggleProcessing() {
-    const prev = this.state.processing;
-    return this.setState({processing: !prev});
-  }
-
   /**
    * Get the supported locales
    * @returns {array}
@@ -184,6 +85,8 @@ class DisplayInternationalizationAdministration extends React.Component {
    * @returns {JSX}
    */
   render() {
+    const lang = this.props.adminInternationalizationContext.getLocale();
+
     return (
       <div className="row">
         <div className="internationalisation-settings col7 main-column">
@@ -191,7 +94,7 @@ class DisplayInternationalizationAdministration extends React.Component {
           <form className="form">
             <div className="select-wrapper input">
               <label htmlFor="app-locale-input"><Trans>Language</Trans></label>
-              <Select className="medium" id="locale-input" name="locale" items={this.supportedLocales} value={this.state.locale} onChange={this.handleInputChange}/>
+              <Select className="medium" id="locale-input" name="locale" items={this.supportedLocales} value={lang} onChange={this.handleInputChange}/>
               <p><Trans>The default language of the organisation.</Trans></p>
             </div>
           </form>
@@ -214,8 +117,8 @@ class DisplayInternationalizationAdministration extends React.Component {
 DisplayInternationalizationAdministration.propTypes = {
   context: PropTypes.object, // The application context
   administrationWorkspaceContext: PropTypes.object, // The administration workspace context
-  actionFeedbackContext: PropTypes.any, // The action feedback context
+  adminInternationalizationContext: PropTypes.object, // The administration internationalization context
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withActionFeedback(withAdministrationWorkspace(withTranslation('common')(DisplayInternationalizationAdministration))));
+export default withAppContext(withAdminInternationalization(withAdministrationWorkspace(withTranslation('common')(DisplayInternationalizationAdministration))));

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

@@ -2,24 +2,22 @@
  * Default props
  * @returns {{resource: {id: string, name: string}}}
  */
-import SiteSettings from "../../../../shared/lib/Settings/SiteSettings";
-import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
+import {defaultAppContext} from "../../../contexts/ApiAppContext.test.data";
 
 
 export function defaultProps() {
   return {
-    context: {
-      siteSettings: new SiteSettings(siteSettingsFixture)
-    },
+    context: defaultAppContext(),
     administrationWorkspaceContext: {
-      must: {
-        save: false
-      },
-      onResetActionsSettings: jest.fn(),
-      can: {
-        save: false
-      },
-      onSaveEnabled: jest.fn(),
+      setDisplayAdministrationWorkspaceAction: jest.fn(),
+      resetDisplayAdministrationWorkspaceAction: jest.fn()
+    },
+    actionFeedbackContext: {
+      displaySuccess: () => jest.fn(),
+      displayError: jest.fn()
     }
   };
 }
+
+
+export const defaultLocale = "en-UK";

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

@@ -21,15 +21,14 @@ import {defaultProps} from "./DisplayInternationalizationAdministration.test.dat
 import DisplayInternationalisationAdministrationPage from "./DisplayInternationalizationAdministration.test.page";
 import {waitFor} from "@testing-library/react";
 import {ActionFeedbackContext} from "../../../contexts/ActionFeedbackContext";
-import SiteSettings from "../../../../shared/lib/Settings/SiteSettings";
-import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
-import PassboltApiFetchError from "../../../../shared/lib/Error/PassboltApiFetchError";
+import {enableFetchMocks} from 'jest-fetch-mock';
+import {mockApiResponse} from '../../../../../test/mocks/mockApiResponse';
 
 beforeEach(() => {
+  enableFetchMocks();
   jest.resetModules();
 });
 
-
 describe("As AD I should see the internationalisation page", () => {
   let page; // The page to test against
   const props = defaultProps(); // The props to pass
@@ -50,51 +49,47 @@ describe("As AD I should see the internationalisation page", () => {
     });
 
     it('As AD I should be able to see a visual feedback after I saved the internationalisation settings in the administration internationalisation page', async() => {
-      await page.selectLanguageFr();
-      expect(props.administrationWorkspaceContext.onSaveEnabled).toHaveBeenCalled();
-      const propsUpdated = {
-        context: {
-          siteSettings: new SiteSettings(siteSettingsFixture),
-          onRefreshLocaleRequested: jest.fn()
-        },
-        administrationWorkspaceContext: {
-          must: {
-            save: true
-          },
-          onResetActionsSettings: jest.fn(),
-          onSaveLocaleRequested: jest.fn()
-        }
-      };
-      jest.spyOn(propsUpdated.administrationWorkspaceContext, 'onSaveLocaleRequested').mockImplementationOnce(() => {});
+      //Call to save the settings
+      fetch.doMockOnceIf(/locale\/settings*/, () => mockApiResponse({}));
       jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(() => {});
-      page.rerender(propsUpdated);
+
+      //button should be disable by default
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
+
+      await page.selectLanguageEs();
+      expect(page.isSaveButtonEnabled()).toBeTruthy();
+      await page.saveLocale();
       await waitFor(() => {});
-      expect(propsUpdated.administrationWorkspaceContext.onSaveLocaleRequested).toHaveBeenCalledWith("fr-FR");
-      expect(propsUpdated.administrationWorkspaceContext.onResetActionsSettings).toHaveBeenCalled();
-      expect(propsUpdated.context.onRefreshLocaleRequested).toHaveBeenCalledWith("fr-FR");
+
       expect(ActionFeedbackContext._currentValue.displaySuccess).toHaveBeenCalledWith("The internationalization settings were updated.");
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
     });
 
-    it('As AD I should be able to see an error notification after I got an error when I saved the default language of the organisation in the administration internationalisation page', async() => {
-      const propsUpdated = {
-        context: {
-          siteSettings: new SiteSettings(siteSettingsFixture)
-        },
-        administrationWorkspaceContext: {
-          must: {
-            save: true
-          },
-          onResetActionsSettings: jest.fn(),
-          onSaveLocaleRequested: jest.fn(),
-        }
-      };
-      jest.spyOn(propsUpdated.administrationWorkspaceContext, 'onSaveLocaleRequested').mockImplementationOnce(() => {
-        throw new PassboltApiFetchError("Error");
-      });      jest.spyOn(ActionFeedbackContext._currentValue, 'displayError').mockImplementation(() => {});
-      page.rerender(propsUpdated);
+    it('As AD I should see an error toaster if the submit operation fails for an unexpected reason', async() => {
+      // Mock the request function to make it return an error.
+      const error = {message: "The service is unavailable"};
+      fetch.doMockOnceIf(/locale\/settings*/, () => Promise.reject(error));
+
+      //button should be disable by default
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
+      await page.selectLanguageFr();
+      jest.spyOn(ActionFeedbackContext._currentValue, 'displayError').mockImplementation(() => {});
+      await page.saveLocale();
       await waitFor(() => {});
-      expect(propsUpdated.administrationWorkspaceContext.onResetActionsSettings).toHaveBeenCalled();
-      expect(ActionFeedbackContext._currentValue.displayError).toHaveBeenCalledWith("Error");
+
+      expect(page.title).toBe("Internationalisation");
+      // Throw general error message
+      expect(ActionFeedbackContext._currentValue.displayError).toHaveBeenCalledWith("The service is unavailable");
+    });
+
+    it('As AD I should not be able to click on save if there is no change', async() => {
+      //button should be disable by default
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
+      await page.selectLanguageFr();
+      //We set the value by default
+      await page.selectLanguageEn();
+      //button should be disable by default
+      expect(page.isSaveButtonEnabled()).toBeFalsy();
     });
   });
 });