feat(ws): Apply theme dependent components

workspaces/frontend/src/app/components/FormFieldset.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+
+interface FormFieldsetProps {
+  component: ReactNode;
+  field?: string;
+  className?: string;
+}
+
+const FormFieldset: React.FC<FormFieldsetProps> = ({ component, field, className }) => (
+  <div className={className ?? 'form-fieldset-wrapper'}>
+    {component}
+    <fieldset aria-hidden="true" className="form-fieldset">
+      {field && (
+        <legend className="form-fieldset-legend">
+          <span>{field}</span>
+        </legend>
+      )}
+    </fieldset>
+  </div>
+);
+
+export default FormFieldset;

workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { SearchInput, SearchInputProps, TextInput } from '@patternfly/react-core';
+import FormFieldset from "./FormFieldset";
+import { isMUITheme } from "../const";
+
+type ThemeAwareSearchInputProps = Omit<SearchInputProps, 'onChange' | 'onClear'> & {
+  onChange: (value: string) => void; // Simplified onChange signature
+  onClear?: () => void; // Simplified optional onClear signature
+  fieldLabel?: string; // Additional prop for MUI FormFieldset label
+  'data-testid'?: string;
+};
+
+const ThemeAwareSearchInput: React.FC<ThemeAwareSearchInputProps> = ({
+  value,
+  onChange,
+  onClear,
+  fieldLabel,
+  placeholder,
+  isDisabled,
+  className,
+  style,
+  'aria-label': ariaLabel = 'Search',
+  'data-testid': dataTestId,
+  ...rest
+}) => {
+
+  if (isMUITheme()) {
+    // Render MUI version using TextInput + FormFieldset
+    return (
+      <FormFieldset
+        className={className}
+        field={fieldLabel}
+        component={
+          <TextInput
+            value={value}
+            type="text"
+            onChange={(_event, newValue) => onChange(newValue)} // Adapt signature
+            isDisabled={isDisabled}
+            aria-label={ariaLabel}
+            data-testid={dataTestId}
+            style={style}
+          />
+        }
+      />
+    );
+  }
+
+  // Render PF version using SearchInput
+  return (
+    <SearchInput
+      {...rest} // Pass all other applicable SearchInputProps
+      className={className}
+      style={style}
+      placeholder={placeholder}
+      value={value}
+      isDisabled={isDisabled}
+      aria-label={ariaLabel}
+      data-testid={dataTestId}
+      onChange={(_event, newValue) => onChange(newValue)} // Adapt signature
+      onClear={(event) => {
+        event.stopPropagation();
+        onChange('');
+        onClear?.(); // Adapt signature
+      }}
+    />
+  );
+};
+
+export default ThemeAwareSearchInput;

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

@@ -8,7 +8,7 @@
   Brand,
   Tooltip,
   Label,
   SearchInput,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -41,6 +41,7 @@
 } from '@patternfly/react-table';
 import { CodeIcon, FilterIcon, SearchIcon } from '@patternfly/react-icons';
 import { WorkspaceKind, WorkspaceKindsColumnNames } from '~/shared/types';
+import ThemeAwareSearchInput from '~/app/components/ThemeAwareSearchInput';
 
 export enum ActionType {
   ViewDetails,
@@ -245,32 +246,6 @@
     [sortedWorkspaceKinds, onFilter],
   );
 
-  // Set up name search input
-  const searchNameInput = React.useMemo(
-    () => (
-      <SearchInput
-        placeholder="Filter by name"
-        value={searchNameValue}
-        onChange={(_event, value) => onSearchNameChange(value)}
-        onClear={() => onSearchNameChange('')}
-      />
-    ),
-    [searchNameValue, onSearchNameChange],
-  );
-
-  // Set up description search input
-  const searchDescriptionInput = React.useMemo(
-    () => (
-      <SearchInput
-        placeholder="Filter by description"
-        value={searchDescriptionValue}
-        onChange={(_event, value) => onSearchDescriptionChange(value)}
-        onClear={() => onSearchDescriptionChange('')}
-      />
-    ),
-    [searchDescriptionValue, onSearchDescriptionChange],
-  );
-
   // Set up status single select
   const [isStatusMenuOpen, setIsStatusMenuOpen] = React.useState<boolean>(false);
   const statusToggleRef = React.useRef<HTMLButtonElement>(null);
@@ -568,7 +543,15 @@
                         categoryName="Name"
                         showToolbarItem={activeAttributeMenu === 'Name'}
                       >
-                        {searchNameInput}
+                        <ToolbarItem>
+                          <ThemeAwareSearchInput
+                            value={searchNameValue}
+                            onChange={onSearchNameChange}
+                            placeholder="Filter by Name"
+                            fieldLabel="Find by Name"
+                            aria-label="Filter by Name"
+                          />
+                        </ToolbarItem>
                       </ToolbarFilter>
                       <ToolbarFilter
                         labels={
@@ -581,7 +564,15 @@
                         categoryName="Description"
                         showToolbarItem={activeAttributeMenu === 'Description'}
                       >
-                        {searchDescriptionInput}
+                        <ToolbarItem>
+                          <ThemeAwareSearchInput
+                            value={searchDescriptionValue}
+                            onChange={onSearchDescriptionChange}
+                            placeholder="Filter by Description"
+                            fieldLabel="Find by Description"
+                            aria-label="Filter by Description"
+                          />
+                        </ToolbarItem>
                       </ToolbarFilter>
                       <ToolbarFilter
                         labels={statusSelection !== '' ? [statusSelection] : ([] as string[])}

workspaces/frontend/src/shared/components/Filter.tsx

@@ -7,7 +7,6 @@ import {
   MenuToggle,
   MenuToggleElement,
   Popper,
-  SearchInput,
   Toolbar,
   ToolbarContent,
   ToolbarFilter,
@@ -16,6 +15,7 @@ import {
   ToolbarToggleGroup,
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
+import ThemeAwareSearchInput from '~/app/components/ThemeAwareSearchInput';
 
 export interface FilterProps {
   id: string;
@@ -213,12 +213,12 @@ const Filter: React.FC<FilterProps> = ({ id, onFilter, columnNames }) => {
               </ToolbarFilter>
             ))}
           </ToolbarGroup>
-          <SearchInput
-            id={`${id}-search-input`}
-            placeholder={`Filter by ${activeFilter.columnName}`}
+          <ThemeAwareSearchInput
             value={searchValue}
-            onChange={(_event, value) => onSearchChange(value)}
-            onClear={() => onSearchChange('')}
+            onChange={onSearchChange}
+            placeholder={`Filter by ${activeFilter.columnName}`}
+            fieldLabel={`Find by ${activeFilter.columnName}`}
+            aria-label={`Filter by ${activeFilter.columnName}`}
           />
         </ToolbarToggleGroup>
       </ToolbarContent>