Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply MUI theming to Registered Model List View #432

Merged
merged 1 commit into from
Oct 1, 2024
Merged

Apply MUI theming to Registered Model List View #432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
554 changes: 522 additions & 32 deletions clients/ui/frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions clients/ui/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryRoutes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<Routes>
Expand Down
2 changes: 1 addition & 1 deletion clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const ModelVersionsTable: React.FC<ModelVersionsTableProps> = ({
columns={mvColumns}
toolbarContent={toolbarContent}
defaultSortColumn={3}
enablePagination
enablePagination="compact"
emptyTableView={<DashboardEmptyTableView onClearFilters={clearFilters} />}
rowRenderer={(mv) => (
<ModelVersionsTableRow
Expand Down
35 changes: 23 additions & 12 deletions ...frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import * as React from 'react';
import { SearchInput, 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';
Expand Down Expand Up @@ -89,17 +94,23 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
icon={<FilterIcon />}
/>
</ToolbarFilter>
<ToolbarItem>
<SearchInput
placeholder={`Find by ${searchType.toLowerCase()}`}
value={search}
onChange={(_, searchValue) => {
setSearch(searchValue);
}}
onClear={() => setSearch('')}
style={{ minWidth: '200px' }}
data-testid="registered-model-table-search"
/>
<ToolbarItem variant="label-group">
<div className="form-fieldset-wrapper">
<TextInput
value={search}
type="text"
onChange={(_, searchValue) => {
setSearch(searchValue);
}}
style={{ minWidth: '200px' }}
data-testid="registered-model-table-search"
/>
<fieldset aria-hidden="true" className="form-fieldset">
<legend className="form-fieldset-legend">
<span>{`Find by ${searchType.toLowerCase()}`}</span>
</legend>
</fieldset>
</div>
</ToolbarItem>
</ToolbarGroup>
);
Expand Down
2 changes: 1 addition & 1 deletion ...ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const RegisteredModelTable: React.FC<RegisteredModelTableProps> = ({
columns={rmColumns}
toolbarContent={toolbarContent}
defaultSortColumn={2}
enablePagination
enablePagination='compact'
emptyTableView={<DashboardEmptyTableView onClearFilters={clearFilters} />}
rowRenderer={(rm) => (
<RegisteredModelTableRow key={rm.name} registeredModel={rm} refresh={refresh} />
Expand Down
3 changes: 3 additions & 0 deletions clients/ui/frontend/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
<html lang="en-US">

<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Model Registry</title>
<meta content="Model Registry" id="appName" name="application-name">
Expand Down
7 changes: 6 additions & 1 deletion clients/ui/frontend/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<React.StrictMode>
<Router>
<BrowserStorageContextProvider>
<App />
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</BrowserStorageContextProvider>
</Router>
</React.StrictMode>,
Expand Down
Loading