Update ThemeAwareFormGroupWrapper usage and imports

clients/ui/frontend/src/app/app.css

@@ -3,3 +3,13 @@ body,
 #root {
   height: 100%;
 }
+
+.toolbar-fieldset-wrapper {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.toolbar-fieldset-wrapper > .pf-v6-c-input-group__item:not(.pf-m-search-action) {
+  flex: 1 1 0;
+  min-width: 0;
+}

clients/ui/frontend/src/app/pages/modelCatalogSettings/components/SourceDetailsSection.tsx

@@ -9,8 +9,7 @@ import {
   Flex,
   FlexItem,
 } from '@patternfly/react-core';
-import { UpdateObjectAtPropAndValue } from 'mod-arch-shared';
-import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { UpdateObjectAtPropAndValue, ThemeAwareFormGroupWrapper } from 'mod-arch-shared';
 import FormSection from '~/app/pages/modelRegistry/components/pf-overrides/FormSection';
 import { ManageSourceFormData } from '~/app/pages/modelCatalogSettings/useManageSourceData';
 import {
@@ -55,24 +54,31 @@ const SourceDetailsSection: React.FC<SourceDetailsSectionProps> = ({
     />
   );
 
+  const nameHelperTextNode = hasNameError ? (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem variant="error" data-testid="source-name-error">
+          {isSourceNameEmpty(formData.name)
+            ? VALIDATION_MESSAGES.NAME_REQUIRED
+            : formData.name.length > SOURCE_NAME_CHARACTER_LIMIT
+              ? `Cannot exceed ${SOURCE_NAME_CHARACTER_LIMIT} characters`
+              : null}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  ) : undefined;
+
   return (
     <FormSection>
-      <FormGroup label={FORM_LABELS.NAME} isRequired fieldId="source-name">
-        <FormFieldset component={nameInput} field="Name" data-testid="source-name-readonly" />
-        {hasNameError && (
-          <FormHelperText>
-            <HelperText>
-              <HelperTextItem variant="error" data-testid="source-name-error">
-                {isSourceNameEmpty(formData.name)
-                  ? VALIDATION_MESSAGES.NAME_REQUIRED
-                  : formData.name.length > SOURCE_NAME_CHARACTER_LIMIT
-                    ? `Cannot exceed ${SOURCE_NAME_CHARACTER_LIMIT} characters`
-                    : null}
-              </HelperTextItem>
-            </HelperText>
-          </FormHelperText>
-        )}
-      </FormGroup>
+      <ThemeAwareFormGroupWrapper
+        label={FORM_LABELS.NAME}
+        fieldId="source-name"
+        isRequired
+        hasError={hasNameError}
+        helperTextNode={nameHelperTextNode}
+      >
+        {nameInput}
+      </ThemeAwareFormGroupWrapper>
 
       <FormGroup
         label={FORM_LABELS.SOURCE_TYPE}

clients/ui/frontend/src/app/pages/modelCatalogSettings/components/YamlSection.tsx

@@ -11,9 +11,8 @@ import {
   HelperTextItem,
 } from '@patternfly/react-core';
 import { OpenDrawerRightIcon } from '@patternfly/react-icons';
-import { UpdateObjectAtPropAndValue } from 'mod-arch-shared';
+import { UpdateObjectAtPropAndValue, FormFieldset } from 'mod-arch-shared';
 import { useThemeContext } from 'mod-arch-kubeflow';
-import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 import FormSection from '~/app/pages/modelRegistry/components/pf-overrides/FormSection';
 import { ManageSourceFormData } from '~/app/pages/modelCatalogSettings/useManageSourceData';
 import { validateYamlContent } from '~/app/pages/modelCatalogSettings/utils/validation';
@@ -152,7 +151,7 @@ const YamlSection: React.FC<YamlSectionProps> = ({
         isRequired
         fieldId="yaml-content"
       >
-        <FormFieldset component={yamlInput} field="YAML" />
+        {isMUITheme ? <FormFieldset component={yamlInput} field="YAML" /> : yamlInput}
         {yamlHelperTxtNode}
       </FormGroup>
     </FormSection>

clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { FormGroup, TextInput } from '@patternfly/react-core';
-import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { TextInput } from '@patternfly/react-core';
+import { ThemeAwareFormGroupWrapper } from 'mod-arch-shared';
 
 type PrefilledModelRegistryFieldProps = {
   mrName?: string;
@@ -12,9 +12,14 @@ const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> =
   );
 
   return (
-    <FormGroup className="form-group-disabled" label="Model registry" isRequired fieldId="mr-name">
-      <FormFieldset component={mrNameInput} field="Model Registry" />
-    </FormGroup>
+    <ThemeAwareFormGroupWrapper
+      className="form-group-disabled"
+      label="Model registry"
+      fieldId="mr-name"
+      isRequired
+    >
+      {mrNameInput}
+    </ThemeAwareFormGroupWrapper>
   );
 };
 

clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModelDetailsFormSection.tsx

@@ -7,8 +7,12 @@ import {
   TextInput,
 } from '@patternfly/react-core';
 import React from 'react';
-import { UpdateObjectAtPropAndValue } from 'mod-arch-shared';
-import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import {
+  UpdateObjectAtPropAndValue,
+  FormFieldset,
+  ThemeAwareFormGroupWrapper,
+} from 'mod-arch-shared';
+import { useThemeContext } from 'mod-arch-kubeflow';
 import FormSection from '~/app/pages/modelRegistry/components/pf-overrides/FormSection';
 import { MR_CHARACTER_LIMIT } from './const';
 import RegisterModelTypeField from './RegisterModelTypeField';
@@ -32,6 +36,8 @@ const RegisterModelDetailsFormSection = <D extends RegisterModelFormData>({
   isModelTypeRequired = false,
   isModelTypeReadOnly = false,
 }: RegisterModelDetailsFormSectionProp<D>): React.ReactNode => {
+  const { isMUITheme } = useThemeContext();
+
   const modelNameInput = (
     <TextInput
       isRequired
@@ -55,32 +61,47 @@ const RegisterModelDetailsFormSection = <D extends RegisterModelFormData>({
     />
   );
 
+  const modelNameHelperTextNode = hasModelNameError ? (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem variant="error" data-testid="model-name-error">
+          {isModelNameDuplicate
+            ? 'Model name already exists'
+            : `Cannot exceed ${MR_CHARACTER_LIMIT} characters`}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  ) : undefined;
+
+  const modelDescriptionHelperTextNode = (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem>Enter a brief summary of the model&apos;s key details.</HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  );
+
   return (
     <FormSection
       title="Model details"
       description="Provide model details that apply to every version of this model."
     >
-      <FormGroup label="Model name" isRequired fieldId="model-name">
-        <FormFieldset component={modelNameInput} field="Model Name" />
-        {hasModelNameError && (
-          <FormHelperText>
-            <HelperText>
-              <HelperTextItem variant="error" data-testid="model-name-error">
-                {isModelNameDuplicate
-                  ? 'Model name already exists'
-                  : `Cannot exceed ${MR_CHARACTER_LIMIT} characters`}
-              </HelperTextItem>
-            </HelperText>
-          </FormHelperText>
-        )}
-      </FormGroup>
+      <ThemeAwareFormGroupWrapper
+        label="Model name"
+        fieldId="model-name"
+        isRequired
+        hasError={hasModelNameError}
+        helperTextNode={modelNameHelperTextNode}
+      >
+        {modelNameInput}
+      </ThemeAwareFormGroupWrapper>
       <FormGroup label="Model description" fieldId="model-description">
-        <FormFieldset component={modelDescriptionInput} field="Model Description" />
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem>Enter a brief summary of the model&apos;s key details.</HelperTextItem>
-          </HelperText>
-        </FormHelperText>
+        {isMUITheme ? (
+          <FormFieldset component={modelDescriptionInput} field="Model Description" />
+        ) : (
+          modelDescriptionInput
+        )}
+        {modelDescriptionHelperTextNode}
       </FormGroup>
       <RegisterModelTypeField
         modelCustomProperties={formData.modelCustomProperties}

clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModelTypeField.tsx

@@ -1,11 +1,9 @@
-import { FormGroup } from '@patternfly/react-core';
 import React from 'react';
-import { SimpleSelect } from 'mod-arch-shared';
+import { SimpleSelect, ThemeAwareFormGroupWrapper } from 'mod-arch-shared';
 import { SimpleSelectOption } from 'mod-arch-shared/dist/components/SimpleSelect';
 import { ModelRegistryCustomProperties } from '~/app/types';
 import { ModelType } from '~/concepts/modelCatalog/const';
 import { formatModelTypeDisplay } from '~/app/pages/modelCatalog/utils/modelCatalogUtils';
-import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 import {
   buildCustomPropertiesWithModelType,
   getModelTypeStoredValueFromCustomProperties,
@@ -55,25 +53,24 @@ const RegisterModelTypeField: React.FC<RegisterModelTypeFieldProps> = ({
   };
 
   return (
-    <FormGroup label="Model type" isRequired={isRequired} fieldId="register-model-type">
-      <FormFieldset
-        field="Model type"
-        component={
-          <SimpleSelect
-            options={selectOptions}
-            value={stored ?? undefined}
-            onChange={handleChange}
-            placeholder="Select model type"
-            isFullWidth
-            isDisabled={isReadOnly}
-            dataTestId="register-model-type-select"
-            previewDescription={false}
-            popperProps={{ direction: 'down' }}
-            toggleProps={{ id: 'register-model-type-toggle' }}
-          />
-        }
+    <ThemeAwareFormGroupWrapper
+      label="Model type"
+      fieldId="register-model-type"
+      isRequired={isRequired}
+    >
+      <SimpleSelect
+        options={selectOptions}
+        value={stored ?? undefined}
+        onChange={handleChange}
+        placeholder="Select model type"
+        isFullWidth
+        isDisabled={isReadOnly}
+        dataTestId="register-model-type-select"
+        previewDescription={false}
+        popperProps={{ direction: 'down' }}
+        toggleProps={{ id: 'register-model-type-toggle' }}
       />
-    </FormGroup>
+    </ThemeAwareFormGroupWrapper>
   );
 };
 

clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { FormGroup, TextInput } from '@patternfly/react-core';
-import { TypeaheadSelect } from 'mod-arch-shared';
+import { TextInput } from '@patternfly/react-core';
+import { ThemeAwareFormGroupWrapper, TypeaheadSelect } from 'mod-arch-shared';
 import { TypeaheadSelectOption } from 'mod-arch-shared/dist/components/TypeaheadSelect';
 import { RegisteredModel } from '~/app/types';
-import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 
 type RegisteredModelSelectorProps = {
   registeredModels: RegisteredModel[];
@@ -46,9 +45,14 @@ const RegisteredModelSelector: React.FC<RegisteredModelSelectorProps> = ({
         See related PatternFly issue https://github.com/patternfly/patternfly-react/issues/10842
     */
     return (
-      <FormGroup label="Model name" className="form-group-disabled" isRequired fieldId="model-name">
-        <FormFieldset component={modelNameInput} field="Model Name" />
-      </FormGroup>
+      <ThemeAwareFormGroupWrapper
+        label="Model name"
+        className="form-group-disabled"
+        fieldId="model-name"
+        isRequired
+      >
+        {modelNameInput}
+      </ThemeAwareFormGroupWrapper>
     );
   }