passbolt-styleguide 3.8.4 → 3.9.0-alpha2

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

@@ -0,0 +1,235 @@
+/**
+ * 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.9.0
+ */
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import ManageSsoSettings from "./ManageSsoSettings";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import AdminSsoContextProvider from "../../../contexts/AdminSsoContext";
+import DisplayAdministrationSsoSettingsActions from "../DisplayAdministrationWorkspaceActions/DisplayAdministrationSsoActions/DisplayAdministrationSsoActions";
+import DialogContextProvider from "../../../contexts/DialogContext";
+import ManageDialogs from "../../Common/Dialog/ManageDialogs/ManageDialogs";
+
+/**
+ * The ManageSsoSettings component represented as a page
+ */
+export default class ManageSsoSettingsPage {
+  /**
+   * Default constructor
+   * @param appContext An app context
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this.props = props;
+    this.render(props);
+  }
+
+  /**
+   * Do a rendering of the page.
+   * If the page already exists, do a rerender instead
+   * @param {object} props the props of the components
+   */
+  render(props) {
+    this._page = render(<MockTranslationProvider>
+      <DialogContextProvider>
+        <AdminSsoContextProvider {...props}>
+          <ManageDialogs/>
+          <ManageSsoSettings {...props}/>
+          <DisplayAdministrationSsoSettingsActions/>
+        </AdminSsoContextProvider>
+      </DialogContextProvider>
+    </MockTranslationProvider>);
+  }
+
+  /**
+   * Shortcut method for the container querySelector.
+   * @param {string} stringSelector
+   * @returns {HTMLElement}
+   */
+  select(stringSelector) {
+    return this._page.container.querySelector(stringSelector);
+  }
+
+  /**
+   * Shortcut method for the container querySelectorAll.
+   * @param {string} stringSelector
+   * @returns {NodeList}
+   */
+  selectAll(stringSelector) {
+    return this._page.container.querySelectorAll(stringSelector);
+  }
+
+  /**
+   * Returns true if the page exists.
+   * This means that it's loaded and the title text content is non empty.
+   * @returns {boolean}
+   */
+  exists() {
+    const title = this.title;
+    return title && title.textContent !== "";
+  }
+
+  /**
+   * 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.");
+      }
+    });
+  }
+
+  /**
+   * Set the current form with the given data (only work with the inputs (not our Select component for instance))
+   * @param {object} formData a key value pairs object that contains the field name as a key (must match a getter method on this page) and the desired value
+   * @returns {Promise<void>}
+   */
+  async setFormWith(formData) {
+    let key;
+    for (key in formData) {
+      fireEvent.input(this[key], {target: {value: formData[key]}});
+    }
+    await waitFor(() => {
+      if (this[key].value !== formData[key].toString()) {
+        throw new Error("Form is not udpated yet.");
+      }
+    });
+  }
+
+  /**
+   * Clicks on the Save Settings button and wait for the given callback to return true before continuing.
+   * @param {function} readyCheckCallback a callback to tell the caller when the action is considered to be done
+   */
+  async saveSettings(readyCheckCallback) {
+    await this.clickOn(this.toolbarActionsSaveSettingsButton, readyCheckCallback);
+  }
+
+  /**
+   * Clicks on SSO Settings feature toggle.
+   * @param {function} readyCheckCallback a callback to tell the caller when the action is considered to be done
+   */
+  async toggleSsoSettings() {
+    const currentState = this.toggleButton.checked;
+    await this.clickOn(this.toggleButton, () => this.toggleButton.checked !== currentState);
+  }
+
+  /**
+   * Simulates a click on the "Delete Settings" button from the dialog
+   */
+  async confirmDelete() {
+    await this.clickOn(this.deleteSettingsButton, () => this.deleteConfirmationDialog === null);
+  }
+
+  /**
+   * Returns the title page HTML element
+   * @returns {HTMLElement}
+   */
+  get title() {
+    return this.select(".sso-settings h3");
+  }
+
+  /**
+   * Returns all the provider buttons from the first screen.
+   * @returns {NodeList}
+   */
+  get providerButtons() {
+    return this.selectAll(".sso-settings .provider-list .provider");
+  }
+
+  /**
+   * Returns the url input HTML element
+   * @returns {HTMLElement}
+   */
+  get url() {
+    return this.select(".sso-settings #sso-azure-url-input");
+  }
+
+  /**
+   * Returns the redirect_url input HTML element
+   * @returns {HTMLElement}
+   */
+  get redirect_url() {
+    return this.select(".sso-settings #sso-redirect-url-input");
+  }
+
+  /**
+   * Returns the tenant_id input HTML element
+   * @returns {HTMLElement}
+   */
+  get tenant_id() {
+    return this.select(".sso-settings #sso-azure-tenant-id-input");
+  }
+
+  /**
+   * Returns the client_id input HTML element
+   * @returns {HTMLElement}
+   */
+  get client_id() {
+    return this.select(".sso-settings #sso-azure-client-id-input");
+  }
+
+  /**
+   * Returns the client_secret input HTML element
+   * @returns {HTMLElement}
+   */
+  get client_secret() {
+    return this.select(".sso-settings #sso-azure-secret-input");
+  }
+
+  /**
+   * Returns the client_secret input HTML element
+   * @returns {HTMLElement}
+   */
+  get client_secret_expiry() {
+    return this.select(".sso-settings #sso-azure-secret-expiry-input");
+  }
+
+  /**
+   * Returns the HTMLElement button of the toolbar that is the "Save settings"
+   * @returns {HTMLElement}
+   */
+  get toolbarActionsSaveSettingsButton() {
+    return this.selectAll(".actions-wrapper .actions a")[0];
+  }
+
+  /**
+   * Returns the SSO Settings toggle button HTML element
+   * @returns {HTMLElement}
+   */
+  get toggleButton() {
+    return this.select(".sso-settings .toggle-switch input");
+  }
+
+  /**
+   * Returns the delete SSO Settings dialog HTML element
+   * @returns {HTMLElement}
+   */
+  get deleteConfirmationDialog() {
+    return this.select(".delete-sso-settings-dialog");
+  }
+
+  /**
+   * Returns the delete SSO Settings dialog HTML element
+   * @returns {HTMLElement}
+   */
+  get deleteSettingsButton() {
+    return this.select(".delete-sso-settings-dialog button[type='submit']");
+  }
+}

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

@@ -0,0 +1,55 @@
+/**
+ * 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.9.0
+ */
+import DialogContextProvider from "../../../contexts/DialogContext";
+import ManageDialogs from "../../Common/Dialog/ManageDialogs/ManageDialogs";
+import React from "react";
+import ManageSsoSettings from "./ManageSsoSettings";
+import AdminSsoSettingsContextProvider from "../../../contexts/AdminSsoContext";
+import {defaultProps, disabledSso, azureConfiguredSso} from "./ManageSsoSettings.test.data";
+import DisplayActionFeedbacks from "../../Common/ActionFeedback/DisplayActionFeedbacks";
+import ActionFeedbackContextProvider from "../../../contexts/ActionFeedbackContext";
+
+export default {
+  title: 'Components/Administration/ManageSsoSettings',
+  component: ManageSsoSettings
+};
+
+const Template = args =>
+  <DialogContextProvider>
+    <ManageDialogs/>
+    <ActionFeedbackContextProvider>
+      <DisplayActionFeedbacks/>
+      <AdminSsoSettingsContextProvider {...args}>
+        <div className="panel main">
+          <div className="panel middle">
+            <div className="grid grid-responsive-12">
+              <ManageSsoSettings {...args}/>
+            </div>
+          </div>
+        </div>
+      </AdminSsoSettingsContextProvider>
+    </ActionFeedbackContextProvider>
+  </DialogContextProvider>;
+
+export const Default = Template.bind({});
+Default.args = defaultProps();
+Default.args.context.port.addRequestListener("passbolt.sso.get-current", disabledSso);
+
+export const Azure = Template.bind({});
+Azure.args = defaultProps();
+Azure.args.context.port.addRequestListener("passbolt.sso.get-current", azureConfiguredSso);
+
+export const ErrorFromTheServer = Template.bind({});
+ErrorFromTheServer.args = defaultProps();
+ErrorFromTheServer.args.context.port.addRequestListener("passbolt.sso.get-current", () => { throw new Error("Something went wrong"); });

package/src/react-extension/components/Administration/ManageSsoSettings/SsoProviders.data.js

@@ -0,0 +1,34 @@
+/**
+ * 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.9.0
+ */
+import React from "react";
+
+const SsoProviders = [
+  {
+    id: "azure",
+    name: "Microsoft",
+    icon: (<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.3512 3.04762H3.92261V30.4762H31.3512V3.04762Z" fill="#F25022"/><path d="M31.3512 33.5238H3.92261V60.9524H31.3512V33.5238Z" fill="#00A4EF"/><path d="M61.8274 3.04762H34.3988V30.4762H61.8274V3.04762Z" fill="#7FBA00"/><path d="M61.8274 33.5238H34.3988V60.9524H61.8274V33.5238Z" fill="#FFB900"/></svg>),
+    defaultConfig: {
+      url: "https://login.microsoftonline.com",
+      redirect_url: "/sso/azure/redirect",
+    }
+  },
+  {
+    id: "google",
+    name: "Google",
+    disabled: true,
+    icon: (<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M63.9451 32.72C63.9451 30.6133 63.7584 28.6133 63.4384 26.6667H33.3051V38.6933H50.5584C49.7851 42.64 47.5184 45.9733 44.1584 48.24V56.24H54.4517C60.4784 50.6667 63.9451 42.4533 63.9451 32.72Z" fill="#4285F4"/><path d="M33.305 64C41.945 64 49.1717 61.12 54.4517 56.24L44.1583 48.24C41.2783 50.16 37.625 51.3333 33.305 51.3333C24.9583 51.3333 17.8917 45.7067 15.3583 38.1067H4.745V46.3467C9.99833 56.8 20.7983 64 33.305 64Z" fill="#34A853"/><path d="M15.3584 38.1067C14.6917 36.1867 14.3451 34.1333 14.3451 32C14.3451 29.8667 14.7184 27.8133 15.3584 25.8933V17.6533H4.74505C2.55838 21.9733 1.30505 26.8267 1.30505 32C1.30505 37.1733 2.55838 42.0267 4.74505 46.3467L15.3584 38.1067Z" fill="#FBBC05"/><path d="M33.305 12.6667C38.025 12.6667 42.2383 14.2933 45.5717 17.4667L54.6917 8.34667C49.1717 3.17334 41.945 0 33.305 0C20.7983 0 9.99833 7.20001 4.745 17.6533L15.3583 25.8933C17.8917 18.2933 24.9583 12.6667 33.305 12.6667Z" fill="#EA4335"/></svg>)
+  },
+];
+
+export default SsoProviders;

package/src/react-extension/components/Administration/SelectAccountRecoveryOrganizationKey/GenerateOrganizationKey.js

@@ -26,9 +26,9 @@ import {withAppContext} from "../../../contexts/AppContext";
 import {withDialog} from "../../../contexts/DialogContext";
 import Password from "../../../../shared/components/Password/Password";
 import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
-import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import ExternalServiceUnavailableError from "../../../../shared/lib/Error/ExternalServiceUnavailableError";
 import ExternalServiceError from "../../../../shared/lib/Error/ExternalServiceError";
+import PownedService from "../../../../shared/services/api/secrets/pownedService";
 
 /** Resource password max length */
 const RESOURCE_PASSWORD_MAX_LENGTH = 4096;
@@ -78,6 +78,12 @@ class GenerateOrganizationKey extends React.Component {
     };
   }
 
+  /**
+   * Whenever the component is mounted
+   */
+  componentDidMount() {
+    this.pownedService = new PownedService(this.props.context.port);
+  }
   /**
    * Bind callbacks methods
    */
@@ -172,7 +178,6 @@ class GenerateOrganizationKey extends React.Component {
       : this.state.passphraseErrorState;
 
     this.setState({passphrase, passphraseEntropy, passphraseErrorState});
-
     if (passphraseEntropy >= FAIR_STRENGTH_ENTROPY) {
       this.isPwndProcessingPromise = this.evaluatePassphraseIsInDictionaryDebounce();
     }
@@ -216,7 +221,11 @@ class GenerateOrganizationKey extends React.Component {
 
     let isPwned;
     try {
-      isPwned = await SecretComplexity.ispwned(this.state.passphrase);
+      const result =  await this.pownedService.evaluateSecret(this.state.passphrase);
+      isPwned = result.inDictionary;
+      this.setState({
+        isPwnedServiceAvailable: result.isPwnedServiceAvailable
+      });
     } catch (error) {
       // If the service is unavailable don't block the user journey.
       if (error instanceof ExternalServiceUnavailableError || error instanceof ExternalServiceError) {

package/src/react-extension/components/Administration/SelectAccountRecoveryOrganizationKey/GenerateOrganizationKey.test.js

@@ -24,6 +24,9 @@ import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 function defaultProps() {
   return {
     context: {
+      port: {
+        request: () => Promise.resolve(0)
+      },
       userSettings: new UserSettings(userSettingsFixture)
     },
     dialogContext: {
@@ -35,8 +38,14 @@ function defaultProps() {
 
 beforeEach(() => {
   jest.resetModules();
+  jest.useFakeTimers();
 });
 
+afterEach(() => {
+  jest.clearAllTimers();
+});
+
+
 describe('As AD I can generate an ORK', () => {
   /**
    * Given  that I am a logged in administrator in the administration workspace
@@ -222,4 +231,22 @@ describe('As AD I can generate an ORK', () => {
     expect(page.passphraseFieldError).not.toBeNull();
     expect(page.passphraseFieldError.textContent).toBe(`A strong passphrase is required. The minimum complexity must be 'fair'`);
   });
+
+  it('As AD I should be inform about ExternalServiceUnavailableError for powned password service', async() => {
+    expect.assertions(1);
+    const props = defaultProps();
+    jest.spyOn(props.context.port, "request").mockImplementationOnce(() => Promise.reject());
+    const page = new SelectAccountRecoveryOrganizationKeyPage(props);
+    await waitFor(() => {});
+
+    await page.clickOnGenerateTab(() => {
+      if (!page.isGenerateTabSeletect()) {
+        throw new Error("Changes are not available yet");
+      }
+    });
+    await page.type("This a strong passphrase to test a service not working", page.passphraseField);
+    await waitFor(() => {});
+
+    expect(page.passwordWarningMessage.textContent).toBe("Warning: The pwnedpasswords service is unavailable, your passphrase might be part of an exposed data breach");
+  });
 });

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

@@ -181,6 +181,13 @@ export default class SelectAccountRecoveryOrganizationKeyPage {
     return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.generate-organization-key .password.error-message');
   }
 
+  /**
+   * Returns the password warning mesage input element
+   */
+  get passwordWarningMessage() {
+    return this._page.container.querySelector('.password.warning-message');
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -272,5 +279,6 @@ export default class SelectAccountRecoveryOrganizationKeyPage {
         throw new Error("The field has not changed yet.");
       }
     });
+    jest.runAllTimers();
   }
 }

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

@@ -0,0 +1,197 @@
+/**
+ * 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.9.0
+ */
+import React from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
+import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
+import {withAdminSso} from "../../../contexts/AdminSsoContext";
+import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
+import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitButton";
+import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
+
+const uiStateEnum = {
+  FORM: "form",
+  SUCCESS: "success"
+};
+
+class TestSsoSettingsDialog extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.bindCallbacks();
+  }
+
+  /**
+   * Get default state
+   * @returns {Object}
+   */
+  get defaultState() {
+    return {
+      uiState: uiStateEnum.FORM,
+      hasSuccessfullySignedInWithSso: false,
+      processing: false,
+      ssoToken: null,
+    };
+  }
+
+  /**
+   * Bind callbacks
+   */
+  bindCallbacks() {
+    this.handleSignInTestClick = this.handleSignInTestClick.bind(this);
+    this.handleActivateSsoSettings = this.handleActivateSsoSettings.bind(this);
+    this.handleCloseDialog = this.handleCloseDialog.bind(this);
+  }
+
+  /**
+   * Handles the form submission
+   * @param {Event} event
+   * @returns {Promise<void>}
+   */
+  async handleSignInTestClick(event) {
+    event.preventDefault();
+    try {
+      this.setState({processing: true});
+      const ssoToken = await this.props.context.port.request(`passbolt.sso.test.${this.props.provider.id}`, this.props.configurationId);
+      this.setState({
+        uiState: uiStateEnum.SUCCESS,
+        hasSuccessfullySignedInWithSso: true,
+        ssoToken: ssoToken
+      });
+    } catch (e) {
+      // The user might manually close the popup but other errors than this one are unexpected
+      if (e?.name !== "UserClosedSsoPopUpError") {
+        this.props.adminSsoContext.handleError(e);
+      }
+    }
+    this.setState({processing: false});
+  }
+
+  /**
+   * Handle the click on the settings activation button
+   * @param {Event} event
+   * @returns {Promise<void>}
+   */
+  async handleActivateSsoSettings(event) {
+    event.preventDefault();
+    try {
+      this.setState({processing: true});
+      await this.props.context.port.request("passbolt.sso.activate-settings", this.props.configurationId, this.state.ssoToken);
+      await this.props.context.port.request("passbolt.sso.generate-sso-kit", this.props.provider.id);
+      this.props.onSuccessfulSettingsActivation();
+      this.handleCloseDialog();
+      await this.props.actionFeedbackContext.displaySuccess(this.props.t("SSO settings have been registered successfully"));
+    } catch (e) {
+      this.props.adminSsoContext.handleError(e);
+    }
+    this.setState({processing: false});
+  }
+
+  /**
+   * Handles the closing of the dialog and the notification of the dialog opener
+   */
+  handleCloseDialog() {
+    this.props.onClose();
+    this.props.handleClose();
+  }
+
+  /**
+   * Returns true if the input must be disabled.
+   * @returns {boolean}
+   */
+  hasAllInputDisabled() {
+    return this.state.processing;
+  }
+
+  /**
+   * Returns true when the AD has successfully tested the current draft SSO settings
+   */
+  canSaveSettings() {
+    return !this.hasAllInputDisabled() && this.state.hasSuccessfullySignedInWithSso;
+  }
+
+  /**
+   * Returns the title string to display on the dialog based on the UI state.
+   * @returns {string}
+   */
+  get title() {
+    const stateTitles = {
+      form: this.translate("Test Single Sign-On configuration"),
+      success: this.translate("Save Single Sign-On configuration"),
+    };
+
+    return stateTitles[this.state.uiState] || "";
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <DialogWrapper className='test-sso-settings-dialog sso-login-form' title={this.title}
+        onClose={this.handleCloseDialog} disabled={this.hasAllInputDisabled()}>
+        <form onSubmit={this.handleActivateSsoSettings}>
+          <div className="form-content">
+            {this.state.uiState === uiStateEnum.FORM &&
+              <>
+                <p><Trans>Before saving the settings, we need to test if the configuration is working.</Trans></p>
+                <a className={`button sso-login-button ${this.hasAllInputDisabled() ? "disabled" : ""} ${this.props.provider.id}`} onClick={this.handleSignInTestClick} disabled={this.hasAllInputDisabled()} >
+                  <span className="provider-logo">
+                    {this.props.provider.icon}
+                  </span>
+                  {this.translate(`Sign in with {{providerName}}`, {providerName: this.props.provider.name})}
+                </a>
+              </>
+            }
+            {this.state.uiState === uiStateEnum.SUCCESS &&
+              <p>{this.translate(`You susccessfully signed in with your {{providerName}} account. You can safely save your configuration.`, {providerName: this.props.provider.name})}</p>
+            }
+          </div>
+          <div className="submit-wrapper clearfix">
+            <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleCloseDialog}/>
+            <FormSubmitButton disabled={!this.canSaveSettings()} processing={this.state.processing} value={this.translate("Save settings")}/>
+          </div>
+        </form>
+      </DialogWrapper>
+    );
+  }
+}
+
+TestSsoSettingsDialog.propTypes = {
+  context: PropTypes.object, // Application context
+  adminSsoContext: PropTypes.object, // The administration SSO settings context
+  onClose: PropTypes.func, // The close dialog callback
+  t: PropTypes.func, // The translation function
+  provider: PropTypes.object, // The selected SSO provider to test
+  configurationId: PropTypes.string, // the configuration identifier to be tested
+  actionFeedbackContext: PropTypes.any, // The action feedback context
+  handleClose: PropTypes.func, // handle the closing of the dialog
+  onSuccessfulSettingsActivation: PropTypes.func, // callback to notify when the settings hasve been activated successsfully
+};
+
+export default withAppContext(withAdminSso(withActionFeedback(withTranslation('common')(TestSsoSettingsDialog))));

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

@@ -0,0 +1,37 @@
+/**
+ * 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.9.0
+ */
+import {defaultAppContext} from "../../../contexts/ExtAppContext.test.data";
+import {v4 as uuid} from "uuid";
+import SsoProviders from "../ManageSsoSettings/SsoProviders.data";
+
+/**
+ * Default props.
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function defaultProps(props = {}) {
+  const defaultProps = {
+    context: defaultAppContext(props?.context),
+    handleClose: jest.fn(),
+    onSuccessfulSettingsActivation: jest.fn(),
+    provider: SsoProviders.at(0),
+    configurationId: uuid(),
+    onClose: jest.fn(),
+    dialogContext: {
+      open: jest.fn(),
+    }
+  };
+  delete props.context; // Treated in the default
+  return Object.assign(defaultProps, props);
+}