Skip to content

Commit 9479c7b

Browse files
jenny-s51jenny-s51
authored
feat(ws): Notebooks 2.0 // Frontend // Workspaces table // Add MUI Support (#183)
Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> apply env var to activate MUI theme remove masthead toggle, fix padding add bottom padding Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> apply latest changes from MR and npm run test:fix
1 parent 2d12989 commit 9479c7b

File tree

11 files changed

+1941
-97
lines changed

11 files changed

+1941
-97
lines changed

‎workspaces/frontend/package-lock.json‎

Lines changed: 1051 additions & 76 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎workspaces/frontend/package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@
3636
},
3737
"devDependencies": {
3838
"@cypress/code-coverage": "^3.13.5",
39+
"@mui/icons-material": "^6.3.1",
40+
"@mui/material": "^6.3.1",
41+
"@mui/types": "^7.2.21",
3942
"@testing-library/cypress": "^10.0.1",
4043
"@testing-library/dom": "^10.4.0",
4144
"@testing-library/jest-dom": "^5.16.5",
@@ -72,6 +75,8 @@
7275
"react-router-dom": "^6.26.1",
7376
"regenerator-runtime": "^0.13.11",
7477
"rimraf": "^6.0.1",
78+
"sass": "^1.83.1",
79+
"sass-loader": "^16.0.4",
7580
"serve": "^14.2.1",
7681
"style-loader": "^3.3.4",
7782
"svg-url-loader": "^8.0.0",
@@ -100,6 +105,8 @@
100105
"sirv-cli": "^2.0.2"
101106
},
102107
"optionalDependencies": {
108+
"@emotion/react": "^11.14.0",
109+
"@emotion/styled": "^11.14.0",
103110
"@typescript-eslint/eslint-plugin": "^8.8.1",
104111
"@typescript-eslint/parser": "^8.12.2",
105112
"eslint": "^8.57.0",

‎workspaces/frontend/src/app/App.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
Flex,
66
Masthead,
77
MastheadContent,
8+
MastheadMain,
89
MastheadToggle,
910
Page,
1011
PageToggleButton,
@@ -16,16 +17,27 @@ import { NamespaceContextProvider } from './context/NamespaceContextProvider';
1617
import AppRoutes from './AppRoutes';
1718
import NavSidebar from './NavSidebar';
1819
import { NotebookContextProvider } from './context/NotebookContext';
20+
import { isMUITheme, Theme } from './const';
1921

2022
const App: React.FC = () => {
23+
React.useEffect(() => {
24+
// Apply the theme based on the value of STYLE_THEME
25+
if (isMUITheme()) {
26+
document.documentElement.classList.add(Theme.MUI);
27+
} else {
28+
document.documentElement.classList.remove(Theme.MUI);
29+
}
30+
}, []);
31+
2132
const masthead = (
2233
<Masthead>
23-
<MastheadToggle>
24-
<PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
25-
<BarsIcon />
26-
</PageToggleButton>
27-
</MastheadToggle>
28-
34+
<MastheadMain>
35+
<MastheadToggle>
36+
<PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
37+
<BarsIcon />
38+
</PageToggleButton>
39+
</MastheadToggle>
40+
</MastheadMain>
2941
<MastheadContent>
3042
<Flex>
3143
<Title headingLevel="h2" size="3xl">

‎workspaces/frontend/src/app/AppRoutes.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
33
import { NotFound } from './pages/notFound/NotFound';
44
import { Debug } from './pages/Debug/Debug';
55
import { Workspaces } from './pages/Workspaces/Workspaces';
6+
import '~/shared/style/MUI-theme.scss';
67

78
export const isNavDataGroup = (navItem: NavDataItem): navItem is NavDataGroup =>
89
'children' in navItem;

‎workspaces/frontend/src/app/NavSidebar.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { NavLink } from 'react-router-dom';
33
import {
4+
Brand,
45
Nav,
56
NavExpandable,
67
NavItem,
@@ -42,11 +43,19 @@ const NavGroup: React.FC<{ item: NavDataGroup }> = ({ item }) => {
4243

4344
const NavSidebar: React.FC = () => {
4445
const navData = useNavData();
46+
4547
return (
4648
<PageSidebar>
4749
<PageSidebarBody>
4850
<Nav id="nav-primary-simple">
4951
<NavList id="nav-list-simple">
52+
<NavItem>
53+
<Brand
54+
className="kubeflow_brand"
55+
src={`${window.location.origin}/images/logo.svg`}
56+
alt="Kubeflow Logo"
57+
/>
58+
</NavItem>
5059
{navData.map((item) =>
5160
isNavDataGroup(item) ? (
5261
<NavGroup key={item.label} item={item} />

‎workspaces/frontend/src/app/const.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
11
export const BFF_API_VERSION = 'v1';
2+
3+
export enum Theme {
4+
Default = 'default-theme',
5+
MUI = 'mui-theme',
6+
// Future themes can be added here
7+
}
8+
9+
export const isMUITheme = (): boolean => STYLE_THEME === Theme.MUI;
10+
const STYLE_THEME = process.env.STYLE_THEME || Theme.MUI;

‎workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
TimestampTooltipVariant,
88
Timestamp,
99
Label,
10-
Title,
1110
PaginationVariant,
1211
Pagination,
1312
Button,
@@ -372,8 +371,11 @@ export const Workspaces: React.FunctionComponent = () => {
372371
<DrawerContent panelContent={workspaceDetailsContent}>
373372
<DrawerContentBody>
374373
<PageSection isFilled>
375-
<Title headingLevel="h1">Kubeflow Workspaces</Title>
376-
<p>View your existing workspaces or create new workspaces.</p>
374+
<Content>
375+
<h1>Kubeflow Workspaces</h1>
376+
<p>View your existing workspaces or create new workspaces.</p>
377+
</Content>
378+
<br />
377379
<Content style={{ display: 'flex', alignItems: 'flex-start', columnGap: '20px' }}>
378380
<Filter id="filter-workspaces" onFilter={onFilter} columnNames={filterableColumns} />
379381
<Button variant="primary" ouiaId="Primary">
@@ -443,6 +445,7 @@ export const Workspaces: React.FunctionComponent = () => {
443445
perPage={perPage}
444446
page={page}
445447
variant={PaginationVariant.bottom}
448+
isCompact
446449
onSetPage={onSetPage}
447450
onPerPageSelect={onPerPageSelect}
448451
/>

‎workspaces/frontend/src/images/logo.svg‎

Lines changed: 10 additions & 10 deletions
Loading

‎workspaces/frontend/src/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
<html lang="en-US">
33

44
<head>
5+
<link rel="preconnect" href="https://fonts.googleapis.com">
6+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7+
<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">
58
<meta charset="utf-8">
69
<title>Kubeflow Workspaces</title>
710
<meta content="Kubeflow Workspaces" id="appName" name="application-name">

‎workspaces/frontend/src/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import { BrowserRouter as Router } from 'react-router-dom';
4+
import { ThemeProvider, createTheme } from '@mui/material/styles';
45
import App from './app/App';
56

6-
const root = ReactDOM.createRoot(document.getElementById('root'));
7+
const theme = createTheme({ cssVariables: true });
8+
const root = ReactDOM.createRoot(document.getElementById('root')!);
79

810
root.render(
911
<React.StrictMode>
1012
<Router>
11-
<App />
13+
<ThemeProvider theme={theme}>
14+
<App />
15+
</ThemeProvider>
1216
</Router>
1317
</React.StrictMode>,
1418
);

0 commit comments

Comments
 (0)