Merge branch 'feature/PB-37264-v4102-release' into 'release'

Merge develop into release

See merge request passbolt/passbolt-styleguide!1930

.gitlab-ci/jobs/test.yml

@@ -26,7 +26,7 @@ linter:
 storybook:
   stage: test
   extends: .rules
-  image: mcr.microsoft.com/playwright:v1.48.1
+  image: mcr.microsoft.com/playwright:v1.49.0
   script:
     - npm install
     - npm run dev:storybook:install

.storybook/main.js

@@ -1,26 +1,32 @@
-module.exports = {
-  "stories": [
-    "./stories/**/*.stories.mdx",
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: [
+    "./stories/**/*.mdx",
     "./stories/**/*.stories.@(js|jsx|ts|tsx)",
-    "../src/**/*.stories.mdx",
+    "../src/**/*.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "addons": [
-    { name: "@storybook/addon-links" },
-    {
-      name: "@storybook/addon-essentials",
-      options: {
-        backgrounds: false
-      }
+  addons: ["@storybook/addon-links", {
+    name: "@storybook/addon-essentials",
+    options: {
+      backgrounds: false
     }
-  ],
-  "core": {
-    "builder": "webpack5",
-    "disableTelemetry": true,
+  }, "@storybook/addon-webpack5-compiler-swc"],
+  core: {
+    "disableTelemetry": true
   },
+
   "staticDirs": ['../src', {from: '../src', to: '/webAccessibleResources' }],
+
   "env": (config) => ({
     ...config,
     ORIGIN_URL: 'https://passbolt.github.io/passbolt_styleguide',
   }),
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {fastRefresh: true}
+  },
 }
+
+export default config;

.storybook/manager.js

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 import passboltTheme from "./passboltTheme";
 
 addons.setConfig({

.storybook/preview.js

@@ -86,16 +86,14 @@ export const globalTypes = {
 }
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   options: {
     storySort: {
       order: [
         'Getting started',
         'Foundations',
         'Passbolt Components',
       ],
-      method: (a, b) =>
-        a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })
+      method: "alphabetical"
     },
   },
   controls: {

.storybook/stories/Intro/Intro.stories.mdx → .storybook/stories/Intro/Intro.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 import Intro from './Intro';
 
 <Meta

package.json

@@ -1,6 +1,6 @@
 {
   "name": "passbolt-styleguide",
-  "version": "4.10.0",
+  "version": "4.10.2",
   "license": "AGPL-3.0",
   "copyright": "Copyright 2023 Passbolt SA",
   "description": "Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.",
@@ -94,9 +94,9 @@
     "i18n:externalize": "i18next -c ./i18next-parser.config.js",
     "deploy-storybook": "storybook-to-ghpages --remote github",
     "dev:build:custom-theme": "npx grunt build_custom_theme",
-    "dev:storybook:build": "NODE_OPTIONS=--max_old_space_size=2048 build-storybook",
+    "dev:storybook:build": "NODE_OPTIONS=--max_old_space_size=2048 storybook build",
     "dev:storybook:install": "./scripts/installStorybookDependencies.sh",
-    "dev:storybook:start": "STORYBOOK_DEV=true start-storybook -p 6006",
+    "dev:storybook:start": "STORYBOOK_DEV=true storybook dev -p 6006",
     "dev:watch:custom-theme": "npx grunt watch_custom_theme"
   }
 }

scripts/installStorybookDependencies.sh

@@ -1,14 +1,14 @@
 #!/bin/sh
 
 npm install \
-    @storybook/addon-actions@6.5.16 \
-    @storybook/addon-essentials@6.5.16 \
-    @storybook/addon-links@6.5.16 \
-    @storybook/[email protected] \
-    @storybook/manager-webpack5@6.5.16 \
-    @storybook/[email protected] \
-    @storybook/[email protected] \
-    @storybook/[email protected] \
+    @storybook/addon-actions@8.4.2 \
+    @storybook/addon-essentials@8.4.2 \
+    @storybook/addon-links@8.4.2 \
+    @storybook/[email protected] \
+    @storybook/react-webpack5@8.4.2 \
+    @storybook/[email protected] \
+    @storybook/[email protected] \
+    @storybook/[email protected] \
     @storybook/[email protected] \
-    @storybook/test-runner@0.9.4 \
+    @storybook/test-runner@0.19.1 \
     --no-save

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

@@ -11,15 +11,17 @@
  * @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 "../../test/mocks/mockStorage";
 
 export default {
   title: 'Components/ExtAuthenticationLogin/ExtAuthenticationLogin',
-  component: ExtAuthenticationLogin
+  component: ExtAuthenticationLogin,
+  parameters: {
+    css: "ext_authentication"
+  }
 };
 
 function getMockedPort() {
@@ -32,28 +34,20 @@ function getMockedPort() {
   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
+export const Initial = {
+  args: {
+    port: getMockedPort(),
+    storage: mockStorage()
+  },
 };
-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
+export const WithSsoKitAvailable = {
+  args: {
+    port: mockedPortWithSso,
+    storage: mockStorage()
+  },
 };
-WithSsoKitAvailable.parameters = defaultParameters;

src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspace.test.stories.js

@@ -76,17 +76,17 @@ const Template = ({...args}) =>
     </ExtAppContextProvider>
   </MemoryRouter>;
 
-const storage = new mockStorage();
-const port = new mockPort(storage);
+const storage = mockStorage();
+const port = mockPort(storage);
 
 export const proVersion = Template.bind({});
 proVersion.args = {
   port: port,
   storage: storage
 };
 
-const ceStorage = new mockStorage();
-const cePort = new mockPort(ceStorage);
+const ceStorage = mockStorage();
+const cePort = mockPort(ceStorage);
 cePort.addRequestListener("passbolt.organization-settings.get", () => siteSettingsCe);
 export const ceVersion = Template.bind({});
 ceVersion.args = {

src/react-extension/components/Resource/FilterResourcesByFolders/FilterResourcesByFolders.js

@@ -184,8 +184,11 @@ class FilterResourcesByFolders extends React.Component {
   handleDropTitle() {
     const folders = this.props.dragContext.draggedItems.folders.map(folder => folder.id);
     const resources = this.props.dragContext.draggedItems.resources.map(resource => resource.id);
-    const folderParentId = null;
-    this.props.context.port.request("passbolt.folders.open-move-confirmation-dialog", {folders, resources, folderParentId});
+    if (folders?.length > 0) {
+      this.props.context.port.request("passbolt.folders.move-by-id", folders[0], null);
+    } else if (resources?.length > 0) {
+      this.props.context.port.request("passbolt.resources.move-by-ids", resources, null);
+    }
 
     // The dragLeave event is not fired when a drop is happening. Cancel the state manually.
     const draggingOverTitle = false;