chore: LSDV-4894: Update to NodeJS LTS (#1323)

Author: nick-skriabin

.github/workflows/build_bundle.yml

@@ -13,7 +13,7 @@ on:
 env:
   # increment it in case if you need to reset cache
   CACHE_NAME_PREFIX: v3
-  NODE: '14'
+  NODE: '18'
 
 jobs:
   build:

.github/workflows/e2e_tests.yml

@@ -10,7 +10,7 @@ on:
 env:
   # increment it in case if you need to reset cache
   CACHE_NAME_PREFIX: v3
-  NODE: '14'
+  NODE: '18'
 
 jobs:
   run:

.github/workflows/eslint.yml

@@ -10,7 +10,7 @@ on:
 env:
   # increment it in case if you need to reset cache
   CACHE_NAME_PREFIX: v3
-  NODE: '14'
+  NODE: '18'
 
 jobs:
   run:

.github/workflows/fun_tests.yml

@@ -10,7 +10,7 @@ on:
 env:
   # increment it in case if you need to reset cache
   CACHE_NAME_PREFIX: v3
-  NODE: '14'
+  NODE: '18'
 
 jobs:
   run:

.github/workflows/release-set-version.yml

@@ -8,7 +8,7 @@ env:
   LSF_DIR: 'label-studio-frontend'
   TARGET_REPO: 'heartexlabs/label-studio'
   LS_DIR: 'label-studio'
-  NODE: '14'
+  NODE: '18'
   CACHE_NAME_PREFIX: v1
 
 jobs:

.github/workflows/unit_tests.yml

@@ -10,7 +10,7 @@ on:
 env:
   # increment it in case if you need to reset cache
   CACHE_NAME_PREFIX: v3
-  NODE: '14'
+  NODE: '18'
 
 jobs:
   run:

e2e/tests/image.magic-wand.test.js

@@ -87,7 +87,6 @@ Scenario('Make sure the magic wand works in a variety of scenarios', async funct
 
   AtImageView.waitForImage();
   await AtImageView.lookForStage();
-  I.executeScript(waitForImage);
 
   I.say('Making sure magic wand button is present');
   I.seeElement('.lsf-toolbar__group button[aria-label="magicwand"]');
@@ -113,13 +112,13 @@ Scenario('Make sure the magic wand works in a variety of scenarios', async funct
   // magic wand pixel colors more robust.
   I.say('Ensuring cloud magic wand pixels are correctly filled color');
   await I.executeScript(setKonvaLayersOpacity, [1.0]);
-  assertMagicWandPixel(I, 0, 0, false, CLOUD.rgbArray,
+  await assertMagicWandPixel(I, 0, 0, false, CLOUD.rgbArray,
     'Far upper left corner should not have magic wand cloud class');
-  assertMagicWandPixel(I, 260, 50, true, CLOUD.rgbArray,
+  await assertMagicWandPixel(I, 260, 50, true, CLOUD.rgbArray,
     'Upper left should have magic wand cloud class');
-  assertMagicWandPixel(I, 300, 620, true, CLOUD.rgbArray,
+  await assertMagicWandPixel(I, 300, 620, true, CLOUD.rgbArray,
     'Lower left should have magic wand cloud class');
-  assertMagicWandPixel(I, 675, 650, false, CLOUD.rgbArray,
+  await assertMagicWandPixel(I, 675, 650, false, CLOUD.rgbArray,
     'Far lower right corner should not have magic wand cloud class');
 
   // Make sure the region made from this is correct.
@@ -139,17 +138,19 @@ Scenario('Make sure the magic wand works in a variety of scenarios', async funct
   // 1, then redo it and ensure its back and our region list is still 1 again.
   I.say('Undoing last cloud magic wand and ensuring it worked correctly');
   I.click('button[aria-label="Undo"]');
-  assertMagicWandPixel(I, 300, 620, false, CLOUD.rgbArray,
+  I.wait(1);
+  await assertMagicWandPixel(I, 300, 620, false, CLOUD.rgbArray,
     'Undone lower left should not have magic wand cloud class anymore');
-  assertMagicWandPixel(I, 260, 50, true, CLOUD.rgbArray,
+  await assertMagicWandPixel(I, 260, 50, true, CLOUD.rgbArray,
     'Upper left should still have magic wand cloud class');
   AtSidebar.seeRegions(1);
 
   I.say('Redoing last cloud magic wand and ensuring it worked correctly');
   I.click('button[aria-label="Redo"]');
-  assertMagicWandPixel(I, 300, 620, true, CLOUD.rgbArray,
+  I.wait(1);
+  await assertMagicWandPixel(I, 300, 620, true, CLOUD.rgbArray,
     'Redone lower left should have magic wand cloud class again');
-  assertMagicWandPixel(I, 260, 50, true, CLOUD.rgbArray,
+  await assertMagicWandPixel(I, 260, 50, true, CLOUD.rgbArray,
     'Upper left should still have magic wand cloud class');
   AtSidebar.seeRegions(1);
 
@@ -180,9 +181,9 @@ Scenario('Make sure the magic wand works in a variety of scenarios', async funct
 
   I.say('Ensuring cloud shadow magic wand pixels are correctly filled color');
   await I.executeScript(setKonvaLayersOpacity, [1.0]);
-  assertMagicWandPixel(I, 0, 0, false, CLOUDSHADOW.rgbArray,
+  await assertMagicWandPixel(I, 0, 0, false, CLOUDSHADOW.rgbArray,
     'Zoomed upper left corner should not have cloud shadow');
-  assertMagicWandPixel(I, 350, 360, true, CLOUDSHADOW.rgbArray,
+  await assertMagicWandPixel(I, 350, 360, true, CLOUDSHADOW.rgbArray,
     'Center area should have magic wand cloud shadow class');
 
   // Make sure if you have a region selected then change the class the region class changes.
@@ -192,6 +193,6 @@ Scenario('Make sure the magic wand works in a variety of scenarios', async funct
   AtSidebar.dontSee('Cloud Shadow');
   AtSidebar.see('Haze');
   await I.executeScript(setKonvaLayersOpacity, [1.0]);
-  assertMagicWandPixel(I, 350, 360, true, HAZE.rgbArray,
+  await assertMagicWandPixel(I, 350, 360, true, HAZE.rgbArray,
     'Center area should have magic wand haze class');
 });

package.json

@@ -120,6 +120,7 @@
     "@types/jest": "^29.2.3",
     "@types/keymaster": "^1.6.30",
     "@types/lodash.ismatch": "^4.4.6",
+    "@types/mini-css-extract-plugin": "^2.5.1",
     "@types/nanoid": "^3.0.0",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react-dom": "^17.0.11",
@@ -135,7 +136,7 @@
     "babel-plugin-import": "^1.13.5",
     "babel-plugin-remove-webpack": "^1.1.0",
     "chroma-js": "^2.1.1",
-    "css-loader": "^5.0.2",
+    "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^3.0.2",
     "date-fns": "^2.20.1",
     "dotenv-defaults": "^2.0.2",
@@ -160,7 +161,7 @@
     "lodash.get": "^4.4.0",
     "lodash.ismatch": "^4.4.0",
     "lodash.throttle": "^4.1.1",
-    "mini-css-extract-plugin": "^1.4.0",
+    "mini-css-extract-plugin": "^2.7.5",
     "mobx": "^5.15.4",
     "mobx-react": "^6",
     "mobx-state-tree": "^3.16.0",
@@ -195,9 +196,9 @@
     "typescript": "^4.2.3",
     "url-loader": "^4.1.1",
     "wavesurfer.js": "^6.0.1",
-    "webpack": "^5.30.0",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^4.2.1",
+    "webpack": "^5.79.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.3",
     "xml2js": "^0.4.23",
     "xpath-range": "^1.1.1"
   },

src/env/development.js

@@ -75,7 +75,7 @@ import { ClassificationMixed } from '../examples/classification_mixed';
  */
 // import { AllTypes } from "../examples/all_types";
 
-const data = Ranker;
+const data = ImageBbox;
 
 function getData(task) {
   if (task && task.data) {

webpack.config-builder.js

@@ -6,8 +6,7 @@ const Dotenv = require("dotenv-webpack");
 const TerserPlugin = require("terser-webpack-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
-const ESLintPlugin = require('eslint-webpack-plugin');
-const { EnvironmentPlugin, DefinePlugin } = require("webpack");
+const { EnvironmentPlugin } = require("webpack");
 
 const workingDirectory = process.env.WORK_DIR
   ? path.resolve(__dirname, process.env.WORK_DIR)
@@ -49,13 +48,13 @@ console.log(LOCAL_ENV);
 const babelOptimizeOptions = () => {
   return BUILD.NO_MINIMIZE
     ? {
-        compact: false,
-        cacheCompression: false,
-      }
+      compact: false,
+      cacheCompression: false,
+    }
     : {
-        compact: true,
-        cacheCompression: true,
-      };
+      compact: true,
+      cacheCompression: true,
+    };
 };
 
 const optimizer = () => {
@@ -83,7 +82,7 @@ const optimizer = () => {
 
   if (BUILD.NO_CHUNKS) {
     result.runtimeChunk = false;
-    result.splitChunks = {cacheGroups: { default: false }}
+    result.splitChunks = { cacheGroups: { default: false } }
   }
 
   return result;
@@ -166,9 +165,13 @@ const babelLoader = {
 };
 
 const cssLoader = (withLocalIdent = true) => {
-  const rules = [MiniCssExtractPlugin.loader];
+  const rules = [{
+    loader: MiniCssExtractPlugin.loader,
+  }];
 
-  const localIdent = withLocalIdent ? LOCAL_ENV.CSS_PREFIX + "[local]" : "[local]";
+  const localIdent = withLocalIdent
+    ? LOCAL_ENV.CSS_PREFIX + "[local]"
+    : "[local]";
 
   const cssLoader = {
     loader: "css-loader",
@@ -199,7 +202,9 @@ const cssLoader = (withLocalIdent = true) => {
     options: {
       sourceMap: true,
       stylusOptions: {
-        import: [path.resolve(__dirname, "./src/themes/default/colors.styl")],
+        import: [
+          path.resolve(__dirname, "./src/themes/default/colors.styl")
+        ],
       },
     },
   };
@@ -271,8 +276,9 @@ if (BUILD.DIAGNOSTICS) {
 
 const sourceMap = isDevelopment ? "cheap-module-source-map" : "source-map";
 
-module.exports = ({withDevServer = true} = {}) => ({
+module.exports = ({ withDevServer = true } = {}) => ({
   mode: DEFAULT_NODE_ENV || "development",
+  target: process.env.NODE_ENV === "development" ? "web" : "browserslist",
   devtool: sourceMap,
   ...(withDevServer ? devServer() : {}),
   entry: {
@@ -330,7 +336,7 @@ module.exports = ({withDevServer = true} = {}) => ({
       },
       {
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
+        use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "postcss-loader"],
       },
       {
         test: /\.styl$/i,
@@ -353,9 +359,6 @@ module.exports = ({withDevServer = true} = {}) => ({
             loader: MiniCssExtractPlugin.loader,
             options: {
               esModule: false,
-              modules: {
-                namedExport: false,
-              },
             },
           },
           {
@@ -364,8 +367,8 @@ module.exports = ({withDevServer = true} = {}) => ({
               sourceMap: true,
               importLoaders: 2,
               esModule: false,
+              // exportType: "string",
               modules: {
-                compileType: "module",
                 mode: "local",
                 auto: true,
                 namedExport: false,