Frontend Package Updates

azure-pipelines.yml

@@ -15,6 +15,7 @@ variables:
   sentryUrl: 'https://sentry.servarr.com'
   dotnetVersion: '6.0.201'
   innoVersion: '6.2.0'
+  nodeVersion: '16.x'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
 
 trigger:
@@ -156,7 +157,7 @@ stages:
       - task: NodeTool@0
         displayName: Set Node.js version
         inputs:
-          versionSpec: '12.x'
+          versionSpec: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -803,7 +804,7 @@ stages:
       - task: NodeTool@0
         displayName: Set Node.js version
         inputs:
-          versionSpec: '12.x'
+          versionSpec: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1

frontend/src/Components/Modal/ModalError.js

@@ -37,7 +37,8 @@ function ModalError(props) {
           {translate('Close')}
         </Button>
       </ModalFooter>
-    </ModalContent>);
+    </ModalContent>
+  );
 }
 
 ModalError.propTypes = {

frontend/src/Components/Scroller/OverlayScroller.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Scrollbars } from 'react-custom-scrollbars';
+import { Scrollbars } from 'react-custom-scrollbars-2';
 import { scrollDirections } from 'Helpers/Props';
 import styles from './OverlayScroller.css';
 

package.json

@@ -25,17 +25,17 @@
     "not chrome < 60"
   ],
   "dependencies": {
-    "@fortawesome/fontawesome-free": "5.15.3",
+    "@fortawesome/fontawesome-free": "6.1.1",
-    "@fortawesome/fontawesome-svg-core": "1.2.35",
+    "@fortawesome/fontawesome-svg-core": "6.1.1",
-    "@fortawesome/free-regular-svg-icons": "5.15.3",
+    "@fortawesome/free-regular-svg-icons": "6.1.1",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
+    "@fortawesome/free-solid-svg-icons": "6.1.1",
-    "@fortawesome/react-fontawesome": "0.1.14",
+    "@fortawesome/react-fontawesome": "0.1.18",
     "@microsoft/signalr": "6.0.3",
-    "@sentry/browser": "6.15.0",
+    "@sentry/browser": "6.19.2",
-    "@sentry/integrations": "6.15.0",
+    "@sentry/integrations": "6.19.2",
-    "chart.js": "3.2.0",
+    "chart.js": "3.7.1",
     "classnames": "2.3.1",
-    "clipboard": "2.0.8",
+    "clipboard": "2.0.10",
     "connected-react-router": "6.9.1",
     "element-class": "0.2.2",
     "filesize": "6.3.0",
@@ -48,13 +48,13 @@
     "moment": "2.29.1",
     "mousetrap": "1.6.5",
     "normalize.css": "8.0.1",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
-    "qs": "6.10.1",
+    "qs": "6.10.3",
     "react": "17.0.2",
     "react-addons-shallow-compare": "15.6.3",
     "react-async-script": "1.2.0",
     "react-autosuggest": "10.1.0",
-    "react-custom-scrollbars": "4.2.1",
+    "react-custom-scrollbars-2": "4.4.0",
     "react-dnd": "14.0.4",
     "react-dnd-html5-backend": "14.0.2",
     "react-dnd-multi-backend": "6.0.2",
@@ -78,32 +78,32 @@
     "reselect": "4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.16.0",
+    "@babel/core": "7.17.8",
-    "@babel/eslint-parser": "7.16.3",
+    "@babel/eslint-parser": "7.17.0",
-    "@babel/plugin-proposal-class-properties": "7.16.0",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-proposal-decorators": "7.16.4",
+    "@babel/plugin-proposal-decorators": "7.17.8",
-    "@babel/plugin-proposal-export-default-from": "7.16.0",
+    "@babel/plugin-proposal-export-default-from": "7.16.7",
-    "@babel/plugin-proposal-export-namespace-from": "7.16.0",
+    "@babel/plugin-proposal-export-namespace-from": "7.16.7",
-    "@babel/plugin-proposal-function-sent": "7.16.0",
+    "@babel/plugin-proposal-function-sent": "7.16.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.7",
-    "@babel/plugin-proposal-numeric-separator": "7.16.0",
+    "@babel/plugin-proposal-numeric-separator": "7.16.7",
-    "@babel/plugin-proposal-optional-chaining": "7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "7.16.7",
-    "@babel/plugin-proposal-throw-expressions": "7.16.0",
+    "@babel/plugin-proposal-throw-expressions": "7.16.7",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.16.4",
+    "@babel/preset-env": "7.16.11",
-    "@babel/preset-react": "7.16.0",
+    "@babel/preset-react": "7.16.7",
     "autoprefixer": "10.2.5",
-    "babel-loader": "8.2.3",
+    "babel-loader": "8.2.4",
     "babel-plugin-inline-classnames": "2.0.1",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "core-js": "3.11.0",
+    "core-js": "3.21.1",
     "css-loader": "6.5.1",
-    "eslint": "8.3.0",
+    "eslint": "8.11.0",
     "eslint-plugin-filenames": "1.3.2",
-    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-import": "2.25.4",
-    "eslint-plugin-react": "7.27.1",
+    "eslint-plugin-react": "7.29.4",
     "eslint-plugin-simple-import-sort": "7.0.0",
-    "esprint": "3.1.0",
+    "esprint": "3.3.0",
     "file-loader": "6.2.0",
     "filemanager-webpack-plugin": "6.1.7",
     "html-webpack-plugin": "5.5.0",
@@ -121,7 +121,7 @@
     "run-sequence": "2.2.1",
     "streamqueue": "1.1.2",
     "style-loader": "3.3.1",
-    "stylelint": "14.1.0",
+    "stylelint": "14.6.0",
     "stylelint-order": "5.0.0",
     "url-loader": "4.1.1",
     "webpack": "5.64.2",