fix(ws): Fix UI bugs in PF Theme (#306)

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

remove diff file

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

fix toolbar filter component structure

format document

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

fix formatting

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

Revert default theme to MUI

Author: jenny-s51

workspaces/frontend/src/app/App.tsx

@@ -2,9 +2,12 @@ import * as React from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
 import './app.css';
 import {
+  Brand,
   Flex,
   Masthead,
+  MastheadBrand,
   MastheadContent,
+  MastheadLogo,
   MastheadMain,
   MastheadToggle,
   Page,
@@ -13,6 +16,7 @@ import {
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
 import NamespaceSelector from '~/shared/components/NamespaceSelector';
+import logoDarkTheme from '~/images/logo-dark-theme.svg';
 import { NamespaceContextProvider } from './context/NamespaceContextProvider';
 import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
@@ -37,6 +41,15 @@ const App: React.FC = () => {
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
+        {!isMUITheme() ? (
+          <MastheadBrand>
+            <MastheadLogo component="a">
+              <Brand src={logoDarkTheme} alt="Kubeflow" heights={{ default: '36px' }} />
+            </MastheadLogo>
+          </MastheadBrand>
+        ) : (
+          ''
+        )}
       </MastheadMain>
       <MastheadContent>
         <Flex>

workspaces/frontend/src/app/NavSidebar.tsx

@@ -10,6 +10,7 @@ import {
   PageSidebarBody,
 } from '@patternfly/react-core';
 import { useNavData, isNavDataGroup, NavDataHref, NavDataGroup } from './AppRoutes';
+import { isMUITheme, LOGO_LIGHT } from './const';
 
 const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => (
   <NavItem key={item.label} data-id={item.label} itemId={item.label}>
@@ -49,13 +50,17 @@ const NavSidebar: React.FC = () => {
       <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>
+            {isMUITheme() ? (
+              <NavItem>
+                <Brand
+                  className="kubeflow_brand"
+                  src={`${window.location.origin}/images/${LOGO_LIGHT}`}
+                  alt="Kubeflow Logo"
+                />
+              </NavItem>
+            ) : (
+              ''
+            )}
             {navData.map((item) =>
               isNavDataGroup(item) ? (
                 <NavGroup key={item.label} item={item} />

workspaces/frontend/src/app/const.ts

@@ -8,3 +8,5 @@ export enum Theme {
 
 export const isMUITheme = (): boolean => STYLE_THEME === Theme.MUI;
 const STYLE_THEME = process.env.STYLE_THEME || Theme.MUI;
+
+export const LOGO_LIGHT = process.env.LOGO || 'logo.svg';

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

@@ -68,8 +68,8 @@ const WorkspaceCreation: React.FunctionComponent = () => {
 
   return (
     <>
-      <PageGroup stickyOnBreakpoint={{ default: 'top' }}>
-        <PageSection isFilled={false}>
+      <PageGroup isFilled={false} stickyOnBreakpoint={{ default: 'top' }}>
+        <PageSection>
           <Stack hasGutter>
             <StackItem>
               <Flex>

workspaces/frontend/src/images/logo-dark-theme.svg

@@ -199,8 +199,17 @@ const Filter: React.FC<FilterProps> = ({ id, onFilter, columnNames }) => {
     >
       <ToolbarContent>
         <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
-          <ToolbarItem id={`${id}-dropdown`}>{filterDropdown}</ToolbarItem>
           <ToolbarGroup variant="filter-group">
+            <ToolbarItem id={`${id}-dropdown`}>{filterDropdown}</ToolbarItem>
+            <ToolbarItem>
+              <SearchInput
+                id={`${id}-search-input`}
+                placeholder={`Filter by ${activeFilter.columnName}`}
+                value={searchValue}
+                onChange={(_event, value) => onSearchChange(value)}
+                onClear={() => onSearchChange('')}
+              />
+            </ToolbarItem>
             {filters.map((filter) => (
               <ToolbarFilter
                 key={`${filter.columnName}-filter`}
@@ -213,13 +222,6 @@ const Filter: React.FC<FilterProps> = ({ id, onFilter, columnNames }) => {
               </ToolbarFilter>
             ))}
           </ToolbarGroup>
-          <SearchInput
-            id={`${id}-search-input`}
-            placeholder={`Filter by ${activeFilter.columnName}`}
-            value={searchValue}
-            onChange={(_event, value) => onSearchChange(value)}
-            onClear={() => onSearchChange('')}
-          />
         </ToolbarToggleGroup>
       </ToolbarContent>
     </Toolbar>