concord-console2: migrate off CRA to Vite (#1231)

Author: ibodrov

console2/.gitignore

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

console2/public/index.html renamed to 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-lock.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/package.json

@@ -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/molecules/ProcessLogViewer/index.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/CheckpointView/CheckpointPopup/RestoreProcess.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/organisms/ProcessLogActivityV2/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/components/pages/AboutPage/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/index.tsx

@@ -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;
+}