[frontend] Update to ESM (#14044)

.github/copilot-instructions.md

@@ -127,15 +127,15 @@ python3 src/worker.py           # Start worker
 opencti/
 ├── opencti-platform/
 │   ├── .yarnrc.yml             # MUST copy to subdirs
-│   ├── opencti-graphql/        # Backend: src/, config/, tests/, vitest.config.*.ts, eslint.config.mjs
+│   ├── opencti-graphql/        # Backend: src/, config/, tests/, vitest.config.*.ts, eslint.config.js
 │   ├── opencti-front/          # Frontend: src/, tests_e2e/, lang/, relay.config.json
 │   └── opencti-dev/docker-compose.yml
 ├── client-python/              # pycti/, tests/, pyproject.toml, .flake8, .isort.cfg
 ├── opencti-worker/src/
 └── scripts/ci/                 # docker-compose.yml, ci-common.env
 ```
 
-**Key Configs**: `eslint.config.mjs` (v9), `tsconfig.json` (strict), `vitest.config.*`, `.flake8`, `.isort.cfg`, `pyproject.toml`
+**Key Configs**: `eslint.config.js` (v9), `tsconfig.json` (strict), `vitest.config.*`, `.flake8`, `.isort.cfg`, `pyproject.toml`
 
 ## Common Pitfalls & Solutions
 

opencti-platform/opencti-front/builder/dev/dev.js

@@ -1,11 +1,15 @@
-const express = require("express");
-const { createProxyMiddleware } = require("http-proxy-middleware");
-const { cp, readFile } = require("node:fs/promises")
-const path = require("node:path");
-const esbuild = require("esbuild");
-const chokidar = require("chokidar");
-const compression = require("compression");
-const { RelayPlugin } = require("../plugin/esbuild-relay");
+import express from 'express';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+import { cp, readFile } from 'node:fs/promises';
+import path from 'node:path';
+import esbuild from 'esbuild';
+import chokidar from 'chokidar';
+import compression from 'compression';
+import { RelayPlugin } from '../plugin/esbuild-relay.js';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 const basePath = "";
 const clients = [];

opencti-platform/opencti-front/builder/plugin/esbuild-relay.js

@@ -1,14 +1,14 @@
-const {promises} = require('fs');
-const crypto = require('crypto');
-const {print, parse} = require('graphql');
+import { readFile } from 'node:fs/promises';
+import crypto from 'crypto';
+import { print, parse } from 'graphql';
 
-module.exports.RelayPlugin = {
+export const RelayPlugin = {
     name: 'relay',
     setup: (build) => {
         build.onLoad({filter: /\.(js|tsx|jsx)$/, namespace: "file"}, async (args) => {
             let contents;
             if (args.path.includes('src') && !args.path.includes('node_modules') && !args.path.includes('__generated__')) {
-                contents = await promises.readFile(args.path, 'utf8');
+                contents = await readFile(args.path, 'utf8');
                 if (contents.includes('graphql`')) {
                     const imports = [];
                     contents = contents.replaceAll(/\sgraphql`([\s\S]*?)`/gm, (match, query) => {

opencti-platform/opencti-front/builder/prod/prod.js

@@ -1,6 +1,6 @@
-const esbuild = require("esbuild");
-const { cp, rename, rm, readdir, writeFile } = require("node:fs/promises")
-const { RelayPlugin } = require("../plugin/esbuild-relay");
+import esbuild from 'esbuild';
+import { cp, rename, rm, readdir, writeFile } from 'node:fs/promises'
+import { RelayPlugin } from '../plugin/esbuild-relay.js';
 
 // Define args options
 const keep = process.argv.slice(2).includes('--keep');

opencti-platform/opencti-front/eslint.config.mjs → opencti-platform/opencti-front/eslint.config.js

@@ -20,7 +20,7 @@ export default defineConfig([
       '**/src/static/ext/**',
       'extract-i18n-keyword.js',
       'playwright.config.ts',
-      'vite.config.mts',
+      'vite.config.ts',
       'vitest.config.ts',
       'setup-vitest.ts',
     ],
@@ -64,7 +64,7 @@ export default defineConfig([
   {
     plugins: {
       'import-newlines': importNewlines,
-      'custom-rules': customRules,
+      'custom-rules': { rules: customRules },
       '@stylistic': stylistic,
     },
   },

opencti-platform/opencti-front/package.json

@@ -2,6 +2,7 @@
   "name": "opencti-front",
   "version": "7.260224.0",
   "private": true,
+  "type": "module",
   "workspaces": [
     "packages/*"
   ],
@@ -13,7 +14,7 @@
     "esbuild": "node builder/prod/prod.js",
     "build": "yarn relay && yarn esbuild",
     "build:standalone": "yarn relay && yarn esbuild --keep",
-    "lint": "DEBUG=eslint:cli-engine TIMING=1 eslint --quiet --cache --config eslint.config.mjs src",
+    "lint": "DEBUG=eslint:cli-engine TIMING=1 eslint --quiet --cache --config eslint.config.js src",
     "control": "yarn audit --groups dependencies --summary",
     "test": "vitest run",
     "test:watch": "vitest watch",
@@ -191,9 +192,6 @@
     "webpack": "5.105.2"
   },
   "dependenciesMeta": {
-    "canvas": {
-      "built": false
-    },
     "core-js": {
       "built": false
     },

opencti-platform/opencti-front/packages/eslint-plugin-custom-rules/lib/index.js

@@ -1,2 +1,5 @@
-const requireIndex = require("requireindex");
-module.exports.rules = requireIndex(__dirname + "/rules");
+import classesRules from './rules/classes-rule.js';
+
+export default {
+  'classes-rule': classesRules,
+};

opencti-platform/opencti-front/packages/eslint-plugin-custom-rules/lib/rules/classes-rule.js

@@ -1,4 +1,4 @@
-module.exports = {
+const rule = {
   meta: {
     type: "problem",
     fixable: "code",
@@ -71,4 +71,6 @@ module.exports = {
       }
     };
   },
-}
+};
+
+export default rule;

opencti-platform/opencti-front/packages/eslint-plugin-custom-rules/package.json

@@ -1,11 +1,9 @@
 {
   "name": "eslint-plugin-custom-rules",
   "private": true,
+  "type": "module",
   "main": "lib/index.js",
   "exports": "./lib/index.js",
-  "dependencies": {
-    "requireindex": "1.2.0"
-  },
   "peerDependencies": {
     "eslint": ">=7"
   }

opencti-platform/opencti-front/packages/eslint-plugin-custom-rules/tests/lib/rules/classes-rule.test.js

@@ -1,10 +1,10 @@
-const rule = require("../../../lib/rules/classes-rule"),
-  RuleTester = require("eslint").RuleTester;
-
+import rule from '../../../lib/rules/classes-rule';
+import { RuleTester } from 'eslint';
+import parser from '@typescript-eslint/parser';
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('@typescript-eslint/parser'),
-  parserOptions: {
+  languageOptions: {
+    parser,
     ecmaVersion: 2020,
   }
 });

opencti-platform/opencti-front/script/auto-translate.js

@@ -1,14 +1,14 @@
-const fs = require('fs');
-const path = require('path');
-const { exec } = require('child_process');
-const { promisify } = require('util');
+import { readdir } from 'node:fs/promises';
+import path from 'node:path';
+import { exec } from 'node:child_process';
+import { promisify } from 'node:util';
 
 const execAsync = promisify(exec);
 
 // deepl-free API key
 const subscriptionKey = process.env.SUBSCRIPTION_KEY;
 
-async function translateFiles() {
+const translateFiles = async () => {
   console.log('Translation process started...');
   if (!subscriptionKey) {
     throw new Error('SUBSCRIPTION_KEY environment variable is not set. Aborting.');
@@ -17,7 +17,7 @@ async function translateFiles() {
   try {
     // extract the available languages from the translation files name
     const langDir = './lang/front';
-    const files = await fs.promises.readdir(langDir);
+    const files = await readdir(langDir);
     const languageCodes = files
       .filter(file => file.endsWith('.json'))
       .map(file => path.basename(file, '.json'))
@@ -50,4 +50,4 @@ async function translateFiles() {
 }
 
 // Run the script
-translateFiles();
+await translateFiles();

opencti-platform/opencti-front/script/extract-i18n-keyword.js

@@ -1,11 +1,5 @@
-const fs = require('fs');
-const util = require('util');
-const path = require('path');
-
-const readdir = util.promisify(fs.readdir);
-const stat = util.promisify(fs.stat);
-const readFile = util.promisify(fs.readFile);
-const writeFile = util.promisify(fs.writeFile);
+import { readdir, stat, readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
 
 const srcDirectory = 'src';
 const englishTranslationFiles = 'lang/front/en.json';
@@ -18,12 +12,12 @@ const extractedValues = {};
 // extract all translation in the t_i18n() formatter from frontend
 // and add them in opencti-front/lang/en.json
 
-function extractValueFromPattern(pattern) {
+const extractValueFromPattern = (pattern) => {
   const match = /t_i18n\('([^']+)'\)/.exec(pattern);
   return match ? match[1] : null;
 }
 
-async function extractI18nValues(directory) {
+const extractI18nValues = async (directory) => {
   try {
     const files = await readdir(directory);
     for (const file of files) {
@@ -60,7 +54,7 @@ async function extractI18nValues(directory) {
   }
 }
 
-async function mergeWithExistingData() {
+const mergeWithExistingData = async () => {
   try {
     const existingData = await readFile(englishTranslationFiles, 'utf8');
     const existingValues = JSON.parse(existingData);
@@ -89,11 +83,6 @@ async function mergeWithExistingData() {
   }
 }
 
-
-async function main() {
-  console.log('--- extract i18n values from frontend ---');
-  await extractI18nValues(srcDirectory);
-  await mergeWithExistingData();
-}
-
-main();
+console.log('--- extract i18n values from frontend ---');
+await extractI18nValues(srcDirectory);
+await mergeWithExistingData();

opencti-platform/opencti-front/script/extract-label-keyword.js

@@ -1,11 +1,5 @@
-const fs = require('fs');
-const util = require('util');
-const path = require('path');
-
-const readdir = util.promisify(fs.readdir);
-const stat = util.promisify(fs.stat);
-const readFile = util.promisify(fs.readFile);
-const writeFile = util.promisify(fs.writeFile);
+import { readdir, stat, readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
 
 const srcDirectory = '../opencti-graphql/src';
 const englishTranslationFiles = 'lang/back/en.json';
@@ -16,12 +10,12 @@ const extractedValues = {};
 // extract all the 'label' of attributes / relation refs from the backend schema
 // and add them in opencti-front/lang/en-back.json
 
-function extractValueFromPattern(pattern) {
+const extractValueFromPattern = (pattern) => {
   const match = /label: '([^']+)'/.exec(pattern);
   return match ? match[1] : null;
 }
 
-async function extractI18nValues(directory) {
+const extractI18nValues = async (directory) => {
   try {
     const files = await readdir(directory);
     for (const file of files) {
@@ -49,7 +43,7 @@ async function extractI18nValues(directory) {
   }
 }
 
-async function mergeWithExistingData() {
+const mergeWithExistingData = async () => {
   try {
     const existingData = await readFile(englishTranslationFiles, 'utf8');
     const existingValues = JSON.parse(existingData);
@@ -79,10 +73,6 @@ async function mergeWithExistingData() {
   }
 }
 
-async function main() {
-  console.log('--- extract labels from backend schema definition ---');
-  await extractI18nValues(srcDirectory);
-  await mergeWithExistingData();
-}
-
-main();
+console.log('--- extract labels from backend schema definition ---');
+await extractI18nValues(srcDirectory);
+await mergeWithExistingData();

opencti-platform/opencti-front/script/sort-translation-files.js

@@ -1,19 +1,19 @@
-const fs = require('fs');
-const path = require('path');
+import { readFile, readdir } from 'node:fs/promises';
+import path from 'node:path';
 
-function sortJSONKeys(json) {
+const sortJSONKeys = (json) => {
   const sortedKeys = Object.keys(json).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
   const sortedJSON = {};
-  sortedKeys.forEach(key => {
+  sortedKeys.forEach((key) => {
     sortedJSON[key] = json[key];
   });
   return sortedJSON;
 }
 
-function sortJSONFile(filePath) {
+const sortJSONFile = async (filePath) => {
   try {
     // Read JSON file
-    const jsonData = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+    const jsonData = JSON.parse(await readFile(filePath, 'utf8'));
 
     // Sort JSON keys
     const sortedJSON = sortJSONKeys(jsonData);
@@ -27,13 +27,13 @@ function sortJSONFile(filePath) {
   }
 }
 
-function sortAllJSONFiles(dirPath) {
+const sortAllJSONFiles = async (dirPath) => {
   try {
     // Get list of files in directory
-    const files = fs.readdirSync(dirPath);
+    const files = await readdir(dirPath);
 
     // Iterate through files
-    files.forEach(file => {
+    for await (const file of files) {
       const filePath = path.join(dirPath, file);
 
       // Skip if not a JSON file or if it's en.json
@@ -42,12 +42,12 @@ function sortAllJSONFiles(dirPath) {
       }
 
       // Sort JSON file
-      sortJSONFile(filePath);
-    });
+      await sortJSONFile(filePath);
+    }
   } catch (err) {
     console.error('Error reading directory:', err);
   }
 }
 
-sortAllJSONFiles('lang/front');
-sortAllJSONFiles('lang/back');
+await sortAllJSONFiles('lang/front');
+await sortAllJSONFiles('lang/back');