feat(CODE): ADDON-58172 Version bump all the deps

package.json

@@ -18,54 +18,55 @@
     "stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js"
   },
   "dependencies": {
-    "@splunk/react-page": "^5.0.0",
-    "@splunk/react-toast-notifications": "^0.10.0",
-    "@splunk/react-ui": "^4.2.0",
-    "@splunk/splunk-utils": "^2.0.0",
-    "@splunk/themes": "^0.7.0",
-    "axios": "^0.21.2",
+    "@splunk/react-page": "^6.0.2",
+    "@splunk/react-toast-notifications": "^0.11.0",
+    "@splunk/react-ui": "^4.14.0",
+    "@splunk/splunk-utils": "^2.2.3",
+    "@splunk/themes": "^0.13.0",
+    "axios": "^1.1.3",
     "immutability-helper": "^3.1.1",
     "jsonschema": "^1.4.0",
-    "license-webpack-plugin": "^2.3.18",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-router-dom": "^5.2.0",
-    "styled-components": "^5.1.1",
-    "uuid": "^8.3.2"
+    "license-webpack-plugin": "^4.0.2",
+    "react": "^16.9.38",
+    "react-dom": "^16.9.8",
+    "react-router-dom": "^6.4.3",
+    "styled-components": "^5.3.6",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/runtime": "^7.13.10",
+    "@babel/core": "^7.20.2",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/runtime": "^7.20.1",
     "@semantic-release/exec": "semantic-release/exec",
     "@semantic-release/github": "semantic-release/github",
     "@splunk/babel-preset": "^3.0.0",
     "@splunk/eslint-config": "^4.0.0",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/webpack-configs": "^5.0.0",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.0.4",
-    "chai": "^3.5.0",
-    "copy-webpack-plugin": "^4.5.2",
+    "babel-loader": "^9.1.0",
+    "chai": "^4.3.7",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.0",
+    "css-loader": "^6.7.2",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^7.14.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.26.0",
+    "enzyme-adapter-react-16": "^1.15.7",
+    "eslint": "^8.28.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-webpack": "^0.13.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.7.1",
-    "semantic-release": "^19.0.3",
-    "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "webpack": "^4.16.2",
-    "webpack-cli": "^3.1.0",
-    "webpack-merge": "^4.1.3"
+    "semantic-release": "^19.0.5",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.15.0",
+    "url": "^0.11.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-merge": "^5.8.0"
   },
   "resolutions": {
     "glob-parent": "^5.1.2",
@@ -74,6 +75,6 @@
     "@npmcli/git": "^2.0.8"
   },
   "engines": {
-    "node": ">=6"
+    "node": ">=10.13.0"
   }
 }

src/main/webapp/components/RadioComponent.jsx

@@ -7,6 +7,10 @@ const RadioBarWrapper = styled(RadioBar)`
     width: 320px;
 `;
 
+const RadioBarOption = styled(RadioBar.Option)`
+    margin-left: 0px !important;
+`;
+
 class RadioComponent extends Component {
     handleChange = (e, { value }) => {
         this.props.handleChange(this.props.field, value);
@@ -21,7 +25,7 @@ class RadioComponent extends Component {
                 key={this.props.field}
             >
                 {this.props.controlOptions.items.map((item) => (
-                    <RadioBar.Option key={item.value} value={item.value} label={item.label} />
+                    <RadioBarOption key={item.value} value={item.value} label={item.label} />
                 ))}
             </RadioBarWrapper>
         );

src/main/webapp/pages/Input/InputPage.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 import ColumnLayout from '@splunk/react-ui/ColumnLayout';
 import Button from '@splunk/react-ui/Button';
@@ -57,13 +57,13 @@ function InputPage() {
         return service.name;
     });
 
-    const history = useHistory();
+    let navigate = useNavigate();
     const query = useQuery();
 
     useEffect(() => {
         setServiceEntity();
         setActiveTab();
-    }, [history.location.search]);
+    }, [useLocation().search]);
 
     const setServiceEntity = () => {
         const service = services.find((x) => x.name === query.get('service'));
@@ -126,10 +126,10 @@ function InputPage() {
             isInputPageStyle,
         });
         if (isInputPageStyle) {
-            // set query and push to history
+            // set query and push to navigate
             query.set('service', serviceName);
             query.set('action', MODE_CREATE);
-            history.push({ search: query.toString() });
+            navigate({ search: query.toString() });
         }
     };
 
@@ -167,14 +167,14 @@ function InputPage() {
         // set query and push to history
         query.set('service', row.serviceName);
         query.set('action', mode);
-        history.push({ search: query.toString() });
+        navigate({ search: query.toString() });
     };
 
     // handle close request for page style dialog
     const handlePageDialogClose = () => {
         setEntity({ ...entity, open: false });
         query.delete('action');
-        history.push({ search: query.toString() });
+        navigate({ search: query.toString() });
     };
 
     // generate page style dialog
@@ -206,10 +206,8 @@ function InputPage() {
         }
 
         query.set('service', selectedTabId);
-        query.delete('action');
-        history.push({ search: query.toString() });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+        navigate({ search: query.toString() });
+g    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeTabId]);
 
     // Making a dropdown if we have more than one service

webpack.config.js

@@ -1,10 +1,12 @@
 const path = require('path');
+const { merge } = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const webpackMerge = require('webpack-merge');
-const baseConfig = require('@splunk/webpack-configs/base.config').default;
 const { LicenseWebpackPlugin } = require('license-webpack-plugin');
+const baseConfig = require('@splunk/webpack-configs/base.config').default;
+
+const dev = process.env.NODE_ENV !== 'production';
 
-module.exports = webpackMerge(baseConfig, {
+module.exports = merge(baseConfig, {
     entry: {
         entry_page: path.join(__dirname, 'src/main/webapp/pages/entry_page'),
     },
@@ -23,20 +25,22 @@ module.exports = webpackMerge(baseConfig, {
     },
     plugins: [
         new LicenseWebpackPlugin(),
-        new CopyWebpackPlugin([
-            {
-                from: path.join(__dirname, 'src/main/resources/splunk'),
-                to: path.join(__dirname, 'dist/package'),
-            },
-            {
-                from: path.join(__dirname, 'src/main/webapp/schema/schema.json'),
-                to: path.join(__dirname, 'dist/schema'),
-            },
-            {
-                from: path.join(__dirname, 'THIRDPARTY'),
-                to: path.join(__dirname, 'dist'),
-            },
-        ]),
+        new CopyWebpackPlugin({
+            patterns: [
+                {
+                    from: path.join(__dirname, 'src/main/resources/splunk'),
+                    to: path.join(__dirname, 'dist/package'),
+                },
+                {
+                    from: path.join(__dirname, 'src/main/webapp/schema/schema.json'),
+                    to: path.join(__dirname, 'dist/schema'),
+                },
+                {
+                    from: path.join(__dirname, 'THIRDPARTY'),
+                    to: path.join(__dirname, 'dist'),
+                },
+            ],
+        })
     ],
-    devtool: 'inline-source-map',
+    devtool: dev ? 'inline-source-map' : false
 });