concord-console2: migrate off CRA to Vite

console2/.gitignore

@@ -8,6 +8,10 @@
 
 # production
 /build
+/dist
+
+# Vite
+*.local
 
 # misc
 .DS_Store

console2/public/index.html → console2/index.html

@@ -5,9 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+  <!-- Load config before app initialization -->
   <script src="/api/service/console/cfg"></script>
 
-  <link id="favicon" rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
+  <link id="favicon" rel="shortcut icon" href="/favicon.png">
   <base href="/" />
   <title>Concord</title>
 </head>
@@ -17,6 +18,9 @@
     You need to enable JavaScript to run this app.
   </noscript>
   <div id="root"></div>
+
+  <!-- Vite entry point -->
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 
 </html>

console2/package.json

@@ -2,24 +2,25 @@
     "name": "concord-console",
     "version": "1.0.0",
     "private": true,
+    "type": "module",
     "devDependencies": {
         "@babel/preset-react": "7.16.0",
         "@datasert/cronjs-matcher": "^1.4.0",
         "@testing-library/react": "12.1.2",
         "@types/jest": "27.0.3",
         "@types/lodash": "4.14.178",
-        "@types/node": "16.11.12",
+        "@types/node": "20.10.0",
         "@types/prop-types": "15.7.4",
-        "@types/react": "17.0.37",
-        "@types/react-dom": "17.0.11",
+        "@types/react": "18.2.45",
+        "@types/react-dom": "18.2.18",
         "@types/react-redux": "7.1.20",
         "@types/react-router": "5.1.17",
         "@types/react-router-dom": "5.3.2",
         "@types/redux-logger": "3.0.9",
         "@types/sinon": "10.0.6",
         "@types/styled-components": "5.1.17",
-        "@types/webpack-env": "1.16.3",
         "@typescript-eslint/typescript-estree": "5.35.1",
+        "@vitejs/plugin-react": "^4.2.1",
         "babel-cli": "6.26.0",
         "babel-core": "7.0.0-bridge.0",
         "babel-preset-es2015": "6.24.1",
@@ -31,7 +32,8 @@
         "redux-devtools-extension": "2.13.9",
         "shx": "0.3.3",
         "ts-node": "10.4.0",
-        "typescript": "4.8.2"
+        "typescript": "5.3.3",
+        "vite": "^5.0.8"
     },
     "dependencies": {
         "@monaco-editor/react": "4.3.1",
@@ -45,15 +47,14 @@
         "lodash": "4.17.21",
         "parse-domain": "4.1.0",
         "query-string": "7.0.1",
-        "react": "17.0.2",
-        "react-dom": "17.0.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
         "react-hook-form": "7.21.2",
         "react-idle-timer": "5.4.1",
         "react-json-view": "1.21.3",
         "react-redux": "7.2.6",
         "react-router": "5.2.0",
         "react-router-dom": "5.2.0",
-        "react-scripts": "4.0.3",
         "react-spring": "9.3.2",
         "reakit": "1.3.11",
         "redux": "4.1.2",
@@ -68,12 +69,12 @@
         "url-search-params-polyfill": "8.1.1"
     },
     "scripts": {
-        "start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
-        "build": "export SET NODE_OPTIONS=--openssl-legacy-provider && ./npm.sh run hack:remove-sui-css-dep && export SET BUILD_PATH='./target/classes/META-INF/console2' && react-scripts build",
-        "hack:remove-sui-css-dep": "shx --silent sed -i @import /*import node_modules/semantic-ui-css/semantic.min.css > /dev/null 2>&1",
-        "dev": "export SET NODE_OPTIONS=--openssl-legacy-provider && babel-node --presets es2015 scripts/devServer.js",
-        "test": "react-scripts test",
-        "test:watch": "./npm.sh test --watch",
+        "start": "vite",
+        "dev": "vite",
+        "build": "vite build",
+        "build:check": "tsc && vite build",
+        "preview": "vite preview",
+        "test": "vitest",
         "pretty": "prettier --tab-width 4 --print-width 100 --single-quote --jsx-bracket-same-line --arrow-parens 'always' parser 'typescript' --write 'src/**/*.{ts,tsx}'"
     },
     "eslintConfig": {

console2/src/components/molecules/ProcessLogViewer/index.tsx

@@ -300,7 +300,7 @@ class ProcessLogViewer extends React.Component<Props, State> {
                         <Button onClick={() => loadWholeLog(opts)}>Show the whole log</Button>
                     )}
                     <Button
-                        disabled={process === undefined}
+                        disabled={!instanceId}
                         onClick={() => window.open(`/api/v1/process/${instanceId}/log`, '_blank')}>
                         Raw
                     </Button>

console2/src/components/organisms/CheckpointView/CheckpointPopup/RestoreProcess.tsx

@@ -30,7 +30,7 @@ import { AnyAction, Dispatch } from 'redux';
 import { ConcordKey } from '../../../../api/common';
 import { actions } from '../../../../state/data/processes';
 import { isFinal, ProcessStatus } from '../../../../api/process';
-import { isFunction } from 'util';
+import { isFunction } from 'lodash';
 
 interface ExternalProps {
     children?: RenderCallback;

console2/src/components/organisms/ProcessLogActivityV2/index.tsx

@@ -260,7 +260,7 @@ const ProcessLogActivityV2 = ({
 
                 <Button.Group>
                     <Button
-                        disabled={process === undefined}
+                        disabled={!instanceId}
                         onClick={() => window.open(`/api/v1/process/${instanceId}/log`, '_blank')}>
                         Raw
                     </Button>

console2/src/components/pages/AboutPage/index.tsx

@@ -37,7 +37,7 @@ class AboutPage extends React.PureComponent {
                 <p>
                     Server version: <ServerVersion />
                 </p>
-                <p>Console version: {process.env.REACT_APP_CONCORD_VERSION || 'n/a'}</p>
+                <p>Console version: {import.meta.env.VITE_CONCORD_VERSION || 'n/a'}</p>
                 <p>Last updated: {window.concord.lastUpdated || 'n/a'}</p>
             </>
         );

console2/src/index.tsx

@@ -19,7 +19,7 @@
  */
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import 'typeface-lato';
 import 'semantic-ui-css/semantic.min.css';
@@ -28,17 +28,9 @@ import App from './App';
 import './index.css';
 
 const rootEl = document.getElementById('root') as HTMLElement;
+const root = createRoot(rootEl);
 
-ReactDOM.render(<App />, rootEl);
-
-// @ts-ignore
-if (module.hot) {
-    // @ts-ignore
-    module.hot.accept('./App', () => {
-        const NextApp = require('./App').default;
-        ReactDOM.render(<NextApp />, rootEl);
-    });
-}
+root.render(<App />);
 
 // remove any old service worker
 if (navigator.serviceWorker) {

console2/src/vite-env.d.ts

@@ -0,0 +1,29 @@
+/*-
+ * *****
+ * Concord
+ * -----
+ * Copyright (C) 2017 - 2025 Walmart Inc.
+ * -----
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =====
+ */
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_CONCORD_VERSION?: string;
+  // Add other env variables as needed
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

console2/tsconfig.json

@@ -1,34 +1,38 @@
 {
   "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Existing settings to preserve */
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "downlevelIteration": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "target": "es5",
-    "noFallthroughCasesInSwitch": true,
-    "useUnknownInCatchVariables": false
+    "useUnknownInCatchVariables": false,
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "build",
-    "scripts"
-  ]
+  "include": ["src"],
+  "exclude": ["node_modules", "target", "scripts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

console2/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

console2/vite.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/',
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8001',
+        changeOrigin: true,
+        secure: false
+      }
+    }
+  },
+  build: {
+    outDir: 'target/classes/META-INF/console2',
+    emptyOutDir: true,
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
+          'redux-vendor': ['redux', 'react-redux', 'redux-saga'],
+          'ui-vendor': ['semantic-ui-react']
+        }
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
+  optimizeDeps: {
+    include: [
+      'react',
+      'react-dom',
+      'react-router-dom',
+      'semantic-ui-react'
+    ]
+  }
+});