[RHOAIENG-10305]: Apply token theming to RegisteredModelListView.tsx

frontend/package.json

@@ -52,15 +52,17 @@
     "cypress:format": "prettier --write src/__tests__/**/*.snap.json"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "@monaco-editor/react": "^4.6.0",
     "@openshift/dynamic-plugin-sdk": "^4.0.0",
     "@openshift/dynamic-plugin-sdk-utils": "^4.0.1",
-    "@patternfly/patternfly": "6.0.0-alpha.202",
+    "@patternfly/patternfly": "6.0.0-alpha.205",
     "@patternfly/quickstarts": "6.0.0-alpha.2",
     "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4",
     "@patternfly/react-charts": "8.0.0-alpha.33",
     "@patternfly/react-code-editor": "6.0.0-alpha.90",
-    "@patternfly/react-core": "6.0.0-alpha.90",
+    "@patternfly/react-core": "6.0.0-alpha.94",
     "@patternfly/react-drag-drop": "6.0.0-alpha.72",
     "@patternfly/react-icons": "6.0.0-alpha.31",
     "@patternfly/react-log-viewer": "6.0.0-alpha.2",
@@ -97,6 +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",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.3.0",
@@ -196,7 +201,7 @@
       "react-router": "^6.4.1",
       "react": "^18.2.0",
       "react-dom": "^18.2.0",
-      "@patternfly/react-core": "6.0.0-alpha.90",
+      "@patternfly/react-core": "6.0.0-alpha.94",
       "@patternfly/react-styles": "6.0.0-alpha.30",
       "@patternfly/react-table": "6.0.0-alpha.91",
       "@patternfly/react-icons": "6.0.0-alpha.31",
@@ -206,7 +211,7 @@
       "react": "^18.2.0"
     },
     "@patternfly/quickstarts": {
-      "@patternfly/react-core": "6.0.0-alpha.90"
+      "@patternfly/react-core": "6.0.0-alpha.94"
     },
     "ws": "^8.17.1"
   }

frontend/src/app/Header.tsx

@@ -4,9 +4,11 @@
   Masthead,
   MastheadBrand,
   MastheadContent,
+  MastheadLogo,
   MastheadMain,
   MastheadToggle,
   PageToggleButton,
+  Switch,
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
 import { Link } from 'react-router-dom';
@@ -18,6 +20,12 @@
   onNotificationsClick: () => void;
 };
 
+declare global {
+  interface Window {
+    isSwitched?: boolean;
+  }
+}
+
 const MastheadBranchComponent: React.FC<React.ComponentProps<typeof Link>> = (props) => (
   <Link {...props} to="/" />
 );
@@ -26,20 +34,26 @@
   const { isAllowed } = useUser();
   return (
     <Masthead role="banner" aria-label="page masthead">
-      {isAllowed && (
-        <MastheadToggle>
-          <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
-      )}
       <MastheadMain>
-        <MastheadBrand component={MastheadBranchComponent}>
-          <Brand
-            className="odh-dashboard__brand"
-            src={`${window.location.origin}/images/${ODH_LOGO}`}
-            alt={`${ODH_PRODUCT_NAME} Logo`}
-          />
+        {isAllowed && (
+          <MastheadToggle>
+            <PageToggleButton
+              id="page-nav-toggle"
+              variant="plain"
+              aria-label="Dashboard navigation"
+            >
+              <BarsIcon />
+            </PageToggleButton>
+          </MastheadToggle>
+        )}
+        <MastheadBrand>
+          <MastheadLogo component={MastheadBranchComponent}>
+            <Brand
+              className="odh-dashboard__brand"
+              src={`${window.location.origin}/images/${ODH_LOGO}`}
+              alt={`${ODH_PRODUCT_NAME} Logo`}
+            />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>

frontend/src/app/HeaderTools.tsx

@@ -12,6 +12,7 @@
   DropdownItem,
   Dropdown,
   DropdownList,
+  Switch,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon, QuestionCircleIcon } from '@patternfly/react-icons';
 import { COMMUNITY_LINK, DOC_LINK, SUPPORT_LINK, DEV_MODE, EXT_CLUSTER } from '~/utilities/const';
@@ -38,6 +39,17 @@
   const { dashboardConfig } = useAppContext();
   const notification = useNotification();
 
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    window.isSwitched = !isChecked;
+  }, [window.isSwitched]);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(!checked);
+    document.documentElement.classList.toggle('mui-theme');
+  };
+
   const newNotifications = React.useMemo(
     () => notifications.filter((currentNotification) => !currentNotification.read).length,
     [notifications],
@@ -134,6 +146,15 @@
   return (
     <Toolbar isFullHeight>
       <ToolbarContent>
+        <ToolbarItem>
+        <Switch
+          id="simple-switch"
+          label="Toggle MUI Theme"
+          isChecked={!isChecked}
+          onChange={handleChange}
+          ouiaId="BasicSwitch"
+        />
+        </ToolbarItem>
         <ToolbarGroup variant="action-group-plain" align={{ default: 'alignEnd' }}>
           {!dashboardConfig.spec.dashboardConfig.disableAppLauncher ? (
             <ToolbarItem data-testid="application-launcher">

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx

@@ -52,7 +52,8 @@ const PipelineRunDrawerRightTabs: React.FC<PipelineRunDrawerRightTabsProps> = ({
     [PipelineRunNodeTab.LOGS]: {
       title: 'Logs',
       isDisabled: !task.status?.podName,
-      content: <LogsTab task={task} />,
+      // content: <LogsTab task={task} />,
+      content: <></>
     },
   };
 

frontend/src/index.html

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <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" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#ffffff" />