passbolt-styleguide 3.8.4 → 3.9.0-alpha2

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

@@ -0,0 +1,340 @@
+/**
+ * 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 {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
+import Icon from "../../../../shared/components/Icons/Icon";
+import {withAdministrationWorkspace} from "../../../contexts/AdministrationWorkspaceContext";
+import {Trans, withTranslation} from "react-i18next";
+import Select from "../../Common/Select/Select";
+import DisplayAdministrationSsoActions from "../DisplayAdministrationWorkspaceActions/DisplayAdministrationSsoActions/DisplayAdministrationSsoActions";
+import {withAdminSso} from "../../../contexts/AdminSsoContext";
+import SsoProviders from "./SsoProviders.data";
+import {withAppContext} from "../../../contexts/AppContext";
+import Password from "../../../../shared/components/Password/Password";
+
+/**
+ * This component displays the SSO administration settings
+ */
+class ManageSsoSettings extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.bindCallbacks();
+    this.createRefs();
+  }
+
+  /**
+   * Get default state
+   * @returns {*}
+   */
+  get defaultState() {
+    return {
+      loading: true,
+    };
+  }
+
+  async componentDidMount() {
+    this.props.administrationWorkspaceContext.setDisplayAdministrationWorkspaceAction(DisplayAdministrationSsoActions);
+    await this.props.adminSsoContext.loadSsoConfiguration();
+    this.setState({
+      loading: false
+    });
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleProviderInputChange = this.handleProviderInputChange.bind(this);
+    this.handleSsoSettingToggle = this.handleSsoSettingToggle.bind(this);
+    this.handleCopyRedirectUrl = this.handleCopyRedirectUrl.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+
+  createRefs() {
+    this.datePickerRef = React.createRef();
+  }
+
+  /**
+   * Handle form input changes.
+   * @params {ReactEvent} The react event
+   * @returns {void}
+   */
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.type === "checkbox" ? target.checked : target.value;
+    const name = target.name;
+    this.props.adminSsoContext.setValue(name, value);
+  }
+
+  /**
+   * Handle provider input change.
+   */
+  handleProviderInputChange(event) {
+    this.props.adminSsoContext.changeProvider({
+      id: event.target.value
+    });
+  }
+
+  /**
+   * Handle the SSO settings toggle
+   */
+  handleSsoSettingToggle() {
+    this.props.adminSsoContext.disableSso();
+  }
+
+  /**
+   * Handle the copy to clipboard button
+   */
+  async handleCopyRedirectUrl() {
+    await navigator.clipboard.writeText(this.fullRedirectUrl);
+    await this.props.actionFeedbackContext.displaySuccess(this.translate("The redirection URL has been copied to the clipboard."));
+  }
+
+  async handleFormSubmit(event) {
+    event.preventDefault();
+    const context = this.props.adminSsoContext;
+    if (!context.hasFormChanged() || !context.validateData()) {
+      return;
+    }
+    await context.saveAndTestConfiguration();
+  }
+
+  /**
+   * Should input be disabled? True if state is loading or processing
+   * @returns {boolean}
+   */
+  hasAllInputDisabled() {
+    return this.props.adminSsoContext.isProcessing() || this.state.loading;
+  }
+
+  /**
+   * Get the supported SSO providers.
+   */
+  get supportedSsoProviders() {
+    const supportedProviders = this.props.adminSsoContext.getProvidersList();
+    return supportedProviders.map(provider => ({
+      value: provider.id,
+      label: provider.name
+    }));
+  }
+
+  /**
+   * Get the full redirection URL;
+   */
+  get fullRedirectUrl() {
+    const ssoConfig = this.props.adminSsoContext.getSsoConfiguration();
+    const trustedDomain = this.props.context.userSettings.getTrustedDomain();
+    return `${trustedDomain}${ssoConfig?.data?.redirect_url}`;
+  }
+
+  /**
+   * Returns true if the data is loaded.
+   * Useful to avoid UI blinking during data loading.
+   * @returns {boolean}
+   */
+  isReady() {
+    return this.props.adminSsoContext.isDataReady();
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    const ssoContext = this.props.adminSsoContext;
+    const ssoConfig = ssoContext.getSsoConfiguration();
+    const isSsoActivated = ssoContext.isSsoConfigActivated();
+    const errors = ssoContext.getErrors();
+    return (
+      <div className="row">
+        <div className="third-party-provider-settings sso-settings col8 main-column">
+          <h3>
+            <span className="input toggle-switch form-element">
+              <input type="checkbox" className="toggle-switch-checkbox checkbox" name="ssoToggle"
+                onChange={this.handleSsoSettingToggle} checked={isSsoActivated} disabled={this.hasAllInputDisabled()}
+                id="ssoToggle"/>
+              <label htmlFor="ssoToggle"><Trans>Single Sign-On</Trans></label>
+            </span>
+          </h3>
+          {this.props.adminSsoContext.hasFormChanged() &&
+            <div className="warning message" id="sso-setting-overridden-banner">
+              <p>
+                <Trans>Warning, Don&apos;t forget to save your settings to apply your modification.</Trans>
+              </p>
+            </div>
+          }
+          {this.isReady() && !isSsoActivated &&
+            <>
+              <h4 className="no-border"><Trans>Select a provider</Trans></h4>
+              <div className="provider-list">
+                {SsoProviders.map(provider =>
+                  <div key={provider.id} className={`provider button ${provider.disabled ? "disabled" : ""}`} id={provider.id} onClick={() => this.props.adminSsoContext.changeProvider(provider)}>
+                    <div className="provider-logo">
+                      {provider.icon}
+                    </div>
+                    <p className="provider-name">{provider.name}<br/>
+                      {provider.disabled &&
+                        <Trans>(not yet available)</Trans>
+                      }
+                    </p>
+                  </div>
+                )}
+              </div>
+            </>
+          }
+          {this.isReady() && isSsoActivated &&
+            <form className="form" onSubmit={this.handleFormSubmit}>
+              <div className="select-wrapper input">
+                <label htmlFor="sso-provider-input"><Trans>Single Sign-On provider</Trans></label>
+                <Select id="sso-provider-input" name="provider" items={this.supportedSsoProviders} value={ssoConfig?.provider} onChange={this.handleProviderInputChange}/>
+              </div>
+              {ssoConfig?.provider === "azure" &&
+                <>
+                  <hr/>
+                  <div className={`input text required ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+                    <label><Trans>Login URL</Trans></label>
+                    <input id="sso-azure-url-input" type="text" className="fluid form-element" name="url"
+                      value={ssoConfig?.data?.url} onChange={this.handleInputChange} placeholder={this.translate("Login URL")}
+                      disabled={this.hasAllInputDisabled()}/>
+                    {errors.url &&
+                      <div className="error-message">{errors.url}</div>
+                    }
+                    <p>
+                      <Trans>The Azure AD authentication endpoint. See <a href="https://learn.microsoft.com/en-us/azure/active-directory/develop/authentication-national-cloud#azure-ad-authentication-endpoints" rel="noopener noreferrer" target="_blank">alternatives</a>.</Trans>
+                    </p>
+                  </div>
+                  <div className={`input text input-wrapper ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+                    <label><Trans>Redirect URL</Trans></label>
+                    <div className="button-inline">
+                      <input id="sso-redirect-url-input" type="text" className="fluid form-element disabled" name="redirect_url"
+                        value={this.fullRedirectUrl} placeholder={this.translate("Redirect URL")} readOnly disabled={true}/>
+                      <a onClick={this.handleCopyRedirectUrl} className="copy-to-clipboard button button-icon">
+                        <Icon name="copy-to-clipboard"/>
+                      </a>
+                    </div>
+                    <p>
+                      <Trans>The URL to provide to Azure when registering the application.</Trans>
+                    </p>
+                  </div>
+                  <hr/>
+                  <div className={`input text required ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+                    <label><Trans>Application (client) ID</Trans></label>
+                    <input id="sso-azure-client-id-input" type="text" className="fluid form-element" name="client_id"
+                      value={ssoConfig?.data?.client_id} onChange={this.handleInputChange} placeholder={this.translate("Application (client) ID")}
+                      disabled={this.hasAllInputDisabled()}/>
+                    {errors.client_id &&
+                      <div className="error-message">{errors.client_id}</div>
+                    }
+                    <p>
+                      <Trans>The public identifier for the app in Azure in UUID format.</Trans> <Trans><a href="https://learn.microsoft.com/en-gb/azure/active-directory/develop/quickstart-register-app" rel="noopener noreferrer" target="_blank">Where to find it?</a></Trans>
+                    </p>
+                  </div>
+                  <div className={`input text required ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+                    <label><Trans>Directory (tenant) ID</Trans></label>
+                    <input id="sso-azure-tenant-id-input" type="text" className="fluid form-element" name="tenant_id"
+                      value={ssoConfig?.data?.tenant_id} onChange={this.handleInputChange} placeholder={this.translate("Directory ID")}
+                      disabled={this.hasAllInputDisabled()}/>
+                    {errors.tenant_id &&
+                      <div className="error-message">{errors.tenant_id}</div>
+                    }
+                    <p>
+                      <Trans>The Azure Active Directory tenant ID, in UUID format.</Trans> <Trans><a href="https://learn.microsoft.com/en-gb/azure/active-directory/develop/quickstart-create-new-tenant#create-a-new-azure-ad-tenant" rel="noopener noreferrer" target="_blank">Where to find it?</a></Trans>
+                    </p>
+                  </div>
+                  <div className={`input text required ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+                    <label><Trans>Secret</Trans></label>
+                    <Password
+                      id="sso-azure-secret-input"
+                      className="fluid form-element"
+                      onChange={this.handleInputChange}
+                      autoComplete="off"
+                      name="client_secret"
+                      placeholder={this.translate("Secret")}
+                      disabled={this.hasAllInputDisabled()}
+                      value={ssoConfig?.data?.client_secret}
+                      preview={true}/>
+                    {errors.client_secret &&
+                      <div className="error-message">{errors.client_secret}</div>
+                    }
+                    <p>
+                      <Trans>Allows Azure and Passbolt API to securely share information.</Trans> <Trans><a href="https://learn.microsoft.com/en-gb/azure/active-directory/develop/quickstart-register-app#add-a-client-secret" rel="noopener noreferrer" target="_blank">Where to find it?</a></Trans>
+                    </p>
+                  </div>
+                  <div className={`input text date-wrapper required ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+                    <label><Trans>Secret expiry</Trans></label>
+                    <div className="button-inline">
+                      <input id="sso-azure-secret-expiry-input" type="date" className={`fluid form-element ${ssoConfig.data.client_secret_expiry ? "" : "empty"}`} name="client_secret_expiry"
+                        value={ssoConfig?.data?.client_secret_expiry} onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>
+                      <Icon name="calendar"/>
+                    </div>
+                    {errors.client_secret_expiry &&
+                      <div className="error-message">{errors.client_secret_expiry}</div>
+                    }
+                  </div>
+                  <div className="warning message">
+                    <Trans><b>Warning</b>: This secret will expire after some time (typically a few months). Make sure you save the expiry date and rotate it on time.</Trans>
+                  </div>
+                </>
+              }
+            </form>
+          }
+        </div>
+        <div className="col4 last">
+          <div className="sidebar-help">
+            <h3><Trans>Need some help?</Trans></h3>
+            <p><Trans>For more information about SSO, checkout the dedicated page on the help website.</Trans></p>
+            <a className="button" href="https://help.passbolt.com/configure/sso" target="_blank" rel="noopener noreferrer">
+              <Icon name="document"/>
+              <span><Trans>Read the documentation</Trans></span>
+            </a>
+          </div>
+          {ssoConfig?.provider === "azure" &&
+          <div className="sidebar-help">
+            <h3><Trans>How do I configure a AzureAD SSO?</Trans></h3>
+            <a className="button" href="https://docs.microsoft.com/en-us/azure/active-directory/manage-apps/add-application-portal-setup-sso" target="_blank" rel="noopener noreferrer">
+              <Icon name="external-link"/>
+              <span><Trans>Read the documentation</Trans></span>
+            </a>
+          </div>
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+ManageSsoSettings.propTypes = {
+  administrationWorkspaceContext: PropTypes.object, // The administration workspace context
+  adminSsoContext: PropTypes.object, // The administration sso configuration context
+  actionFeedbackContext: PropTypes.any, // The action feedback context
+  context: PropTypes.any, // The application context
+  t: PropTypes.func, // The translation function
+};
+
+export default withAppContext(withActionFeedback(withAdministrationWorkspace(withAdminSso(withTranslation('common')(ManageSsoSettings)))));

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

@@ -0,0 +1,56 @@
+/**
+ * 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";
+
+/**
+ * Default props.
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function defaultProps(data = {}) {
+  const defaultProps = {
+    context: defaultAppContext(data?.context),
+    administrationWorkspaceContext: {
+      setDisplayAdministrationWorkspaceAction: jest.fn(),
+      resetDisplayAdministrationWorkspaceAction: jest.fn(),
+      must: {
+        save: jest.fn()
+      }
+    }
+  };
+  delete data.context; // Treated in the default
+  return Object.assign(defaultProps, data);
+}
+
+export function disabledSso(data = {}) {
+  const defaultData = {
+    provider: null,
+    providers: ["azure", "Fake provider"]
+  };
+  return Object.assign(defaultData, data);
+}
+
+export function azureConfiguredSso(data = {}) {
+  const defaultData = {
+    provider: "azure",
+    data: {
+      url: "https://login.microsoftonline.com/..",
+      tenant_id: "5n6p8r9s-m5n6-6p7q-3k5n-8r9s3k4m5n7q",
+      client_id: "f2j3m5n6-c3k4-m5p7-x2j4-y2k4m5n7q8r9",
+      client_secret: "u8x!A%D*G-KaPdSgVkYp3s6v9y$B?E..",
+      client_secret_expiry: "2022-11-02",
+    }
+  };
+  return disabledSso(Object.assign(defaultData, data));
+}

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

@@ -0,0 +1,223 @@
+/**
+ * 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
+ */
+
+/**
+ * Unit tests on ManageSsoSettings in regard of specifications
+ */
+import SsoProviders from "./SsoProviders.data";
+import ManageSsoSettingsPage from "./ManageSsoSettings.test.page";
+import {waitFor} from "@testing-library/react";
+import {defaultProps} from "./ManageSsoSettings.test.data";
+import {
+  defaultSsoSettings,
+  withAzureSsoSettings,
+} from "../../../contexts/AdminSsoContext.test.data";
+import NotifyError from "../../Common/Error/NotifyError/NotifyError";
+import {v4 as uuid} from "uuid";
+import TestSsoSettingsDialog from "../TestSsoSettingsDialog/TestSsoSettingsDialog";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("ManageSsoSettings", () => {
+  describe("As a signed-in administrator I can enable the SSO organisation settings", () => {
+    it('As a signed-in administrator on the administration workspace, I can see the SSO settings populated with the current settings: without settings', async() => {
+      expect.assertions(3);
+      const props = defaultProps();
+      props.context.port.addRequestListener("passbolt.sso.get-current", async() => defaultSsoSettings());
+
+      const page = new ManageSsoSettingsPage(props);
+
+      await waitFor(() => {
+        if (page.providerButtons.length === 0) {
+          throw new Error("Page is not loaded yet");
+        }
+      });
+
+      expect(page.exists()).toBeTruthy();
+      expect(page.title.textContent).toBe("Single Sign-On");
+      expect(page.providerButtons.length).toBe(SsoProviders.length);
+    });
+
+    it('As a signed-in administrator on the administration workspace, I can see the SSO settings populated with the current settings: with Azure settings', async() => {
+      expect.assertions(15);
+      const settingsData = withAzureSsoSettings();
+      const providerDefaultConfig = SsoProviders.find(provider => provider.id === settingsData.provider);
+
+      const props = defaultProps();
+      props.context.port.addRequestListener("passbolt.sso.get-current", async() => settingsData);
+
+      const exepectedRedirectUrl = `${props.context.userSettings.getTrustedDomain()}${providerDefaultConfig.defaultConfig.redirect_url}`;
+
+      const page = new ManageSsoSettingsPage(props);
+
+      await waitFor(() => {
+        if (!page.url) {
+          throw new Error("Page is not loaded yet");
+        }
+      });
+
+      expect(page.exists()).toBeTruthy();
+      expect(page.title.textContent).toBe("Single Sign-On");
+      expect(page.providerButtons.length).toBe(0);
+      expect(page.url).toBeTruthy();
+      expect(page.redirect_url).toBeTruthy();
+      expect(page.tenant_id).toBeTruthy();
+      expect(page.client_id).toBeTruthy();
+      expect(page.client_secret).toBeTruthy();
+      expect(page.client_secret_expiry).toBeTruthy();
+
+      expect(page.url.value).toBe(settingsData.data.url);
+      expect(page.redirect_url.value).toBe(exepectedRedirectUrl);
+      expect(page.tenant_id.value).toBe(settingsData.data.tenant_id);
+      expect(page.client_id.value).toBe(settingsData.data.client_id);
+      expect(page.client_secret.value).toBe(settingsData.data.client_secret);
+      expect(page.client_secret_expiry.value).toBe(settingsData.data.client_secret_expiry);
+    });
+
+    it("As a signed-in administrator on the administration workspace, I can see a dialog with detailed error if the settings can't be read from the server", async() => {
+      expect.assertions(1);
+      const mockDialogContext = {
+        dialogContext: {
+          open: jest.fn()
+        }
+      };
+
+      const error = new Error("Something went wrong!");
+      const props = defaultProps(mockDialogContext);
+      props.context.port.addRequestListener("passbolt.sso.get-current", async() => { throw error; });
+
+      new ManageSsoSettingsPage(props);
+
+      await waitFor(() => {
+        const callCount = mockDialogContext.dialogContext.open.mock.calls.length;
+        if (!callCount) {
+          throw new Error("Call to dialog has not been done yet");
+        }
+      });
+
+      expect(mockDialogContext.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error});
+    });
+
+    it("As an administrator I can disable SSO Settings", async() => {
+      expect.assertions(4);
+      const settingsData = withAzureSsoSettings();
+
+      const props = defaultProps();
+      props.context.port.addRequestListener("passbolt.sso.get-current", async() => settingsData);
+      props.context.port.addRequestListener("passbolt.sso.delete-settings", async settingsId => {
+        expect(settingsId).toStrictEqual(settingsData.id);
+      });
+
+      const page = new ManageSsoSettingsPage(props);
+
+      await waitFor(() => {
+        if (!page.url) {
+          throw new Error("Page is not loaded yet");
+        }
+      });
+
+      await page.toggleSsoSettings();
+
+      expect(page.toolbarActionsSaveSettingsButton.classList.contains("disabled")).toBeFalsy();
+
+      await page.saveSettings(() => Boolean(page.deleteConfirmationDialog));
+
+      expect(page.deleteConfirmationDialog).toBeTruthy();
+
+      await page.confirmDelete();
+
+      expect(page.deleteConfirmationDialog).toBeFalsy();
+    });
+  });
+
+  describe("As a signed-in administrator I can save the SSO server settings", () => {
+    it('As a signed-in administrator when the “Single Sign On” settings have not changed, I cannot trigger the “Save settings” action', async() => {
+      expect.assertions(2);
+      const settingsData = withAzureSsoSettings();
+      const props = defaultProps();
+      props.context.port.addRequestListener("passbolt.sso.get-current", async() => settingsData);
+
+      const page = new ManageSsoSettingsPage(props);
+
+      await waitFor(() => {
+        if (!page.url) {
+          throw new Error("Page is not loaded yet");
+        }
+      });
+
+      expect(page.toolbarActionsSaveSettingsButton.classList.contains("disabled")).toBeTruthy();
+
+      await page.setFormWith({
+        tenant_id: "tenant id test"
+      });
+
+      expect(page.toolbarActionsSaveSettingsButton.classList.contains("disabled")).toBeFalsy();
+    });
+
+    it('As AD I cannot save the SSO settings before testing them', async() => {
+      expect.assertions(2);
+      const settingsData = withAzureSsoSettings();
+      const mockDialogContext = {
+        dialogContext: {
+          open: jest.fn()
+        }
+      };
+      const props = defaultProps(mockDialogContext);
+
+      const formData = {
+        url: "https://fakeurl.passbolt.com/",
+        client_id: uuid(),
+        tenant_id: uuid(),
+        client_secret: uuid(),
+        client_secret_expiry: "2050-12-31"
+      };
+
+      props.context.port.addRequestListener("passbolt.sso.get-current", async() => settingsData);
+      props.context.port.addRequestListener("passbolt.sso.save-draft", async ssoSettings => {
+        expect(ssoSettings).toStrictEqual({
+          provider: settingsData.provider,
+          data: {
+            url: formData.url,
+            tenant_id: formData.tenant_id,
+            client_id: formData.client_id,
+            client_secret: formData.client_secret,
+            client_secret_expiry: formData.client_secret_expiry,
+          },
+        });
+        return Object.assign({}, settingsData, ssoSettings);
+      });
+
+      const page = new ManageSsoSettingsPage(props);
+
+      await waitFor(() => {
+        if (!page.url) {
+          throw new Error("Page is not loaded yet");
+        }
+      });
+
+      await page.setFormWith(formData);
+
+      await page.saveSettings(() => mockDialogContext.dialogContext.open.mock.calls.length > 0);
+
+      expect(mockDialogContext.dialogContext.open).toHaveBeenCalledWith(TestSsoSettingsDialog, expect.objectContaining({
+        provider: SsoProviders.find(provider => provider.id === "azure"),
+        configurationId: settingsData.id,
+        handleClose: expect.any(Function),
+        onSuccessfulSettingsActivation: expect.any(Function),
+      }));
+    });
+  });
+});