[FEAT] Update MLrun UI React 18 to 19

.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

@@ -16,7 +16,7 @@ export default [
       globals: {
         ...globals.browser,
         ...globals.jest,
-        ...globals.node,
+        ...globals.node
       },
       parserOptions: {
         ecmaFeatures: {

package.json

@@ -7,7 +7,7 @@
     "@dagrejs/dagre": "^1.1.5",
     "@monaco-editor/react": "^4.7.0",
     "@reduxjs/toolkit": "^1.9.5",
-    "axios": "1.12.0",
+    "axios": "1.12.2",
     "bfj": "^7.0.2",
     "camelcase": "^6.3.0",
     "chart.js": "^4.4.2",
@@ -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,12 +57,13 @@
     "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",
@@ -77,89 +78,78 @@
     "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/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
     "@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": "^142.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-import": "^2.32.0",
-    "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",
+    "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": "^2.1.35",
+    "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",
+    "sass": "^1.93.2",
     "selenium-webdriver": "^4.35.0",
-    "source-map-loader": "^5.0.0",
-    "stylelint": "^13.3.3",
+    "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": [
       [
@@ -168,6 +158,10 @@
           "useBuiltIns": "usage",
           "corejs": "^3.23.3"
         }
+      ],
+      [
+        "@babel/preset-react",
+        {}
       ]
     ]
   }

src/common/ChipInput/chipInput.scss

@@ -19,11 +19,11 @@
     left: 0;
     z-index: 5;
     width: 100%;
+    max-height: 200px;
+    overflow-y: auto;
     background-color: colors.$white;
     border: borders.$primaryBorder;
     border-radius: variables.$mainBorderRadius;
-    max-height: 200px;
-    overflow-y: auto;
 
     .suggestion-row {
       display: flex;

src/common/CodeBlock/Button.stories.js → src/common/CodeBlock/CodeBlock.stories.jsx

@@ -21,6 +21,8 @@ import React from 'react'
 
 import CodeBlock from './CodeBlock'
 
+import 'prismjs/components/prism-json'
+
 export default {
   title: 'Example/CodeBlock',
   component: CodeBlock

src/common/CodeBlock/codeBlock.scss

@@ -5,10 +5,10 @@
 .code-block {
   width: 100%;
   height: 200px;
+  padding: 18px 16px;
   overflow: auto;
   border: borders.$primaryBorder;
   border-radius: variables.$mainBorderRadius;
-  padding: 18px 16px;
 
   &__label {
     margin-bottom: 5px;

src/common/Combobox/combobox.scss

@@ -12,8 +12,8 @@
   border-radius: 4px;
 
   &_disabled {
-    cursor: not-allowed;
     border-color: colors.$spunPearl;
+    cursor: not-allowed;
   }
 
   &_invalid {
@@ -22,10 +22,10 @@
 
   &-list {
     min-width: 140px;
-    margin: 0;
-    list-style-type: none;
     max-height: 300px;
+    margin: 0;
     overflow: auto;
+    list-style-type: none;
 
     &__option {
       padding: 8px 15px;
@@ -90,8 +90,8 @@
       top: 100%;
       z-index: 5;
       display: none;
-      margin-top: 5px;
       max-width: 220px;
+      margin-top: 5px;
       background-color: colors.$white;
       box-shadow: shadows.$previewBoxShadow;
 
@@ -167,8 +167,8 @@
     }
 
     &:disabled {
-      background-color: transparent;
       color: colors.$spunPearl;
+      background-color: transparent;
     }
   }
 

src/common/DatePicker/DatePickerView.jsx

@@ -104,13 +104,10 @@ const DatePickerView = React.forwardRef(
       isInputInvalid && 'input_invalid'
     )
     const inputLabelClassNames = classnames('input__label', label && 'active-label')
+    const { datePickerRef, datePickerViewRef } = ref
 
     return (
-      <div
-        data-testid="date-picker-container"
-        className={datePickerClassNames}
-        ref={ref.datePickerRef}
-      >
+      <div data-testid="date-picker-container" className={datePickerClassNames} ref={datePickerRef}>
         <div
           data-testid="date-picker-input"
           className="date-picker__input-wrapper input-wrapper"
@@ -169,12 +166,12 @@ const DatePickerView = React.forwardRef(
             className="date-picker__pop-up-wrapper"
             headerIsHidden
             customPosition={{
-              element: ref.datePickerRef,
+              element: datePickerRef,
               position: 'bottom-right',
               autoHorizontalPosition: true
             }}
           >
-            <div ref={ref.datePickerViewRef} className="date-picker__pop-up">
+            <div ref={datePickerViewRef} className="date-picker__pop-up">
               {datePickerOptions.map(option => (
                 <SelectOption
                   item={option}
@@ -195,13 +192,13 @@ const DatePickerView = React.forwardRef(
             className="date-picker__pop-up-wrapper"
             headerIsHidden
             customPosition={{
-              element: ref.datePickerRef,
+              element: datePickerRef,
               position: 'bottom-right',
               autoVerticalPosition: true,
               autoHorizontalPosition: true
             }}
           >
-            <div ref={ref.datePickerViewRef} className="date-picker__pop-up date-picker">
+            <div ref={datePickerViewRef} className="date-picker__pop-up date-picker">
               <div className="date-picker__calendars">
                 {config.map(item => (
                   <div className={classnames('date-picker__calendar')} key={item.id}>