ML-11237

.github/workflows/build.yaml

@@ -78,7 +78,7 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: '16'
+        node-version: '21'
 
     - name: Docker login (ghcr)
       uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0

.github/workflows/ci.yaml

@@ -122,13 +122,13 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '21'
 
       - name: get needs object
         run: echo "${{toJson(needs)}}"
 
       - name: Install dependencies
-        run: npm install
+        run: npm install --legacy-peer-deps
 
       - name: Run ESLint
         run: |

.storybook/main.js → .storybook/main.mjs

@@ -17,17 +17,17 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-const path = require('path')
 
-module.exports = {
-  babel: async options => {
-    options.plugins.push('babel-plugin-inline-react-svg')
-    return options
+const config = {
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
   },
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/preset-scss'
-  ]
+  addons: ['@storybook/addon-links', '@storybook/preset-scss', '@storybook/addon-docs'],
+  core: {
+    builder: '@storybook/builder-vite'
+  }
 }
+
+export default config

.stylelintrc.json

@@ -1,10 +1,40 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-rational-order"],
+  "extends": ["stylelint-config-standard", "stylelint-config-standard-scss", "stylelint-config-rational-order"],
   "plugins": [
     "stylelint-scss"
   ],
   "rules": {
     "at-rule-no-unknown": null,
-    "scss/at-rule-no-unknown": true
+    "selector-no-vendor-prefix": null,
+    "scss/at-mixin-argumentless-call-parentheses": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "scss/at-rule-no-unknown": true,
+    "media-feature-range-notation": null,
+    "property-no-vendor-prefix": null,
+    "selector-class-pattern": [
+      "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))*(?:_(?:[a-z0-9]+(?:-[a-z0-9]+)*)(?:_[a-z0-9]+(?:-[a-z0-9]+)*)?)?$",
+      {
+        "resolveNestedSelectors": true,
+        "message": "Expected kebab-case or BEM: block-name, block-name__elem-name(__sub-elem…), block-name_mod-name[_mod-val], block-name__elem-name_mod-name[_mod-val]"
+      }
+    ],
+    "scss/at-mixin-pattern": [
+      "^(?:[a-z][a-z0-9]*(?:-[a-z0-9]+)*|[a-z][a-z0-9]*(?:[A-Z][a-z0-9]*)*)$",
+      {
+        "message": "Expected mixin name to be kebab-case (my-mixin) or camelCase (myMixin)"
+      }
+    ],
+    "custom-property-pattern": [
+      "^(?:[a-z][a-z0-9]*(?:-[a-z0-9]+)*|[a-z][a-z0-9]*(?:[A-Z][a-z0-9]*)*)$",
+      {
+        "message": "Expected variable name to be kebab-case (my-variable) or camelCase (myVariable)"
+      }
+    ],
+    "scss/dollar-variable-pattern": [
+      "^(?:[a-z][a-z0-9]*(?:-[a-z0-9]+)*|[a-z][a-z0-9]*(?:[A-Z][a-z0-9]*)*)$",
+      {
+        "message": "Expected variable name to be kebab-case (my-variable) or camelCase (myVariable)"
+      }
+    ]
   }
 }

config/paths.js

@@ -83,7 +83,6 @@ module.exports = {
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
   appWebpackCache: resolveApp('node_modules/.cache'),
   appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),

eslint.config.mjs

@@ -3,6 +3,7 @@ import globals from 'globals'
 import js from '@eslint/js'
 import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
+import eslintPluginImport from 'eslint-plugin-import'
 
 export default [
   { ignores: ['dist'] },
@@ -12,7 +13,11 @@ export default [
     files: ['**/*.{js,jsx,ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2021,
-      globals: globals.browser,
+      globals: {
+        ...globals.browser,
+        ...globals.jest,
+        ...globals.node
+      },
       parserOptions: {
         ecmaFeatures: {
           jsx: true
@@ -21,7 +26,8 @@ export default [
     },
     plugins: {
       react: react,
-      'react-hooks': reactHooks
+      'react-hooks': reactHooks,
+      import: eslintPluginImport
     },
     settings: {
       react: {
@@ -34,6 +40,7 @@ export default [
       'react/react-in-jsx-scope': 'off',
       'react/no-unescaped-entities': 'off',
       'import/no-anonymous-default-export': 'off',
+      'import/named': process.env.NODE_ENV === 'production' ? 2 : 1,
       'no-unused-vars': process.env.NODE_ENV === 'production' ? 2 : 1,
       'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 1,
       'no-console': process.env.NODE_ENV === 'production' ? 2 : 1,

package.json

@@ -4,24 +4,24 @@
   "private": true,
   "homepage": "/mlrun",
   "dependencies": {
+    "@dagrejs/dagre": "^1.1.5",
     "@monaco-editor/react": "^4.7.0",
     "@reduxjs/toolkit": "^1.9.5",
-    "axios": "1.8.2",
+    "axios": "1.12.2",
     "bfj": "^7.0.2",
     "camelcase": "^6.3.0",
     "chart.js": "^4.4.2",
     "classnames": "^2.5.1",
     "concurrently": "^6.4.2",
     "cronstrue": "^2.49.0",
-    "dagre": "^0.8.5",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
     "file-saver": "^2.0.5",
     "final-form": "^4.20.10",
     "final-form-arrays": "^3.1.0",
     "fs-extra": "^10.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "iguazio.dashboard-react-controls": "3.0.3",
+    "iguazio.dashboard-react-controls": "3.2.2",
     "is-wsl": "^1.1.0",
     "js-base64": "^2.6.4",
     "js-yaml": "^4.1.0",
@@ -32,14 +32,14 @@
     "prompts": "^2.4.2",
     "prop-types": "^15.8.1",
     "qs": "^6.9.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.4",
     "react-modal-promise": "^1.0.2",
     "react-redux": "^7.2.9",
     "react-refresh": "^0.11.0",
-    "react-router-dom": "6.22.3",
+    "react-router-dom": "7.9.4",
     "react-text-mask": "^5.4.3",
     "react-transition-group": "^4.4.5",
     "reactflow": "^11.11.1",
@@ -57,102 +57,99 @@
     "start": "vite",
     "build": "vite build",
     "lint": "eslint .",
+    "stylelint": "stylelint '**/*.{css,scss}'",
     "preview": "vite preview",
     "preinstall": "npx force-resolutions",
     "test:coverage": "npm run test -- --coverage --watchAll=false",
     "docker": "docker build -t ${MLRUN_DOCKER_REGISTRY}${MLRUN_DOCKER_REPO:-mlrun}/mlrun-ui:${MLRUN_DOCKER_TAG:-latest} --build-arg COMMIT_HASH=\"`git rev-parse --short HEAD`\" --build-arg DATE=\"`date -u`\" -f Dockerfile .",
     "generate-rn": "./generate-release-notes.js ${MLRUN_OLD_VERSION} ${MLRUN_VERSION} ${MLRUN_RELEASE_BRANCH} ${MLRUN_RELEASE_TYPE}",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "build-storybook": "build-storybook",
     "mock-server": "node scripts/mockServer.js",
     "mock-server:dev": "nodemon --watch tests/mockServer scripts/mockServer.js",
+    "test": "vitest",
     "test:ui": "node scripts/testui.js",
+    "test:watch": "vitest --watch",
     "report": "node tests/report.js",
     "test:regression": "npm run test:ui && npm run report",
     "start:regression": "concurrently \"npm:mock-server\" \"npm:start\" \"npm:test:regression\"",
-    "ui-steps": "export BABEL_ENV=test; export NODE_ENV=test; npx -p @babel/core -p @babel/node babel-node --presets @babel/preset-env scripts/collectUITestsSteps.js",
+    "ui-steps": "cross-env BABEL_ENV=test; cross-env NODE_ENV=test; npx -p @babel/core -p @babel/node babel-node --presets @babel/preset-env scripts/collectUITestsSteps.js",
     "nli": "npm link iguazio.dashboard-react-controls",
     "nui": "npm unlink iguazio.dashboard-react-controls"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/node": "^7.14.9",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
+    "@babel/core": "^7.28.4",
+    "@babel/node": "^7.28.0",
+    "@babel/plugin-transform-logical-assignment-operators": "^7.27.1",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/register": "^7.13.14",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/register": "^7.28.3",
     "@cucumber/cucumber": "^10.3.1",
     "@d4c/numjs": "^0.17.34",
-    "@eslint/js": "^9.19.0",
-    "@storybook/addon-actions": "^8.0.1",
-    "@storybook/addon-essentials": "^8.0.1",
-    "@storybook/addon-links": "^8.0.1",
+    "@eslint/js": "^9.37.0",
+    "@storybook/addon-docs": "9.1.10",
+    "@storybook/addon-links": "^9.1.10",
+    "@storybook/builder-vite": "^9.1.10",
     "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react-vite": "^9.1.10",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.0",
     "@storybook/react": "^8.0.1",
-    "@testing-library/react": "^11.0.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/user-event": "^14.6.1",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitejs/plugin-react-swc": "^3.8.0",
-    "acorn": "^7.4.1",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "^8.2.3",
+    "acorn": "^8.15.0",
+    "babel-jest": "^30.2.0",
     "babel-node": "0.0.1-security",
-    "babel-plugin-inline-react-svg": "^2.0.1",
-    "babel-plugin-jest-hoist": "^26.2.0",
-    "babel-plugin-named-asset-import": "^0.3.8",
-    "babel-plugin-prismjs": "^2.1.0",
-    "babel-plugin-react-remove-properties": "^0.3.0",
-    "babel-preset-react-app": "^10.0.1",
+    "babel-plugin-inline-react-svg": "^2.0.2",
+    "babel-plugin-jest-hoist": "^30.0.1",
     "babel-runtime": "^6.26.0",
-    "body-parser": "^1.19.0",
+    "body-parser": "^2.2.0",
     "chai": "^4.3.4",
-    "chromedriver": "^136.0.0",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.5.1",
-    "cucumber-html-reporter": "^5.3.0",
-    "eslint": "^9.13.0",
-    "eslint-config-prettier": "^9.1.0",
+    "chromedriver": "^142.0.4",
+    "cross-env": "^10.0.0",
+    "cucumber-html-reporter": "^7.2.0",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "express": "^4.17.1",
-    "file-loader": "^6.2.0",
-    "geckodriver": "^3.0.1",
-    "globals": "^15.14.0",
-    "http-proxy-middleware": "^2.0.3",
-    "mime-types": "^2.1.35",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-refresh": "^0.4.23",
+    "eslint-plugin-storybook": "9.1.10",
+    "express": "^5.1.0",
+    "geckodriver": "^6.0.1",
+    "globals": "^16.4.0",
+    "jsdom": "^27.2.0",
+    "mime-types": "^3.0.1",
     "node": "^21.6.2",
-    "nodemon": "^3.1.2",
+    "nodemon": "^3.1.10",
     "pandas-js": "^0.2.4",
-    "postcss": "^8.4.36",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^9.5.2",
-    "postcss-safe-parser": "7.0.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.6.2",
     "randexp": "^0.5.3",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
-    "sass": "^1.72.0",
-    "sass-loader": "^12.3.2",
-    "selenium-webdriver": "^4.0.0-beta.2",
-    "source-map-loader": "^5.0.0",
-    "stylelint": "^13.3.3",
+    "sass": "^1.93.2",
+    "selenium-webdriver": "^4.35.0",
+    "stylelint": "^16.24.0",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-order": "^4.0.0",
-    "stylelint-scss": "^3.17.2",
+    "stylelint-config-standard": "^39.0.0",
+    "stylelint-config-standard-scss": "^16.0.0",
+    "stylelint-order": "^7.0.0",
+    "stylelint-scss": "^6.12.1",
     "url-loader": "4.1.1",
-    "vite": "^6.2.0",
+    "vite": "^6.3.6",
     "vite-plugin-commonjs": "^0.10.4",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-svgr": "^4.3.0"
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.10"
   },
   "babel": {
     "plugins": [
-      "@babel/plugin-proposal-logical-assignment-operators"
+      "@babel/plugin-transform-logical-assignment-operators"
     ],
     "presets": [
       [
@@ -161,6 +158,10 @@
           "useBuiltIns": "usage",
           "corejs": "^3.23.3"
         }
+      ],
+      [
+        "@babel/preset-react",
+        {}
       ]
     ]
   }