diff --git a/env.local b/env.local new file mode 100644 index 0000000000..367d5d6bc3 --- /dev/null +++ b/env.local @@ -0,0 +1,2 @@ +OC_PROJECT=opendatahub +NAMESPACE=jenny diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 1c377919a8..b78d1cf46b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -56,9 +56,9 @@ "@babel/core": "^7.21.0", "@cypress/code-coverage": "^3.12.34", "@jsdevtools/coverage-istanbul-loader": "^3.0.5", - "@mui/icons-material": "^5.16.5", - "@mui/material": "^5.16.4", - "@mui/types": "^7.2.15", + "@mui/icons-material": "6.0.0-rc.0", + "@mui/material": "6.0.0-rc.0", + "@mui/types": "7.2.15", "@testing-library/cypress": "^10.0.1", "@testing-library/dom": "^9.3.4", "@testing-library/jest-dom": "^6.3.0", @@ -1921,9 +1921,9 @@ "devOptional": true }, "node_modules/@babel/runtime": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", - "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==", + "version": "7.25.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz", + "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -3899,9 +3899,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.6.tgz", - "integrity": "sha512-kytg6LheUG42V8H/o/Ptz3olSO5kUXW9zF0ox18VnblX6bO2yif1FPItgc3ey1t5ansb1+gbe7SatntqusQupg==", + "version": "6.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.0-rc.0.tgz", + "integrity": "sha512-s8mH/SmSivkE+1w1rgMgLUSt56nVaf4zUzlc7wUpNqUgUk32qP1mZuf1HN2mJv+W784fkyFWifpFoE411OudAA==", "dev": true, "funding": { "type": "opencollective", @@ -3909,24 +3909,24 @@ } }, "node_modules/@mui/icons-material": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.6.tgz", - "integrity": "sha512-ceNGjoXheH9wbIFa1JHmSc9QVjJUvh18KvHrR4/FkJCSi9HXJ+9ee1kUhCOEFfuxNF8UB6WWVrIUOUgRd70t0A==", + "version": "6.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.0.0-rc.0.tgz", + "integrity": "sha512-o3V7py0H9h6WNGPt4reK2jW8uNNLZQcuNeDAaVBAt8BEHLvbO2hIIIIrI7KAdoob5QtybHWxcWcCqGtcQBEuPg==", "dev": true, "dependencies": { - "@babel/runtime": "^7.23.9" + "@babel/runtime": "^7.25.0" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^5.0.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@mui/material": "6.0.0-rc.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -3935,26 +3935,26 @@ } }, "node_modules/@mui/material": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.6.tgz", - "integrity": "sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==", + "version": "6.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.0.0-rc.0.tgz", + "integrity": "sha512-vwgYL73bwv0oeCosN2iVr9YjgsRaRDfbh6jcBeTj9yg4RSUYD3PHYZpCYGFPfVbcWh/8SxytjyXVy1iYgGBEOg==", "dev": true, "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/core-downloads-tracker": "^5.16.6", - "@mui/system": "^5.16.6", + "@babel/runtime": "^7.25.0", + "@mui/core-downloads-tracker": "^6.0.0-rc.0", + "@mui/system": "6.0.0-rc.0", "@mui/types": "^7.2.15", - "@mui/utils": "^5.16.6", + "@mui/utils": "6.0.0-rc.0", "@popperjs/core": "^2.11.8", - "@types/react-transition-group": "^4.4.10", - "clsx": "^2.1.0", + "@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": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", @@ -3963,9 +3963,10 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@mui/material-pigment-css": "^6.0.0-rc.0", + "@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": { @@ -3974,6 +3975,9 @@ "@emotion/styled": { "optional": true }, + "@mui/material-pigment-css": { + "optional": true + }, "@types/react": { "optional": true } @@ -3995,25 +3999,25 @@ "dev": true }, "node_modules/@mui/private-theming": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz", - "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==", + "version": "6.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.0.0-rc.0.tgz", + "integrity": "sha512-5Bn/R0qsLnU8oVHNH2lq+g3DTM8tigbMPYDKmYFMlKOcxxfAd2UVkWHNhdMwYgQV6JurytZ4Tw1tAcJ0VIVtJg==", "dev": true, "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.16.6", + "@babel/runtime": "^7.25.0", + "@mui/utils": "6.0.0-rc.0", "prop-types": "^15.8.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -4022,18 +4026,18 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz", - "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==", + "version": "6.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.0.0-rc.0.tgz", + "integrity": "sha512-stDma1RaU+ops9Tdbr6+RC/rG0BKkorjXG3yYnnhvYf4zR8duUQK0Pluq9bT4Cemfg2yN++VzJ8MmizRRTDeHQ==", "dev": true, "dependencies": { - "@babel/runtime": "^7.23.9", - "@emotion/cache": "^11.11.0", + "@babel/runtime": "^7.25.0", + "@emotion/cache": "^11.13.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", @@ -4042,7 +4046,7 @@ "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -4054,22 +4058,22 @@ } }, "node_modules/@mui/system": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.6.tgz", - "integrity": "sha512-5xgyJjBIMPw8HIaZpfbGAaFYPwImQn7Nyh+wwKWhvkoIeDosQ1ZMVrbTclefi7G8hNmqhip04duYwYpbBFnBgw==", + "version": "6.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.0.0-rc.0.tgz", + "integrity": "sha512-AC/0iIDtX8N4Uy7sUZxtNjGh1MdW/bAHuKkaeCRztc5HYRluR9Z+lGV+9A+Wuu9oX522pbSXYGI7nNZa2MgZvw==", "dev": true, "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.16.6", - "@mui/styled-engine": "^5.16.6", + "@babel/runtime": "^7.25.0", + "@mui/private-theming": "6.0.0-rc.0", + "@mui/styled-engine": "6.0.0-rc.0", "@mui/types": "^7.2.15", - "@mui/utils": "^5.16.6", - "clsx": "^2.1.0", + "@mui/utils": "6.0.0-rc.0", + "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", @@ -4078,8 +4082,8 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.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": { @@ -4117,12 +4121,12 @@ } }, "node_modules/@mui/utils": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz", - "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==", + "version": "6.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.0-rc.0.tgz", + "integrity": "sha512-tBp0ILEXDL0bbDDT8PnZOjCqSm5Dfk2N0Z45uzRw+wVl6fVvloC9zw8avl+OdX1Bg3ubs/ttKn8nRNv17bpM5A==", "dev": true, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.25.0", "@mui/types": "^7.2.15", "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", @@ -4130,15 +4134,15 @@ "react-is": "^18.3.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -5820,9 +5824,9 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.10", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", - "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "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": "*" diff --git a/frontend/package.json b/frontend/package.json index 5c64525813..3455d9e1d5 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -99,9 +99,9 @@ "@babel/core": "^7.21.0", "@cypress/code-coverage": "^3.12.34", "@jsdevtools/coverage-istanbul-loader": "^3.0.5", - "@mui/material": "^5.16.4", - "@mui/icons-material": "^5.16.5", - "@mui/types": "^7.2.15", + "@mui/material": "6.0.0-rc.0", + "@mui/icons-material": "6.0.0-rc.0", + "@mui/types": "7.2.15", "@testing-library/cypress": "^10.0.1", "@testing-library/dom": "^9.3.4", "@testing-library/jest-dom": "^6.3.0", diff --git a/frontend/src/app/Header.tsx b/frontend/src/app/Header.tsx index 70a9491c20..6301a32c45 100644 --- a/frontend/src/app/Header.tsx +++ b/frontend/src/app/Header.tsx @@ -8,7 +8,6 @@ import { MastheadMain, MastheadToggle, PageToggleButton, - Switch, } from '@patternfly/react-core'; import { BarsIcon } from '@patternfly/react-icons'; import { Link } from 'react-router-dom'; diff --git a/frontend/src/app/HeaderTools.tsx b/frontend/src/app/HeaderTools.tsx index 6850b98896..349d18ae32 100644 --- a/frontend/src/app/HeaderTools.tsx +++ b/frontend/src/app/HeaderTools.tsx @@ -43,7 +43,7 @@ const HeaderTools: React.FC = ({ onNotificationsClick }) => { React.useEffect(() => { window.isSwitched = !isChecked; - }, [window.isSwitched]); + }, [isChecked]); const handleChange = (_event: React.FormEvent, checked: boolean) => { setIsChecked(!checked); @@ -147,13 +147,13 @@ const HeaderTools: React.FC = ({ onNotificationsClick }) => { - + {!dashboardConfig.spec.dashboardConfig.disableAppLauncher ? ( diff --git a/frontend/src/components/DashboardDescriptionListGroup.tsx b/frontend/src/components/DashboardDescriptionListGroup.tsx index 5789df3828..dec37ad67b 100644 --- a/frontend/src/components/DashboardDescriptionListGroup.tsx +++ b/frontend/src/components/DashboardDescriptionListGroup.tsx @@ -97,7 +97,9 @@ const DashboardDescriptionListGroup: React.FC{title} )} - + {isEditing ? contentWhenEditing : isEmpty ? contentWhenEmpty : children} diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx index a9547ff662..21ae40ab4f 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { DrawerPanelBody, Tab, TabContent, Tabs } from '@patternfly/react-core'; import SelectedNodeDetailsTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeDetailsTab'; import SelectedNodeInputOutputTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab'; -import LogsTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab'; import './PipelineRunDrawer.scss'; import { PipelineTask } from '~/concepts/pipelines/topology'; import { Execution } from '~/third_party/mlmd'; @@ -53,7 +52,7 @@ const PipelineRunDrawerRightTabs: React.FC = ({ title: 'Logs', isDisabled: !task.status?.podName, // content: , - content: <> + content: <>, }, }; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index d9f848b069..302ad472ac 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import { BrowserRouter as Router } from 'react-router-dom'; import { Provider } from 'react-redux'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import { sdkStore, store } from './redux/store/store'; import App from './app/App'; import SDKInitialize from './SDKInitialize'; @@ -17,6 +18,8 @@ import { ReduxContext } from './redux/context'; // We have to use '!' here for 'document.getElementById('root')' to avoid type errors // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const root = createRoot(document.getElementById('root')!); + +const theme = createTheme({ cssVariables: true }); root.render( @@ -25,7 +28,9 @@ root.render( - + + + diff --git a/frontend/src/pages/home/Home.tsx b/frontend/src/pages/home/Home.tsx index 9e8bb78967..46d7d44c44 100644 --- a/frontend/src/pages/home/Home.tsx +++ b/frontend/src/pages/home/Home.tsx @@ -1,11 +1,5 @@ import * as React from 'react'; -import { - Bullseye, - EmptyState, - Page, - PageSection, - PageSectionVariants, -} from '@patternfly/react-core'; +import { Bullseye, EmptyState, PageSection, PageSectionVariants } from '@patternfly/react-core'; import { HomeIcon } from '@patternfly/react-icons'; import { ODH_PRODUCT_NAME } from '~/utilities/const'; import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable'; diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss index 49cad463a7..e9dc5b4d0c 100644 --- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss +++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss @@ -1,110 +1,174 @@ -@import url("overrides-from-figma.scss"); +// @import url("overrides-from-figma.scss"); .mui-theme:root { - --mui-palette-primary-light: #42a5f5; - --mui-palette-secondary-light: #ba68c8; - --mui-palette-error-light: #ef5350; - --mui-palette-warning-light: #ff9800; - --mui-palette-info-light: #03a9f4; - --mui-palette-success-light: #4caf50; - - --mui-palette-primary-main: #1976d2; - --mui-palette-secondary-main: #9c27b0; - --mui-palette-error-main: #d32f2f; - --mui-palette-warning-main: #ed6c02; - --mui-palette-info-main: #0288d1; - --mui-palette-success-main: #2e7d32; - - --mui-palette-primary-dark: #1565c0; - --mui-palette-secondary-dark: #7b1fa2; - --mui-palette-error-dark: #c62828; - --mui-palette-warning-dark: #e65100; - --mui-palette-info-dark: #01579b; - --mui-palette-success-dark: #1b5e20; + // 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: 4px; - --pf-t--global--border--radius--medium: 4px; + --pf-t--global--border--radius--pill: var(--mui-shape-borderRadius); + --pf-t--global--border--radius--medium: var(--mui-shape-borderRadius); + + --pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main); + --pf-t--global--text--color--inverse: var(--mui-palette-common-white); + } .mui-theme .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: 12px; + --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--MarginInlineEnd: 12px; - --pf-v6-c-alert__icon--MarginBlockStart: 7px; - --pf-v6-c-alert__icon--FontSize: 22px; - --pf-v6-c-alert--BoxShadow: none; - --pf-v6-c-alert--PaddingBlockStart: 6px; - --pf-v6-c-alert--PaddingBlockEnd: 6px; - --pf-v6-c-alert--PaddingInlineStart: 16px; - --pf-v6-c-alert--PaddingInlineStart: 16px; + --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); } .mui-theme .pf-v6-c-alert__title { - padding-block: 8px; + padding-block: var(--mui-spacing); } .mui-theme .pf-v6-c-alert__icon { - margin-block-end: 7px; + margin-block-end: var(--mui-alert__icon--MarginBlockEnd); } .mui-theme .pf-v6-c-button { --pf-v6-c-button--FontWeight: var(--mui-button-font-weight); - --pf-v6-c-button--PaddingBlockStart: 6px; - --pf-v6-c-button--PaddingBlockEnd: 6px; - --pf-v6-c-button--PaddingInlineStart: 16px; - --pf-v6-c-button--PaddingInlineEnd: 16px; - --pf-v6-c-button--LineHeight: 1.75; - - text-transform: uppercase; + --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; } .mui-theme .pf-v6-c-menu { - --pf-v6-c-menu--BoxShadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); - --pf-v6-c-menu--BorderRadius: 4px; - --pf-v6-c-menu--PaddingBlockStart: 8px; - --pf-v6-c-menu--PaddingBlockEnd: 8px; - --pf-v6-c-menu--PaddingInlineStart: 8px; - --pf-v6-c-menu--PaddingInlineEnd: 8px; - --pf-v6-c-menu__item--PaddingBlockStart: 6px; - --pf-v6-c-menu__item--PaddingBlockEnd: 6px; - --pf-v6-c-menu__item--PaddingInlineStart: 16px; - --pf-v6-c-menu__item--PaddingInlineEnd: 16px; - --pf-v6-c-menu__item--FontSize: 1rem; + --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); } .mui-theme .pf-v6-c-menu-toggle { - --pf-v6-c-menu-toggle__toggle-icon--MinHeight: auto; - --pf-v6-c-menu-toggle__controls--MinWidth: 0; - --pf-v6-c-menu-toggle--expanded--BackgroundColor: none; - --pf-v6-c-menu-toggle--expanded--BorderColor: none; - --pf-v6-c-menu-toggle--LineHeight: 1.75; - --pf-v6-c-menu-toggle--PaddingBlockStart: 6px; - --pf-v6-c-menu-toggle--PaddingBlockEnd: 6px; - --pf-v6-c-menu-toggle--PaddingInlineStart: 16px; - --pf-v6-c-menu-toggle--PaddingInlineEnd: 16px; - --pf-v6-c-menu-toggle--ColumnGap: 0; - --pf-v6-c-menu-toggle--expanded--Color: black; - --pf-v6-c-menu-toggle--hover--BorderColor: none; - --pf-v6-c-menu-toggle--BorderColor: none; + --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--LineHeight: var(--mui-menu-toggle--LineHeight); + // --pf-v6-c-menu-toggle--PaddingBlockStart: var(--mui-menu-toggle--PaddingBlockStart); + // --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--mui-menu-toggle--PaddingBlockEnd); + --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: uppercase; + text-transform: var(--mui-text-transform); font-weight: var(--mui-button-font-weight); letter-spacing: 0.02857em; } .mui-theme .pf-v6-c-menu-toggle__button { - text-transform: uppercase; + text-transform: var(--mui-text-transform); font-weight: var(--mui-button-font-weight); letter-spacing: 0.02857em; align-self: stretch; @@ -119,10 +183,10 @@ } .mui-theme .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) { - --pf-v6-c-menu-toggle--PaddingBlockStart: 4px; - --pf-v6-c-menu-toggle--PaddingBlockEnd: 4px; - --pf-v6-c-menu-toggle--PaddingInlineStart: 10px; - --pf-v6-c-menu-toggle--PaddingInlineEnd: 10px; + --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); } .mui-theme .pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon { @@ -142,7 +206,7 @@ .mui-theme .pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon { margin-right: -4px; - margin-left: 8px; + margin-left: var(--mui-spacing); } .mui-theme .pf-v6-c-menu-toggle__icon { @@ -150,27 +214,25 @@ } .mui-theme .pf-v6-c-table { - --pf-v6-c-table__sort--m-selected__button--Color: #000000de; - --pf-v6-c-table__button--BackgroundColor: none; - --pf-v6-c-table__button--hover--BackgroundColor: none; - --pf-v6-c-table__sort-indicator--Color: #666; - --pf-v6-c-table__sort__button--hover__sort-indicator--Color: #00000050; - --pf-v6-c-table__sort__button--hover__text--Color: #00000099; - --pf-v6-c-table--cell--Color: rgba(0, 0, 0, 0.87); + --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--Color: var(--pf-v6-c-table--cell--Color); - --pf-v6-c-table__button--PaddingBlockStart: 0; - --pf-v6-c-table__button--PaddingBlockEnd: 0; - --pf-v6-c-table__button--PaddingInlineStart: 0; - --pf-v6-c-table__button--PaddingInlineEnd: 0; - --pf-v6-c-table--cell--PaddingInlineStart: 16px; - --pf-v6-c-table--cell--PaddingInlineEnd: 16px; - --pf-v6-c-table--cell--PaddingBlockStart: 16px; - --pf-v6-c-table--cell--PaddingBlockEnd: 16px; - --pf-v6-c-table--cell--first-last-child--PaddingInline: 0px; - --pf-v6-c-table__thead--cell--FontWeight: 500; - --pf-v6-c-table__thead--cell--FontSize: 14px; - --pf-v6-c-table__tr--BorderBlockEndColor: rgba(224, 224, 224, 1); - --pf-v6-c-table__sort-indicator--MarginInlineStart: 4px; + --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; } @@ -182,7 +244,7 @@ .mui-theme .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; + 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; } @@ -216,22 +278,22 @@ } .mui-theme .pf-v6-c-tabs { - --pf-v6-c-tabs__link--hover--BackgroundColor: transparent; - --pf-v6-c-tabs__item--PaddingBlockStart: 0; - --pf-v6-c-tabs__item--PaddingBlockEnd: 0; - --pf-v6-c-tabs__item--PaddingInlineStart: 0; - --pf-v6-c-tabs__item--PaddingInlineEnd: 0; - --pf-v6-c-tabs__link--PaddingBlockStart: 12px; - --pf-v6-c-tabs__link--PaddingBlockEnd: 12px; - --pf-v6-c-tabs__link--PaddingInlineStart: 16px; - --pf-v6-c-tabs__link--PaddingInlineEnd: 16px; + --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: 2px; + --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; } .mui-theme .pf-v6-c-tabs__link { - text-transform: uppercase; + text-transform: var(--mui-text-transform); font-weight: 500; line-height: 1.75; letter-spacing: 0.02857em; @@ -253,8 +315,9 @@ } .mui-theme .pf-v6-c-label__text { - padding-right: 8px; - padding-left: 8px; + padding-right: var(--mui-spacing-8px); + padding-left: var(--mui-spacing-8px); + color: var(--pf-t--global--text--color--inverse); } .mui-theme .pf-v6-c-pagination { diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx index 3c4ebe8ee0..badf015a26 100644 --- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx +++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx @@ -15,7 +15,7 @@ import { import { asEnumMember } from '~/utilities/utils'; import RegisteredModelTable from './RegisteredModelTable'; import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar'; -import './MUI-theme.scss' +import './MUI-theme.scss'; type RegisteredModelListViewProps = { registeredModels: RegisteredModel[]; diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/overrides-from-figma.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/overrides-from-figma.scss index 59f982bfdf..9a4b157d07 100644 --- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/overrides-from-figma.scss +++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/overrides-from-figma.scss @@ -21,7 +21,7 @@ --pf-t--color--blue--300: #64b5f6; --pf-t--color--blue--400: #42a5f5; --pf-t--color--blue--50: #e3f2fd; - --pf-t--color--blue--500: #1976d2; + --pf-t--color--blue--500: var(--mui-palette-primary-main); --pf-t--color--blue--600: #1e88e5; --pf-t--color--blue--700: #0057b2; --pf-t--color--blue--800: #1565c0; diff --git a/frontend/src/pages/modelServing/screens/metrics/EnsureMetricsAvailable.tsx b/frontend/src/pages/modelServing/screens/metrics/EnsureMetricsAvailable.tsx index 261b218beb..559f4b934f 100644 --- a/frontend/src/pages/modelServing/screens/metrics/EnsureMetricsAvailable.tsx +++ b/frontend/src/pages/modelServing/screens/metrics/EnsureMetricsAvailable.tsx @@ -41,7 +41,9 @@ const EnsureMetricsAvailable: React.FC = ({ // for loaded first, you'll get an infinite spinner. if (error) { if (error.response?.status === 403) { - return ; + return ( + + ); } return (