Update to modern JSX transform (#3097)

## Which problem is this PR solving?
- Resolves #3092 

## Description of the changes
- The console warnings about "outdated JSX transform" are completely
resolved with the configuration changes

## How was this change tested?
- Unit tests

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [ ] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `npm run lint` and `npm run test`

---------

Signed-off-by: Parship Chowdhury <[email protected]>
Co-authored-by: Yuri Shkuro <[email protected]>

Author: Parship12

packages/jaeger-ui/test/babel-transform.js

@@ -21,7 +21,7 @@ const babelJest = require('babel-jest').default;
 // Solution: Transform import.meta to process during Jest transformation.
 // This allows ESM-only packages to work in Jest's CommonJS test environment.
 // Production code is unaffected, this only runs during testing.
-const importMetaTransform = function() {
+const importMetaTransform = function () {
   return {
     visitor: {
       MetaProperty(path) {
@@ -30,26 +30,29 @@ const importMetaTransform = function() {
         if (path.node.meta.name === 'import' && path.node.property.name === 'meta') {
           path.replaceWithSourceString('process');
         }
-      }
-    }
+      },
+    },
   };
 };
 
 const babelConfiguration = {
   presets: [
-    ['@babel/preset-env', {
-      targets: { node: 'current' },
-      modules: 'commonjs'
-    }],
-    ['@babel/preset-react', { development: !process.env.CI }],
+    [
+      '@babel/preset-env',
+      {
+        targets: { node: 'current' },
+        modules: 'commonjs',
+      },
+    ],
+    ['@babel/preset-react', { development: !process.env.CI, runtime: 'automatic' }],
     '@babel/preset-typescript',
   ],
   plugins: [
     'babel-plugin-inline-react-svg',
     ['@babel/plugin-transform-modules-commonjs', { allowTopLevelThis: true }],
-    importMetaTransform
+    importMetaTransform,
   ],
-}
+};
 
 // Export configuration for depcheck (without the function)
 const babelConfigurationForDepcheck = {
@@ -59,7 +62,7 @@ const babelConfigurationForDepcheck = {
     ['@babel/plugin-transform-modules-commonjs', { allowTopLevelThis: true }],
     // Note: custom function plugins are excluded for depcheck compatibility
   ],
-}
+};
 
 module.exports = babelJest.createTransformer(babelConfiguration);
 module.exports.babelConfiguration = babelConfiguration;

packages/jaeger-ui/tsconfig.json

@@ -13,5 +13,8 @@
 // limitations under the License.
 {
   "extends": "../../tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
   "include": ["src/**/*.tsx", "src/**/*.ts", "src/**/*.json", "typings"]
 }

packages/plexus/babel.config.js

@@ -43,6 +43,7 @@ function getBabelConfig(api) {
         {
           development: env === 'development',
           useBuiltIns: true,
+          runtime: 'automatic',
         },
       ],
       '@babel/preset-typescript',

tsconfig.json

@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "declaration": true,
     "emitDeclarationOnly": true,
-    "jsx": "preserve"
+    "jsx": "react-jsx"
   },
   "include": [],
   "files": [],