Merge branch 'master' into ibodrov-patch-1

Author: ibodrov

console2/.gitignore

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

console2/README.md

@@ -1,7 +1,5 @@
 # Concord UI
 
-Uses https://github.com/facebook/create-react-app/ as the boilerplate.    
-
 ## Prerequisites
 
 - Node 20 or greater, available in `$PATH`;
@@ -27,11 +25,10 @@ In the dev mode the UI is served by running `npm start`.
 First time:
 ```bash
 $ npm ci
-$ npm start
+$ npm run dev
 ```
 
-The browser should automatically open on http://localhost:3000
-(the initial load might take a while, especially on slower machines).
+Open http://localhost:3000.
 
 The `ci` step can be skipped for subsequent runs.
 
@@ -69,9 +66,3 @@ concord-server {
 ```
 
 Use [./public/cfg.js](./public/cfg.js) as an example.
-
-## Custom Server URL
-
-The `proxy` property in the [package.json](./package.json) file is used to
-proxy API requests to the server. It can be used to point the UI in dev mode to
-another server.

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,40 +2,34 @@
     "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/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",
-        "babel-cli": "6.26.0",
-        "babel-core": "7.0.0-bridge.0",
-        "babel-preset-es2015": "6.24.1",
+        "@vitejs/plugin-react": "^4.2.1",
         "eslint": "7.32.0",
-        "express": "4.17.1",
-        "express-http-proxy": "1.6.3",
         "prettier": "2.5.1",
         "react-hooks-testing-library": "0.6.0",
         "redux-devtools-extension": "2.13.9",
         "shx": "0.3.3",
         "ts-node": "10.4.0",
-        "typescript": "4.8.2"
+        "typescript": "5.3.3",
+        "vite": "^7.1.12"
     },
     "dependencies": {
         "@monaco-editor/react": "4.3.1",
-        "ansi_up": "4.0.4",
+        "ansi_up": "6.0.6",
         "connected-react-router": "6.9.2",
         "constate": "3.3.0",
         "copy-to-clipboard": "3.3.1",
@@ -45,15 +39,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 +61,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/scripts/devServer.js

@@ -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/molecules/ProcessLogViewer/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/organisms/CheckpointView/CheckpointPopup/RestoreProcess.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>
             </>
         );