Closes #1507 - Update minor versions, patches and some major versions of Config Server UI dependencies (#1510)

* update patches

* update minor versions

* update eslint dependencies

* update @babel/core dependency

* re-update eslint

* update primeinons

* update primeflex

* update react-timeago

* update react-syntax-highligter

* update react-redux

* update jwt-decode

* Merge branch 'master' of https://github.com/inspectIT/inspectit-ocelot into dependencies-update

* Closes #1507 : Update minor versions, patches and some major
versions(#1507)

Highlight enums with String values correctly (#1488)

* Treat enums with values-field differently

* Fix default config exporters.yml

* Fix order of possible values in test

* Use toString instead of getName

* Fix JSON parsing of Maps in test

Using toString, empty values could not be parsed correctly by gson

update patches

update minor versions

update eslint dependencies

update @babel/core dependency

re-update eslint

update primeinons

update primeflex

update react-timeago

update react-syntax-highligter

update react-redux

* update jwt-decode

* Add settings and info for developing UI in IntelliJ (#1496)

* Activate formatter tags by default

* Add indentation settings for JS

* Add to CONTRIBUTING regarding JavaScript linting

* Fix eol linting of .js files on Windows

* Add yarn lint and format:write to README

* Add section in CONTRIBUTING.md

* Add to CONTRIBUTING based on comments

* Fix linting command in README

Co-authored-by: Heiko Holz <heiko.holz@novatec-gmbh.de>

* [skip ci] Publish documentation v2.1.0

* Fix release notes links (#1503)

* Closes #1507 - Update minor versions, patches and some major versions

* Closes #1507 - Update minor versions, patches and some major versions

* Delete package-lock.json

Only one lock-file should be in project, which is yarn.lock in our case.

* Small fix to next.config

* Fix license string

* Change parser to babel/eslint-parser

* Add peer dependencies

* Merge branch 'master' into dependencies-update

* Fix linting errors

* Move babel eslint to devdependencies, remove old version

* Add helper-string-parser to devdependencies

Author: salim-1997

components/inspectit-ocelot-configurationserver-ui/.eslintrc

@@ -13,12 +13,16 @@
         "plugin:react/recommended",
         "plugin:prettier/recommended"
     ],
-    "parser": "babel-eslint",
+    "parser": "@babel/eslint-parser",
     "parserOptions": {
         "sourceType": "module",
         "ecmaVersion": 2018,
         "ecmaFeatures": {
             "jsx": true
+        },
+        "requireConfigFile": false,
+        "babelOptions": {
+            "presets": ["@babel/preset-react"]
         }
     },
     "settings": {

components/inspectit-ocelot-configurationserver-ui/next.config.js

@@ -5,7 +5,7 @@ module.exports = withCSS({
     distDir: '../.next',
 
     // Each page will be exported as a directory
-    exportTrailingSlash: true,
+    trailingSlash: true,
 
     assetPrefix: isProduction ? '/ui' : '',
 
@@ -39,4 +39,4 @@ module.exports = withCSS({
         VERSION: process.env.CIRCLE_TAG || "SNAPSHOT",
         BUILD_DATE: new Date().toUTCString()
     }
-})
+})

components/inspectit-ocelot-configurationserver-ui/package-lock.json

@@ -26,53 +26,57 @@
   },
   "dependencies": {
     "@zeit/next-css": "^1.0.1",
-    "ace-builds": "^1.4.5",
-    "axios": "^0.26.1",
-    "classnames": "^2.2.6",
+    "ace-builds": "^1.7.1",
+    "axios": "^0.27.2",
+    "classnames": "^2.3.1",
     "dateformat": "^3.0.3",
     "file-saver": "^2.0.5",
-    "js-yaml": "^3.13.1",
-    "jszip": "^3.9.1",
-    "jwt-decode": "^2.2.0",
+    "js-yaml": "^4.1.0",
+    "jszip": "^3.10.0",
+    "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "next": "^9.3.2",
-    "primeflex": "^1.3.1",
-    "primeicons": "^1.0.0",
-    "primereact": "^4.2.1",
-    "prop-types": "^15.7.2",
+    "next": "^9.5.5",
+    "primeflex": "^3.2.1",
+    "primeicons": "^5.0.0",
+    "primereact": "^4.2.2",
+    "prop-types": "^15.8.1",
     "randexp": "^0.5.3",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-diff-viewer": "^3.1.1",
-    "react-dom": "^16.13.1",
-    "react-redux": "^7.2.0",
-    "react-syntax-highlighter": "^12.2.1",
-    "react-timeago": "^4.4.0",
+    "react-dom": "^16.14.0",
+    "react-redux": "^8.0.2",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-timeago": "^7.1.0",
     "react-tooltip": "^4.2.21",
-    "react-transition-group": "^4.2.1",
-    "redux": "^4.0.5",
+    "react-transition-group": "^4.4.2",
+    "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.2",
     "redux-persist": "^6.0.0",
-    "redux-thunk": "^2.3.0",
-    "reselect": "^4.0.0",
-    "uuid": "^8.3.2"
+    "redux-thunk": "^2.4.1",
+    "require-from-string": "2.0.2",
+    "reselect": "^4.1.6",
+    "uuid": "^8.3.2",
+    "webpack": "4.46.0"
   },
-  "license": "apache-2.0",
+  "license": "Apache-2.0",
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/react": "^6.2.9",
-    "babel-eslint": "^10.1.0",
+    "@babel/core": "^7.18.9",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/helper-string-parser": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/react": "^6.5.9",
     "babel-loader": "^8.2.5",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-import-resolver-webpack": "^0.12.1",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.20.1",
-    "file-loader": "^4.0.0",
-    "prettier": "^2.0.4",
-    "url-loader": "^2.0.1"
+    "eslint": "^8.20.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "file-loader": "^4.3.0",
+    "prettier": "^2.7.1",
+    "url-loader": "^2.3.0"
   }
 }

components/inspectit-ocelot-configurationserver-ui/package.json

@@ -55,7 +55,7 @@ const MethodConfigurationEditor = ({ yamlConfiguration }) => {
   useEffect(() => {
     // parse configuration
     try {
-      setConfiguration(yaml.safeLoad(yamlConfiguration));
+      setConfiguration(yaml.load(yamlConfiguration));
     } catch (error) {
       setConfigurationError(error);
       setConfiguration(null);

components/inspectit-ocelot-configurationserver-ui/src/components/editor/method-configuration-editor/MethodConfigurationEditor.js

@@ -32,7 +32,7 @@ class YamlParserCache {
     } else {
       let config;
       try {
-        config = yaml.safeLoad(yamlString);
+        config = yaml.load(yamlString);
       } catch (error) {
         config = null;
       }

components/inspectit-ocelot-configurationserver-ui/src/components/editor/visual-editor/YamlParser.js

@@ -204,7 +204,6 @@ const ValueEditor = ({ type, value, options, readOnly, onDataChanged }) => {
  * Simple value display component.
  */
 const SimpleDataView = ({ value, isDefault, error }) => {
-  const style = {};
   return (
     <>
       <style jsx>{`

components/inspectit-ocelot-configurationserver-ui/src/components/views/alerting/rules/editor/VariableView.js

@@ -295,7 +295,7 @@ class ConfigurationView extends React.Component {
 
 const getYamlError = (content) => {
   try {
-    yaml.safeLoad(content);
+    yaml.load(content);
     return null;
   } catch (error) {
     if (error.message) {

components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/ConfigurationView.js

@@ -147,46 +147,46 @@ class FileTree extends React.Component {
     return (
       <div className="this" onContextMenu={readOnly ? undefined : this.showContextMenu} onKeyDown={readOnly ? undefined : this.onKeyDown}>
         <style jsx>{`
-                  .this {
-                    overflow: auto;
-                    flex-grow: 1;
-                    display: flex;
-                    flex-direction: column;
-                  }
+          .this {
+            overflow: auto;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+          }
 
-                  .this :global(.cm-tree-icon) {
-                    width: 1.3rem;
-                    height: 1.3rem;
-                  }
+          .this :global(.cm-tree-icon) {
+            width: 1.3rem;
+            height: 1.3rem;
+          }
 
-                  .this :global(.cm-tree-label) {
-                    color: #aaa;
-                  }
-                  
-                  .this :global(.cm-hidden-file-tree-label){
-                    color: #aaa;
-                  }
-                    
-                  .this :global(.ocelot-tree-head-orange) {
-                    background: url("${linkPrefix}/static/images/inspectit-ocelot-head_orange.svg") center no-repeat;
-                    background-size: 1rem 1rem;
-                  }
+          .this :global(.cm-tree-label) {
+            color: #aaa;
+          }
 
-                  .this :global(.ocelot-tree-head-white) {
-                    background: url("${linkPrefix}/static/images/inspectit-ocelot-head_white.svg") center no-repeat;
-                    background-size: 1rem 1rem;
-                  }
+          .this :global(.cm-hidden-file-tree-label) {
+            color: #aaa;
+          }
 
-                  .tree-container {
-                    overflow: auto;
-                  }
+          .this :global(.ocelot-tree-head-orange) {
+            background: url('${linkPrefix}/static/images/inspectit-ocelot-head_orange.svg') center no-repeat;
+            background-size: 1rem 1rem;
+          }
 
-                  .version-banner {
-                    background-color: #ffcc80;
-                    height: 2.45rem;
-                    border-bottom: 1px solid #dddddd;
-                  }
-                `}</style>
+          .this :global(.ocelot-tree-head-white) {
+            background: url('${linkPrefix}/static/images/inspectit-ocelot-head_white.svg') center no-repeat;
+            background-size: 1rem 1rem;
+          }
+
+          .tree-container {
+            overflow: auto;
+          }
+
+          .version-banner {
+            background-color: #ffcc80;
+            height: 2.45rem;
+            border-bottom: 1px solid #dddddd;
+          }
+        `}</style>
         {selectedVersion && <div className="version-banner" />}
         <div className="tree-container">
           <ContextMenu model={this.state.contextMenuModel} ref={this.contextMenuRef} />

components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/FileTree.js

@@ -7,21 +7,25 @@ const STARTED = ['background: darkorange', 'color: white'].join(';');
 
 const FAILURE = ['background: red', 'color: white'].join(';');
 
-const createLogger = (active = true) => (store) => (next) => (action) => {
-  if (!active || typeof action === 'function') {
-    return next(action);
-  }
-
-  const prevState = store.getState();
-  const result = next(action);
-  const nextState = store.getState();
-  logGroupCollapsed(`%c ${action.type} `, determineStyle(action));
-  logInfo('%cprev state', 'color: darkorange', prevState);
-  logInfo('%caction payload', 'color: blue', action.payload);
-  logInfo('%cnext state', 'color: darkgreen', nextState);
-  logGroupEnd();
-  return result;
-};
+const createLogger =
+  (active = true) =>
+  (store) =>
+  (next) =>
+  (action) => {
+    if (!active || typeof action === 'function') {
+      return next(action);
+    }
+
+    const prevState = store.getState();
+    const result = next(action);
+    const nextState = store.getState();
+    logGroupCollapsed(`%c ${action.type} `, determineStyle(action));
+    logInfo('%cprev state', 'color: darkorange', prevState);
+    logInfo('%caction payload', 'color: blue', action.payload);
+    logInfo('%cnext state', 'color: darkgreen', nextState);
+    logGroupEnd();
+    return result;
+  };
 
 export default createLogger;