From 6844a1f19b7dd43051c5b79e0f90f41b4294e215 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Tue, 1 Oct 2024 06:57:40 -0400 Subject: [PATCH 01/11] Apply MUI theming to Registered Model List View (#432) adjust padding of label for consistency in focused state fix filter label text, add padding, remove unused imports update modal border radius, move css import Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> --- clients/ui/frontend/package-lock.json | 554 +++++++++++++++++- clients/ui/frontend/package.json | 5 + .../modelRegistry/ModelRegistryRoutes.tsx | 1 + .../ModelVersions/ModelVersionsTable.tsx | 2 +- .../RegisteredModelListView.tsx | 35 +- .../RegisteredModels/RegisteredModelTable.tsx | 2 +- clients/ui/frontend/src/index.html | 3 + clients/ui/frontend/src/index.tsx | 7 +- clients/ui/frontend/src/style/MUI-theme.scss | 441 ++++++++++++++ 9 files changed, 1003 insertions(+), 47 deletions(-) create mode 100644 clients/ui/frontend/src/style/MUI-theme.scss diff --git a/clients/ui/frontend/package-lock.json b/clients/ui/frontend/package-lock.json index 6f7bfc210..76400b83c 100644 --- a/clients/ui/frontend/package-lock.json +++ b/clients/ui/frontend/package-lock.json @@ -9,6 +9,8 @@ "version": "0.0.1", "license": "Apache-2.0", "dependencies": { + "@emotion/react": "^11.13.0", + "@emotion/styled": "^11.13.0", "@patternfly/react-core": "6.0.0-prerelease.14", "@patternfly/react-icons": "6.0.0-alpha.37", "@patternfly/react-styles": "6.0.0-alpha.35", @@ -29,6 +31,9 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.5", "@cypress/code-coverage": "^3.12.46", + "@mui/icons-material": "^6.1.1", + "@mui/material": "^6.1.1", + "@mui/types": "^7.2.17", "@testing-library/cypress": "^10.0.1", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.5.0", @@ -128,7 +133,6 @@ "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz", "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==", - "dev": true, "license": "MIT", "dependencies": { "@babel/highlight": "^7.24.7", @@ -183,7 +187,6 @@ "version": "7.25.6", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.6.tgz", "integrity": "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.25.6", @@ -314,7 +317,6 @@ "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz", "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==", - "dev": true, "license": "MIT", "dependencies": { "@babel/traverse": "^7.24.7", @@ -434,7 +436,6 @@ "version": "7.24.8", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz", "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -444,7 +445,6 @@ "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz", "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -493,7 +493,6 @@ "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz", "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-validator-identifier": "^7.24.7", @@ -509,7 +508,6 @@ "version": "7.25.6", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz", "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.25.6" @@ -2004,7 +2002,6 @@ "version": "7.25.6", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz", "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==", - "dev": true, "license": "MIT", "dependencies": { "regenerator-runtime": "^0.14.0" @@ -2017,7 +2014,6 @@ "version": "7.25.0", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz", "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.24.7", @@ -2032,7 +2028,6 @@ "version": "7.25.6", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.6.tgz", "integrity": "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.24.7", @@ -2051,7 +2046,6 @@ "version": "7.25.6", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz", "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.24.8", @@ -2260,6 +2254,163 @@ "node": ">=10.0.0" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz", + "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/serialize": "^1.2.0", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/cache": { + "version": "11.13.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz", + "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "dependencies": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz", + "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==", + "dependencies": { + "@emotion/memoize": "^0.9.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==" + }, + "node_modules/@emotion/react": { + "version": "11.13.3", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz", + "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.12.0", + "@emotion/cache": "^11.13.0", + "@emotion/serialize": "^1.3.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz", + "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==", + "dependencies": { + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/unitless": "^0.10.0", + "@emotion/utils": "^1.4.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==" + }, + "node_modules/@emotion/styled": { + "version": "11.13.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz", + "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.12.0", + "@emotion/is-prop-valid": "^1.3.0", + "@emotion/serialize": "^1.3.0", + "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0", + "@emotion/utils": "^1.4.0" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", + "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz", + "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz", + "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -3359,7 +3510,6 @@ "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.2.1", @@ -3374,7 +3524,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -3384,7 +3533,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -3405,14 +3553,12 @@ "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", - "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -3483,6 +3629,247 @@ "dev": true, "license": "MIT" }, + "node_modules/@mui/core-downloads-tracker": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.1.tgz", + "integrity": "sha512-VdQC1tPIIcZAnf62L2M1eQif0x2vlKg3YK4kGYbtijSH4niEgI21GnstykW1vQIs+Bc6L+Hua2GATYVjilJ22A==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mui/icons-material": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.1.tgz", + "integrity": "sha512-sy/YKwcLPW8VcacNP2uWMYR9xyWuwO9NN9FXuGEU90bRshBXj8pdKk+joe3TCW7oviVS3zXLHlc94wQ0jNsQRQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.25.6" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^6.1.1", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.1.tgz", + "integrity": "sha512-b+eULldTqtqTCbN++2BtBWCir/1LwEYw+2mIlOt2GiEUh1EBBw4/wIukGKKNt3xrCZqRA80yLLkV6tF61Lq3cA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/core-downloads-tracker": "^6.1.1", + "@mui/system": "^6.1.1", + "@mui/types": "^7.2.17", + "@mui/utils": "^6.1.1", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.11", + "clsx": "^2.1.1", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^18.3.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@mui/material-pigment-css": "^6.1.1", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@mui/material-pigment-css": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "dev": true + }, + "node_modules/@mui/private-theming": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.1.tgz", + "integrity": "sha512-JlrjIdhyZUtewtdAuUsvi3ZnO0YS49IW4Mfz19ZWTlQ0sDGga6LNPVwHClWr2/zJK2we2BQx9/i8M32rgKuzrg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/utils": "^6.1.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.1.tgz", + "integrity": "sha512-HJyIoMpFb11fnHuRtUILOXgq6vj4LhIlE8maG4SwP/W+E5sa7HFexhnB3vOMT7bKys4UKNxhobC8jwWxYilGsA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.25.6", + "@emotion/cache": "^11.13.1", + "@emotion/sheet": "^1.4.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.1.tgz", + "integrity": "sha512-PaYsCz2tUOcpu3T0okDEsSuP/yCDIj9JZ4Tox1JovRSKIjltHpXPsXZSGr3RiWdtM1MTQMFMCZzu0+CKbyy+Kw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/private-theming": "^6.1.1", + "@mui/styled-engine": "^6.1.1", + "@mui/types": "^7.2.17", + "@mui/utils": "^6.1.1", + "clsx": "^2.1.1", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.2.17", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.17.tgz", + "integrity": "sha512-oyumoJgB6jDV8JFzRqjBo2daUuHpzDjoO/e3IrRhhHo/FxJlaVhET6mcNrKHUq2E+R+q3ql0qAtvQ4rfWHhAeQ==", + "dev": true, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.1.tgz", + "integrity": "sha512-HlRrgdJSPbYDXPpoVMWZV8AE7WcFtAk13rWNWAEVWKSanzBBkymjz3km+Th/Srowsh4pf1fTSP1B0L116wQBYw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/types": "^7.2.17", + "@types/prop-types": "^15.7.12", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "dev": true + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -3701,6 +4088,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@remix-run/router": { "version": "1.19.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", @@ -4390,6 +4787,11 @@ "@types/node": "*" } }, + "node_modules/@types/parse-json": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" + }, "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", @@ -4445,6 +4847,15 @@ "@types/react-router": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.11", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", + "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/retry": { "version": "0.12.2", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz", @@ -5800,6 +6211,20 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, "node_modules/babel-plugin-polyfill-corejs2": { "version": "0.4.11", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz", @@ -6408,7 +6833,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "devOptional": true, "license": "MIT", "engines": { "node": ">=6" @@ -6877,6 +7301,15 @@ "node": ">=6" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -7206,6 +7639,21 @@ "dev": true, "license": "MIT" }, + "node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/create-jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz", @@ -7635,7 +8083,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, "license": "MIT" }, "node_modules/cypress": { @@ -8014,7 +8461,6 @@ "version": "4.3.7", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", - "devOptional": true, "license": "MIT", "dependencies": { "ms": "^2.1.3" @@ -8347,6 +8793,16 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -10254,6 +10710,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -10732,7 +11193,6 @@ "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -10941,6 +11401,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", @@ -11422,7 +11895,6 @@ "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", "license": "MIT", - "optional": true, "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" @@ -14739,7 +15211,6 @@ "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true, "license": "MIT", "bin": { "jsesc": "bin/jsesc" @@ -14765,7 +15236,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true, "license": "MIT" }, "node_modules/json-schema": { @@ -15008,7 +15478,6 @@ "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", - "dev": true, "license": "MIT" }, "node_modules/listr2": { @@ -16284,7 +16753,6 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "devOptional": true, "license": "MIT" }, "node_modules/multicast-dns": { @@ -17310,7 +17778,6 @@ "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", "license": "MIT", - "optional": true, "dependencies": { "callsites": "^3.0.0" }, @@ -17322,7 +17789,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.0.0", @@ -17452,7 +17918,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -17490,7 +17955,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", - "dev": true, "license": "ISC" }, "node_modules/picomatch": { @@ -18676,6 +19140,22 @@ "react-dom": ">=16.8" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -18811,7 +19291,6 @@ "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", - "dev": true, "license": "MIT" }, "node_modules/regenerator-transform": { @@ -19045,7 +19524,6 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", "license": "MIT", - "optional": true, "engines": { "node": ">=4" } @@ -20550,6 +21028,11 @@ "postcss": "^8.4.31" } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "node_modules/super-regex": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/super-regex/-/super-regex-1.0.0.tgz", @@ -21014,7 +21497,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -22918,6 +23400,14 @@ "dev": true, "license": "ISC" }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "engines": { + "node": ">= 6" + } + }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/clients/ui/frontend/package.json b/clients/ui/frontend/package.json index 56b47de54..c5df19576 100644 --- a/clients/ui/frontend/package.json +++ b/clients/ui/frontend/package.json @@ -35,6 +35,9 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.5", "@cypress/code-coverage": "^3.12.46", + "@mui/material": "^6.1.1", + "@mui/icons-material": "^6.1.1", + "@mui/types": "^7.2.17", "@testing-library/cypress": "^10.0.1", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.5.0", @@ -90,6 +93,8 @@ "webpack-merge": "^6.0.1" }, "dependencies": { + "@emotion/react": "^11.13.0", + "@emotion/styled": "^11.13.0", "@patternfly/react-core": "6.0.0-prerelease.14", "@patternfly/react-icons": "6.0.0-alpha.37", "@patternfly/react-styles": "6.0.0-alpha.35", diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryRoutes.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryRoutes.tsx index c37d93a2c..48f02ada4 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryRoutes.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryRoutes.tsx @@ -14,6 +14,7 @@ import ArchiveModelVersionDetails from './screens/ModelVersionsArchive/ArchiveMo import RegisteredModelsArchiveDetails from './screens/RegisteredModelsArchive/RegisteredModelArchiveDetails'; import RegisterModel from './screens/RegisterModel/RegisterModel'; import RegisterVersion from './screens/RegisterModel/RegisterVersion'; +import '~/style/MUI-theme.scss'; const ModelRegistryRoutes: React.FC = () => ( diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx index 781a0b08d..0911e0bdc 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx @@ -25,7 +25,7 @@ const ModelVersionsTable: React.FC = ({ columns={mvColumns} toolbarContent={toolbarContent} defaultSortColumn={3} - enablePagination + enablePagination="compact" emptyTableView={} rowRenderer={(mv) => ( = ({ icon={} /> - - { - setSearch(searchValue); - }} - onClear={() => setSearch('')} - style={{ minWidth: '200px' }} - data-testid="registered-model-table-search" - /> + +
+ { + setSearch(searchValue); + }} + style={{ minWidth: '200px' }} + data-testid="registered-model-table-search" + /> + +
); diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTable.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTable.tsx index c46ac1b4e..b0dc99eed 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTable.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTable.tsx @@ -23,7 +23,7 @@ const RegisteredModelTable: React.FC = ({ columns={rmColumns} toolbarContent={toolbarContent} defaultSortColumn={2} - enablePagination + enablePagination='compact' emptyTableView={} rowRenderer={(rm) => ( diff --git a/clients/ui/frontend/src/index.html b/clients/ui/frontend/src/index.html index 5abb9a45a..8c5c8cb1e 100644 --- a/clients/ui/frontend/src/index.html +++ b/clients/ui/frontend/src/index.html @@ -2,6 +2,9 @@ + + + Model Registry diff --git a/clients/ui/frontend/src/index.tsx b/clients/ui/frontend/src/index.tsx index eaeb3b8e0..aa8b69967 100644 --- a/clients/ui/frontend/src/index.tsx +++ b/clients/ui/frontend/src/index.tsx @@ -2,14 +2,19 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter as Router } from 'react-router-dom'; import App from './app/App'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import { BrowserStorageContextProvider } from './components/browserStorage/BrowserStorageContext'; +const theme = createTheme({ cssVariables: true }); const root = ReactDOM.createRoot(document.getElementById('root')!); + root.render( - + + + , diff --git a/clients/ui/frontend/src/style/MUI-theme.scss b/clients/ui/frontend/src/style/MUI-theme.scss new file mode 100644 index 000000000..c8bf4269a --- /dev/null +++ b/clients/ui/frontend/src/style/MUI-theme.scss @@ -0,0 +1,441 @@ +:root { + + // Alert + --mui-alert--BoxShadow: none; + --mui-alert-warning-text: #663c00; + --mui-alert-warning-font-weight: 400; + --mui-alert--PaddingBlockStart: 6px; + --mui-alert--PaddingBlockEnd: 6px; + --mui-alert--PaddingInlineStart: 16px; + --mui-alert--PaddingInlineEnd: 16px; + --mui-alert__icon--MarginInlineEnd: 12px; + --mui-alert__icon--MarginBlockStart: 7px; + --mui-alert__icon--MarginBlockStart: 7px; + --mui-alert__icon--MarginBlockEnd: 7px; + --mui-alert__icon--FontSize: 22px; + + // Button + --mui-button-font-weight: 500; + --mui-button--PaddingBlockStart: 6px; + --mui-button--PaddingBlockEnd: 6px; + --mui-button--PaddingInlineStart: 16px; + --mui-button--PaddingInlineEnd: 16px; + --mui-button--LineHeight: 1.75; + + // Menu item + --mui-menu__item--PaddingBlockStart: 6px; + --mui-menu__item--PaddingBlockEnd: 6px; + --mui-menu__item--PaddingInlineStart: 16px; + --mui-menu__item--PaddingInlineEnd: 16px; + --mui-menu__item--FontSize: 1rem; + + // Menu toggle + --mui-menu-toggle__toggle-icon--MinHeight: auto; + --mui-menu-toggle__controls--MinWidth: 0; + --mui-menu-toggle--expanded--BackgroundColor: none; + --mui-menu-toggle--expanded--BorderColor: none; + --mui-menu-toggle--LineHeight: 1.75; + --mui-menu-toggle--PaddingBlockStart: 6px; + --mui-menu-toggle--PaddingBlockEnd: 6px; + --mui-menu-toggle--PaddingInlineStart: 16px; + --mui-menu-toggle--PaddingInlineEnd: 16px; + --mui-menu-toggle--ColumnGap: 0; + --mui-menu-toggle--expanded--Color: black; + --mui-menu-toggle--hover--BorderColor: none; + --mui-menu-toggle--BorderColor: none; + --mui-menu-toggle--PaddingInlineStart: 10px; + --mui-menu-toggle--PaddingInlineEnd: 10px; + + // Table + --mui-table__button--BackgroundColor: none; + --mui-table__button--hover--BackgroundColor: none; + --mui-table__button--Color: var(--pf-v6-c-table--cell--Color); + --mui-table__button--PaddingBlockStart: 0; + --mui-table__button--PaddingBlockEnd: 0; + --mui-table__button--PaddingInlineStart: 0; + --mui-table__button--PaddingInlineEnd: 0; + --mui-table--cell--PaddingInlineStart: 16px; + --mui-table--cell--PaddingInlineEnd: 16px; + --mui-table--cell--PaddingBlockStart: 16px; + --mui-table--cell--PaddingBlockEnd: 16px; + --mui-table--cell--first-last-child--PaddingInline: 0px; + --mui-table__thead--cell--FontSize: 14px; + --mui-table__sort-indicator--MarginInlineStart: 4px; + + letter-spacing: 0.01071em; + + // Tabs + --mui-tabs__link--hover--BackgroundColor: transparent; + --mui-tabs__item--PaddingBlockStart: 0; + --mui-tabs__item--PaddingBlockEnd: 0; + --mui-tabs__item--PaddingInlineStart: 0; + --mui-tabs__item--PaddingInlineEnd: 0; + --mui-tabs__link--PaddingBlockStart: 12px; + --mui-tabs__link--PaddingBlockEnd: 12px; + --mui-tabs__link--PaddingInlineStart: 16px; + --mui-tabs__link--PaddingInlineEnd: 16px; + --mui-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default); + --mui-tabs__item--m-current__link--after--BorderWidth: 2px; + --mui-tabs__link--FontSize: 0.875rem; + + + --mui-text-transform: uppercase; + + + --mui-spacing-4px: calc(0.5 * var(--mui-spacing)); + --mui-spacing-8px: calc(0.5 * var(--mui-spacing)); + --mui-spacing-16px: calc(2 * var(--mui-spacing)); + + + --pf-t--global--border--width--box--status--default: 1px; + --pf-t--global--border--radius--pill: var(--mui-shape-borderRadius); + --pf-t--global--border--radius--medium: var(--mui-shape-borderRadius); + --pf-t--global--text--color--brand--default: var(--mui-palette-primary-main); + + --pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main); + --pf-t--global--text--color--inverse: var(--mui-palette-common-white); + + --pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif; + --pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif; + --pf-t--global--font--family--300: Roboto, Courier, monospace; + +} + +.pf-v6-c-alert { + --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--status--warning--default); + --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd); + --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-font-weight); + --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart); + --pf-v6-c-alert__icon--FontSize: var(--mui-alert__icon--FontSize); + --pf-v6-c-alert--BoxShadow: var(--mui-alert--BoxShadow); + --pf-v6-c-alert--PaddingBlockStart: var(--mui-alert--PaddingBlockStart); + --pf-v6-c-alert--PaddingBlockEnd: var(--mui-alert--PaddingBlockEnd); + --pf-v6-c-alert--PaddingInlineStart: var(--mui-alert--PaddingInlineStart); + --pf-v6-c-alert--PaddingInlineEnd: var(--mui-alert--PaddingInlineEnd); +} + +.pf-v6-c-alert__title { + padding-block: var(--mui-spacing); +} + +.pf-v6-c-alert__icon { + margin-block-end: var(--mui-alert__icon--MarginBlockEnd); +} + +.pf-v6-c-button { + --pf-v6-c-button--FontWeight: var(--mui-button-font-weight); + --pf-v6-c-button--PaddingBlockStart: var(--mui-button--PaddingBlockStart); + --pf-v6-c-button--PaddingBlockEnd: var(--mui-button--PaddingBlockEnd); + --pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart); + --pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd); + --pf-v6-c-button--LineHeight: var(--mui-button--LineHeight); + text-transform: var(--mui-text-transform); + letter-spacing: 0.02857em; +} + +.pf-v6-c-form__group { + position: relative; +} + + .form-fieldset-wrapper { + position: relative; + width: 100%; +} + + .form-fieldset-wrapper:focus-within .form-fieldset { + border-color: var(--mui-palette-primary-main); + border-width: 2px; + padding: 7px 7px +} + + .form-fieldset { + text-align: left; + position: absolute; + bottom: 0; + right: 0; + top: -5px; + left: 0; + margin: 0; + padding: 0 8px; + pointer-events: none; + border-radius: inherit; + border-style: solid; + border-width: 1px; + overflow: hidden; + min-width: 0%; + border-color: rgba(0, 0, 0, 0.23); + border-radius: 4px; +} + + .form-fieldset-legend { + float: unset; + width: auto; + overflow: hidden; + display: block; + padding: 0 5px 0 5px; + // height: 11px; + font-size: 0.75em; + // visibility: hidden; + max-width: 0.01px; + white-space: nowrap; + max-width: 100%; +} + +.form-fieldset-wrapper:focus-within { + color: var(--mui-palette-primary-main); +} + +.pf-v6-c-form-control>:is(input,select,textarea):focus { + --pf-v6-c-form-control--OutlineOffset: none; + outline: none; +} + + .form-fieldset-wrapper .pf-v6-c-form-control { + &::before, + &::after { + content: revert; + } +} + + +.pf-v6-c-menu { + --pf-v6-c-menu--BoxShadow: var(--mui-shadows-8); + --pf-v6-c-menu--BorderRadius: var(--mui-shape-borderRadius); + --pf-v6-c-menu--PaddingBlockStart: var(--mui-spacing); + --pf-v6-c-menu--PaddingBlockEnd: var(--mui-spacing); + --pf-v6-c-menu--PaddingInlineStart: var(--mui-spacing); + --pf-v6-c-menu--PaddingInlineEnd: var(--mui-spacing); + --pf-v6-c-menu__item--PaddingBlockStart: var(--mui-menu__item--PaddingBlockStart); + --pf-v6-c-menu__item--PaddingBlockEnd: var(--mui-menu__item--PaddingBlockEnd); + --pf-v6-c-menu__item--PaddingInlineStart: var(--mui-menu__item--PaddingInlineStart); + --pf-v6-c-menu__item--PaddingInlineEnd: var(--mui-menu__item--PaddingInlineEnd); + --pf-v6-c-menu__item--FontSize: var(--mui-menu__item--FontSize); +} + +.pf-v6-c-menu-toggle { + --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight); + --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth); + --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-menu-toggle--expanded--BackgroundColor); + --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor); + --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart); + --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd); + --pf-v6-c-menu-toggle--ColumnGap: var(--mui-menu-toggle--ColumnGap); + --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black); + --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor); + --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor); + --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); + --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--default); + --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--mui-palette-primary-dark); + + text-transform: var(--mui-text-transform); + font-weight: var(--mui-button-font-weight); + letter-spacing: 0.02857em; +} + +.pf-v6-c-menu-toggle__button { + text-transform: var(--mui-text-transform); + font-weight: var(--mui-button-font-weight); + letter-spacing: 0.02857em; + align-self: stretch; +} + +.pf-v6-c-menu-toggle.pf-m-plain { + --pf-v6-c-menu-toggle--BorderRadius: 50%; +} + +.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button { + --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked); +} + +.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button .pf-v6-c-menu-toggle__button[aria-expanded="true"] { + --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--mui-palette-primary-dark); +} + +.pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) { + --pf-v6-c-menu-toggle--PaddingBlockStart: var(--mui-spacing-4); + --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--mui-spacing-4); + --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart); + --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd); +} + +.pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon { + width: 1em; + height: 1em; + font-size: 20px; +} + +.pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon .pf-v6-svg { + vertical-align: revert; +} + +.pf-v6-c-menu-toggle__toggle-icon { + --pf-v6-c-menu-toggle__toggle-icon--expanded--Color: var(--pf-t--global--icon--color--300); + font-size: 20px; +} + +.pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon { + margin-right: -4px; + margin-left: var(--mui-spacing); +} + +.pf-v6-c-menu-toggle__icon { + display: block; + padding-right: var(--mui-spacing-4px); +} + +.pf-v6-c-table { + --pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary); + --pf-v6-c-table__sort-indicator--Color: var(--mui-palette-text-secondary); + --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary); + --pf-v6-c-table__sort__button--hover__text--Color: var(--mui-palette-text-secondary); + --pf-v6-c-table--cell--Color: var(--mui-palette-text-primary); + --pf-v6-c-table__button--hover--BackgroundColor: var(--mui-table__button--BackgroundColor); + --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color); + --pf-v6-c-table__button--PaddingBlockStart: var(--mui-table__button--PaddingBlockStart); + --pf-v6-c-table__button--PaddingBlockEnd: var(--mui-table__button--PaddingBlockEnd); + --pf-v6-c-table__button--PaddingInlineStart: var(--mui-table__button--PaddingInlineStart); + --pf-v6-c-table__button--PaddingInlineEnd: var(--mui-table__button--PaddingInlineEnd); + --pf-v6-c-table--cell--PaddingInlineStart: var(--mui-table--cell--PaddingInlineStart); + --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd); + --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart); + --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd); + --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline); + --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight); + --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize); + --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300); + --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart); + + letter-spacing: 0.01071em; +} + +.pf-v6-c-table .pf-m-align-right { + text-align: right; +} + +.pf-v6-c-table__sort-indicator { + font-size: 18px; + opacity: 0; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transform-origin: center center; + align-self: start; +} + +/* CSS workaround to use MUI icon for sort icon */ +.pf-v6-c-table__sort-indicator::before { + display: block; + width: 1em; + height: 1em; + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' data-testid='ArrowDownwardIcon'%3E%3Cpath d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'%3E%3C/path%3E%3C/svg%3E"); +} + +/* Hide PF's default icon for the CSS workaround to use MUI's icon */ +.pf-v6-c-table__sort-indicator svg { + display: none; +} + +.pf-v6-c-table__button:is(:hover, :focus) .pf-v6-c-table__sort-indicator, +.pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__sort-indicator { + opacity: 0.6; +} + +.pf-v6-c-table__sort[aria-sort="ascending"] .pf-v6-c-table__sort-indicator { + transform: rotate(180deg); + align-self: end; +} + +.pf-v6-c-table__sort[aria-sort="descending"] .pf-v6-c-table__sort-indicator { + align-self: start; +} + +.pf-v6-c-tab-content { + --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg); +} + +.pf-v6-c-tabs { + --pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor); + --pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart); + --pf-v6-c-tabs__item--PaddingBlockEnd: var(--mui-tabs__item--PaddingBlockEnd); + --pf-v6-c-tabs__item--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart); + --pf-v6-c-tabs__item--PaddingInlineEnd: var(--mui-tabs__item--PaddingInlineEnd); + --pf-v6-c-tabs__link--PaddingBlockStart: var(--mui-tabs__link--PaddingBlockStart); + --pf-v6-c-tabs__link--PaddingBlockEnd: var(--mui-tabs__link--PaddingBlockEnd); + --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart); + --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd); + --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default); + --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--mui-tabs__item--m-current__link--after--BorderWidth); + --pf-v6-c-tabs__link--FontSize: 0.875rem; +} + +.pf-v6-c-tabs__link { + text-transform: var(--mui-text-transform); + font-weight: var(--mui-button-font-weight); + line-height: var(--mui-button-line-height); + letter-spacing: 0.02857em; +} + +.pf-v6-c-tab-content { + --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg); +} + +.pf-v6-c-label { + --pf-v6-c-label--BorderRadius: 16px; + --pf-v6-c-label--FontSize: 0.8125rem; + --pf-v6-c-label--PaddingInlineStart: 0; + --pf-v6-c-label--PaddingInlineEnd: 0; + height: 24px; +} + +.pf-v6-c-label__text { + padding-right: var(--mui-spacing-8px); + padding-left: var(--mui-spacing-8px); + color: var(--pf-t--global--text--color--inverse); +} + +.pf-v6-c-label-group.pf-m-category + { + --pf-v6-c-label-group--m-category--BorderWidth: 0px; + --pf-v6-c-label-group--m-category--BorderRadius: var(--mui-shape-borderRadius); + box-shadow: var(--mui-shadows-1); + } + +.pf-v6-c-label.pf-m-outline { + --pf-v6-c-label--BorderColor: none; + --pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200); + padding: 4px; +} + +.pf-v6-c-label.pf-m-outline .pf-v6-c-label__text { + color: var(--mui-palette-common-black); +} + +.pf-v6-c-modal-box { + --pf-v6-c-modal-box--BorderRadius: var(--mui-shape-borderRadius); +} + +.pf-v6-c-pagination { + --pf-v6-c-pagination__total-items--Display: block; +} + +.pf-v6-c-pagination__total-items b { + font-weight: normal; +} + +.pf-v6-c-pagination__page-menu { + order: -1; +} + +.pf-v6-c-pagination__page-menu .pf-v6-c-menu-toggle { + --pf-v6-c-menu-toggle--expanded--BackgroundColor: none; + --pf-v6-c-menu-toggle--hover--BackgroundColor: none; + text-transform: none; +} + +.pf-v6-c-pagination__page-menu::before { + content: "Rows per page:"; +} \ No newline at end of file From c8ce66c3c95f61efdf52ac43877953fa6a16ee2e Mon Sep 17 00:00:00 2001 From: Eder Ignatowicz Date: Tue, 1 Oct 2024 07:46:39 -0400 Subject: [PATCH 02/11] version bump for eslint-config-prettier (#430) Signed-off-by: Eder Ignatowicz --- clients/ui/frontend/package-lock.json | 8 ++++---- clients/ui/frontend/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/clients/ui/frontend/package-lock.json b/clients/ui/frontend/package-lock.json index 76400b83c..bafbf823e 100644 --- a/clients/ui/frontend/package-lock.json +++ b/clients/ui/frontend/package-lock.json @@ -95,7 +95,7 @@ "@typescript-eslint/eslint-plugin": "^8.5.0", "@typescript-eslint/parser": "^8.5.0", "eslint": "^8.57.0", - "eslint-config-prettier": "^8.6.0", + "eslint-config-prettier": "^9.1.0", "eslint-import-resolver-node": "^0.3.7", "eslint-import-resolver-typescript": "^3.5.3", "eslint-plugin-cypress": "^3.3.0", @@ -9448,9 +9448,9 @@ } }, "node_modules/eslint-config-prettier": { - "version": "8.10.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz", - "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", + "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", "license": "MIT", "optional": true, "bin": { diff --git a/clients/ui/frontend/package.json b/clients/ui/frontend/package.json index c5df19576..ecc156123 100644 --- a/clients/ui/frontend/package.json +++ b/clients/ui/frontend/package.json @@ -114,7 +114,7 @@ "@typescript-eslint/eslint-plugin": "^8.5.0", "@typescript-eslint/parser": "^8.5.0", "eslint": "^8.57.0", - "eslint-config-prettier": "^8.6.0", + "eslint-config-prettier": "^9.1.0", "eslint-import-resolver-node": "^0.3.7", "eslint-import-resolver-typescript": "^3.5.3", "eslint-plugin-cypress": "^3.3.0", From 82ed7a96ddb057f77131dc1988f9c67ba7c015ca Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 1 Oct 2024 11:47:40 +0000 Subject: [PATCH 03/11] build(deps): bump github.com/kubeflow/model-registry from 0.2.6-alpha to 0.2.7-alpha in /clients/ui/bff (#439) Bumps [github.com/kubeflow/model-registry](https://github.com/kubeflow/model-registry) from 0.2.6-alpha to 0.2.7-alpha. - [Release notes](https://github.com/kubeflow/model-registry/releases) - [Commits](https://github.com/kubeflow/model-registry/compare/v0.2.6-alpha...v0.2.7-alpha) --- updated-dependencies: - dependency-name: github.com/kubeflow/model-registry dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- clients/ui/bff/go.mod | 2 +- clients/ui/bff/go.sum | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/clients/ui/bff/go.mod b/clients/ui/bff/go.mod index 2620f452e..d3d4f66cb 100644 --- a/clients/ui/bff/go.mod +++ b/clients/ui/bff/go.mod @@ -5,7 +5,7 @@ go 1.22.2 require ( github.com/brianvoe/gofakeit/v7 v7.0.4 github.com/julienschmidt/httprouter v1.3.0 - github.com/kubeflow/model-registry v0.2.6-alpha + github.com/kubeflow/model-registry v0.2.7-alpha github.com/stretchr/testify v1.9.0 k8s.io/api v0.31.1 k8s.io/apimachinery v0.31.1 diff --git a/clients/ui/bff/go.sum b/clients/ui/bff/go.sum index ee1752dd5..fdbd50dfd 100644 --- a/clients/ui/bff/go.sum +++ b/clients/ui/bff/go.sum @@ -53,8 +53,8 @@ github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ= github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI= github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY= github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE= -github.com/kubeflow/model-registry v0.2.6-alpha h1:5+HXFeiHTRxYJhfCuovO/icD6xtcTFxHJRzMkDgIyfw= -github.com/kubeflow/model-registry v0.2.6-alpha/go.mod h1:exMa9sONJSHHLvK8kcPfh+v1+7jvTY9z8e3TmaKjZXU= +github.com/kubeflow/model-registry v0.2.7-alpha h1:5F5eb6ZsXsC6g1NAkYB9l0AYqlKZo+NOKlzJqFy4ROI= +github.com/kubeflow/model-registry v0.2.7-alpha/go.mod h1:exMa9sONJSHHLvK8kcPfh+v1+7jvTY9z8e3TmaKjZXU= github.com/mailru/easyjson v0.7.7 h1:UGYAvKxe3sBsEDzO8ZeWOSlIQfWFlxbzLZe7hwFURr0= github.com/mailru/easyjson v0.7.7/go.mod h1:xzfreul335JAWq5oZzymOObrkdz5UnU4kGfJJLY9Nlc= github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q= From 87e20186e7cfd2f2de60963d4b20c24d41766467 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 1 Oct 2024 11:51:40 +0000 Subject: [PATCH 04/11] build(deps): bump @patternfly/react-table from 6.0.0-alpha.101 to 6.0.0-prerelease.20 in /clients/ui/frontend (#442) Bumps [@patternfly/react-table](https://github.com/patternfly/patternfly-react) from 6.0.0-alpha.101 to 6.0.0-prerelease.20. - [Release notes](https://github.com/patternfly/patternfly-react/releases) - [Commits](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@6.0.0-alpha.101...@patternfly/react-table@6.0.0-prerelease.20) --- updated-dependencies: - dependency-name: "@patternfly/react-table" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- clients/ui/frontend/package-lock.json | 58 ++++++++++++++++++++------- clients/ui/frontend/package.json | 2 +- 2 files changed, 45 insertions(+), 15 deletions(-) diff --git a/clients/ui/frontend/package-lock.json b/clients/ui/frontend/package-lock.json index bafbf823e..0acb5569c 100644 --- a/clients/ui/frontend/package-lock.json +++ b/clients/ui/frontend/package-lock.json @@ -14,7 +14,7 @@ "@patternfly/react-core": "6.0.0-prerelease.14", "@patternfly/react-icons": "6.0.0-alpha.37", "@patternfly/react-styles": "6.0.0-alpha.35", - "@patternfly/react-table": "6.0.0-alpha.101", + "@patternfly/react-table": "6.0.0-prerelease.20", "@patternfly/react-templates": "6.0.0-alpha.50", "classnames": "^2.2.6", "dompurify": "^3.1.6", @@ -4018,23 +4018,53 @@ "license": "MIT" }, "node_modules/@patternfly/react-table": { - "version": "6.0.0-alpha.101", - "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.0.0-alpha.101.tgz", - "integrity": "sha512-nR5UsFsht0ZtoAXH69mJGKx+H/o6GFZ1fjiTWoP6Mt4Rz5T0k/OyGmlcothJb4zMc+kjDdhDZIKIqQAF+qyqmA==", - "license": "MIT", - "dependencies": { - "@patternfly/react-core": "^6.0.0-alpha.100", - "@patternfly/react-icons": "^6.0.0-alpha.35", - "@patternfly/react-styles": "^6.0.0-alpha.34", - "@patternfly/react-tokens": "^6.0.0-alpha.34", + "version": "6.0.0-prerelease.20", + "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.0.0-prerelease.20.tgz", + "integrity": "sha512-dtzbStUJO8noDBl+aCE7biDNQmnTM+s0q99EdGQ4lzPzA+EfaCaU6UFuGO3jjnGffahk+zbXheFKZSGz+65VbA==", + "dependencies": { + "@patternfly/react-core": "^6.0.0-prerelease.19", + "@patternfly/react-icons": "^6.0.0-prerelease.6", + "@patternfly/react-styles": "^6.0.0-prerelease.5", + "@patternfly/react-tokens": "^6.0.0-prerelease.6", "lodash": "^4.17.21", - "tslib": "^2.6.3" + "tslib": "^2.7.0" }, "peerDependencies": { "react": "^17 || ^18", "react-dom": "^17 || ^18" } }, + "node_modules/@patternfly/react-table/node_modules/@patternfly/react-core": { + "version": "6.0.0-prerelease.19", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-prerelease.19.tgz", + "integrity": "sha512-3cG0x4m4tbpjfVaJSOqs2e5+Ueag0Y07tVIodWzu/1X0CGrOa7T8Z2I1OZLclSxF5bMK76K+0id8yGxlWu5NYA==", + "dependencies": { + "@patternfly/react-icons": "^6.0.0-prerelease.6", + "@patternfly/react-styles": "^6.0.0-prerelease.5", + "@patternfly/react-tokens": "^6.0.0-prerelease.6", + "focus-trap": "7.6.0", + "react-dropzone": "^14.2.3", + "tslib": "^2.7.0" + }, + "peerDependencies": { + "react": "^17 || ^18", + "react-dom": "^17 || ^18" + } + }, + "node_modules/@patternfly/react-table/node_modules/@patternfly/react-icons": { + "version": "6.0.0-prerelease.6", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0-prerelease.6.tgz", + "integrity": "sha512-O3SVrFhUlYg35Z8gcOc2/PsWWnsaTz6tjY1OdOpUrrkzOj3L+4h6aBz8rDGJiAJJ94JQj69yq9RKAWoy7tEWgg==", + "peerDependencies": { + "react": "^17 || ^18", + "react-dom": "^17 || ^18" + } + }, + "node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles": { + "version": "6.0.0-prerelease.5", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.0.0-prerelease.5.tgz", + "integrity": "sha512-+W00HRje6z32hRSezULSaCgQ9Y+btu37PgUPNJIonMD6haLnLjxiJTE1BlK0Cdt8phD8I564hFhJWIbVgtubzw==" + }, "node_modules/@patternfly/react-templates": { "version": "6.0.0-alpha.50", "resolved": "https://registry.npmjs.org/@patternfly/react-templates/-/react-templates-6.0.0-alpha.50.tgz", @@ -4053,9 +4083,9 @@ } }, "node_modules/@patternfly/react-tokens": { - "version": "6.0.0-prerelease.4", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0-prerelease.4.tgz", - "integrity": "sha512-T1/C6nj78zvk4zLUp3VvNI3hChPR2vEy0BasIG3AYakWoLJsdOY6qS3PlLulawNZvlK7KH0X7VRfT1Zk073R6A==" + "version": "6.0.0-prerelease.6", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0-prerelease.6.tgz", + "integrity": "sha512-zic3BG+ZmcESrRoOkGQTfAt9dn2Q4Zgtef1TZDGn59KZAajLnnbeC5U/5oWBxLGPeNYrfYq6UhSVCYo6K14pbA==" }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", diff --git a/clients/ui/frontend/package.json b/clients/ui/frontend/package.json index ecc156123..164130d6f 100644 --- a/clients/ui/frontend/package.json +++ b/clients/ui/frontend/package.json @@ -98,7 +98,7 @@ "@patternfly/react-core": "6.0.0-prerelease.14", "@patternfly/react-icons": "6.0.0-alpha.37", "@patternfly/react-styles": "6.0.0-alpha.35", - "@patternfly/react-table": "6.0.0-alpha.101", + "@patternfly/react-table": "6.0.0-prerelease.20", "@patternfly/react-templates": "6.0.0-alpha.50", "lodash-es": "^4.17.15", "npm-run-all": "^4.1.5", From edbc250ab98ba3b87a90c3a54e23d5e36693bf75 Mon Sep 17 00:00:00 2001 From: Griffin Sullivan <48397354+Griffin-Sullivan@users.noreply.github.com> Date: Tue, 1 Oct 2024 08:18:40 -0400 Subject: [PATCH 05/11] Add golangci-lint for BFF linting (#433) Signed-off-by: Griffin-Sullivan --- .github/workflows/ui-bff-build.yml | 6 +++ clients/ui/bff/Makefile | 38 +++++++++++++++++++ clients/ui/bff/docs/contributing.md | 11 ++++++ clients/ui/bff/internal/api/errors.go | 6 ++- .../bff/internal/data/model_version_test.go | 17 +++++---- .../internal/data/registered_model_test.go | 19 +++++----- 6 files changed, 78 insertions(+), 19 deletions(-) create mode 100644 clients/ui/bff/docs/contributing.md diff --git a/.github/workflows/ui-bff-build.yml b/.github/workflows/ui-bff-build.yml index 3957f5b3f..9248d2dee 100644 --- a/.github/workflows/ui-bff-build.yml +++ b/.github/workflows/ui-bff-build.yml @@ -24,6 +24,12 @@ jobs: working-directory: clients/ui/bff run: make clean + - name: Lint + uses: golangci/golangci-lint-action@v6 + with: + version: v1.57.2 + working-directory: clients/ui/bff/ + - name: Build working-directory: clients/ui/bff run: make build diff --git a/clients/ui/bff/Makefile b/clients/ui/bff/Makefile index 3049355f6..f58c08d17 100644 --- a/clients/ui/bff/Makefile +++ b/clients/ui/bff/Makefile @@ -19,6 +19,14 @@ fmt: clean: rm -Rf ./bin +.PHONY: lint +lint: golangci-lint ## Run golangci-lint linter + $(GOLANGCI_LINT) run + +.PHONY: lint-fix +lint-fix: golangci-lint ## Run golangci-lint linter and perform fixes + $(GOLANGCI_LINT) run --fix + .PHONY: vet vet: . go vet ./... @@ -38,3 +46,33 @@ run: fmt vet .PHONY: docker-build docker-build: $(CONTAINER_TOOL) build -t ${IMG} . + +##@ Dependencies + +## Location to install dependencies to +LOCALBIN ?= $(shell pwd)/bin +$(LOCALBIN): + mkdir -p $(LOCALBIN) + +GOLANGCI_LINT ?= $(LOCALBIN)/golangci-lint-$(GOLANGCI_LINT_VERSION) +GOLANGCI_LINT_VERSION ?= v1.57.2 + +.PHONY: golangci-lint +golangci-lint: $(GOLANGCI_LINT) ## Download golangci-lint locally if necessary. +$(GOLANGCI_LINT): $(LOCALBIN) + $(call go-install-tool,$(GOLANGCI_LINT),github.com/golangci/golangci-lint/cmd/golangci-lint,${GOLANGCI_LINT_VERSION}) + + +# go-install-tool will 'go install' any package with custom target and name of binary, if it doesn't exist +# $1 - target path with name of binary (ideally with version) +# $2 - package url which can be installed +# $3 - specific version of package +define go-install-tool +@[ -f $(1) ] || { \ +set -e; \ +package=$(2)@$(3) ;\ +echo "Downloading $${package}" ;\ +GOBIN=$(LOCALBIN) go install $${package} ;\ +mv "$$(echo "$(1)" | sed "s/-$(3)$$//")" $(1) ;\ +} +endef \ No newline at end of file diff --git a/clients/ui/bff/docs/contributing.md b/clients/ui/bff/docs/contributing.md new file mode 100644 index 000000000..22ccd7886 --- /dev/null +++ b/clients/ui/bff/docs/contributing.md @@ -0,0 +1,11 @@ +# Contributing + +## Running the linter locally +The BFF directory uses golangci-lint to combine multiple linters for a more comprehensive linting process. To install and run simply use: + +```shell +cd clients/ui/bff +make lint +``` + +For more information on configuring golangci-lint see the [documentation](https://golangci-lint.run/). diff --git a/clients/ui/bff/internal/api/errors.go b/clients/ui/bff/internal/api/errors.go index b15e1cd40..686cf7c44 100644 --- a/clients/ui/bff/internal/api/errors.go +++ b/clients/ui/bff/internal/api/errors.go @@ -3,9 +3,10 @@ package api import ( "encoding/json" "fmt" - "github.com/kubeflow/model-registry/ui/bff/internal/integrations" "net/http" "strconv" + + "github.com/kubeflow/model-registry/ui/bff/internal/integrations" ) type HTTPError struct { @@ -91,7 +92,8 @@ func (app *App) methodNotAllowedResponse(w http.ResponseWriter, r *http.Request) app.errorResponse(w, r, httpError) } -func (app *App) failedValidationResponse(w http.ResponseWriter, r *http.Request, errors map[string]string) { +// TODO remove nolint comment below when we use this method +func (app *App) failedValidationResponse(w http.ResponseWriter, r *http.Request, errors map[string]string) { //nolint:unused message, err := json.Marshal(errors) if err != nil { diff --git a/clients/ui/bff/internal/data/model_version_test.go b/clients/ui/bff/internal/data/model_version_test.go index b2da96371..1f8420427 100644 --- a/clients/ui/bff/internal/data/model_version_test.go +++ b/clients/ui/bff/internal/data/model_version_test.go @@ -2,17 +2,18 @@ package data import ( "encoding/json" + "net/http" + "net/url" + "testing" + "github.com/brianvoe/gofakeit/v7" "github.com/kubeflow/model-registry/ui/bff/internal/mocks" "github.com/stretchr/testify/assert" "github.com/stretchr/testify/mock" - "net/http" - "net/url" - "testing" ) func TestGetModelVersion(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockModelVersion() @@ -37,7 +38,7 @@ func TestGetModelVersion(t *testing.T) { } func TestCreateModelVersion(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockModelVersion() @@ -62,7 +63,7 @@ func TestCreateModelVersion(t *testing.T) { } func TestUpdateModelVersion(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockModelVersion() @@ -90,7 +91,7 @@ func TestUpdateModelVersion(t *testing.T) { } func TestGetModelArtifactsByModelVersion(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockModelArtifactList() @@ -116,7 +117,7 @@ func TestGetModelArtifactsByModelVersion(t *testing.T) { } func TestCreateModelArtifactByModelVersion(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockModelArtifact() diff --git a/clients/ui/bff/internal/data/registered_model_test.go b/clients/ui/bff/internal/data/registered_model_test.go index 0af73f160..f340527df 100644 --- a/clients/ui/bff/internal/data/registered_model_test.go +++ b/clients/ui/bff/internal/data/registered_model_test.go @@ -2,17 +2,18 @@ package data import ( "encoding/json" + "net/http" + "net/url" + "testing" + "github.com/brianvoe/gofakeit/v7" "github.com/kubeflow/model-registry/ui/bff/internal/mocks" "github.com/stretchr/testify/assert" "github.com/stretchr/testify/mock" - "net/http" - "net/url" - "testing" ) func TestGetAllRegisteredModels(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockRegisteredModelList() @@ -36,7 +37,7 @@ func TestGetAllRegisteredModels(t *testing.T) { } func TestCreateRegisteredModel(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockRegisteredModel() @@ -61,7 +62,7 @@ func TestCreateRegisteredModel(t *testing.T) { } func TestGetRegisteredModel(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockRegisteredModel() @@ -83,7 +84,7 @@ func TestGetRegisteredModel(t *testing.T) { } func TestUpdateRegisteredModel(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockRegisteredModel() @@ -111,7 +112,7 @@ func TestUpdateRegisteredModel(t *testing.T) { } func TestGetAllModelVersions(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockModelVersionList() @@ -139,7 +140,7 @@ func TestGetAllModelVersions(t *testing.T) { } func TestCreateModelVersionForRegisteredModel(t *testing.T) { - gofakeit.Seed(0) + gofakeit.Seed(0) //nolint:errcheck expected := mocks.GenerateMockModelVersion() From 0c369a0dab8f83e0204c087b80b5313604ccdb6c Mon Sep 17 00:00:00 2001 From: Lucas Fernandez Date: Tue, 1 Oct 2024 14:54:40 +0200 Subject: [PATCH 06/11] Fix linting and accessibility issues (#445) Signed-off-by: lucferbux --- .../screens/RegisteredModels/RegisteredModelListView.tsx | 8 ++------ .../screens/RegisteredModels/RegisteredModelTable.tsx | 2 +- clients/ui/frontend/src/index.tsx | 2 +- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx index d17bbe1c9..ff2017141 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx @@ -1,10 +1,5 @@ import * as React from 'react'; -import { - TextInput, - ToolbarFilter, - ToolbarGroup, - ToolbarItem, -} from '@patternfly/react-core'; +import { TextInput, ToolbarFilter, ToolbarGroup, ToolbarItem } from '@patternfly/react-core'; import { FilterIcon } from '@patternfly/react-icons'; import { useNavigate } from 'react-router-dom'; import { RegisteredModel } from '~/app/types'; @@ -104,6 +99,7 @@ const RegisteredModelListView: React.FC = ({ }} style={{ minWidth: '200px' }} data-testid="registered-model-table-search" + aria-label="Search" />