add prop for className

kubeflow · Oct 8, 2024 · f033a9d · f033a9d
1 parent f6ac8d4
commit f033a9d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/...frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/...frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
@@ -15,6 +15,7 @@ import {
 import EmptyModelRegistryState from '~/app/pages/modelRegistry/screens/components/EmptyModelRegistryState';
 import RegisteredModelTable from './RegisteredModelTable';
 import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar';
+import FormFieldset from '../components/FormFieldset';
 
 type RegisteredModelListViewProps = {
   registeredModels: RegisteredModel[];
@@ -90,23 +91,22 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
         />
       </ToolbarFilter>
       <ToolbarItem variant="label-group">
-        <div className="toolbar-fieldset-wrapper">
-          <TextInput
-            value={search}
-            type="text"
-            onChange={(_, searchValue) => {
-              setSearch(searchValue);
-            }}
-            style={{ minWidth: '200px' }}
-            data-testid="registered-model-table-search"
-            aria-label="Search"
-          />
-          <fieldset aria-hidden="true" className="form-fieldset">
-            <legend className="form-fieldset-legend">
-              <span>{`Find by ${searchType.toLowerCase()}`}</span>
-            </legend>
-          </fieldset>
-        </div>
+        <FormFieldset
+          className="toolbar-fieldset-wrapper"
+          component={
+            <TextInput
+              value={search}
+              type="text"
+              onChange={(_, searchValue) => {
+                setSearch(searchValue);
+              }}
+              style={{ minWidth: '200px' }}
+              data-testid="registered-model-table-search"
+              aria-label="Search"
+            />
+          }
+          field={`Find by ${searchType.toLowerCase()}`}
+        />
       </ToolbarItem>
     </ToolbarGroup>
   );

diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/FormFieldset.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/FormFieldset.tsx
@@ -3,11 +3,12 @@ import React, { ReactNode } from 'react';
 interface FormFieldsetProps {
   component: ReactNode;
   field: string;
+  className?: string;
 }
 
-const FormFieldset: React.FC<FormFieldsetProps> = ({ component, field }) => {
+const FormFieldset: React.FC<FormFieldsetProps> = ({ component, field, className }) => {
   return (
-    <div className="form-fieldset-wrapper">
+    <div className={className ?? 'form-fieldset-wrapper'}>
       {component}
       <fieldset aria-hidden="true" className="form-fieldset">
         <legend className="form-fieldset-legend">