passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -0,0 +1,109 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+/**
+ * Unit tests on ConfirmSaveAccountRecoverySettings in regard of specifications
+ */
+import {waitFor} from "@testing-library/react";
+import {
+  defaultProps,
+  formatDateTimeAgo,
+  formatDate,
+  hasChangedPolicyProps
+} from "./ConfirmSaveAccountRecoverySettings.test.data";
+import ConfirmSaveAccountRecoverySettingsPage from "./ConfirmSaveAccountRecoverySettings.test.page";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("See the Confirm Save Account Recovery Settings", () => {
+  let page; // The page to test agains
+
+  describe('As a logged in administrator in the administration workspace, I can preview the changes the Account recovery settings prior to enabling my new policy', () => {
+    /**
+     * I should see the account recovery settings dialog
+     */
+    it('As a logged in administrator in the administration workspace, I can preview only policy', async() => {
+      const props = defaultProps(); // The props to pass
+      page = new ConfirmSaveAccountRecoverySettingsPage(props);
+      await waitFor(() => {});
+      // Dialog title exists and correct
+      expect(page.exists()).toBeTruthy();
+      expect(page.title).toBe("Save Settings Summary");
+
+      // Close button exists
+      expect(page.closeButton).not.toBeNull();
+
+      // Policy label
+      expect(page.accountRecoveryPolicy).toBe('Optional, Opt-in');
+      expect(page.accountRecoveryPolicyInfo).toBe("Every user can decide to provide a copy of their private key and passphrase by default during the setup, but they can opt in.");
+
+      // organization recovery key
+      expect(page.recoveryKeyDetailsExists()).toBeFalsy();
+
+      // Save button exists
+      expect(page.saveButton.value).toBe("Save");
+
+      // Cancel button exists
+      expect(page.cancelButton.textContent).toBe("Cancel");
+    });
+
+    it('As a logged in administrator in the administration workspace, I can preview policy and organization recovery key', async() => {
+      const props = hasChangedPolicyProps();
+      page = new ConfirmSaveAccountRecoverySettingsPage(props);
+
+      // Policy label
+      expect(page.accountRecoveryPolicy).toBe('Mandatory');
+      expect(page.accountRecoveryPolicyInfo).toBe("Every user is required to provide a copy of their private key and passphrase during setup.Warning: You should inform your users not to store personal passwords.");
+
+      // organization recovery key
+      expect(page.recoveryKeyDetailsExists()).toBeTruthy();
+      expect(page.recoveryKeyDetailsFingerprint).toBe("0C1D 1761 110D 1E33 C9006D1A 5B1B 332E D064 26D3 ");
+      expect(page.recoveryKeyDetailsAlgorithm).toBe(props.keyInfo.algorithm);
+      expect(page.recoveryKeyDetailsKeyLength).toBe("4096");
+      expect(page.recoveryKeyDetailsUserIds).toBe("ada<ada@passbolt.com>betty<betty@passbolt.com>");
+      expect(page.recoveryKeyDetailsCreated).toBe(formatDate(props.keyInfo.created));
+      expect(page.recoveryKeyDetailsExpires).toBe(formatDateTimeAgo(props.keyInfo.expires));
+    });
+
+    it('As a logged in administrator in the administration workspace, if the previous Account recovery settings state was "Disabled" I can save the Account recovery settings to enable my policy without entering the Organization recovery key', async() => {
+      const props = defaultProps(); // The props to pass
+      page = new ConfirmSaveAccountRecoverySettingsPage(props);
+      await waitFor(() => {});
+
+      await page.save();
+
+      expect(props.onSubmit).toHaveBeenCalled();
+    });
+
+    it('As LU I can stop saving an account recovery settings by clicking on the cancel button', async() => {
+      const props = defaultProps(); // The props to pass
+      page = new ConfirmSaveAccountRecoverySettingsPage(props);
+      await waitFor(() => {});
+      expect(page.exists()).toBeTruthy();
+      await page.cancel();
+      expect(props.onClose).toBeCalled();
+    });
+
+    it('As LU I can stop saving an account recovery settings by closing the dialog', async() => {
+      const props = defaultProps(); // The props to pass
+      page = new ConfirmSaveAccountRecoverySettingsPage(props);
+      await waitFor(() => {});
+      expect(page.exists()).toBeTruthy();
+      await page.close();
+      expect(props.onClose).toBeCalled();
+    });
+  });
+});

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

@@ -0,0 +1,174 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import ConfirmSaveAccountRecoverySettings from "./ConfirmSaveAccountRecoverySettings";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+/**
+ * The ConfirmSaveAccountRecoverySettings component represented as a page
+ */
+export default class ConfirmSaveAccountRecoverySettingsPage {
+  /**
+   * Default constructor
+   * @param appContext An app context
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <ConfirmSaveAccountRecoverySettings {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the account recovery settings element
+   */
+  get accountRecoverySettings() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog');
+  }
+
+  /**
+   * Returns the dialog close element
+   */
+  get closeButton() {
+    return this._page.container.querySelector('.dialog-close');
+  }
+
+  /**
+   * Returns the title element
+   */
+  get title() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog .dialog-header-title').textContent;
+  }
+
+  /**
+   * Returns the account recovery policy name element
+   */
+  get accountRecoveryPolicy() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog .form-content .input.radio label .name').textContent;
+  }
+
+  /**
+   * Returns the account recovery policy name element
+   */
+  get accountRecoveryPolicyInfo() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog .form-content .input.radio label .info').textContent;
+  }
+
+  /**
+   * Returns the recovery key details element
+   */
+  recoveryKeyDetailsExists() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog .form-content .recovery-key-details') !== null;
+  }
+
+  /**
+   * Returns true if the recovery key details element exists
+   */
+  get recoveryKeyDetailsFingerprint() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog .form-content .recovery-key-details .fingerprint .value').textContent;
+  }
+
+  /**
+   * Returns the recovery key details algorithm element
+   */
+  get recoveryKeyDetailsAlgorithm() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog .form-content .recovery-key-details .algorithm .value').textContent;
+  }
+
+  /**
+   * Returns the recovery key details key length element
+   */
+  get recoveryKeyDetailsKeyLength() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog .form-content .recovery-key-details .key-length .value').textContent;
+  }
+
+  /**
+   * Returns the recovery key details user ids element
+   */
+  get recoveryKeyDetailsUserIds() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog .form-content .recovery-key-details .user-ids .value').textContent;
+  }
+
+  /**
+   * Returns the recovery key details created element
+   */
+  get recoveryKeyDetailsCreated() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog .form-content .recovery-key-details .created .value').textContent;
+  }
+
+  /**
+   * Returns the recovery key details expires element
+   */
+  get recoveryKeyDetailsExpires() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog .form-content .recovery-key-details .expires .value').textContent;
+  }
+
+  /**
+   * Returns the warning message element
+   */
+  get warningMessage() {
+    return this._page.container.querySelector('.warning.message').textContent;
+  }
+
+  /**
+   * Returns true if the page object exists in the container
+   */
+  exists() {
+    return this.accountRecoverySettings !== null;
+  }
+
+  /**
+   * Returns the save button element
+   */
+  get saveButton() {
+    return this._page.container.querySelector('.submit-wrapper input[type=\"submit\"]');
+  }
+
+  /**
+   * Returns the cancel button element
+   */
+  get cancelButton() {
+    return this._page.container.querySelector('.submit-wrapper .cancel');
+  }
+
+  /**
+   * Saves the change on the group
+   */
+  async save() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.saveButton, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Cancels the user's MFA disable
+   */
+  async cancel() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.cancelButton, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Close the dialog
+   */
+  async close() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.closeButton, leftClick);
+    await waitFor(() => {});
+  }
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+import {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import ConfirmSaveAccountRecoverySettings from "./ConfirmSaveAccountRecoverySettings";
+import {
+  disabledPolicyProps, mandatoryPolicyPropsWithOrganisationKey,
+  optInPolicyPropsWithOrganisationKey, optOutPolicyPropsWithOrganisationKey
+} from "./ConfirmSaveAccountRecoverySettings.test.data";
+
+
+export default {
+  title: 'Passbolt/Administration/ConfirmSaveAccountRecoverySettings',
+  component: ConfirmSaveAccountRecoverySettings
+};
+
+const Template = args =>
+  <MemoryRouter initialEntries={['/']}>
+    <Route component={routerProps => <ConfirmSaveAccountRecoverySettings {...args} {...routerProps}/>}></Route>
+  </MemoryRouter>;
+
+export const Disabled = Template.bind({});
+Disabled.args = disabledPolicyProps();
+
+export const MandatoryWithOrganizationKey = Template.bind({});
+MandatoryWithOrganizationKey.args = mandatoryPolicyPropsWithOrganisationKey();
+
+export const OptInWithOrganizationKey = Template.bind({});
+OptInWithOrganizationKey.args = optInPolicyPropsWithOrganisationKey();
+
+export const OptOutWithOrganizationKey = Template.bind({});
+OptOutWithOrganizationKey.args = optOutPolicyPropsWithOrganisationKey();

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

@@ -71,6 +71,15 @@ class DisplayAdministrationMenu extends React.Component {
     return siteSettings && this.props.context.siteSettings.canIUse('locale');
   }
 
+  /**
+   * Can I use the account recovery plugin
+   * @returns {boolean}
+   */
+  get canIUseAccountRecovery() {
+    const siteSettings = this.props.context.siteSettings;
+    return siteSettings && siteSettings.canIUse('accountRecovery');
+  }
+
   /**
    * Bind callbacks methods
    */
@@ -80,6 +89,7 @@ class DisplayAdministrationMenu extends React.Component {
     this.handleEmailNotificationsClick = this.handleEmailNotificationsClick.bind(this);
     this.handleSubscriptionClick = this.handleSubscriptionClick.bind(this);
     this.handleInternationalizationClick = this.handleInternationalizationClick.bind(this);
+    this.handleAccountRecoveryClick = this.handleAccountRecoveryClick.bind(this);
   }
 
   /**
@@ -117,6 +127,13 @@ class DisplayAdministrationMenu extends React.Component {
     this.props.navigationContext.onGoToAdministrationInternationalizationRequested();
   }
 
+  /**
+   * Handle when the user click on the account recovery menu
+   */
+  handleAccountRecoveryClick() {
+    this.props.navigationContext.onGoToAdministrationAccountRecoveryRequested();
+  }
+
   /**
    * If MFA menu is selected
    * @returns {boolean}
@@ -157,6 +174,14 @@ class DisplayAdministrationMenu extends React.Component {
     return AdministrationWorkspaceMenuTypes.INTERNATIONALIZATION === this.props.administrationWorkspaceContext.selectedAdministration;
   }
 
+  /**
+   * If Account Recovery menu is selected
+   * @returns {boolean}
+   */
+  isAccountRecoverySelected() {
+    return AdministrationWorkspaceMenuTypes.ACCOUNT_RECOVERY === this.props.administrationWorkspaceContext.selectedAdministration;
+  }
+
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -226,6 +251,17 @@ class DisplayAdministrationMenu extends React.Component {
             </div>
           </li>
           }
+          {this.canIUseAccountRecovery &&
+          <li id="account_recovery_menu">
+            <div className={`row  ${this.isAccountRecoverySelected() ? "selected" : ""}`}>
+              <div className="main-cell-wrapper">
+                <div className="main-cell">
+                  <a onClick={this.handleAccountRecoveryClick}><span><Trans>Account Recovery</Trans></span></a>
+                </div>
+              </div>
+            </div>
+          </li>
+          }
         </ul>
       </div>
     );

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

@@ -29,7 +29,8 @@ export function defaultProps(selectedAdministration) {
       onGoToAdministrationEmailNotificationsRequested: jest.fn(),
       onGoToAdministrationUsersDirectoryRequested: jest.fn(),
       onGoToAdministrationMfaRequested: jest.fn(),
-      onGoToAdministrationInternationalizationRequested: jest.fn()
+      onGoToAdministrationInternationalizationRequested: jest.fn(),
+      onGoToAdministrationAccountRecoveryRequested: jest.fn()
     }
   };
 }

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

@@ -77,4 +77,13 @@ describe("As AD I can see the administration menu", () => {
     expect(page.menuSelected).toBe('Internationalisation');
     expect(props.navigationContext.onGoToAdministrationInternationalizationRequested).toHaveBeenCalled();
   });
+
+  it('As AD I should be able to go to account recovery', async() => {
+    const props = defaultProps(AdministrationWorkspaceMenuTypes.ACCOUNT_RECOVERY); // The props to pass
+    page = new DisplayAdministrationMenuPage(context, props);
+    expect(page.exists()).toBeTruthy();
+    await page.goToAccountRecovery();
+    expect(page.menuSelected).toBe('Account Recovery');
+    expect(props.navigationContext.onGoToAdministrationAccountRecoveryRequested).toHaveBeenCalled();
+  });
 });

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

@@ -89,6 +89,13 @@ export default class DisplayAdministrationMenuPage {
     return this._page.container.querySelector('#internationalization_menu .row .main-cell-wrapper .main-cell a');
   }
 
+  /**
+   * Returns the account recovery menu
+   */
+  get accountRecovery() {
+    return this._page.container.querySelector('#account_recovery_menu .row .main-cell-wrapper .main-cell a');
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -128,6 +135,11 @@ export default class DisplayAdministrationMenuPage {
   async goToInternationalization() {
     await this.click(this.internationalization);
   }
+
+  /** Click on the email notifications element */
+  async goToAccountRecovery() {
+    await this.click(this.accountRecovery);
+  }
 }
 
 

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationAccountRecoveryAction/DisplayAdministrationAccountRecoveryActions.js

@@ -0,0 +1,138 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import Icon from "../../../Common/Icons/Icon";
+import {Trans, withTranslation} from "react-i18next";
+import {withAdminAccountRecovery} from "../../../../contexts/AdminAccountRecoveryContext";
+import {AccountRecoveryUserContextProvider} from "../../../../contexts/AccountRecoveryUserContext";
+import {withWorkflow} from "../../../../contexts/WorkflowContext";
+import HandleSaveAccountRecoveryOrganizationPolicyWorkflow
+  from "../../HandleSaveAccountRecoveryOrganizationPolicyWorkflow/HandleSaveAccountRecoveryOrganizationPolicyWorkflow";
+
+/**
+ * This component is a container of multiple actions applicable on setting
+ */
+class DisplayAdministrationWorkspaceActions extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallbacks();
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSaveClick = this.handleSaveClick.bind(this);
+    this.handleEditSubscriptionClick = this.handleEditSubscriptionClick.bind(this);
+  }
+
+  /**
+   * Handle save settings
+   */
+  handleSaveClick() {
+    this.props.workflowContext.start(HandleSaveAccountRecoveryOrganizationPolicyWorkflow, {});
+  }
+
+  /**
+   * Handle reset account recovery policy settings
+   */
+  handleEditSubscriptionClick() {
+    this.props.adminAccountRecoveryContext.resetChanges();
+  }
+
+  /**
+   * Is save button enable
+   * @returns {boolean}
+   */
+  isSaveEnabled() {
+    if (!this.props.adminAccountRecoveryContext.hasPolicyChanges()) { //there is currently no change
+      return false;
+    }
+    const changes = this.props.adminAccountRecoveryContext.policyChanges;
+    const currentPolicy = this.props.adminAccountRecoveryContext.currentPolicy;
+
+    if (changes?.policy ===  AccountRecoveryUserContextProvider.POLICY_DISABLED) {
+      // the new policy type to save is now disabled, there is no need to check for the key, we can save
+      return true;
+    }
+
+    const effectiveOrk = changes.publicKey || currentPolicy.account_recovery_organization_public_key?.armored_key;
+    if (Boolean(changes.policy) && Boolean(effectiveOrk)) {
+      //the policy has changed to an enabled type and there is an applicable ORK, we can save
+      return true;
+    }
+
+    //the policy didn't changed, so we check if the applicable one is enabled and if we have a new key defined
+    return currentPolicy.policy !== AccountRecoveryUserContextProvider.POLICY_DISABLED && Boolean(changes.publicKey);
+  }
+
+  /**
+   * Is save button enable
+   */
+  isResetEnabled() {
+    return this.props.adminAccountRecoveryContext.hasPolicyChanges();
+  }
+
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * 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.handleSaveClick}>
+                <Icon name="save"/>
+                <span><Trans>Save settings</Trans></span>
+              </a>
+            </li>
+          </div>
+          <div>
+            <li>
+              <a className={`button ${this.isResetEnabled() ? "" : "disabled"}`} onClick={this.handleEditSubscriptionClick}>
+                <Icon name="edit"/>
+                <span><Trans>Reset settings</Trans></span>
+              </a>
+            </li>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+DisplayAdministrationWorkspaceActions.propTypes = {
+  adminAccountRecoveryContext: PropTypes.object, // The admin account recovery context
+  workflowContext: PropTypes.any, // the workflow context
+  t: PropTypes.func, // The translation function
+};
+
+export default withWorkflow(withAdminAccountRecovery(withTranslation('common')(DisplayAdministrationWorkspaceActions)));

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationAccountRecoveryAction/DisplayAdministrationAccountRecoveryActions.test.data.js

@@ -0,0 +1,46 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import {
+  defaultAdminAccountRecoveryContext,
+  hasPolicyChangesAdminAccountRecoveryContext
+} from "../../../../contexts/AdminAccountRecoveryContext.test.data";
+import {defaultWorkflowContext} from "../../../../contexts/WorkflowContext.test.data";
+
+/**
+ * Default props.
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function defaultProps(props = {}) {
+  const _props = {
+    adminAccountRecoveryContext: defaultAdminAccountRecoveryContext(props?.adminAccountRecoveryContext),
+    workflowContext: defaultWorkflowContext(props?.workflowContext)
+  };
+  delete props.adminAccountRecoveryContext; // Treated in the default
+  delete props.workflowContext; // Treated in the default
+  return Object.assign(_props, props);
+}
+
+/**
+ * Has policy changes props.
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function hasChangedPolicyProps(props = {}) {
+  const _props = {
+    adminAccountRecoveryContext: hasPolicyChangesAdminAccountRecoveryContext(props?.adminAccountRecoveryContext),
+  };
+  return defaultProps(Object.assign(_props, props));
+}

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationAccountRecoveryAction/DisplayAdministrationAccountRecoveryActions.test.js

@@ -0,0 +1,51 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+/**
+ * Unit tests on DisplayAdministrationAccountRecoveryActions in regard of specifications
+ */
+
+
+import DisplayAdministrationAccountRecoveryActionsPage from "./DisplayAdministrationAccountRecoveryActions.test.page";
+import {defaultProps, hasChangedPolicyProps} from "./DisplayAdministrationAccountRecoveryActions.test.data";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("As AD I can see the administration account recovery action", () => {
+  let page; // The page to test against
+
+  it('As AD I should see both the save and the reset buttons disabled for administration account recovery action', async() => {
+    const props = defaultProps();
+    page = new DisplayAdministrationAccountRecoveryActionsPage(props);
+    expect(page.exists()).toBeTruthy();
+    expect(page.count).toBe(2);
+    expect(page.saveButton.className).toBe('button disabled');
+    expect(page.resetButton.className).toBe('button disabled');
+    await page.reset();
+    expect(props.adminAccountRecoveryContext.resetChanges).toHaveBeenCalled();
+  });
+
+  it('As AD I should see the all buttons enabled', async() => {
+    const props = hasChangedPolicyProps();
+    page = new DisplayAdministrationAccountRecoveryActionsPage(props);
+    expect(page.exists()).toBeTruthy();
+    expect(page.count).toBe(2);
+    expect(page.saveButton.className).toBe('button ');
+    expect(page.resetButton.className).toBe('button ');
+    await page.save();
+    expect(props.workflowContext.start).toHaveBeenCalled();
+  });
+});