feat(ws): Notebooks 2.0 // Frontend // Workspaces table // Add MUI Support

workspaces/frontend/package.json

@@ -36,6 +36,9 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.13.5",
+    "@mui/icons-material": "^6.3.1",
+    "@mui/material": "^6.3.1",
+    "@mui/types": "^7.2.21",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -72,6 +75,8 @@
     "react-router-dom": "^6.26.1",
     "regenerator-runtime": "^0.13.11",
     "rimraf": "^6.0.1",
+    "sass": "^1.83.1",
+    "sass-loader": "^16.0.4",
     "serve": "^14.2.1",
     "style-loader": "^3.3.4",
     "svg-url-loader": "^8.0.0",
@@ -100,6 +105,8 @@
     "sirv-cli": "^2.0.2"
   },
   "optionalDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.12.2",
     "eslint": "^8.57.0",

workspaces/frontend/src/app/App.tsx

@@ -5,6 +5,7 @@ import {
   Flex,
   Masthead,
   MastheadContent,
+  MastheadMain,
   MastheadToggle,
   Page,
   PageToggleButton,
@@ -16,16 +17,27 @@ import { NamespaceContextProvider } from './context/NamespaceContextProvider';
 import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
 import { NotebookContextProvider } from './context/NotebookContext';
+import { isMUITheme, Theme } from './const';
 
 const App: React.FC = () => {
+  React.useEffect(() => {
+    // Apply the theme based on the value of STYLE_THEME
+    if (isMUITheme()) {
+      document.documentElement.classList.add(Theme.MUI);
+    } else {
+      document.documentElement.classList.remove(Theme.MUI);
+    }
+  }, []);
+
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
-
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+      </MastheadMain>
       <MastheadContent>
         <Flex>
           <Title headingLevel="h2" size="3xl">

workspaces/frontend/src/app/AppRoutes.tsx

@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import { NotFound } from './pages/notFound/NotFound';
 import { Debug } from './pages/Debug/Debug';
 import { Workspaces } from './pages/Workspaces/Workspaces';
+import '~/shared/style/MUI-theme.scss';
 
 export const isNavDataGroup = (navItem: NavDataItem): navItem is NavDataGroup =>
   'children' in navItem;

workspaces/frontend/src/app/NavSidebar.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 import {
+  Brand,
   Nav,
   NavExpandable,
   NavItem,
@@ -42,11 +43,19 @@ const NavGroup: React.FC<{ item: NavDataGroup }> = ({ item }) => {
 
 const NavSidebar: React.FC = () => {
   const navData = useNavData();
+
   return (
     <PageSidebar>
       <PageSidebarBody>
         <Nav id="nav-primary-simple">
           <NavList id="nav-list-simple">
+            <NavItem>
+              <Brand
+                className="kubeflow_brand"
+                src={`${window.location.origin}/images/logo.svg`}
+                alt="Kubeflow Logo"
+              />
+            </NavItem>
             {navData.map((item) =>
               isNavDataGroup(item) ? (
                 <NavGroup key={item.label} item={item} />

workspaces/frontend/src/app/const.ts

@@ -1 +1,10 @@
 export const BFF_API_VERSION = 'v1';
+
+export enum Theme {
+  Default = 'default-theme',
+  MUI = 'mui-theme',
+  // Future themes can be added here
+}
+
+export const isMUITheme = (): boolean => STYLE_THEME === Theme.MUI;
+const STYLE_THEME = process.env.STYLE_THEME || Theme.MUI;

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

@@ -7,7 +7,6 @@ import {
   TimestampTooltipVariant,
   Timestamp,
   Label,
-  Title,
   PaginationVariant,
   Pagination,
   Button,
@@ -372,8 +371,11 @@ export const Workspaces: React.FunctionComponent = () => {
       <DrawerContent panelContent={workspaceDetailsContent}>
         <DrawerContentBody>
           <PageSection isFilled>
-            <Title headingLevel="h1">Kubeflow Workspaces</Title>
-            <p>View your existing workspaces or create new workspaces.</p>
+            <Content>
+              <h1>Kubeflow Workspaces</h1>
+              <p>View your existing workspaces or create new workspaces.</p>
+            </Content>
+            <br />
             <Content style={{ display: 'flex', alignItems: 'flex-start', columnGap: '20px' }}>
               <Filter id="filter-workspaces" onFilter={onFilter} columnNames={filterableColumns} />
               <Button variant="primary" ouiaId="Primary">
@@ -443,6 +445,7 @@ export const Workspaces: React.FunctionComponent = () => {
               perPage={perPage}
               page={page}
               variant={PaginationVariant.bottom}
+              isCompact
               onSetPage={onSetPage}
               onPerPageSelect={onPerPageSelect}
             />

workspaces/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>Kubeflow Workspaces</title>
   <meta content="Kubeflow Workspaces" id="appName" name="application-name">

workspaces/frontend/src/index.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import App from './app/App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const theme = createTheme({ cssVariables: true });
+const root = ReactDOM.createRoot(document.getElementById('root')!);
 
 root.render(
   <React.StrictMode>
     <Router>
-      <App />
+      <ThemeProvider theme={theme}>
+        <App />
+      </ThemeProvider>
     </Router>
   </React.StrictMode>,
 );