[RHOAIENG-11447]: Identify and replace style overrides with MUI tokens (

#14)

* bump to mui v6 betas, update css values with MUI tokens, WIP

* use theme vars

* [WIP]: bump MUI v6 version, identify MUI tokens, declare other overrides at top of file

* add tabs tokens (#15)

* Add table tokens (#16)

* add table tokens, fix tests

* fix tests

* fix tests

* remove unused import

env.local

@@ -0,0 +1,2 @@
+OC_PROJECT=opendatahub
+NAMESPACE=jenny

frontend/package.json

@@ -99,9 +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",
+    "@mui/material": "6.0.0-rc.0",
+    "@mui/icons-material": "6.0.0-rc.0",
+    "@mui/types": "7.2.15",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.3.0",

frontend/src/app/Header.tsx

@@ -8,7 +8,6 @@ import {
   MastheadMain,
   MastheadToggle,
   PageToggleButton,
-  Switch,
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
 import { Link } from 'react-router-dom';

frontend/src/app/HeaderTools.tsx

@@ -43,7 +43,7 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
 
   React.useEffect(() => {
     window.isSwitched = !isChecked;
-  }, [window.isSwitched]);
+  }, [isChecked]);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(!checked);
@@ -147,13 +147,13 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
     <Toolbar isFullHeight>
       <ToolbarContent>
         <ToolbarItem>
-        <Switch
-          id="simple-switch"
-          label="Toggle MUI Theme"
-          isChecked={!isChecked}
-          onChange={handleChange}
-          ouiaId="BasicSwitch"
-        />
+          <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 ? (

frontend/src/components/DashboardDescriptionListGroup.tsx

@@ -97,7 +97,9 @@ const DashboardDescriptionListGroup: React.FC<DashboardDescriptionListGroupProps
       ) : (
         <DescriptionListTerm>{title}</DescriptionListTerm>
       )}
-      <DescriptionListDescription className={isEmpty && !isEditing ? text.textColorDisabledOnMd : ''}>
+      <DescriptionListDescription
+        className={isEmpty && !isEditing ? text.textColorDisabledOnMd : ''}
+      >
         {isEditing ? contentWhenEditing : isEmpty ? contentWhenEmpty : children}
       </DescriptionListDescription>
     </DescriptionListGroup>

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DrawerPanelBody, Tab, TabContent, Tabs } from '@patternfly/react-core';
 import SelectedNodeDetailsTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeDetailsTab';
 import SelectedNodeInputOutputTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab';
-import LogsTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab';
 import './PipelineRunDrawer.scss';
 import { PipelineTask } from '~/concepts/pipelines/topology';
 import { Execution } from '~/third_party/mlmd';
@@ -53,7 +52,7 @@ const PipelineRunDrawerRightTabs: React.FC<PipelineRunDrawerRightTabsProps> = ({
       title: 'Logs',
       isDisabled: !task.status?.podName,
       // content: <LogsTab task={task} />,
-      content: <></>
+      content: <></>,
     },
   };