chore: Upgrade UI (caraml-dev#100)

* Update Elastic UI

Commented some errors for now and mark them as TODOs. Will revisit them later after finish updating other deps.

* Minor upgrade deps

* Upgrade jwt-decode, query-string, react-collapsed

* Upgrade React to 18

* Add minimum node version

* Update non rollup deps

* Upgrade rollup

* Update github actions

* Revert go lint

* Fix nav drawer not expanding

* Resolve TODO

Author: Arief Rahmansyah

.github/workflows/ci-pipeline.yml

@@ -4,7 +4,7 @@ on:
   # Automatically run CI on Release and Pre-Release tags and main branch
   push:
     tags:
-      - 'v[0-9]+.[0-9]+.[0-9]+*'
+      - "v[0-9]+.[0-9]+.[0-9]+*"
     branches:
       - main
     paths-ignore:
@@ -23,7 +23,7 @@ on:
 env:
   GO_VERSION: "1.20"
   GO_LINT_VERSION: v1.51.2
-  NODE_VERSION: 16
+  NODE_VERSION: 20
   ARTIFACT_RETENTION_DAYS: 7
   CONTAINER_REGISTRY: ghcr.io
   LOCAL_REGISTRY: registry.localhost:5000
@@ -35,18 +35,12 @@ jobs:
   build-ui:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
-
-      - name: Cache Dependencies
-        uses: actions/cache@v3
-        with:
-          path: ui/node_modules
-          key: |
-            ${{ runner.os }}-modules-${{ hashFiles('ui/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-modules-
+          cache: yarn
+          cache-dependency-path: ui/yarn.lock
 
       - name: Install
         working-directory: ui
@@ -61,7 +55,7 @@ jobs:
         run: make build-ui
 
       - name: Publish Artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: mlp-ui-dist
           path: ui/build/
@@ -72,7 +66,7 @@ jobs:
     outputs:
       api-version: ${{ steps.build-image.outputs.api-version }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -90,7 +84,7 @@ jobs:
             mlp-api:${{ steps.build-image.outputs.api-version }}
 
       - name: Publish Artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: mlp-api.${{ steps.build-image.outputs.api-version }}.tar
           path: mlp-api.${{ steps.build-image.outputs.api-version }}.tar
@@ -101,18 +95,11 @@ jobs:
     env:
       GOPATH: ${{ github.workspace }}/.go
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
         with:
           go-version: ${{ env.GO_VERSION }}
-
-      - name: Cache Dependencies
-        uses: actions/cache@v3
-        with:
-          path: .go/pkg/mod/
-          key: |
-            gomod-${{ hashFiles('go.mod') }}
-          restore-keys: gomod-
+          cache-dependency-path: api/go.sum
 
       - name: Lint code
         uses: golangci/golangci-lint-action@v2
@@ -138,15 +125,15 @@ jobs:
       - build-api
       - test-api
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           repository: ${{ env.CARAML_CHARTS_REPOSITORY }}
           ref: ${{ env.CARAML_CHARTS_REF }}
-          path: 'helm-charts'
+          path: "helm-charts"
 
-      - uses: actions/setup-go@v3
+      - uses: actions/setup-go@v5
         with:
           go-version: ${{ env.GO_VERSION }}
 
@@ -166,7 +153,7 @@ jobs:
             --k3s-arg "--no-deploy=metrics-server@server:*"
 
       - name: Download API image tar
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: mlp-api.${{ needs.build-api.outputs.api-version }}.tar
 
@@ -198,28 +185,28 @@ jobs:
           echo "::group::describe deployment/mlp"
           kubectl describe deployment/mlp
           echo "::endgroup::"
-          
+
           echo "::group::configmap/mlp-config"
           kubectl get cm/mlp-config -o jsonpath='{.data.mlp-config\.yaml}'
           echo "::endgroup::"
-          
+
           echo "::group::logs deployment/mlp"
           kubectl logs deployment/mlp
           echo "::endgroup::"
-          
+
           echo "::group::kubernetes events"
           kubectl get events
           echo "::endgroup::"
 
           echo "::group::kubernetes pod describe"
           kubectl describe pod
-          echo "::endgroup::"      
+          echo "::endgroup::"
 
       - name: Setup MLP project
         shell: bash
         run: |
           sleep 2
-          
+
           tee payload.json <<EOF
           {
             "name": "e2e-test",
@@ -274,7 +261,7 @@ jobs:
     runs-on: ubuntu-latest
     environment: ${{ needs.release-rules.outputs.release-type == 'dev' && 'manual' || '' }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Log in to the Container registry
         uses: docker/login-action@v2
@@ -284,12 +271,12 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Download API image tar
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: mlp-api.${{ needs.build-api.outputs.api-version }}.tar
 
       - name: Download MLP UI Dist
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: mlp-ui-dist
           path: ui/build
@@ -309,7 +296,7 @@ jobs:
       changed: ${{ steps.changes.outputs.ui-lib }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: dorny/paths-filter@v2
         id: changes
         with:
@@ -340,17 +327,17 @@ jobs:
     runs-on: ubuntu-latest
     environment: ${{ needs.release-rules.outputs.release-type == 'dev' && 'manual' || '' }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
           registry-url: https://registry.npmjs.org
 
       - name: Cache Dependencies
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ui/node_modules
           key: |
@@ -367,4 +354,4 @@ jobs:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
           yarn set-version-from-git
-          yarn lib publish
+          yarn lib publish

ui/package.json

@@ -13,6 +13,9 @@
     ],
     "nohoist": []
   },
+  "engines": {
+    "node": ">=20.13.1"
+  },
   "scripts": {
     "app": "yarn workspace mlp-ui",
     "lib": "yarn workspace @caraml-dev/ui-lib",
@@ -32,11 +35,11 @@
     "version-from-git": "../scripts/vertagen/vertagen.sh"
   },
   "devDependencies": {
-    "husky": "^8.0.1",
-    "lint-staged": "^11.1.2",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.5",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.17.0",
-    "wait-on": "^5.1.0"
+    "prettier": "^3.2.5",
+    "wait-on": "^7.2.0"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json,css,scss,md}": [

ui/packages/app/package.json

@@ -6,29 +6,33 @@
   "dependencies": {
     "@caraml-dev/ui-lib": "^1.7.5-build.5-59f13e1",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "66.0.0",
-    "@emotion/react": "^11.9.0",
-    "@sentry/browser": "5.15.5",
-    "moment": "^2.29.4",
+    "@elastic/eui": "^94.5.2",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.4",
+    "@sentry/browser": "8.5.0",
+    "moment": "^2.30.1",
     "object-assign-deep": "0.4.0",
     "proper-url-join": "2.1.1",
-    "query-string": "^7.0.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-router-dom": "^6.3.0"
+    "query-string": "^9.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
-    "@craco/craco": "^6.4.5",
+    "@craco/craco": "^7.1.0",
     "react-scripts": "^5.0.1"
   },
+  "engines": {
+    "node": ">=20.13.1"
+  },
   "scripts": {
+    "start": "craco start",
     "build": "craco build",
-    "postbuild": "mv build ../../build",
+    "test": "craco test",
     "eject": "craco eject",
     "lint": "eslint --max-warnings 0 src",
     "lint:fix": "eslint --fix src",
-    "start": "craco start",
-    "test": "craco test"
+    "postbuild": "mv build ../../build"
   },
   "proxy": "http://localhost:8080",
   "browserslist": {

ui/packages/app/src/App.js

@@ -1,17 +1,17 @@
-import React from "react";
 import {
   AuthProvider,
-  Page404,
   ErrorBoundary,
   Login,
   MlpApiContextProvider,
+  Page404,
   Toast
 } from "@caraml-dev/ui-lib";
-import config from "./config";
-import { PrivateLayout } from "./PrivateLayout";
 import { EuiProvider } from "@elastic/eui";
+import React from "react";
 import { Route, Routes } from "react-router-dom";
 import AppRoutes from "./AppRoutes";
+import { PrivateLayout } from "./PrivateLayout";
+import config from "./config";
 
 const App = () => (
   <EuiProvider>

ui/packages/app/src/PrivateLayout.js

@@ -1,14 +1,14 @@
-import React from "react";
 import {
   ApplicationsContext,
   ApplicationsContextProvider,
   Header,
   PrivateRoute,
   ProjectsContextProvider
 } from "@caraml-dev/ui-lib";
-import config from "./config";
 import urlJoin from "proper-url-join";
+import React from "react";
 import { Outlet, useNavigate } from "react-router-dom";
+import config from "./config";
 
 export const PrivateLayout = () => {
   const navigate = useNavigate();

ui/packages/app/src/bootstrap.js

@@ -1,24 +1,23 @@
+import * as Sentry from "@sentry/browser";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 import App from "./App";
-import * as Sentry from "@sentry/browser";
-import * as serviceWorker from "./serviceWorker";
 import { sentryConfig } from "./config";
-import { BrowserRouter } from "react-router-dom";
+import * as serviceWorker from "./serviceWorker";
 
-// Styles
-import "@elastic/eui/dist/eui_theme_light.css";
 import "@caraml-dev/ui-lib/dist/index.css";
+import "@elastic/eui/dist/eui_theme_light.css";
 
 Sentry.init(sentryConfig);
 
-ReactDOM.render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>,
-  document.getElementById("root")
+const container = document.getElementById("root");
+const root = createRoot(container);
+
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
 );
 
 // If you want your app to work offline and load faster, you can change

ui/packages/app/src/pages/project/Project.js

@@ -1,18 +1,18 @@
-import React, { useContext } from "react";
+import { ApplicationsContext, ProjectsContext } from "@caraml-dev/ui-lib";
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLoadingContent,
-  EuiSpacer,
-  EuiPageTemplate
+  EuiPageTemplate,
+  EuiSkeletonText,
+  EuiSpacer
 } from "@elastic/eui";
-import { ApplicationsContext, ProjectsContext } from "@caraml-dev/ui-lib";
-import { Instances } from "./components/Instances";
-import { ProjectSummary } from "./components/ProjectSummary";
-import { Resources } from "./components/Resources";
+import React, { useContext } from "react";
 import { useMerlinApi } from "../../hooks/useMerlinApi";
 import { useTuringApi } from "../../hooks/useTuringApi";
 import { ComingSoonPanel } from "./components/ComingSoonPanel";
+import { Instances } from "./components/Instances";
+import { ProjectSummary } from "./components/ProjectSummary";
+import { Resources } from "./components/Resources";
 
 import imageCharts from "../../images/charts.svg";
 import "./components/ListGroup.scss";
@@ -87,7 +87,7 @@ const Project = () => {
             </EuiFlexGroup>
           </>
         ) : (
-          <EuiLoadingContent lines={5} />
+          <EuiSkeletonText lines={5} />
         )}
       </EuiPageTemplate.Section>
     </EuiPageTemplate>