@centreon/js-config 24.8.2 → 24.9.1

package/cypress/e2e/configuration.ts

@@ -1,21 +1,16 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable import/extensions */
 /* eslint-disable import/no-unresolved */
 
 import { execSync } from 'child_process';
 
 import { defineConfig } from 'cypress';
-import installLogsPrinter from 'cypress-terminal-report/src/installLogsPrinter';
-import { config as configDotenv } from 'dotenv';
 
-import esbuildPreprocessor from './esbuild-preprocessor';
-import plugins from './plugins';
-import tasks from './tasks';
+import setupNodeEvents from './plugins';
 
 interface ConfigurationOptions {
   cypressFolder?: string;
+  dockerName?: string;
   env?: Record<string, unknown>;
-  envFile?: string;
   isDevelopment?: boolean;
   specPattern: string;
 }
@@ -24,14 +19,12 @@ export default ({
   specPattern,
   cypressFolder,
   isDevelopment,
-  env,
-  envFile
+  dockerName,
+  env
 }: ConfigurationOptions): Cypress.ConfigOptions => {
-  if (envFile) {
-    configDotenv({ path: envFile });
-  }
-
-  const resultsFolder = `${cypressFolder || '.'}/results`;
+  const resultsFolder = `${cypressFolder || 'cypress'}/results${
+    isDevelopment ? '/dev' : ''
+  }`;
 
   const webImageVersion = execSync('git rev-parse --abbrev-ref HEAD')
     .toString('utf8')
@@ -39,46 +32,47 @@ export default ({
 
   return defineConfig({
     chromeWebSecurity: false,
-    defaultCommandTimeout: 20000,
-    downloadsFolder: `${resultsFolder}/downloads`,
+    defaultCommandTimeout: 6000,
     e2e: {
       excludeSpecPattern: ['*.js', '*.ts', '*.md'],
-      fixturesFolder: 'fixtures',
-      reporter: require.resolve('cypress-multi-reporters'),
-      reporterOptions: {
-        configFile: `${__dirname}/reporter-config.js`
-      },
-      setupNodeEvents: async (cypressOn, config) => {
-        const on = require('cypress-on-fix')(cypressOn)
-        installLogsPrinter(on);
-        await esbuildPreprocessor(on, config);
-        tasks(on);
-
-        return plugins(on, config);
-      },
-      specPattern,
-      supportFile: 'support/e2e.{js,jsx,ts,tsx}'
+      setupNodeEvents,
+      specPattern
     },
     env: {
       ...env,
-      DATABASE_IMAGE: 'bitnami/mariadb:10.11',
-      OPENID_IMAGE_VERSION: process.env.MAJOR || '24.04',
-      SAML_IMAGE_VERSION: process.env.MAJOR || '24.04',
-      STABILITY: 'unstable',
+      OPENID_IMAGE_VERSION: '23.04',
       WEB_IMAGE_OS: 'alma9',
-      WEB_IMAGE_VERSION: webImageVersion
+      WEB_IMAGE_VERSION: webImageVersion,
+      dockerName: dockerName || 'centreon-dev'
     },
-    execTimeout: 60000,
-    requestTimeout: 20000,
-    retries: {
-      openMode: 0,
-      runMode: 2
+    execTimeout: 120000,
+    reporter: 'mochawesome',
+    reporterOptions: {
+      html: false,
+      json: true,
+      overwrite: true,
+      reportDir: `${resultsFolder}/reports`,
+      reportFilename: '[name]-report.json'
     },
+    requestTimeout: 10000,
+    retries: 0,
     screenshotsFolder: `${resultsFolder}/screenshots`,
-    video: isDevelopment,
-    videoCompression: 0,
-    videosFolder: `${resultsFolder}/videos`,
-    viewportHeight: 1080,
-    viewportWidth: 1920
+    setupNodeEvents: (on, config) => {
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args = launchOptions.args.map((arg) => {
+            if (arg === '--headless') {
+              return '--headless=new';
+            }
+
+            return arg;
+          });
+        }
+
+        return launchOptions;
+      });
+    },
+    video: true,
+    videosFolder: `${resultsFolder}/videos`
   });
 };

package/cypress/e2e/plugins.ts

@@ -3,68 +3,130 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-param-reassign */
 
-import fs from 'fs';
-import path from 'path';
-
-export default (
-  on: Cypress.PluginEvents,
-  config: Cypress.PluginConfigOptions
-): Cypress.PluginConfigOptions => {
-  on('before:browser:launch', (browser, launchOptions) => {
-    const width = 1920;
-    const height = 1080;
-
-    if (browser.family === 'chromium' && browser.name !== 'electron') {
-      if (browser.isHeadless) {
-        launchOptions.args.push('--headless=new');
-      }
+import Docker from 'dockerode';
+import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
+import webpackPreprocessor from '@cypress/webpack-preprocessor';
 
-      // flags description : https://github.com/GoogleChrome/chrome-launcher/blob/main/docs/chrome-flags-for-tools.md
-      launchOptions.args.push('--disable-gpu');
-      launchOptions.args.push('--auto-open-devtools-for-tabs');
-      launchOptions.args.push('--disable-extensions');
-      launchOptions.args.push('--hide-scrollbars');
-      launchOptions.args.push('--mute-audio');
+const docker = new Docker();
+
+const getWebpackOptions = (config): object => {
+  return {
+    module: {
+      rules: [
+        {
+          exclude: [/node_modules/],
+          test: /\.ts?$/,
+          use: [
+            {
+              loader: 'swc-loader'
+            }
+          ]
+        },
+        {
+          test: /\.feature$/,
+          use: [
+            {
+              loader: '@badeball/cypress-cucumber-preprocessor/webpack',
+              options: config
+            }
+          ]
+        }
+      ]
+    },
+    resolve: {
+      extensions: ['.ts', '.js']
+    }
+  };
+};
 
-      // force screen to be non-retina and just use our given resolution
-      launchOptions.args.push('--force-device-scale-factor=1');
+export default async (on, config): Promise<void> => {
+  await addCucumberPreprocessorPlugin(on, config);
 
-      launchOptions.args.push(`--window-size=${width},${height}`);
+  const webpackOptions = await getWebpackOptions(config);
+  const options = {
+    webpackOptions
+  };
+
+  on('file:preprocessor', webpackPreprocessor(options));
+
+  on('before:browser:launch', (browser = {}, launchOptions) => {
+    if ((browser as { name }).name === 'chrome') {
+      launchOptions.args.push('--disable-gpu');
+      launchOptions.args = launchOptions.args.filter(
+        (element) => element !== '--disable-dev-shm-usage'
+      );
     }
 
     return launchOptions;
   });
 
-  on('after:run', (results) => {
-    const testRetries: { [key: string]: boolean } = {};
-    if ('runs' in results) {
-      results.runs.forEach((run) => {
-        run.tests.forEach((test) => {
-          if (test.attempts && test.attempts.length > 1) {
-            const testTitle = test.title.join(' > '); // Convert the array to a string
-            testRetries[testTitle] = true;
-          }
-        });
+  interface PortBinding {
+    destination: number;
+    source: number;
+  }
+
+  interface StartContainerProps {
+    image: string;
+    name: string;
+    portBindings: Array<PortBinding>;
+  }
+
+  interface StopContainerProps {
+    name: string;
+  }
+
+  on('task', {
+    startContainer: async ({
+      image,
+      name,
+      portBindings = []
+    }: StartContainerProps) => {
+      const webContainers = await docker.listContainers({
+        all: true,
+        filters: { name: [name] }
       });
-    }
+      if (webContainers.length) {
+        return webContainers[0];
+      }
+
+      const container = await docker.createContainer({
+        AttachStderr: true,
+        AttachStdin: false,
+        AttachStdout: true,
+        ExposedPorts: portBindings.reduce((accumulator, currentValue) => {
+          accumulator[`${currentValue.source}/tcp`] = {};
+
+          return accumulator;
+        }, {}),
+        HostConfig: {
+          PortBindings: portBindings.reduce((accumulator, currentValue) => {
+            accumulator[`${currentValue.source}/tcp`] = [
+              {
+                HostIP: '0.0.0.0',
+                HostPort: `${currentValue.destination}`
+              }
+            ];
+
+            return accumulator;
+          }, {})
+        },
+        Image: image,
+        OpenStdin: false,
+        StdinOnce: false,
+        Tty: true,
+        name
+      });
+
+      await container.start();
+
+      return container;
+    },
+    stopContainer: async ({ name }: StopContainerProps) => {
+      const container = await docker.getContainer(name);
+      await container.kill();
+      await container.remove();
 
-    console.log('After run results:', results);
-    console.log('Test retries:', testRetries);
-
-    // Save the testRetries object to a file in the e2e/results directory
-    const resultFilePath = path.join(
-      __dirname,
-      '../../../../tests/e2e/results',
-      'hasRetries.json'
-    );
-    if (results.totalFailed > 0) {
-      fs.writeFileSync(resultFilePath, '{}');
-    } else if (Object.keys(testRetries).length > 0) {
-      // If tests succeeded but there were retries, write the retries to the file
-      fs.writeFileSync(resultFilePath, JSON.stringify(testRetries, null, 2));
-    } else {
-      // If no retries, empty the file
-      fs.writeFileSync(resultFilePath, '{}');
+      return null;
     }
   });
 

package/eslint/base.typescript.eslintrc.js

@@ -21,15 +21,11 @@ module.exports = {
           }
         ],
         '@typescript-eslint/camelcase': 'off',
-        '@typescript-eslint/consistent-type-definitions': ['off', 'interface'],
-        '@typescript-eslint/explicit-function-return-type': [
+        '@typescript-eslint/consistent-type-definitions': [
           'error',
-          {
-            allowExpressions: true,
-            allowHigherOrderFunctions: true,
-            allowTypedFunctionExpressions: true
-          }
+          'interface'
         ],
+        '@typescript-eslint/explicit-function-return-type': ['error'],
         '@typescript-eslint/explicit-member-accessibility': [
           'error',
           {
@@ -80,21 +76,13 @@ module.exports = {
           }
         ],
         camelcase: 'off',
-        'import/no-cycle': 'off',
-        'import/no-named-as-default': 'warn',
         'no-shadow': 'off',
         'no-unused-expressions': 'off'
       },
       settings: {
-        'import/parsers': {
-          '@typescript-eslint/parser': ['.ts', '.tsx']
-        },
         'import/resolver': {
           alias: {
             extensions: ['.ts', '.tsx', '.js', '.jsx']
-          },
-          typescript: {
-            alwaysTryTypes: true
           }
         }
       }

package/jest/index.js

@@ -1,15 +1,12 @@
 module.exports = {
   moduleNameMapper: {
     '\\.(s?css|png|svg|jpg)$': 'identity-obj-proxy',
-    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
-      'jest-transform-stub',
     '^react($|/.+)': '<rootDir>/node_modules/react$1'
   },
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
   testEnvironment: 'jsdom',
-  testPathIgnorePatterns: ['/node_modules/', '!*.cypress.spec.tsx'],
+  testPathIgnorePatterns: ['/node_modules/'],
   transform: {
-    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
-      'jest-transform-stub',
     '^.+\\.[jt]sx?$': [
       '@swc/jest',
       {

package/package.json

@@ -1,59 +1,47 @@
 {
-    "name": "@centreon/js-config",
-    "description": "Centreon Frontend shared build configuration",
-    "version": "24.8.2",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/centreon/centreon-frontend.git"
-    },
-    "keywords": [
-        "centreon",
-        "eslint"
-    ],
-    "author": "centreon@centreon.com",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/centreon/centreon-frontend/issues"
-    },
-    "homepage": "https://github.com/centreon/centreon-frontend#readme",
-    "peerDependencies": {
-        "eslint": "^8.53.0",
-        "prettier": "^3.0.0"
-    },
-    "dependencies": {
-        "@badeball/cypress-cucumber-preprocessor": "^20.1.2",
-        "@bahmutov/cypress-esbuild-preprocessor": "^2.2.2",
-        "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-        "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-        "@tsconfig/node16": "^16.1.3",
-        "@tsconfig/node20": "^20.1.4",
-        "@types/cypress-cucumber-preprocessor": "^4.0.5",
-        "cypress": "^13.13.3",
-        "cypress-multi-reporters": "^1.6.4",
-        "cypress-terminal-report": "^6.1.2",
-        "cypress-wait-until": "^3.0.2",
-        "dotenv": "^16.4.5",
-        "esbuild": "^0.21.5",
-        "eslint": "^8.53.0",
-        "eslint-config-airbnb": "19.0.4",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-import-resolver-alias": "^1.1.2",
-        "eslint-import-resolver-typescript": "^3.5.5",
-        "eslint-plugin-babel": "^5.3.1",
-        "eslint-plugin-hooks": "^0.4.3",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jest": "^26.1.5",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-prefer-arrow-functions": "^3.1.4",
-        "eslint-plugin-prettier": "^5.0.0",
-        "eslint-plugin-react": "^7.29.4",
-        "eslint-plugin-react-hooks": "^4.5.0",
-        "eslint-plugin-sort-keys-fix": "^1.1.2",
-        "eslint-plugin-typescript-sort-keys": "^2.1.0",
-        "mochawesome": "^7.1.3",
-        "mysql2": "^3.11.0",
-        "tar-fs": "^3.0.6",
-        "testcontainers": "^10.11.0"
-    }
+  "name": "@centreon/js-config",
+  "description": "Centreon Frontend shared build configuration",
+  "version": "24.9.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/centreon/centreon-frontend.git"
+  },
+  "keywords": [
+    "centreon",
+    "eslint"
+  ],
+  "author": "centreon@centreon.com",
+  "license": "GPL-2.0",
+  "bugs": {
+    "url": "https://github.com/centreon/centreon-frontend/issues"
+  },
+  "devDependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "^14.0.0",
+    "@types/dockerode": "^3.3.16",
+    "dockerode": "^3.3.5",
+    "eslint": "^8.17.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-hooks": "^0.4.3",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.5",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prefer-arrow-functions": "^3.1.4",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
+    "eslint-plugin-typescript-sort-keys": "^2.1.0"
+  },
+  "homepage": "https://github.com/centreon/centreon-frontend#readme",
+  "files": [
+    "eslint",
+    "jest",
+    "tsconfig",
+    "webpack",
+    "cypress"
+  ]
 }

package/tsconfig/index.json

@@ -1,14 +1,13 @@
 {
   "compilerOptions": {
-    "downlevelIteration": true,
-    "module": "ESNext",
     "moduleResolution": "node",
-    "target": "es2018",
+    "downlevelIteration": true,
+    "module": "es6",
+    "target": "es6",
     "jsx": "react-jsx",
     "strict": true,
     "noImplicitAny": false,
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true
+    "esModuleInterop": true
   }
 }

package/webpack/base/index.js

@@ -0,0 +1,130 @@
+const path = require('path');
+
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { ModuleFederationPlugin } = require('webpack').container;
+
+const excludeNodeModulesExceptCentreonUi =
+  /node_modules(\\|\/)\.pnpm(\\|\/)(?!(@centreon))/;
+
+const getBaseConfiguration = ({
+  moduleName,
+  moduleFederationConfig,
+  jscTransformConfiguration
+}) => ({
+  cache: false,
+  module: {
+    rules: [
+      {
+        parser: { system: false },
+        test: /\.[cm]?(j|t)sx?$/
+      },
+      {
+        exclude: excludeNodeModulesExceptCentreonUi,
+        test: /\.[jt]sx?$/,
+        use: {
+          loader: 'swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true
+              },
+              transform: jscTransformConfiguration
+            }
+          }
+        }
+      },
+      {
+        test: /\.icon.svg$/,
+        use: ['@svgr/webpack']
+      },
+      {
+        exclude: excludeNodeModulesExceptCentreonUi,
+        test: /\.(bmp|png|jpg|jpeg|gif|svg)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              name: '[name].[hash:8].[ext]'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      maxSize: 400 * 1024
+    }
+  },
+  output: {
+    chunkFilename: '[name].[chunkhash:8].chunk.js',
+    filename: '[name].[chunkhash:8].js',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    moduleName &&
+      new ModuleFederationPlugin({
+        filename: 'remoteEntry.[chunkhash:8].js',
+        library: { name: moduleName, type: 'var' },
+        name: moduleName,
+        shared: [
+          {
+            '@centreon/ui-context': {
+              requiredVersion: '22.10.0',
+              singleton: true
+            }
+          },
+          {
+            jotai: {
+              requiredVersion: '1.x',
+              singleton: true
+            }
+          },
+          {
+            'jotai-suspense': {
+              requiredVersion: '0.1.x',
+              singleton: true
+            }
+          },
+          {
+            react: {
+              requiredVersion: '18.x',
+              singleton: true
+            }
+          },
+          {
+            'react-dom': {
+              requiredVersion: '18.x',
+              singleton: true
+            }
+          },
+          {
+            'react-i18next': {
+              requiredVersion: '11.x',
+              singleton: true
+            }
+          },
+          {
+            'react-router-dom': {
+              requiredVersion: '6.x',
+              singleton: true
+            }
+          }
+        ],
+        ...moduleFederationConfig
+      })
+  ].filter(Boolean),
+  resolve: {
+    alias: {
+      react: path.resolve('./node_modules/react')
+    },
+    extensions: ['.js', '.jsx', '.ts', '.tsx']
+  }
+});
+
+module.exports = getBaseConfiguration;

package/webpack/patch/dev.js

@@ -0,0 +1,24 @@
+module.exports = {
+  devJscTransformConfiguration: {
+    react: {
+      development: true,
+      refresh: false,
+    },
+  },
+  devRefreshJscTransformConfiguration: {
+    react: {
+      development: true,
+      refresh: true,
+    },
+  },
+  getDevConfiguration: () => ({
+    cache: true,
+    devtool: 'eval-cheap-module-source-map',
+    optimization: {
+      splitChunks: false,
+    },
+    output: {
+      filename: '[name].js',
+    },
+  }),
+};

package/{rspack → webpack}/patch/devServer.js

@@ -1,6 +1,6 @@
 const os = require('os');
 
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const devServerPort = 9090;
 
@@ -19,9 +19,10 @@ const devServerAddress = externalInterface
 
 const publicPath = `http://${devServerAddress}:${devServerPort}/static/`;
 
-const isDevelopmentMode = process.env.NODE_ENV !== 'production';
+const isServeMode = process.env.WEBPACK_ENV === 'serve';
+const isDevelopmentMode = process.env.WEBPACK_ENV === 'development';
 
-const devServerPlugins = isDevelopmentMode ? [new ReactRefreshPlugin()] : [];
+const devServerPlugins = isServeMode ? [new ReactRefreshWebpackPlugin()] : [];
 
 module.exports = {
   devServer: {
@@ -31,5 +32,6 @@ module.exports = {
   },
   devServerPlugins,
   isDevelopmentMode,
+  isServeMode,
   publicPath
 };