passbolt-styleguide 4.10.2 → 4.11.0-alpha.2

package/build/js/dist/api-vendors.js.LICENSE.txt

@@ -1631,6 +1631,10 @@ object-assign
   !*** ./node_modules/core-js-pure/stable/symbol/index.js ***!
   \**********************************************************/
 
+/*!**********************************************************!*\
+  !*** ./node_modules/memoize-one/dist/memoize-one.esm.js ***!
+  \**********************************************************/
+
 /*!***********************************************************!*\
   !*** ./node_modules/core-js-pure/actual/instance/push.js ***!
   \***********************************************************/
@@ -1795,6 +1799,10 @@ object-assign
   !*** ./node_modules/i18next-http-backend/esm/getFetch.cjs ***!
   \************************************************************/
 
+/*!************************************************************!*\
+  !*** ./node_modules/validator/es/lib/util/assertString.js ***!
+  \************************************************************/
+
 /*!************************************************************!*\
   !*** ./node_modules/xregexp/lib/addons/unicode-scripts.js ***!
   \************************************************************/

package/jest.config.json

@@ -27,6 +27,7 @@
     "src/shared/**/*.{js,jsx}",
     "!src/**/*.test.js",
     "!src/**/*.test.stories.js",
-    "!src/**/*.test.data.js"
+    "!src/**/*.test.data.js",
+    "!src/**/*.test.page.js"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "passbolt-styleguide",
-  "version": "4.10.2",
+  "version": "4.11.0-alpha.2",
   "license": "AGPL-3.0",
   "copyright": "Copyright 2023 Passbolt SA",
   "description": "Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.",

package/src/react-extension/ApiApp.js

@@ -89,6 +89,8 @@ class ApiApp extends Component {
                                     "/app/administration/password-policies",
                                     "/app/administration/user-passphrase-policies",
                                     "/app/administration/password-expiry",
+                                    "/app/administration/content-types/metadata",
+                                    "/app/administration/content-types/metadata-key",
                                   ]}/>
                                   <Route path="/app/administration">
                                     <AdministrationWorkspaceContextProvider>

package/src/react-extension/ExtApp.js

@@ -84,11 +84,6 @@ import MetadataTypesSettingsLocalStorageContextProvider from "../shared/context/
  * - Most of the user settings MFA screen. Because of duo constraints.
  */
 class ExtApp extends Component {
-  /*
-   * =============================================================
-   *  View
-   * =============================================================
-   */
   render() {
     const accountRecoveryUserService = new ExtAppAccountRecoveryUserService(this.props.port);
     return (
@@ -221,6 +216,8 @@ class ExtApp extends Component {
                                             "/app/administration/password-policies",
                                             "/app/administration/user-passphrase-policies",
                                             "/app/administration/password-expiry",
+                                            "/app/administration/content-types/metadata",
+                                            "/app/administration/content-types/metadata-key",
                                           ]}>
                                             <AdministrationWorkspaceContextProvider>
                                               <AdminAccountRecoveryContextProvider>
@@ -229,9 +226,11 @@ class ExtApp extends Component {
                                                     <AdminPasswordPoliciesContextProvider>
                                                       <AdministrationUserPassphrasePoliciesContextProvider>
                                                         <AdministrationPasswordExpiryContextProvider>
-                                                          <ManageDialogs/>
-                                                          <ManageWorkflows/>
-                                                          <AdministrationWorkspace/>
+                                                          <ResourceTypesLocalStorageContextProvider>
+                                                            <ManageDialogs/>
+                                                            <ManageWorkflows/>
+                                                            <AdministrationWorkspace/>
+                                                          </ResourceTypesLocalStorageContextProvider>
                                                         </AdministrationPasswordExpiryContextProvider>
                                                       </AdministrationUserPassphrasePoliciesContextProvider>
                                                     </AdminPasswordPoliciesContextProvider>

package/src/react-extension/ExtBootstrapApp.js

@@ -111,6 +111,8 @@ class ExtBootstrapApp extends Component {
               "/app/administration/password-policies",
               "/app/administration/user-passphrase-policies",
               "/app/administration/password-expiry",
+              "/app/administration/content-types/metadata",
+              "/app/administration/content-types/metadata-key",
               "/app/folders/view/:filterByFolderId",
               "/app/groups/view/:selectedGroupId",
               "/app/groups/edit/:selectedGroupId",

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

@@ -45,6 +45,10 @@ import DisplayAdministrationUserPassphrasePolicies from "./DisplayAdministration
 import DisplayAdministrationPasswordExpiry from "./DisplayAdministrationPasswordExpiry/DisplayAdministrationPasswordExpiry";
 import DisplayHttpError from "../Common/Error/DisplayHttpError/DisplayHttpError";
 import DisplayHealthcheckAdministration from "./DisplayHealthcheckAdministration/DisplayHealthcheckAdministration";
+import DisplayContentTypesEncryptedMetadataAdministration
+  from "./DisplayContentTypesEncryptedMetadataAdministration/DisplayContentTypesEncryptedMetadataAdministration";
+import DisplayContentTypesMetadataKeyAdministration
+  from "./DisplayContentTypesMetadataKeyAdministration/DisplayContentTypesMetadataKeyAdministration";
 
 class AdministrationWorkspace extends Component {
   /**
@@ -159,6 +163,22 @@ class AdministrationWorkspace extends Component {
     return AdministrationWorkspaceMenuTypes.PASSWORD_EXPIRY === this.props.administrationWorkspaceContext.selectedAdministration;
   }
 
+  /**
+   * If content types encrypted metadata is selected
+   * @returns {boolean}
+   */
+  isContentTypesEncryptedMetadataSelected() {
+    return AdministrationWorkspaceMenuTypes.CONTENT_TYPES_ENCRYPTED_METADATA === this.props.administrationWorkspaceContext.selectedAdministration;
+  }
+
+  /**
+   * If content types metadata key is selected
+   * @returns {boolean}
+   */
+  isContentTypesMetadataKeySelected() {
+    return AdministrationWorkspaceMenuTypes.CONTENT_TYPES_METADATA_KEY === this.props.administrationWorkspaceContext.selectedAdministration;
+  }
+
   /**
    * If the page access is denied
    * @returns {boolean}
@@ -194,8 +214,9 @@ class AdministrationWorkspace extends Component {
           </div>
           <div className="header third">
             <div className="col1 main-action-wrapper">
-            </div>
-            <AdministrationWorkspaceAction/>
+            </div>{/* Deprecated */}
+            <AdministrationWorkspaceAction/>{/* Deprecated */}
+            <div id="administration-actions-content-action"></div>
           </div>
           <div className="panel main">
             <div>
@@ -260,6 +281,12 @@ class AdministrationWorkspace extends Component {
                   {this.isHealthcheckSelected() &&
                     <DisplayHealthcheckAdministration/>
                   }
+                  {this.isContentTypesEncryptedMetadataSelected() &&
+                    <DisplayContentTypesEncryptedMetadataAdministration/>
+                  }
+                  {this.isContentTypesMetadataKeySelected() &&
+                    <DisplayContentTypesMetadataKeyAdministration/>
+                  }
                 </div>
               </div>
             </div>

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

@@ -156,6 +156,14 @@ class DisplayAdministrationMenu extends React.Component {
     return this.canIUse('healthcheckUi');
   }
 
+  /**
+   * Can I use the metadata plugin
+   * @returns {boolean}
+   */
+  get canIUseMetadata() {
+    return this.canIUse('metadata');
+  }
+
   /**
    * Bind callbacks methods
    */
@@ -175,6 +183,8 @@ class DisplayAdministrationMenu extends React.Component {
     this.handleUserPassphrasePoliciesClick = this.handleUserPassphrasePoliciesClick.bind(this);
     this.handlePasswordExpirySettingsClick = this.handlePasswordExpirySettingsClick.bind(this);
     this.handleHealthcheckClick = this.handleHealthcheckClick.bind(this);
+    this.handleContentTypesEncryptedMetadataClick = this.handleContentTypesEncryptedMetadataClick.bind(this);
+    this.handleContentTypesMetadataKeyClick = this.handleContentTypesMetadataKeyClick.bind(this);
   }
 
   /**
@@ -282,6 +292,20 @@ class DisplayAdministrationMenu extends React.Component {
     this.props.navigationContext.onGoToAdministrationHealthcheckRequested();
   }
 
+  /**
+   * Handle when the user click on the content types encrypted metadata settings menu
+   */
+  handleContentTypesEncryptedMetadataClick() {
+    this.props.navigationContext.onGoToAdministrationContentTypesEncryptedMetadataRequested();
+  }
+
+  /**
+   * Handle when the user click on the content types metadata key settings menu
+   */
+  handleContentTypesMetadataKeyClick() {
+    this.props.navigationContext.onGoToAdministrationContentTypesMetadataKeyRequested();
+  }
+
   /**
    * If MFA menu is selected
    * @returns {boolean}
@@ -402,6 +426,22 @@ class DisplayAdministrationMenu extends React.Component {
     return AdministrationWorkspaceMenuTypes.HEALTHCHECK === this.props.administrationWorkspaceContext.selectedAdministration;
   }
 
+  /**
+   * If content types encrypted metadata menu is selected
+   * @returns {boolean}
+   */
+  isContentTypesEncryptedMetadataSelected() {
+    return AdministrationWorkspaceMenuTypes.CONTENT_TYPES_ENCRYPTED_METADATA === this.props.administrationWorkspaceContext.selectedAdministration;
+  }
+
+  /**
+   * If content types metadata key menu is selected
+   * @returns {boolean}
+   */
+  isContentTypesMetadataKeySelected() {
+    return AdministrationWorkspaceMenuTypes.CONTENT_TYPES_METADATA_KEY === this.props.administrationWorkspaceContext.selectedAdministration;
+  }
+
   /**
    * Render the component
    * @returns {JSX}
@@ -589,6 +629,32 @@ class DisplayAdministrationMenu extends React.Component {
             </div>
           </li>
           }
+          {this.canIUseMetadata &&
+          <li id="encrypted_metadata_menu">
+            <div className={`row  ${this.isContentTypesEncryptedMetadataSelected() ? "selected" : ""}`}>
+              <div className="main-cell-wrapper">
+                <div className="main-cell">
+                  <button className="link no-border" type="button" onClick={this.handleContentTypesEncryptedMetadataClick}>
+                    <span><Trans>Encrypted metadata</Trans></span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </li>
+          }
+          {this.canIUseMetadata &&
+            <li id="metadata_key_menu">
+              <div className={`row  ${this.isContentTypesMetadataKeySelected() ? "selected" : ""}`}>
+                <div className="main-cell-wrapper">
+                  <div className="main-cell">
+                    <button className="link no-border" type="button" onClick={this.handleContentTypesMetadataKeyClick}>
+                      <span><Trans>Metadata key</Trans></span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </li>
+          }
         </ul>
       </div>
     );

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

@@ -36,7 +36,9 @@ export function defaultProps(data = {}) {
       onGoToAdministrationRbacsRequested: jest.fn(),
       onGoToAdministrationUserPassphrasePoliciesRequested: jest.fn(),
       onGoToAdministrationPasswordExpirySettingsRequested: jest.fn(),
-      onGoToAdministrationHealthcheckRequested: jest.fn()
+      onGoToAdministrationHealthcheckRequested: jest.fn(),
+      onGoToAdministrationContentTypesEncryptedMetadataRequested: jest.fn(),
+      onGoToAdministrationContentTypesMetadataKeyRequested: jest.fn(),
     }
   }, data);
 }

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

@@ -16,7 +16,6 @@
  * Unit tests on DisplayAdministrationMenu in regard of specifications
  */
 
-
 import DisplayAdministrationMenuPage from "./DisplayAdministrationMenu.test.page";
 import {AdministrationWorkspaceMenuTypes} from "../../../contexts/AdministrationWorkspaceContext";
 import {defaultAppContext, defaultProps} from "./DisplayAdministrationMenu.test.data";
@@ -356,4 +355,64 @@ describe("As AD I can see the administration menu", () => {
       expect(page.passwordExpirySettings).toBeNull();
     });
   });
+
+  describe("As a signed-in administrator on the administration workspace, I can see the Content Type Encrypted metadata 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.CONTENT_TYPES_ENCRYPTED_METADATA}
+      }); // The props to pass
+      page = new DisplayAdministrationMenuPage(context, props);
+      expect(page.exists()).toBeTruthy();
+      await page.gotoContentTypesEncryptedMetadata();
+      expect(page.contentTypesEncryptedMetadata).toBeTruthy();
+      expect(page.menuSelected).toBe('Encrypted metadata');
+      expect(props.navigationContext.onGoToAdministrationContentTypesEncryptedMetadataRequested).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 !== "metadata"
+          }
+        },
+        administrationWorkspaceContext: {selectedAdministration: AdministrationWorkspaceMenuTypes.CONTENT_TYPES_ENCRYPTED_METADATA}
+      }); // The props to pass
+      page = new DisplayAdministrationMenuPage(context, props);
+      expect(page.exists()).toBeTruthy();
+      expect(page.contentTypesEncryptedMetadata).toBeNull();
+    });
+  });
+
+  describe("As a signed-in administrator on the administration workspace, I can see the Content Type Metadata key 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.CONTENT_TYPES_METADATA_KEY}
+      }); // The props to pass
+      page = new DisplayAdministrationMenuPage(context, props);
+      expect(page.exists()).toBeTruthy();
+      await page.gotoContentTypesMetadataKey();
+      expect(page.contentTypesMetadataKey).toBeTruthy();
+      expect(page.menuSelected).toBe('Metadata key');
+      expect(props.navigationContext.onGoToAdministrationContentTypesMetadataKeyRequested).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 !== "metadata"
+          }
+        },
+        administrationWorkspaceContext: {selectedAdministration: AdministrationWorkspaceMenuTypes.CONTENT_TYPES_METADATA_KEY}
+      }); // The props to pass
+      page = new DisplayAdministrationMenuPage(context, props);
+      expect(page.exists()).toBeTruthy();
+      expect(page.contentTypesMetadataKey).toBeNull();
+    });
+  });
 });

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

@@ -153,6 +153,20 @@ export default class DisplayAdministrationMenuPage {
     return this._page.container.querySelector('#password_expiry_menu .row .main-cell-wrapper .main-cell button');
   }
 
+  /**
+   * Returns the Content Types Encrypted Metadata.
+   */
+  get contentTypesEncryptedMetadata() {
+    return this._page.container.querySelector('#encrypted_metadata_menu .row .main-cell-wrapper .main-cell button');
+  }
+
+  /**
+   * Returns the Content Types Encrypted Metadata.
+   */
+  get contentTypesMetadataKey() {
+    return this._page.container.querySelector('#metadata_key_menu .row .main-cell-wrapper .main-cell button');
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -237,4 +251,14 @@ export default class DisplayAdministrationMenuPage {
   async gotoPasswordExpirySettings() {
     await this.click(this.passwordExpirySettings);
   }
+
+  /** Click on the Content Types Encrypted Metadata element */
+  async gotoContentTypesEncryptedMetadata() {
+    await this.click(this.contentTypesEncryptedMetadata);
+  }
+
+  /** Click on the Content Types Metadata Key element */
+  async gotoContentTypesMetadataKey() {
+    await this.click(this.contentTypesMetadataKey);
+  }
 }