@centreon/js-config 23.10.1-increase-timeout-docker-pull.1 → 23.10.1-lambda-node20-jsconfig.0

package/cypress/component/commands.tsx

@@ -11,6 +11,8 @@ import { ThemeProvider } from '@centreon/ui';
 import '@testing-library/cypress/add-commands';
 import 'cypress-msw-interceptor';
 
+import disableMotion from './disableCssTransitions';
+
 interface MountProps {
   Component: React.ReactNode;
   options?: object;
@@ -94,20 +96,32 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add('moveSortableElement', ({ element, direction }): void => {
-  const key = `{${direction}arrow}`;
+interface MoveSortableElementProps {
+  direction: 'up' | 'down' | 'left' | 'right';
+  element: Cypress.Chainable<JQuery<HTMLElement>>;
+  times?: number;
+}
 
-  element.type(' ', {
-    force: true,
-    scrollBehavior: false
-  });
-  element.eq(-1).type(key, {
-    scrollBehavior: false
-  });
-  element.eq(-1).type(' ', {
-    scrollBehavior: false
-  });
-});
+Cypress.Commands.add(
+  'moveSortableElement',
+  ({ element, direction, times = 1 }: MoveSortableElementProps): void => {
+    const key = `{${direction}arrow}`;
+
+    element.type(' ', {
+      force: true,
+      scrollBehavior: false
+    });
+
+    Array.from({ length: times }).forEach(() => {
+      element.eq(-1).type(key, {
+        scrollBehavior: false
+      });
+    });
+    element.eq(-1).type(' ', {
+      scrollBehavior: false
+    });
+  }
+);
 
 Cypress.Commands.add(
   'moveSortableElementUsingAriaLabel',
@@ -132,16 +146,27 @@ Cypress.Commands.add('makeSnapshot', (title?: string) => {
   cy.matchImageSnapshot(title);
 });
 
+Cypress.Commands.add('cssDisableMotion', (): void => {
+  Cypress.on('window:before:load', (cyWindow) => {
+    disableMotion(cyWindow);
+  });
+});
+
 declare global {
   namespace Cypress {
     interface Chainable {
+      cssDisableMotion: () => Cypress.Chainable;
       interceptAPIRequest: <T extends object>(
         props: InterceptAPIRequestProps<T>
       ) => Cypress.Chainable;
       interceptRequest: (method, path, mock, alias) => Cypress.Chainable;
       makeSnapshot: (title?: string) => void;
       mount: ({ Component, options }: MountProps) => Cypress.Chainable;
-      moveSortableElement: ({ element, direction }) => void;
+      moveSortableElement: ({
+        element,
+        direction,
+        times
+      }: MoveSortableElementProps) => void;
       moveSortableElementUsingAriaLabel: ({ ariaLabel, direction }) => void;
       waitForRequest: (alias) => Cypress.Chainable;
     }

package/cypress/component/disableCssTransitions.ts

@@ -0,0 +1,19 @@
+const disableMotion = (win): void => {
+  const injectedStyleEl = win.document.getElementById('__cy_disable_motion__');
+  if (injectedStyleEl) {
+    return;
+  }
+  win.document.head.insertAdjacentHTML(
+    'beforeend',
+    `
+      <style id="__cy_disable_motion__">
+        /* Disable CSS transitions. */
+        *, *::before, *::after { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; }
+        /* Disable CSS animations. */
+        *, *::before, *::after { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; }
+      </style>
+    `.trim()
+  );
+};
+
+export default disableMotion;

package/cypress/e2e/commands.ts

@@ -5,7 +5,7 @@ import './commands/monitoring';
 
 import installLogsCollector from 'cypress-terminal-report/src/installLogsCollector';
 
-installLogsCollector();
+installLogsCollector({ enableExtendedCollector: true });
 
 const apiLoginV2 = '/centreon/authentication/providers/configurations/local';
 
@@ -178,13 +178,11 @@ Cypress.Commands.add(
       .getByLabel({ label: 'Connect', tag: 'button' })
       .click();
 
-    return cy
-      .get('.SnackbarContent-root > .MuiPaper-root')
-      .then(($snackbar) => {
-        if ($snackbar.text().includes('Login succeeded')) {
-          cy.wait('@getNavigationList');
-        }
-      });
+    return cy.get('.MuiAlert-message').then(($snackbar) => {
+      if ($snackbar.text().includes('Login succeeded')) {
+        cy.wait('@getNavigationList');
+      }
+    });
   }
 );
 
@@ -211,7 +209,20 @@ interface ExecInContainerProps {
 Cypress.Commands.add(
   'execInContainer',
   ({ command, name }: ExecInContainerProps): Cypress.Chainable => {
-    return cy.exec(`docker exec -i ${name} ${command}`);
+    return cy
+      .exec(`docker exec -i ${name} ${command}`, { failOnNonZeroExit: false })
+      .then((result) => {
+        if (result.code) {
+          // output will not be truncated
+          throw new Error(`
+            Execution of "${command}" failed
+            Exit code: ${result.code}
+            Stdout:\n${result.stdout}
+            Stderr:\n${result.stderr}`);
+        }
+
+        return cy.wrap(result);
+      });
   }
 );
 
@@ -229,6 +240,8 @@ interface StartContainerProps {
 Cypress.Commands.add(
   'startContainer',
   ({ name, image, portBindings }: StartContainerProps): Cypress.Chainable => {
+    cy.log(`Starting container ${name} from image ${image}`);
+
     return cy.task(
       'startContainer',
       { image, name, portBindings },
@@ -293,7 +306,7 @@ Cypress.Commands.add(
   ({
     name = Cypress.env('dockerName')
   }: StopWebContainerProps = {}): Cypress.Chainable => {
-    const logDirectory = `cypress/results/logs/${Cypress.spec.name.replace(
+    const logDirectory = `results/logs/${Cypress.spec.name.replace(
       artifactIllegalCharactersMatcher,
       '_'
     )}/${Cypress.currentTest.title.replace(
@@ -349,6 +362,8 @@ interface StopContainerProps {
 Cypress.Commands.add(
   'stopContainer',
   ({ name }: StopContainerProps): Cypress.Chainable => {
+    cy.log(`Stopping container ${name}`);
+
     cy.exec(`docker logs ${name}`).then(({ stdout }) => {
       cy.writeFile(
         `cypress/results/logs/${Cypress.spec.name.replace(
@@ -399,6 +414,41 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add(
+  'insertDashboardWithWidget',
+  (dashboardBody, patchBody) => {
+    cy.request({
+      body: {
+        ...dashboardBody
+      },
+      method: 'POST',
+      url: '/centreon/api/latest/configuration/dashboards'
+    }).then((response) => {
+      const dashboardId = response.body.id;
+      cy.waitUntil(
+        () => {
+          return cy
+            .request({
+              method: 'GET',
+              url: `/centreon/api/latest/configuration/dashboards/${dashboardId}`
+            })
+            .then((getResponse) => {
+              return getResponse.body && getResponse.body.id === dashboardId;
+            });
+        },
+        {
+          timeout: 10000
+        }
+      );
+      cy.request({
+        body: patchBody,
+        method: 'PATCH',
+        url: `/centreon/api/latest/configuration/dashboards/${dashboardId}`
+      });
+    });
+  }
+);
+
 interface ShareDashboardToUserProps {
   dashboardName: string;
   role: string;
@@ -413,6 +463,30 @@ interface ListingRequestResult {
   };
 }
 
+interface PatchDashboardBody {
+  panels: Array<{
+    layout: {
+      height: number;
+      min_height: number;
+      min_width: number;
+      width: number;
+      x: number;
+      y: number;
+    };
+    name: string;
+    widget_settings: {
+      options: {
+        description: {
+          content: string;
+          enabled: boolean;
+        };
+        name: string;
+      };
+    };
+    widget_type: string;
+  }>;
+}
+
 Cypress.Commands.add(
   'shareDashboardToUser',
   ({ dashboardName, userName, role }: ShareDashboardToUserProps): void => {
@@ -485,6 +559,11 @@ declare global {
       hoverRootMenuItem: (rootItemNumber: number) => Cypress.Chainable;
       insertDashboard: (dashboard: Dashboard) => Cypress.Chainable;
       insertDashboardList: (fixtureFile: string) => Cypress.Chainable;
+      insertDashboardWithWidget: (
+        dashboard: Dashboard,
+        patch: PatchDashboardBody
+      ) => Cypress.Chainable;
+
       loginByTypeOfUser: ({
         jsonName,
         loginViaApi

package/cypress/e2e/configuration.ts

@@ -5,6 +5,7 @@ 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';
@@ -14,6 +15,7 @@ interface ConfigurationOptions {
   cypressFolder?: string;
   dockerName?: string;
   env?: Record<string, unknown>;
+  envFile?: string;
   isDevelopment?: boolean;
   specPattern: string;
 }
@@ -23,9 +25,14 @@ export default ({
   cypressFolder,
   isDevelopment,
   dockerName,
-  env
+  env,
+  envFile
 }: ConfigurationOptions): Cypress.ConfigOptions => {
-  const resultsFolder = `${cypressFolder || 'cypress'}/results`;
+  if (envFile) {
+    configDotenv({ path: envFile });
+  }
+
+  const resultsFolder = `${cypressFolder || '.'}/results`;
 
   const webImageVersion = execSync('git rev-parse --abbrev-ref HEAD')
     .toString('utf8')
@@ -36,6 +43,7 @@ export default ({
     defaultCommandTimeout: 6000,
     e2e: {
       excludeSpecPattern: ['*.js', '*.ts', '*.md'],
+      fixturesFolder: 'fixtures',
       reporter: require.resolve('cypress-multi-reporters'),
       reporterOptions: {
         configFile: `${__dirname}/reporter-config.js`
@@ -47,11 +55,12 @@ export default ({
 
         return plugins(on, config);
       },
-      specPattern
+      specPattern,
+      supportFile: 'support/e2e.{js,jsx,ts,tsx}'
     },
     env: {
       ...env,
-      OPENID_IMAGE_VERSION: '23.04',
+      OPENID_IMAGE_VERSION: process.env.MAJOR || '24.04',
       WEB_IMAGE_OS: 'alma9',
       WEB_IMAGE_VERSION: webImageVersion,
       dockerName: dockerName || 'centreon-dev'

package/cypress/e2e/reporter-config.js

@@ -4,7 +4,7 @@ module.exports = {
     html: false,
     json: true,
     overwrite: true,
-    reportDir: 'cypress/results/reports',
+    reportDir: 'results/reports',
     reportFilename: '[name]-report.json'
   },
   reporterEnabled: `mochawesome,${require.resolve(

package/jest/index.js

@@ -5,7 +5,6 @@ module.exports = {
       'jest-transform-stub',
     '^react($|/.+)': '<rootDir>/node_modules/react$1'
   },
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
   testEnvironment: 'jsdom',
   testPathIgnorePatterns: ['/node_modules/', '!*.cypress.spec.tsx'],
   transform: {

package/package.json

@@ -1,59 +1,60 @@
 {
-  "name": "@centreon/js-config",
-  "description": "Centreon Frontend shared build configuration",
-  "version": "23.10.1-increase-timeout-docker-pull.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": {
-    "@tsconfig/node16": "^16.1.1",
-    "eslint": "^8.17.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": "^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"
-  ],
-  "dependencies": {
-    "@badeball/cypress-cucumber-preprocessor": "^18.0.6",
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@types/cypress-cucumber-preprocessor": "^4.0.2",
-    "@types/dockerode": "^3.3.19",
-    "cypress-multi-reporters": "^1.6.3",
-    "cypress-terminal-report": "^5.3.6",
-    "dockerode": "^3.3.5",
-    "esbuild": "^0.19.3",
-    "mochawesome": "^7.1.3"
-  }
+    "name": "@centreon/js-config",
+    "description": "Centreon Frontend shared build configuration",
+    "version": "23.10.1-lambda-node20-jsconfig.0",
+    "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": {
+        "@tsconfig/node20": "^20.1.2",
+        "eslint": "^8.17.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": "^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"
+    ],
+    "dependencies": {
+        "@badeball/cypress-cucumber-preprocessor": "^19.1.0",
+        "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
+        "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+        "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+        "@types/cypress-cucumber-preprocessor": "^4.0.5",
+        "@types/dockerode": "^3.3.23",
+        "cypress-multi-reporters": "^1.6.4",
+        "cypress-terminal-report": "^5.3.9",
+        "dockerode": "^4.0.0",
+        "dotenv": "^16.3.1",
+        "esbuild": "^0.19.5",
+        "mochawesome": "^7.1.3"
+    }
 }

package/tsconfig/lambda/node20.tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "@tsconfig/node20/tsconfig.json",
+    "compilerOptions": {
+        "sourceMap": true,
+        "allowJs": true,
+        "strictNullChecks": false,
+        "declaration": false,
+        "esModuleInterop": true,
+        "strict": true,
+        "types": ["@types/jest", "node"]
+    }
+}

package/webpack/base/globalConfig.js

@@ -1,5 +1,5 @@
 const excludeNodeModulesExceptCentreonUi =
-  /node_modules(\\|\/)\.pnpm(\\|\/)(?!(@centreon))/;
+  /node_modules(\\|\/)\.pnpm(\\|\/)(?!(@centreon|file\+packages\+ui-context))/;
 
 module.exports = {
   cache: false,

package/webpack/base/index.js

@@ -18,30 +18,32 @@ const getBaseConfiguration = ({
   cache,
   module: getModuleConfiguration(jscTransformConfiguration),
   optimization,
-  output,
+  output: {
+    ...output,
+    library: moduleName,
+    uniqueName: moduleName
+  },
   plugins: [
     new CleanWebpackPlugin(),
     moduleName &&
       new ModuleFederationPlugin({
         filename: 'remoteEntry.[chunkhash:8].js',
-        library: { name: moduleName, type: 'var' },
+        library: { name: moduleName, type: 'umd' },
         name: moduleName,
         shared: [
           {
             '@centreon/ui-context': {
-              requiredVersion: '22.10.0',
               singleton: true
             }
           },
           {
             jotai: {
-              requiredVersion: '1.x',
+              requiredVersion: '2.x',
               singleton: true
             }
           },
           {
             'jotai-suspense': {
-              requiredVersion: '0.1.x',
               singleton: true
             }
           },
@@ -75,10 +77,10 @@ const getBaseConfiguration = ({
   ].filter(Boolean),
   resolve: {
     alias: {
-      react: path.resolve('./node_modules/react'),
       '@centreon/ui/fonts': path.resolve(
         './node_modules/@centreon/ui/public/fonts'
-      )
+      ),
+      react: path.resolve('./node_modules/react')
     },
     extensions: ['.js', '.jsx', '.ts', '.tsx']
   }