Merge pull request #1855 from guardicore/update-javascript-packages

Update javascript packages

monkey/monkey_island/cc/ui/package.json

@@ -45,23 +45,20 @@
     "eslint": "^6.8.0",
     "eslint-loader": "^4.0.1",
     "eslint-plugin-react": "^7.26.1",
-    "file-loader": "^1.1.11",
     "glob": "^7.2.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^5.3.2",
-    "minimist": "^1.2.5",
+    "minimist": "^1.2.6",
     "npm": "^7.24.2",
     "null-loader": "^0.1.1",
-    "react-addons-test-utils": "^15.6.2",
     "rimraf": "^2.7.1",
     "sass": "^1.42.1",
-    "sass-loader": "^7.3.1",
+    "sass-loader": "^12.6.0",
     "snyk": "^1.733.0",
     "style-loader": "^0.22.1",
     "stylelint": "^13.13.1",
     "ts-loader": "^8.3.0",
     "typescript": "^4.4.3",
-    "url-loader": "^1.1.2",
     "webpack": "^5.58.0",
     "webpack-cli": "^4.9.0",
     "webpack-dev-server": "^4.3.1"
@@ -106,12 +103,12 @@
     "react-hot-loader": "^4.13.0",
     "react-json-tree": "^0.12.1",
     "react-jsonschema-form-bs4": "^1.7.1",
-    "react-particles-js": "^3.5.3",
     "react-redux": "^5.1.2",
     "react-router-dom": "^5.3.0",
     "react-spinners": "^0.9.0",
     "react-table": "^6.10.3",
     "react-tooltip-lite": "^1.12.0",
+    "react-tsparticles": "^1.42.4",
     "redux": "^4.1.1",
     "sha3": "^2.1.4",
     "source-map-loader": "^1.1.2",

monkey/monkey_island/cc/ui/src/components/ui-components/ParticleBackground.js

@@ -1,7 +1,7 @@
-import Particles from 'react-particles-js';
+import Particles from 'react-tsparticles';
 import {particleParams} from '../../styles/components/particle-component/ParticleBackgroundParams';
 import React from 'react';
 
 export default function ParticleBackground() {
-  return (<Particles className={'particle-background'} params={particleParams}/>);
+  return (<Particles className={'particle-background'} options={particleParams}/>);
 }

monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackgroundParams.js

@@ -1,18 +1,20 @@
 export const particleParams = {
-    particles: {
-      color: {
-        value: '#2b2b2b'
-      },
-      line_linked: {
-        color: {
-          value: '#555555'
-        }
-      },
-      number: {
-        value: 150
-      },
-      size: {
-        value: 3
-      }
-    }
-  }
+  'fps_limit': 60,
+  'particles': {
+    'color': {'value': '#646464'},
+    'links': {'color': '#555555', 'distance': 150, 'enable': true, 'opacity': 0.4, 'width': 1},
+    'move': {
+      'bounce': false,
+      'direction': 'none',
+      'enable': true,
+      'outMode': 'out',
+      'random': false,
+      'speed': 2,
+      'straight': false
+    },
+    'number': {'density': {'enable': true, 'area': 800}, 'value': 50},
+    'shape': {'type': 'circle'},
+    'size': {'value': 3}
+  },
+  'detectRetina': true
+}

monkey/monkey_island/cc/ui/webpack.config.js

@@ -35,21 +35,15 @@ module.exports = {
       },
       {
         test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: {
-          loader: 'file-loader'
-        }
+        type: 'asset/resource'
       },
       {
         test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: {
-          loader: 'url-loader?limit=10000&mimetype=application/font-woff'
-        }
+        type: 'asset'
       },
       {
         test: /\.(png|jpg|gif)$/,
-        use: {
-          loader: 'url-loader?limit=8192'
-        }
+        type: 'asset'
       },
       {
         test: /\.html$/,