fix(ws): add secrets field to backend API schema (kubeflow#331)

andyatmiami · jenny-s51 · commit c96705b3670e · 2025-05-16T16:00:12.000-04:00
related: kubeflow#239 This commit brings partial support for secrets to the backend API. It enables the `frontend` component to successfully create a Workspace through the "wizard flow". **HOWEVER**, it is important to note this secrets attribute is not supported within the `controller` component yet - as kubeflow#240 is not yet merged. To unblock the `frontend` - the logic contained in this commit simply adds the necessary scaffolding to accept the `secrets` attribute defined within `volumes`. Once umarshalled, the backend essentially ignores this data. Code to fully enable the end to end flow is included in this PR - but simply commented out with `TODO:` comments denoting what can be uncommented once kubeflow#240 is merged into `notebooks-v2`. A test is also presently disabled with `XIt` - and can also be enabled when required code present. Changes were initially coded against the branch provided on kubeflow#240 to verify full end-to-end behavior. Once confirmed, commit was rebased onto `notebooks-v2`, relevant code commented out as described above, and behavior retested to ensure desired outcome. In summary, with these changes: - `backend` API accepts `volumes.secrets` in the _Create_ payload - secrets data is **NOT USED** when programmatically constructing the Workspace CR - Resultant workspace has no `secrets` data - irrespective of it if was provided in the payload or not. Signed-off-by: Andy Stoneberg <astonebe@redhat.com> Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> feat(ws): Add theme dependent components Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix linting errors Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> move button to toolbargroup to fix toolbar alignment fix search input height fix frontend tests Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix testing issues Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> add export default to ThemeAwareSearchInput Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix linting issues fix import add ID
diff --git a/workspaces/frontend/src/app/components/FormFieldset.tsx b/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;
diff --git a/workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx b/workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { SearchInput, SearchInputProps, TextInput } from '@patternfly/react-core';
+import FormFieldset from 'app/components/FormFieldset';
+import { isMUITheme } from 'app/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;
diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx
@@ -8,7 +8,6 @@ import {
   Brand,
   Tooltip,
   Label,
-  SearchInput,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -44,6 +43,7 @@ import { WorkspaceKind } from '~/shared/api/backendApiTypes';
 import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds';
 import { useWorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
 import { WorkspaceKindsColumnNames } from '~/app/types';
+import ThemeAwareSearchInput from '~/app/components/ThemeAwareSearchInput';
 
 export enum ActionType {
   ViewDetails,
@@ -178,32 +178,6 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
     [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);
@@ -509,7 +483,15 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
                         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={
@@ -522,7 +504,15 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
                         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[])}
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
@@ -9,7 +9,6 @@ import {
   Label,
   PaginationVariant,
   Pagination,
-  Button,
   Content,
   Brand,
   Tooltip,
@@ -32,8 +31,7 @@ import {
   QuestionCircleIcon,
   CodeIcon,
 } from '@patternfly/react-icons';
-import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 import { Workspace, WorkspaceState } from '~/shared/api/backendApiTypes';
 import { WorkspaceDetails } from '~/app/pages/Workspaces/Details/WorkspaceDetails';
 import { ExpandedWorkspaceRow } from '~/app/pages/Workspaces/ExpandedWorkspaceRow';
@@ -63,11 +61,6 @@ export enum ActionType {
 }
 
 export const Workspaces: React.FunctionComponent = () => {
-  const navigate = useNavigate();
-  const createWorkspace = useCallback(() => {
-    navigate('/workspaces/create');
-  }, [navigate]);
-
   const [workspaceKinds] = useWorkspaceKinds();
   const kindLogoDict = buildKindLogoDictionary(workspaceKinds);
   const workspaceRedirectStatus = buildWorkspaceRedirectStatus(workspaceKinds);
@@ -455,9 +448,6 @@ export const Workspaces: React.FunctionComponent = () => {
             <br />
             <Content style={{ display: 'flex', alignItems: 'flex-start', columnGap: '20px' }}>
               <Filter id="filter-workspaces" onFilter={onFilter} columnNames={filterableColumns} />
-              <Button variant="primary" ouiaId="Primary" onClick={createWorkspace}>
-                Create Workspace
-              </Button>
             </Content>
             <Table aria-label="Sortable table" ouiaId="SortableTable">
               <Thead>
diff --git a/workspaces/frontend/src/shared/components/Filter.tsx b/workspaces/frontend/src/shared/components/Filter.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {
+  Button,
   Menu,
   MenuContent,
   MenuItem,
   MenuList,
   MenuToggle,
   MenuToggleElement,
   Popper,
-  SearchInput,
   Toolbar,
   ToolbarContent,
   ToolbarFilter,
@@ -16,6 +16,9 @@ import {
   ToolbarToggleGroup,
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
+import { useNavigate } from 'react-router';
+import { useCallback } from 'react';
+import ThemeAwareSearchInput from '~/app/components/ThemeAwareSearchInput';
 
 export interface FilterProps {
   id: string;
@@ -41,6 +44,11 @@ const Filter: React.FC<FilterProps> = ({ id, onFilter, columnNames }) => {
   const filterMenuRef = React.useRef<HTMLDivElement | null>(null);
   const filterContainerRef = React.useRef<HTMLDivElement | null>(null);
 
+  const navigate = useNavigate();
+  const createWorkspace = useCallback(() => {
+    navigate('/workspaces/create');
+  }, [navigate]);
+
   const handleFilterMenuKeys = React.useCallback(
     (event: KeyboardEvent) => {
       if (!isFilterMenuOpen) {
@@ -202,12 +210,13 @@ const Filter: React.FC<FilterProps> = ({ id, onFilter, columnNames }) => {
           <ToolbarGroup variant="filter-group">
             <ToolbarItem id={`${id}-dropdown`}>{filterDropdown}</ToolbarItem>
             <ToolbarItem>
-              <SearchInput
+              <ThemeAwareSearchInput
                 id={`${id}-search-input`}
-                placeholder={`Filter by ${activeFilter.columnName}`}
                 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}`}
               />
             </ToolbarItem>
             {filters.map((filter) => (
@@ -222,6 +231,9 @@ const Filter: React.FC<FilterProps> = ({ id, onFilter, columnNames }) => {
               </ToolbarFilter>
             ))}
           </ToolbarGroup>
+          <Button variant="primary" ouiaId="Primary" onClick={createWorkspace}>
+            Create Workspace
+          </Button>
         </ToolbarToggleGroup>
       </ToolbarContent>
     </Toolbar>
diff --git a/workspaces/frontend/src/shared/style/MUI-theme.scss b/workspaces/frontend/src/shared/style/MUI-theme.scss
@@ -573,7 +573,7 @@
 
 }
 
-.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info, 
+.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info,
 .mui-theme .pf-v6-c-progress-stepper__step.pf-m-success {
   --pf-v6-c-progress-stepper__step-icon--BackgroundColor: var(--mui-palette-primary-main);
   --pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-common-white);
@@ -828,4 +828,13 @@
   .mui-theme .pf-v6-c-masthead {
     padding-left: var(--kf-central-app-drawer-width);
   }
+}
+
+.mui-theme .pf-v6-c-toolbar__group.pf-m-filter-group .pf-v6-c-form-control {
+
+  // Override default form control padding to match button padding in this context
+  --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
+  --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
+
+
 }
