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 <[email protected]>
kubeflow · Oct 1, 2024 · 6844a1f · 6844a1f
1 parent 1389f19
commit 6844a1f
Show file tree

Hide file tree

Showing 9 changed files with 1,003 additions and 47 deletions.
diff --git a/clients/ui/frontend/package-lock.json b/clients/ui/frontend/package-lock.json
diff --git 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
@@ -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>

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
@@ -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

diff --git a/...frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/...frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
@@ -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';
@@ -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>
   );

diff --git a/...ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTable.tsx b/...ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTable.tsx
@@ -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} />

diff --git a/clients/ui/frontend/src/index.html b/clients/ui/frontend/src/index.html
@@ -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">

diff --git 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(
   <React.StrictMode>
     <Router>
       <BrowserStorageContextProvider>
-        <App />
+        <ThemeProvider theme={theme}>
+          <App />
+        </ThemeProvider>
       </BrowserStorageContextProvider>
     </Router>
   </React.StrictMode>,