passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/ExtAuthenticationLogin.js

@@ -22,6 +22,7 @@ import UserSettings from "../shared/lib/Settings/UserSettings";
 import OrchestrateLoginBoxMain from "./components/AuthenticationLogin/OrchestrateLogin/OrchestrateLoginBoxMain";
 import Footer from "./components/Common/Footer/Footer";
 import OrchestrateLoginBoxFooter from "./components/AuthenticationLogin/OrchestrateLogin/OrchestrateLoginBoxFooter";
+import SsoContextProvider from "./contexts/SsoContext";
 
 /**
  * The login application served by the browser extension.
@@ -127,22 +128,24 @@ class ExtAuthenticationLogin extends Component {
         {this.isReady() &&
         <TranslationProvider loadingPath="/webAccessibleResources/locales/{{lng}}/{{ns}}.json">
           <Router>
-            <AuthenticationLoginContextProvider>
-              <div id="container" className="container page login">
-                <div className="content">
-                  <div className="header">
-                    <div className="logo"><span className="visually-hidden">Passbolt</span></div>
-                  </div>
-                  <div className="login-form">
-                    <OrchestrateLoginBoxMain/>
-                  </div>
-                  <div className="login-box-footer">
-                    <OrchestrateLoginBoxFooter/>
+            <SsoContextProvider>
+              <AuthenticationLoginContextProvider>
+                <div id="container" className="container page login">
+                  <div className="content">
+                    <div className="header">
+                      <div className="logo"><span className="visually-hidden">Passbolt</span></div>
+                    </div>
+                    <div className="login-form">
+                      <OrchestrateLoginBoxMain/>
+                    </div>
+                    <div className="login-box-footer">
+                      <OrchestrateLoginBoxFooter/>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <Footer/>
-            </AuthenticationLoginContextProvider>
+                <Footer/>
+              </AuthenticationLoginContextProvider>
+            </SsoContextProvider>
           </Router>
         </TranslationProvider>
         }
@@ -157,4 +160,3 @@ ExtAuthenticationLogin.propTypes = {
 };
 
 export default ExtAuthenticationLogin;
-

package/src/react-extension/ExtAuthenticationLogin.test.stories.js

@@ -0,0 +1,59 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 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) 2020 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 ExtAuthenticationLogin from "./ExtAuthenticationLogin";
+import MockPort from "./test/mock/MockPort";
+import siteSettingsFixture from "./test/fixture/Settings/siteSettings";
+import mockStorage from "../../demo/ext-app/mock/mockStorage";
+
+export default {
+  title: 'Components/ExtAuthenticationLogin/ExtAuthenticationLogin',
+  component: ExtAuthenticationLogin
+};
+
+function getMockedPort() {
+  const mockedPort = new MockPort();
+  mockedPort.addRequestListener("passbolt.organization-settings.get", () => siteSettingsFixture);
+  mockedPort.addRequestListener("passbolt.locale.get", () => ({
+    locale: 'en-UK',
+    label: 'English'
+  }));
+  return mockedPort;
+}
+
+const mockedStorage = new mockStorage();
+
+const Template = args => <ExtAuthenticationLogin {...args}/>;
+
+const defaultParameters = {
+  css: "ext_authentication"
+};
+
+export const Initial = Template.bind({});
+Initial.args = {
+  port: getMockedPort(),
+  storage: mockedStorage
+};
+Initial.parameters = defaultParameters;
+
+const mockedPortWithSso = getMockedPort();
+const ssoLocalConfiguredProvider = "azure";
+mockedPortWithSso.addRequestListener("passbolt.sso.get-local-configured-provider", () => ssoLocalConfiguredProvider);
+
+export const WithSsoKitAvailable = Template.bind({});
+WithSsoKitAvailable.args = {
+  port: mockedPortWithSso,
+  storage: mockedStorage
+};
+WithSsoKitAvailable.parameters = defaultParameters;

package/src/react-extension/ExtBootstrapApp.js

@@ -140,6 +140,7 @@ class ExtBootstrapApp extends Component {
               "/app/account-recovery/requests/review/:accountRecoveryRequestId",
               "/app/administration/subscription",
               "/app/administration/account-recovery",
+              "/app/administration/sso",
               "/app/folders/view/:filterByFolderId",
               "/app/groups/view/:selectedGroupId",
               "/app/groups/edit/:selectedGroupId",

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

@@ -36,6 +36,8 @@ import ManageAccountRecoveryAdministrationSettings
   from "./ManageAccountRecoveryAdministrationSettings/ManageAccountRecoveryAdministrationSettings";
 import ManageSmtpAdministrationSettings
   from "./ManageSmtpAdministrationSettings/ManageSmtpAdministrationSettings.js";
+import DisplaySelfRegistrationAdministration from "./DisplaySelfRegistrationAdministration/DisplaySelfRegistrationAdministration";
+import ManageSsoSettings from "./ManageSsoSettings/ManageSsoSettings";
 
 class AdministrationWorkspace extends Component {
   /**
@@ -94,6 +96,22 @@ class AdministrationWorkspace extends Component {
     return AdministrationWorkspaceMenuTypes.SMTP_SETTINGS === this.props.administrationWorkspaceContext.selectedAdministration;
   }
 
+  /**
+   * If Self registration settings menu is selected
+   * @returns {boolean}
+   */
+  isSelfRegistrationSelected() {
+    return AdministrationWorkspaceMenuTypes.SELF_REGISTRATION === this.props.administrationWorkspaceContext.selectedAdministration;
+  }
+
+  /**
+   * If SSO menu is selected
+   * @returns {boolean}
+   */
+  isSsoSelected() {
+    return AdministrationWorkspaceMenuTypes.SSO === this.props.administrationWorkspaceContext.selectedAdministration;
+  }
+
   render() {
     const AdministrationWorkspaceAction = this.props.administrationWorkspaceContext.administrationWorkspaceAction;
     return (
@@ -141,6 +159,12 @@ class AdministrationWorkspace extends Component {
                   {this.isSmtpSettingsSelected() &&
                   <ManageSmtpAdministrationSettings/>
                   }
+                  {this.isSelfRegistrationSelected() &&
+                  <DisplaySelfRegistrationAdministration/>
+                  }
+                  {this.isSsoSelected() &&
+                  <ManageSsoSettings/>
+                  }
                 </div>
               </div>
             </div>

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

@@ -3,8 +3,8 @@
  * @param appContext An existing app context
  * @returns {any | ({userSettings: UserSettings, siteSettings: SiteSettings, port: MockPort} & {})}
  */
-import DisplayAdministrationWorkspaceActions
-  from "./DisplayAdministrationWorkspaceActions/DisplayAdministrationWorkspaceActions";
+
+import DisplayAdministrationEmailNotificationActions from "./DisplayAdministrationWorkspaceActions/DisplayAdministrationEmailNotificationActions/DisplayAdministrationEmailNotificationActions";
 
 export function defaultAppContext(appContext) {
   const defaultAppContext = {
@@ -25,7 +25,7 @@ export function defaultProps(selectedAdministration) {
     },
     administrationWorkspaceContext: {
       selectedAdministration,
-      administrationWorkspaceAction: DisplayAdministrationWorkspaceActions
+      administrationWorkspaceAction: DisplayAdministrationEmailNotificationActions
     }
   };
 }

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

@@ -23,7 +23,6 @@ import AdministrationWorkspacePage from "./AdministrationWorkspace.test.page";
 import {waitFor} from "@testing-library/dom";
 import {AdministrationWorkspaceMenuTypes} from "../../contexts/AdministrationWorkspaceContext";
 
-jest.mock("./DisplayAdministrationWorkspaceActions/DisplayAdministrationWorkspaceActions", () => () => <></>); // eslint-disable-line no-use-before-define
 jest.mock("./DisplayAdministrationMenu/DisplayAdministrationMenu", () => () => <></>);
 jest.mock("./DisplayAdministrationWorkspaceBreadcrumb/DisplayAdministrationWorkspaceBreadcrumb", () => () => <></>);
 jest.mock("./DisplayMfaAdministration/DisplayMfaAdministration", () => () => <span className="mfa-details"></span>);
@@ -32,6 +31,7 @@ jest.mock("./DisplayEmailNotificationsAdministration/DisplayEmailNotificationsAd
 jest.mock("./DisplaySubscriptionKey/DisplaySubscriptionKey", () => () => <span className="subscription-key-details"></span>);
 jest.mock("./DisplayInternationalizationAdministration/DisplayInternationalizationAdministration", () => () => <span className="internationalization-details"></span>);
 jest.mock("./ManageAccountRecoveryAdministrationSettings/ManageAccountRecoveryAdministrationSettings", () => () => <span className="account-recovery-details"></span>);
+jest.mock("./DisplaySelfRegistrationAdministration/DisplaySelfRegistrationAdministration", () => () => <span className="self-registration-details"></span>);
 
 beforeEach(() => {
   jest.resetModules();
@@ -106,5 +106,17 @@ describe("Display Administration Workspace", () => {
     expect(page.isInternationalizationSelected).toBeFalsy();
     expect(page.isAccountRecoverySelected).toBeTruthy();
   });
+
+  it('As AD, I should see the self registration details area', async() => {
+    page = new AdministrationWorkspacePage(context, defaultProps(AdministrationWorkspaceMenuTypes.SELF_REGISTRATION));
+    await waitFor(() => {});
+    expect(page.isMfaSelected).toBeFalsy();
+    expect(page.isUserDirectorySelected).toBeFalsy();
+    expect(page.isEmailNotificationsSelected).toBeFalsy();
+    expect(page.isSubscriptionKeySelected).toBeFalsy();
+    expect(page.isInternationalizationSelected).toBeFalsy();
+    expect(page.isAccountRecoverySelected).toBeFalsy();
+    expect(page.isSelfRegistrationSelected).toBeTruthy();
+  });
 });
 

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

@@ -82,5 +82,12 @@ export default class AdministrationWorkspacePage {
   get isAccountRecoverySelected() {
     return Boolean(this._page.container.querySelector('.account-recovery-details'));
   }
+
+  /**
+   * Returns true if the account recovery area is visible
+   */
+  get isSelfRegistrationSelected() {
+    return Boolean(this._page.container.querySelector('.self-registration-details'));
+  }
 }
 

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

@@ -0,0 +1,101 @@
+/**
+ * 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 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";
+
+
+class ConfirmDeleteSsoSettingsDialog 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 {
+      processing: false
+    };
+  }
+
+  /**
+   * Bind callbacks
+   */
+  bindCallbacks() {
+    this.handleConfirmDelete = this.handleConfirmDelete.bind(this);
+  }
+
+  /**
+   * Handles the form submission
+   * @param {Event} event
+   * @returns {Promise<void>}
+   */
+  async handleConfirmDelete(event) {
+    event.preventDefault();
+    this.setState({processing: true});
+    await this.props.adminSsoContext.deleteSettings();
+    this.props.onClose();
+    this.setState({processing: false});
+  }
+
+  /**
+   * Returns true if the input must be disabled.
+   * @returns {boolean}
+   */
+  hasAllInputDisabled() {
+    return this.state.processing;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    const isDisabled = this.hasAllInputDisabled();
+    return (
+      <DialogWrapper className='delete-sso-settings-dialog' title={this.props.t("Disable Single Sign-On settings?")} onClose={this.props.onClose} disabled={isDisabled}>
+        <form onSubmit={this.handleConfirmDelete} noValidate>
+          <div className="form-content">
+            <p><Trans>Are you sure you want to disable the current Single Sign-On settings?</Trans></p>
+            <p><Trans>This action cannot be undone. All the data associated with SSO will be permanently deleted.</Trans></p>
+          </div>
+          <div className="submit-wrapper clearfix">
+            <FormCancelButton disabled={isDisabled} onClick={this.props.onClose}/>
+            <FormSubmitButton warning={true} disabled={isDisabled} processing={this.state.processing} value={this.props.t("Disable")}/>
+          </div>
+        </form>
+      </DialogWrapper>
+    );
+  }
+}
+
+ConfirmDeleteSsoSettingsDialog.propTypes = {
+  adminSsoContext: PropTypes.object, // The administration SSO settings context
+  onClose: PropTypes.func, // The close dialog callback
+  t: PropTypes.func, // The translation function
+};
+
+export default withAdminSso(withTranslation('common')(ConfirmDeleteSsoSettingsDialog));

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

@@ -0,0 +1,23 @@
+/**
+ * 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
+ */
+
+export function defaultProps(props = {}) {
+  const _props = {
+    adminSsoContext: {
+      deleteSettings: () => { console.log("Delete settings confirmed!"); }
+    },
+    onClose: () => { console.log("Close dialog called"); }
+  };
+  return Object.assign(_props, props);
+}

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

@@ -0,0 +1,27 @@
+/**
+ * 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 ConfirmDeleteSsoSettingsDialog from "./ConfirmDeleteSsoSettingsDialog";
+import {defaultProps} from "./ConfirmDeleteSsoSettingsDialog.test.data";
+
+
+export default {
+  title: 'Components/Administration/ConfirmDeleteSsoSettingsDialog',
+  component: ConfirmDeleteSsoSettingsDialog
+};
+
+const Template = args => <ConfirmDeleteSsoSettingsDialog {...args}/>;
+
+export const Default = Template.bind({});
+Default.args = defaultProps();

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

@@ -223,7 +223,7 @@ class ConfirmSaveAccountRecoverySettings extends Component {
             }
           </div>
           <div className="warning message">
-            <Trans>Warning, Please review carefully this configuration as it will not be trivial to change this later.</Trans>
+            <Trans>Please review carefully this configuration as it will not be trivial to change this later.</Trans>
           </div>
           <div className="submit-wrapper clearfix">
             <a

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

@@ -19,7 +19,7 @@ import {
 } from "../../../contexts/AdministrationWorkspaceContext";
 import {withAppContext} from "../../../contexts/AppContext";
 import {withRouter} from "react-router-dom";
-import {Trans} from "react-i18next";
+import {Trans, withTranslation} from "react-i18next";
 import {withNavigationContext} from "../../../contexts/NavigationContext";
 
 /**
@@ -89,6 +89,24 @@ class DisplayAdministrationMenu extends React.Component {
     return siteSettings && siteSettings.canIUse('smtpSettings');
   }
 
+  /**
+   * Can I use the self registration settings plugin
+   * @returns {boolean}
+   */
+  get canIUseSelfRegistrationSettings() {
+    const siteSettings = this.props.context.siteSettings;
+    return siteSettings && siteSettings.canIUse('selfRegistration');
+  }
+
+  /**
+   * Can I use the sso plugin
+   * @returns {boolean}
+   */
+  get canIUseSso() {
+    const siteSettings = this.props.context.siteSettings;
+    return siteSettings && siteSettings.canIUse('sso');
+  }
+
   /**
    * Bind callbacks methods
    */
@@ -100,6 +118,8 @@ class DisplayAdministrationMenu extends React.Component {
     this.handleInternationalizationClick = this.handleInternationalizationClick.bind(this);
     this.handleAccountRecoveryClick = this.handleAccountRecoveryClick.bind(this);
     this.handleSmtpSettingsClick = this.handleSmtpSettingsClick.bind(this);
+    this.handleSelfRegistrationClick = this.handleSelfRegistrationClick.bind(this);
+    this.handleSsoClick = this.handleSsoClick.bind(this);
   }
 
   /**
@@ -151,6 +171,20 @@ class DisplayAdministrationMenu extends React.Component {
     this.props.navigationContext.onGoToAdministrationSmtpSettingsRequested();
   }
 
+  /**
+   * Handle when the user click on the self registration settings menu
+   */
+  handleSelfRegistrationClick() {
+    this.props.navigationContext.onGoToAdministrationSelfRegistrationRequested();
+  }
+
+  /**
+   * Handle when the user click on the sso menu
+   */
+  handleSsoClick() {
+    this.props.navigationContext.onGoToAdministrationSsoRequested();
+  }
+
   /**
    * If MFA menu is selected
    * @returns {boolean}
@@ -199,6 +233,14 @@ class DisplayAdministrationMenu extends React.Component {
     return AdministrationWorkspaceMenuTypes.ACCOUNT_RECOVERY === this.props.administrationWorkspaceContext.selectedAdministration;
   }
 
+  /**
+   * If SSO menu is selected
+   * @returns {boolean}
+   */
+  isSsoSelected() {
+    return AdministrationWorkspaceMenuTypes.SSO === this.props.administrationWorkspaceContext.selectedAdministration;
+  }
+
   /**
    * If SMTP settings menu is selected
    * @returns {boolean}
@@ -207,6 +249,14 @@ class DisplayAdministrationMenu extends React.Component {
     return AdministrationWorkspaceMenuTypes.SMTP_SETTINGS === this.props.administrationWorkspaceContext.selectedAdministration;
   }
 
+  /**
+   * If Self registration settings menu is selected
+   * @returns {boolean}
+   */
+  isSelfRegistrationSettingsSelected() {
+    return AdministrationWorkspaceMenuTypes.SELF_REGISTRATION === this.props.administrationWorkspaceContext.selectedAdministration;
+  }
+
   /**
    * Render the component
    * @returns {JSX}
@@ -294,6 +344,32 @@ class DisplayAdministrationMenu extends React.Component {
             </div>
           </li>
           }
+          {this.canIUseSelfRegistrationSettings &&
+          <li id="self_registration_menu">
+            <div className={`row  ${this.isSelfRegistrationSettingsSelected() ? "selected" : ""}`}>
+              <div className="main-cell-wrapper">
+                <div className="main-cell">
+                  <a onClick={this.handleSelfRegistrationClick}>
+                    <span><Trans>Self Registration</Trans></span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </li>
+          }
+          {this.canIUseSso &&
+          <li id="sso_menu">
+            <div className={`row  ${this.isSsoSelected() ? "selected" : ""}`}>
+              <div className="main-cell-wrapper">
+                <div className="main-cell">
+                  <a onClick={this.handleSsoClick}>
+                    <span><Trans>Single Sign-On</Trans></span>&nbsp;<span className="beta chips"><Trans>Beta</Trans></span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </li>
+          }
         </ul>
       </div>
     );
@@ -307,4 +383,4 @@ DisplayAdministrationMenu.propTypes = {
   navigationContext: PropTypes.any, // The application navigation context
 };
 
-export default withRouter(withAppContext(withNavigationContext(withAdministrationWorkspace((DisplayAdministrationMenu)))));
+export default withRouter(withAppContext(withNavigationContext(withAdministrationWorkspace(withTranslation("common")(DisplayAdministrationMenu)))));

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

@@ -29,7 +29,9 @@ export function defaultProps(data = {}) {
       onGoToAdministrationMfaRequested: jest.fn(),
       onGoToAdministrationInternationalizationRequested: jest.fn(),
       onGoToAdministrationAccountRecoveryRequested: jest.fn(),
-      onGoToAdministrationSmtpSettingsRequested: jest.fn()
+      onGoToAdministrationSmtpSettingsRequested: jest.fn(),
+      onGoToAdministrationSelfRegistrationRequested: jest.fn(),
+      onGoToAdministrationSsoRequested: jest.fn(),
     }
   }, data);
 }

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

@@ -134,4 +134,64 @@ describe("As AD I can see the administration menu", () => {
       expect(page.smtpSettings).toBeNull();
     });
   });
+
+  describe("As a logged in administrator in the administrator workspace, I can see the User self registration settings option in the left-side bar", () => {
+    it('If the feature flag is true, the menu should be visible', async() => {
+      expect.assertions(4);
+      const props = defaultProps({
+        administrationWorkspaceContext: {selectedAdministration: AdministrationWorkspaceMenuTypes.SELF_REGISTRATION}
+      }); // The props to pass
+      page = new DisplayAdministrationMenuPage(context, props);
+      expect(page.exists()).toBeTruthy();
+      await page.goToSelfRegistration();
+      expect(page.selfRegistration).toBeTruthy();
+      expect(page.menuSelected).toBe('Self Registration');
+      expect(props.navigationContext.onGoToAdministrationSelfRegistrationRequested).toHaveBeenCalled();
+    });
+
+    it('If the feature flag is false, the menu should not be visible', async() => {
+      expect.assertions(2);
+      const props = defaultProps({
+        context: {
+          siteSettings: {
+            canIUse: feature => feature !== "selfRegistration"
+          }
+        },
+        administrationWorkspaceContext: {selectedAdministration: AdministrationWorkspaceMenuTypes.MFA}
+      }); // The props to pass
+      page = new DisplayAdministrationMenuPage(context, props);
+      expect(page.exists()).toBeTruthy();
+      expect(page.selfRegistration).toBeNull();
+    });
+  });
+
+  describe("As a signed-in administrator on the administration workspace, I can see the SSO setting option in the left-side bar", () => {
+    it('If the feature flag is true, the menu should be visible', async() => {
+      expect.assertions(4);
+      const props = defaultProps({
+        administrationWorkspaceContext: {selectedAdministration: AdministrationWorkspaceMenuTypes.SSO}
+      }); // The props to pass
+      page = new DisplayAdministrationMenuPage(context, props);
+      expect(page.exists()).toBeTruthy();
+      await page.goToSsoSettings();
+      expect(page.ssoSettings).toBeTruthy();
+      expect(page.menuSelected).toBe('Single Sign-On');
+      expect(props.navigationContext.onGoToAdministrationSsoRequested).toHaveBeenCalled();
+    });
+
+    it('If the feature flag is false, the menu should not be visible', async() => {
+      expect.assertions(2);
+      const props = defaultProps({
+        context: {
+          siteSettings: {
+            canIUse: feature => feature !== "sso"
+          }
+        },
+        administrationWorkspaceContext: {selectedAdministration: AdministrationWorkspaceMenuTypes.MFA}
+      }); // The props to pass
+      page = new DisplayAdministrationMenuPage(context, props);
+      expect(page.exists()).toBeTruthy();
+      expect(page.ssoSettings).toBeNull();
+    });
+  });
 });

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

@@ -103,6 +103,20 @@ export default class DisplayAdministrationMenuPage {
     return this._page.container.querySelector('#smtp_settings_menu .row .main-cell-wrapper .main-cell a');
   }
 
+  /**
+   * Returns the self registration menu
+   */
+  get selfRegistration() {
+    return this._page.container.querySelector('#self_registration_menu .row .main-cell-wrapper .main-cell a');
+  }
+
+  /**
+   * Returns the Single Sign-On menu
+   */
+  get ssoSettings() {
+    return this._page.container.querySelector('#sso_menu .row .main-cell-wrapper .main-cell a');
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -152,9 +166,14 @@ export default class DisplayAdministrationMenuPage {
   async goToSmtpSettings() {
     await this.click(this.smtpSettings);
   }
-}
-
-
-
 
+  /** Click on the self registration settings element */
+  async goToSelfRegistration() {
+    await this.click(this.selfRegistration);
+  }
 
+  /** Click on the SSO settings element */
+  async goToSsoSettings() {
+    await this.click(this.ssoSettings);
+  }
+}