From 404fd9056aba9ffcd12f3169b25f014c167aef8a Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Mon, 16 Sep 2024 16:21:53 -0400
Subject: [PATCH 1/9] WIP label theming

---
 .../screens/RegisteredModels/MUI-theme.scss   | 46 +++++++++++++------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
index 97bfe26bb3..a88e37db16 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
+++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
@@ -135,28 +135,44 @@
   margin-bottom: 20px;
 }
 
+
+
 .mui-theme .pf-v6-c-form__label {
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 40%;
+  left: 12px;
   font-size: 14px;
   color: #757575; /* MUI label color */
   pointer-events: none;
   transition: all 0.2s ease;
-  transform-origin: left top;
-  transform: translateY(-50%) translateX(12px);
-  background-color: white; /* Ensure label background matches input */
-  padding: 0 4px; /* Space between label text and border */
-}
-
-.mui-theme .form-input {
-  border: 1px solid #ccc; /* Border color */
-  border-radius: 4px; /* Rounded corners */
-  padding: 12px 12px 12px 12px; /* Adjust padding to fit label */
-  font-size: 16px; /* Font size for input text */
-  width: 100%; /* Full width of parent */
-  box-sizing: border-box; /* Include padding and border in element’s total width and height */
+  transform-origin: left center;
+  transform: translateY(-50%) scale(0.75);
+  background-color: white;
+  padding: 0 4px;
+  z-index: 1;
+}
+
+.mui-theme .pf-v6-c-form-control {
+  font-size: 16px;
+  width: 100%;
+  box-sizing: border-box;
   transition: border-color 0.2s ease;
+  line-height: 1.5; /* Ensure consistency in line height */
+}
+
+.mui-theme .pf-v6-c-form-control:hover {
+  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-common-black);
+}
+
+mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus + .pf-v6-c-form__label,
+.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
+  color: var(--mui-palette-primary-light); /* MUI blue for focused/active label */
+}
+
+.pf-v6-c-form__group .pf-v6-c-form-control:focus,
+.pf-v6-c-form__group .pf-v6-c-form-control:active
+ {
+  border: 2px solid var(--mui-palette-primary-light); /* Blue border when focused */
 }
 
 

From 3e7c9e6d5ca4e6328c0f760817aaf614877362f2 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 17 Sep 2024 16:06:23 -0400
Subject: [PATCH 2/9] update border states to match MUI colors and styling when
 focused, label alignment and colors WIP

---
 .../screens/RegisteredModels/MUI-theme.scss   | 59 ++++++++++++++++---
 1 file changed, 52 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
index a88e37db16..5f4c72202d 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
+++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
@@ -96,6 +96,10 @@
   --pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main);
   --pf-t--global--text--color--inverse: var(--mui-palette-common-white);
 
+  --pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif;
+  --pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif;
+  --pf-t--global--font--family--300: Roboto, Courier, monospace;
+
 }
 
 .mui-theme .pf-v6-c-alert {
@@ -135,8 +139,6 @@
   margin-bottom: 20px;
 }
 
-
-
 .mui-theme .pf-v6-c-form__label {
   position: absolute;
   top: 40%;
@@ -160,19 +162,58 @@
   line-height: 1.5; /* Ensure consistency in line height */
 }
 
+/* Adjust the label when the textarea is a child of .form__group-control */
+.mui-theme .pf-v6-c-form__group-control textarea {
+  position: relative; /* Make sure textarea is positioned relative */
+  padding-top: 24px; /* Space for the label */
+  box-sizing: border-box; /* Include padding in element’s width */
+}
+
+.mui-theme .pf-v6-c-form-control>:is(input,select,textarea):focus {
+  --pf-v6-c-form-control--OutlineOffset: none;
+  outline: none;
+}
+
+.mui-theme .pf-v6-c-form__group-control textarea ~ .pf-v6-c-form__label {
+  top: 10%; /* Adjust based on the height of the textarea */
+  transform: translateY(-50%) scale(0.75);
+}
 .mui-theme .pf-v6-c-form-control:hover {
-  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-common-black);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--mui-palette-common-black);
 }
 
-mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus + .pf-v6-c-form__label,
+mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
 .pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
   color: var(--mui-palette-primary-light); /* MUI blue for focused/active label */
 }
 
-.pf-v6-c-form__group .pf-v6-c-form-control:focus,
-.pf-v6-c-form__group .pf-v6-c-form-control:active
+.pf-v6-c-form__group .pf-v6-c-form-control:focus-within
  {
-  border: 2px solid var(--mui-palette-primary-light); /* Blue border when focused */
+  --pf-v6-c-form-control--after--BorderWidth: 2px;
+  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-light);
+}
+
+/* Styles for disabled state */
+.mui-theme .pf-v6-c-form-control.pf-m-disabled input {
+    background-color: #f5f5f5; /* Light grey background */
+    color: #a0a0a0; /* Grey text color */
+    cursor: not-allowed; /* Indicate disabled state */
+    border: none; /* Remove default border */
+    border-bottom: 1px dotted #dcdcdc; /* Dotted bottom border */
+    padding: 12px 0; /* Adjust padding to fit dotted border */
+}
+
+/* Adjust label positioning for disabled state */
+.mui-theme .pf-v6-c-form-control.pf-m-disabled input ~ .pf-v6-c-form__label {
+    top: 12px; /* Adjust label position for disabled state */
+    transform: translateY(0) scale(0.75); /* Static label on top */
+    color: #bdbdbd; /* Light grey color for disabled label */
+}
+
+/* Adjust padding-top for textarea to make room for label */
+.form__group-control textarea {
+    padding-top: 24px; /* Space for the label */
+    box-sizing: border-box; /* Include padding in element’s width */
 }
 
 
@@ -259,6 +300,10 @@ mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus + .pf-v6-c-form__labe
   display: block;
 }
 
+.mui-theme .pf-v6-radio {
+  --pf-v6-c-radio--AccentColor: var(--mui-palette-primary-light);
+}
+
 .mui-theme .pf-v6-c-table {
   --pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary);
   --pf-v6-c-table__sort-indicator--Color: var(--mui-palette-text-secondary);

From bba7672e19b95f89aaf4d8534efd7e0adfd0ea44 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Wed, 18 Sep 2024 15:47:46 -0400
Subject: [PATCH 3/9] update form label color when field selected, add disabled
 styling

---
 .../screens/RegisteredModels/MUI-theme.scss   | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
index 5f4c72202d..183084f1ee 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
+++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
@@ -136,12 +136,11 @@
 
 .mui-theme .pf-v6-c-form__group {
   position: relative;
-  margin-bottom: 20px;
 }
 
 .mui-theme .pf-v6-c-form__label {
   position: absolute;
-  top: 40%;
+  top: 35%;
   left: 12px;
   font-size: 14px;
   color: #757575; /* MUI label color */
@@ -159,14 +158,16 @@
   width: 100%;
   box-sizing: border-box;
   transition: border-color 0.2s ease;
-  line-height: 1.5; /* Ensure consistency in line height */
+  line-height: 1.5;
+}
+
+.mui-theme .pf-v6-c-form-control input {
+  padding: 16.5px 14px;
 }
 
-/* Adjust the label when the textarea is a child of .form__group-control */
 .mui-theme .pf-v6-c-form__group-control textarea {
-  position: relative; /* Make sure textarea is positioned relative */
-  padding-top: 24px; /* Space for the label */
-  box-sizing: border-box; /* Include padding in element’s width */
+  position: relative; 
+  box-sizing: border-box; 
 }
 
 .mui-theme .pf-v6-c-form-control>:is(input,select,textarea):focus {
@@ -174,49 +175,49 @@
   outline: none;
 }
 
-.mui-theme .pf-v6-c-form__group-control textarea ~ .pf-v6-c-form__label {
-  top: 10%; /* Adjust based on the height of the textarea */
-  transform: translateY(-50%) scale(0.75);
-}
 .mui-theme .pf-v6-c-form-control:hover {
   --pf-v6-c-form-control--hover--after--BorderColor: var(--mui-palette-common-black);
 }
 
 mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
 .pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
-  color: var(--mui-palette-primary-light); /* MUI blue for focused/active label */
+  color: var(--mui-palette-primary-light);
 }
 
-.pf-v6-c-form__group .pf-v6-c-form-control:focus-within
+.mui-theme .pf-v6-c-form__group:focus-within .pf-v6-c-form-control
  {
   --pf-v6-c-form-control--after--BorderWidth: 2px;
   --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-light);
 }
 
-/* Styles for disabled state */
+.mui-theme .pf-v6-c-form__group:focus-within .pf-v6-c-form__label {
+  color: var(--mui-palette-primary-light); /* Change color of the label when the input is focused */
+}
+
+/* disabled state */
 .mui-theme .pf-v6-c-form-control.pf-m-disabled input {
     background-color: #f5f5f5; /* Light grey background */
     color: #a0a0a0; /* Grey text color */
     cursor: not-allowed; /* Indicate disabled state */
     border: none; /* Remove default border */
     border-bottom: 1px dotted #dcdcdc; /* Dotted bottom border */
-    padding: 12px 0; /* Adjust padding to fit dotted border */
+    padding: 25px 12px 8px;
 }
 
-/* Adjust label positioning for disabled state */
+/* Label positioning for disabled state */
 .mui-theme .pf-v6-c-form-control.pf-m-disabled input ~ .pf-v6-c-form__label {
     top: 12px; /* Adjust label position for disabled state */
     transform: translateY(0) scale(0.75); /* Static label on top */
     color: #bdbdbd; /* Light grey color for disabled label */
 }
 
-/* Adjust padding-top for textarea to make room for label */
-.form__group-control textarea {
-    padding-top: 24px; /* Space for the label */
-    box-sizing: border-box; /* Include padding in element’s width */
+/* Adjust label, does not work */
+.mui-theme .pf-v6-c-form__group-control .pf-v6-c-form-control.pf-m-disabled .pf-v6-c-form__label {
+  background-color: #f0f0f0; /* Match the label background to disabled input */
+  top: 12px; /* Adjust label position if needed */
+  transform: translateY(0) scale(0.75); /* Static label on top */
 }
 
-
 .mui-theme .pf-v6-c-menu {
   --pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
   --pf-v6-c-menu--BorderRadius: var(--mui-shape-borderRadius);

From dc18e5e15f577c58f02df9d861d587c1f8542a19 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:03:25 -0400
Subject: [PATCH 4/9] fix outline colors to match KF

---
 .../modelRegistry/screens/RegisteredModels/MUI-theme.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
index 183084f1ee..71bbd26e30 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
+++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
@@ -181,17 +181,17 @@
 
 mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
 .pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
-  color: var(--mui-palette-primary-light);
+  color: var(--mui-palette-primary-main);
 }
 
 .mui-theme .pf-v6-c-form__group:focus-within .pf-v6-c-form-control
  {
   --pf-v6-c-form-control--after--BorderWidth: 2px;
-  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-light);
+  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-main);
 }
 
 .mui-theme .pf-v6-c-form__group:focus-within .pf-v6-c-form__label {
-  color: var(--mui-palette-primary-light); /* Change color of the label when the input is focused */
+  color: var(--mui-palette-primary-main); /* Change color of the label when the input is focused */
 }
 
 /* disabled state */
@@ -302,7 +302,7 @@ mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-for
 }
 
 .mui-theme .pf-v6-radio {
-  --pf-v6-c-radio--AccentColor: var(--mui-palette-primary-light);
+  --pf-v6-c-radio--AccentColor: var(--mui-palette-primary-main);
 }
 
 .mui-theme .pf-v6-c-table {

From ac52b17a3b5499e888d26e863cbfc58cdd4708a7 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:34:43 -0400
Subject: [PATCH 5/9] fieldset updates with mcoker, disabled state WIP

---
 frontend/src/app/HeaderTools.tsx              |   2 +-
 .../screens/RegisterModel/RegisterModel.tsx   | 244 ++++++++++++------
 .../screens/RegisteredModels/MUI-theme.scss   |  82 ++++--
 3 files changed, 223 insertions(+), 105 deletions(-)

diff --git a/frontend/src/app/HeaderTools.tsx b/frontend/src/app/HeaderTools.tsx
index 349d18ae32..ea0eebda28 100644
--- a/frontend/src/app/HeaderTools.tsx
+++ b/frontend/src/app/HeaderTools.tsx
@@ -43,7 +43,7 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
 
   React.useEffect(() => {
     window.isSwitched = !isChecked;
-  }, [isChecked]);
+  }, [window.isSwitched]);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(!checked);
diff --git a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
index 673547f819..b16641bbfd 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
+++ b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   ActionGroup,
   Alert,
@@ -27,6 +26,7 @@ import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import useRegisterModelData from './useRegisterModelData';
+import React from 'react';
 
 const RegisterModel: React.FC = () => {
   const { modelRegistry: mrName } = useParams();
@@ -51,6 +51,13 @@ const RegisterModel: React.FC = () => {
   const [loading, setIsLoading] = React.useState(false);
   const [error, setError] = React.useState<Error | undefined>(undefined);
 
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    console.log(window.isSwitched)
+    setIsChecked(window?.isSwitched!);
+  }, [isChecked]);
+
   enum ModelLocationType {
     ObjectStorage = 'Object storage',
     URI = 'URI',
@@ -87,6 +94,28 @@ const RegisterModel: React.FC = () => {
     });
   };
 
+  const mrTextInput = (
+    <TextInput
+      isDisabled
+      isRequired
+      type="text"
+      id="mr-name"
+      name="mr-name"
+      value={modelRegistryName}
+    />
+  );
+
+  const modelNameInput = (
+    <TextInput
+    isRequired
+    type="text"
+    id="model-name"
+    name="model-name"
+    value={modelName}
+    onChange={(_e, value) => setData('modelName', value)}
+  />
+  )
+
   return (
     <ApplicationsPage
       title="Register model"
@@ -110,14 +139,16 @@ const RegisterModel: React.FC = () => {
         <Stack hasGutter>
           <StackItem>
             <FormGroup label="Model registry" isRequired fieldId="mr-name">
-              <TextInput
-                isDisabled
-                isRequired
-                type="text"
-                id="mr-name"
-                name="mr-name"
-                value={modelRegistryName}
-              />
+              {isChecked ?
+              (<div className="form-fieldset-wrapper">
+                {mrTextInput}
+                <fieldset aria-hidden="true" className="form-fieldset">
+                  <legend className="form-fieldset-legend">
+                    <span>Model Registry</span>
+                  </legend>
+                </fieldset>
+              </div>)
+              : mrTextInput }
             </FormGroup>
           </StackItem>
           <StackItem>
@@ -132,23 +163,31 @@ const RegisterModel: React.FC = () => {
               }
             >
               <FormGroup label="Model name" isRequired fieldId="model-name">
-                <TextInput
-                  isRequired
-                  type="text"
-                  id="model-name"
-                  name="model-name"
-                  value={modelName}
-                  onChange={(_e, value) => setData('modelName', value)}
-                />
+                {isChecked ? (
+                  <div className="form-fieldset-wrapper">
+                  {modelNameInput}
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Model Name</span>
+                    </legend>
+                  </fieldset>
+                </div>) : modelNameInput}
               </FormGroup>
               <FormGroup label="Model description" fieldId="model-description">
-                <TextArea
-                  type="text"
-                  id="model-description"
-                  name="model-description"
-                  value={modelDescription}
-                  onChange={(_e, value) => setData('modelDescription', value)}
-                />
+                <div className="form-fieldset-wrapper">
+                  <TextArea
+                    type="text"
+                    id="model-description"
+                    name="model-description"
+                    value={modelDescription}
+                    onChange={(_e, value) => setData('modelDescription', value)}
+                  />
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Model Description</span>
+                    </legend>
+                  </fieldset>
+                </div>
               </FormGroup>
             </FormSection>
             <FormSection
@@ -162,33 +201,54 @@ const RegisterModel: React.FC = () => {
               }
             >
               <FormGroup label="Version name" isRequired fieldId="version-name">
-                <TextInput
-                  isRequired
-                  type="text"
-                  id="version-name"
-                  name="version-name"
-                  value={versionName}
-                  onChange={(_e, value) => setData('versionName', value)}
-                />
+                <div className="form-fieldset-wrapper">
+                  <TextInput
+                    isRequired
+                    type="text"
+                    id="version-name"
+                    name="version-name"
+                    value={versionName}
+                    onChange={(_e, value) => setData('versionName', value)}
+                  />
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Version Name</span>
+                    </legend>
+                  </fieldset>
+                </div>
               </FormGroup>
               <FormGroup label="Version description" fieldId="version-description">
-                <TextArea
-                  type="text"
-                  id="version-description"
-                  name="version-description"
-                  value={versionDescription}
-                  onChange={(_e, value) => setData('versionDescription', value)}
-                />
+                <div className="form-fieldset-wrapper">
+                  <TextArea
+                    type="text"
+                    id="version-description"
+                    name="version-description"
+                    value={versionDescription}
+                    onChange={(_e, value) => setData('versionDescription', value)}
+                  />
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Version Description</span>
+                    </legend>
+                  </fieldset>
+                </div>
               </FormGroup>
               <FormGroup label="Source model format" fieldId="source-model-format">
-                <TextInput
-                  type="text"
-                  placeholder="Example, tensorflow"
-                  id="source-model-format"
-                  name="source-model-format"
-                  value={sourceModelFormat}
-                  onChange={(_e, value) => setData('sourceModelFormat', value)}
-                />
+                <div className="form-fieldset-wrapper">
+                  <TextInput
+                    type="text"
+                    placeholder="Example, tensorflow"
+                    id="source-model-format"
+                    name="source-model-format"
+                    value={sourceModelFormat}
+                    onChange={(_e, value) => setData('sourceModelFormat', value)}
+                  />
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Source Model Format</span>
+                    </legend>
+                  </fieldset>
+                </div>
               </FormGroup>
             </FormSection>
             <FormSection
@@ -214,33 +274,54 @@ const RegisterModel: React.FC = () => {
               {modelLocationType === ModelLocationType.ObjectStorage && (
                 <>
                   <FormGroup label="Endpoint" isRequired fieldId="location-endpoint">
-                    <TextInput
-                      isRequired
-                      type="text"
-                      id="location-endpoint"
-                      name="location-endpoint"
-                      value={modelLocationEndpoint}
-                      onChange={(_e, value) => setData('modelLocationEndpoint', value)}
-                    />
+                    <div className="form-fieldset-wrapper">
+                      <TextInput
+                        isRequired
+                        type="text"
+                        id="location-endpoint"
+                        name="location-endpoint"
+                        value={modelLocationEndpoint}
+                        onChange={(_e, value) => setData('modelLocationEndpoint', value)}
+                      />
+                      <fieldset aria-hidden="true" className="form-fieldset">
+                        <legend className="form-fieldset-legend">
+                          <span>Endpoint</span>
+                        </legend>
+                      </fieldset>
+                    </div>
                   </FormGroup>
                   <FormGroup label="Bucket" isRequired fieldId="location-bucket">
-                    <TextInput
-                      isRequired
-                      type="text"
-                      id="location-bucket"
-                      name="location-bucket"
-                      value={modelLocationBucket}
-                      onChange={(_e, value) => setData('modelLocationBucket', value)}
-                    />
+                    <div className="form-fieldset-wrapper">
+                      <TextInput
+                        isRequired
+                        type="text"
+                        id="location-bucket"
+                        name="location-bucket"
+                        value={modelLocationBucket}
+                        onChange={(_e, value) => setData('modelLocationBucket', value)}
+                      />
+                      <fieldset aria-hidden="true" className="form-fieldset">
+                        <legend className="form-fieldset-legend">
+                          <span>Bucket</span>
+                        </legend>
+                      </fieldset>
+                    </div>
                   </FormGroup>
                   <FormGroup label="Region" fieldId="location-region">
-                    <TextInput
-                      type="text"
-                      id="location-region"
-                      name="location-region"
-                      value={modelLocationRegion}
-                      onChange={(_e, value) => setData('modelLocationRegion', value)}
-                    />
+                    <div className="form-fieldset-wrapper">
+                      <TextInput
+                        type="text"
+                        id="location-region"
+                        name="location-region"
+                        value={modelLocationRegion}
+                        onChange={(_e, value) => setData('modelLocationRegion', value)}
+                      />
+                      <fieldset aria-hidden="true" className="form-fieldset">
+                        <legend className="form-fieldset-legend">
+                          <span>Region</span>
+                        </legend>
+                      </fieldset>
+                    </div>
                   </FormGroup>
                   <FormGroup label="Path" isRequired fieldId="location-path">
                     <Split hasGutter>
@@ -280,14 +361,21 @@ const RegisterModel: React.FC = () => {
               {modelLocationType === ModelLocationType.URI && (
                 <>
                   <FormGroup label="URI" isRequired fieldId="location-uri">
-                    <TextInput
-                      isRequired
-                      type="text"
-                      id="location-uri"
-                      name="location-uri"
-                      value={modelLocationURI}
-                      onChange={(_e, value) => setData('modelLocationURI', value)}
-                    />
+                    <div className="form-fieldset-wrapper">
+                      <TextInput
+                        isRequired
+                        type="text"
+                        id="location-uri"
+                        name="location-uri"
+                        value={modelLocationURI}
+                        onChange={(_e, value) => setData('modelLocationURI', value)}
+                      />
+                      <fieldset aria-hidden="true" className="form-fieldset">
+                        <legend className="form-fieldset-legend">
+                          <span>URI</span>
+                        </legend>
+                      </fieldset>
+                    </div>
                   </FormGroup>
                 </>
               )}
diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
index 71bbd26e30..b8cdb48eaf 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
+++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
@@ -166,8 +166,8 @@
 }
 
 .mui-theme .pf-v6-c-form__group-control textarea {
-  position: relative; 
-  box-sizing: border-box; 
+  position: relative;
+  box-sizing: border-box;
 }
 
 .mui-theme .pf-v6-c-form-control>:is(input,select,textarea):focus {
@@ -179,7 +179,60 @@
   --pf-v6-c-form-control--hover--after--BorderColor: var(--mui-palette-common-black);
 }
 
-mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
+.mui-theme .form-fieldset-wrapper {
+  position: relative;
+}
+
+.mui-theme .form-fieldset-wrapper:focus-within .form-fieldset {
+  border-color: var(--mui-palette-primary-main);
+  border-width: 2px;
+}
+
+.mui-theme .form-fieldset {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+}
+
+.mui-theme .form-fieldset-legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.mui-theme .form-fieldset-wrapper .pf-v6-c-form-control {
+  &::before,
+  &::after {
+    content: revert;
+  }
+}
+
+.mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
 .pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
   color: var(--mui-palette-primary-main);
 }
@@ -194,29 +247,6 @@ mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-for
   color: var(--mui-palette-primary-main); /* Change color of the label when the input is focused */
 }
 
-/* disabled state */
-.mui-theme .pf-v6-c-form-control.pf-m-disabled input {
-    background-color: #f5f5f5; /* Light grey background */
-    color: #a0a0a0; /* Grey text color */
-    cursor: not-allowed; /* Indicate disabled state */
-    border: none; /* Remove default border */
-    border-bottom: 1px dotted #dcdcdc; /* Dotted bottom border */
-    padding: 25px 12px 8px;
-}
-
-/* Label positioning for disabled state */
-.mui-theme .pf-v6-c-form-control.pf-m-disabled input ~ .pf-v6-c-form__label {
-    top: 12px; /* Adjust label position for disabled state */
-    transform: translateY(0) scale(0.75); /* Static label on top */
-    color: #bdbdbd; /* Light grey color for disabled label */
-}
-
-/* Adjust label, does not work */
-.mui-theme .pf-v6-c-form__group-control .pf-v6-c-form-control.pf-m-disabled .pf-v6-c-form__label {
-  background-color: #f0f0f0; /* Match the label background to disabled input */
-  top: 12px; /* Adjust label position if needed */
-  transform: translateY(0) scale(0.75); /* Static label on top */
-}
 
 .mui-theme .pf-v6-c-menu {
   --pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);

From 71157d43255077b69ed43def51c8d3c74cc05545 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Fri, 20 Sep 2024 13:38:06 -0400
Subject: [PATCH 6/9] add conditionals for input fields when theme toggle is on

---
 .../screens/RegisterModel/RegisterModel.tsx   | 369 +++++++++++-------
 1 file changed, 223 insertions(+), 146 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
index b16641bbfd..454c90013c 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
+++ b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -54,7 +54,7 @@ const RegisterModel: React.FC = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
 
   React.useEffect(() => {
-    console.log(window.isSwitched)
+    console.log(window.isSwitched);
     setIsChecked(window?.isSwitched!);
   }, [isChecked]);
 
@@ -94,7 +94,7 @@ const RegisterModel: React.FC = () => {
     });
   };
 
-  const mrTextInput = (
+  const modelRegistryInput = (
     <TextInput
       isDisabled
       isRequired
@@ -107,14 +107,99 @@ const RegisterModel: React.FC = () => {
 
   const modelNameInput = (
     <TextInput
-    isRequired
-    type="text"
-    id="model-name"
-    name="model-name"
-    value={modelName}
-    onChange={(_e, value) => setData('modelName', value)}
-  />
-  )
+      isRequired
+      type="text"
+      id="model-name"
+      name="model-name"
+      value={modelName}
+      onChange={(_e, value) => setData('modelName', value)}
+    />
+  );
+
+  const modelDescriptionInput = (
+    <TextArea
+      type="text"
+      id="model-description"
+      name="model-description"
+      value={modelDescription}
+      onChange={(_e, value) => setData('modelDescription', value)}
+    />
+  );
+
+  const versionNameInput = (
+    <TextInput
+      isRequired
+      type="text"
+      id="version-name"
+      name="version-name"
+      value={versionName}
+      onChange={(_e, value) => setData('versionName', value)}
+    />
+  );
+
+  const versionDescriptionInput = (
+    <TextArea
+      type="text"
+      id="version-description"
+      name="version-description"
+      value={versionDescription}
+      onChange={(_e, value) => setData('versionDescription', value)}
+    />
+  );
+
+  const sourceModelFormatInput = (
+    <TextInput
+      type="text"
+      placeholder="Example, tensorflow"
+      id="source-model-format"
+      name="source-model-format"
+      value={sourceModelFormat}
+      onChange={(_e, value) => setData('sourceModelFormat', value)}
+    />
+  );
+
+  const endpointInput = (
+    <TextInput
+      isRequired
+      type="text"
+      id="location-endpoint"
+      name="location-endpoint"
+      value={modelLocationEndpoint}
+      onChange={(_e, value) => setData('modelLocationEndpoint', value)}
+    />
+  );
+
+  const bucketInput = (
+    <TextInput
+      isRequired
+      type="text"
+      id="location-bucket"
+      name="location-bucket"
+      value={modelLocationBucket}
+      onChange={(_e, value) => setData('modelLocationBucket', value)}
+    />
+  );
+
+  const regionInput = (
+    <TextInput
+      type="text"
+      id="location-region"
+      name="location-region"
+      value={modelLocationRegion}
+      onChange={(_e, value) => setData('modelLocationRegion', value)}
+    />
+  );
+
+  const pathInput = (
+    <TextInput
+      isRequired
+      type="text"
+      id="location-path"
+      name="location-path"
+      value={modelLocationPath}
+      onChange={(_e, value) => setData('modelLocationPath', value)}
+    />
+  );
 
   return (
     <ApplicationsPage
@@ -139,16 +224,18 @@ const RegisterModel: React.FC = () => {
         <Stack hasGutter>
           <StackItem>
             <FormGroup label="Model registry" isRequired fieldId="mr-name">
-              {isChecked ?
-              (<div className="form-fieldset-wrapper">
-                {mrTextInput}
-                <fieldset aria-hidden="true" className="form-fieldset">
-                  <legend className="form-fieldset-legend">
-                    <span>Model Registry</span>
-                  </legend>
-                </fieldset>
-              </div>)
-              : mrTextInput }
+              {isChecked ? (
+                <div className="form-fieldset-wrapper">
+                  {modelRegistryInput}
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Model Registry</span>
+                    </legend>
+                  </fieldset>
+                </div>
+              ) : (
+                modelRegistryInput
+              )}
             </FormGroup>
           </StackItem>
           <StackItem>
@@ -165,29 +252,30 @@ const RegisterModel: React.FC = () => {
               <FormGroup label="Model name" isRequired fieldId="model-name">
                 {isChecked ? (
                   <div className="form-fieldset-wrapper">
-                  {modelNameInput}
-                  <fieldset aria-hidden="true" className="form-fieldset">
-                    <legend className="form-fieldset-legend">
-                      <span>Model Name</span>
-                    </legend>
-                  </fieldset>
-                </div>) : modelNameInput}
+                    {modelNameInput}
+                    <fieldset aria-hidden="true" className="form-fieldset">
+                      <legend className="form-fieldset-legend">
+                        <span>Model Name</span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                ) : (
+                  modelNameInput
+                )}
               </FormGroup>
               <FormGroup label="Model description" fieldId="model-description">
-                <div className="form-fieldset-wrapper">
-                  <TextArea
-                    type="text"
-                    id="model-description"
-                    name="model-description"
-                    value={modelDescription}
-                    onChange={(_e, value) => setData('modelDescription', value)}
-                  />
-                  <fieldset aria-hidden="true" className="form-fieldset">
-                    <legend className="form-fieldset-legend">
-                      <span>Model Description</span>
-                    </legend>
-                  </fieldset>
-                </div>
+                {isChecked ? (
+                  <div className="form-fieldset-wrapper">
+                    {modelDescriptionInput}
+                    <fieldset aria-hidden="true" className="form-fieldset">
+                      <legend className="form-fieldset-legend">
+                        <span>Model Description</span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                ) : (
+                  modelDescriptionInput
+                )}
               </FormGroup>
             </FormSection>
             <FormSection
@@ -201,54 +289,46 @@ const RegisterModel: React.FC = () => {
               }
             >
               <FormGroup label="Version name" isRequired fieldId="version-name">
-                <div className="form-fieldset-wrapper">
-                  <TextInput
-                    isRequired
-                    type="text"
-                    id="version-name"
-                    name="version-name"
-                    value={versionName}
-                    onChange={(_e, value) => setData('versionName', value)}
-                  />
-                  <fieldset aria-hidden="true" className="form-fieldset">
-                    <legend className="form-fieldset-legend">
-                      <span>Version Name</span>
-                    </legend>
-                  </fieldset>
-                </div>
+                {isChecked ? (
+                  <div className="form-fieldset-wrapper">
+                    {versionNameInput}
+                    <fieldset aria-hidden="true" className="form-fieldset">
+                      <legend className="form-fieldset-legend">
+                        <span>Version Name</span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                ) : (
+                  versionNameInput
+                )}
               </FormGroup>
               <FormGroup label="Version description" fieldId="version-description">
-                <div className="form-fieldset-wrapper">
-                  <TextArea
-                    type="text"
-                    id="version-description"
-                    name="version-description"
-                    value={versionDescription}
-                    onChange={(_e, value) => setData('versionDescription', value)}
-                  />
-                  <fieldset aria-hidden="true" className="form-fieldset">
-                    <legend className="form-fieldset-legend">
-                      <span>Version Description</span>
-                    </legend>
-                  </fieldset>
-                </div>
+                {isChecked ? (
+                  <div className="form-fieldset-wrapper">
+                    {versionDescriptionInput}
+                    <fieldset aria-hidden="true" className="form-fieldset">
+                      <legend className="form-fieldset-legend">
+                        <span>Version Description</span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                ) : (
+                  versionDescriptionInput
+                )}
               </FormGroup>
               <FormGroup label="Source model format" fieldId="source-model-format">
-                <div className="form-fieldset-wrapper">
-                  <TextInput
-                    type="text"
-                    placeholder="Example, tensorflow"
-                    id="source-model-format"
-                    name="source-model-format"
-                    value={sourceModelFormat}
-                    onChange={(_e, value) => setData('sourceModelFormat', value)}
-                  />
-                  <fieldset aria-hidden="true" className="form-fieldset">
-                    <legend className="form-fieldset-legend">
-                      <span>Source Model Format</span>
-                    </legend>
-                  </fieldset>
-                </div>
+                {isChecked ? (
+                  <div className="form-fieldset-wrapper">
+                    {sourceModelFormatInput}
+                    <fieldset aria-hidden="true" className="form-fieldset">
+                      <legend className="form-fieldset-legend">
+                        <span>Source Model Format</span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                ) : (
+                  sourceModelFormatInput
+                )}
               </FormGroup>
             </FormSection>
             <FormSection
@@ -274,73 +354,70 @@ const RegisterModel: React.FC = () => {
               {modelLocationType === ModelLocationType.ObjectStorage && (
                 <>
                   <FormGroup label="Endpoint" isRequired fieldId="location-endpoint">
-                    <div className="form-fieldset-wrapper">
-                      <TextInput
-                        isRequired
-                        type="text"
-                        id="location-endpoint"
-                        name="location-endpoint"
-                        value={modelLocationEndpoint}
-                        onChange={(_e, value) => setData('modelLocationEndpoint', value)}
-                      />
-                      <fieldset aria-hidden="true" className="form-fieldset">
-                        <legend className="form-fieldset-legend">
-                          <span>Endpoint</span>
-                        </legend>
-                      </fieldset>
-                    </div>
+                    {isChecked ? (
+                      <div className="form-fieldset-wrapper">
+                        {endpointInput}
+                        <fieldset aria-hidden="true" className="form-fieldset">
+                          <legend className="form-fieldset-legend">
+                            <span>Endpoint</span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    ) : (
+                      endpointInput
+                    )}
                   </FormGroup>
                   <FormGroup label="Bucket" isRequired fieldId="location-bucket">
-                    <div className="form-fieldset-wrapper">
-                      <TextInput
-                        isRequired
-                        type="text"
-                        id="location-bucket"
-                        name="location-bucket"
-                        value={modelLocationBucket}
-                        onChange={(_e, value) => setData('modelLocationBucket', value)}
-                      />
-                      <fieldset aria-hidden="true" className="form-fieldset">
-                        <legend className="form-fieldset-legend">
-                          <span>Bucket</span>
-                        </legend>
-                      </fieldset>
-                    </div>
+                    {isChecked ? (
+                      <div className="form-fieldset-wrapper">
+                        {bucketInput}
+                        <fieldset aria-hidden="true" className="form-fieldset">
+                          <legend className="form-fieldset-legend">
+                            <span>Bucket</span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    ) : (
+                      bucketInput
+                    )}
                   </FormGroup>
                   <FormGroup label="Region" fieldId="location-region">
-                    <div className="form-fieldset-wrapper">
-                      <TextInput
-                        type="text"
-                        id="location-region"
-                        name="location-region"
-                        value={modelLocationRegion}
-                        onChange={(_e, value) => setData('modelLocationRegion', value)}
-                      />
-                      <fieldset aria-hidden="true" className="form-fieldset">
-                        <legend className="form-fieldset-legend">
-                          <span>Region</span>
-                        </legend>
-                      </fieldset>
-                    </div>
+                    {isChecked ? (
+                      <div className="form-fieldset-wrapper">
+                        {regionInput}
+                        <fieldset aria-hidden="true" className="form-fieldset">
+                          <legend className="form-fieldset-legend">
+                            <span>Region</span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    ) : (
+                      regionInput
+                    )}
                   </FormGroup>
                   <FormGroup label="Path" isRequired fieldId="location-path">
-                    <Split hasGutter>
-                      <SplitItem>
-                        <InputGroupText isPlain>/</InputGroupText>
-                      </SplitItem>
-                      <SplitItem isFilled>
-                        <InputGroupItem>
-                          <TextInput
-                            isRequired
-                            type="text"
-                            id="location-path"
-                            name="location-path"
-                            value={modelLocationPath}
-                            onChange={(_e, value) => setData('modelLocationPath', value)}
-                          />
-                        </InputGroupItem>
-                      </SplitItem>
-                    </Split>
+                    {isChecked ? (
+                      <Split hasGutter>
+                        <SplitItem>
+                          <InputGroupText isPlain>/</InputGroupText>
+                        </SplitItem>
+                        <SplitItem isFilled>
+                          <InputGroupItem>
+                            <div className="form-fieldset-wrapper">
+                              {pathInput}
+                              <fieldset aria-hidden="true" className="form-fieldset">
+                                <legend className="form-fieldset-legend">
+                                  <span>Path</span>
+                                </legend>
+                              </fieldset>
+                            </div>{' '}
+                            : {pathInput}
+                          </InputGroupItem>
+                        </SplitItem>
+                      </Split>
+                    ) : (
+                      pathInput
+                    )}
                     <HelperText>
                       <HelperTextItem>
                         Enter a path to a model or folder. This path cannot point to a root folder.

From 7866ef408e17162ede72f869b6923dccaa91f74f Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Mon, 23 Sep 2024 14:12:20 -0400
Subject: [PATCH 7/9] feedback from mcoker, remove conditional rendering in
 favor of css class

---
 .../screens/RegisterModel/RegisterModel.tsx   | 224 +++++++-----------
 .../screens/RegisteredModels/MUI-theme.scss   |  18 +-
 2 files changed, 100 insertions(+), 142 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
index 454c90013c..66dd94d45a 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
+++ b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -21,6 +21,7 @@ import {
   TextArea,
   TextInput,
   Title,
+  InputGroup,
 } from '@patternfly/react-core';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -51,12 +52,7 @@ const RegisterModel: React.FC = () => {
   const [loading, setIsLoading] = React.useState(false);
   const [error, setError] = React.useState<Error | undefined>(undefined);
 
-  const [isChecked, setIsChecked] = React.useState<boolean>(true);
 
-  React.useEffect(() => {
-    console.log(window.isSwitched);
-    setIsChecked(window?.isSwitched!);
-  }, [isChecked]);
 
   enum ModelLocationType {
     ObjectStorage = 'Object storage',
@@ -224,18 +220,14 @@ const RegisterModel: React.FC = () => {
         <Stack hasGutter>
           <StackItem>
             <FormGroup label="Model registry" isRequired fieldId="mr-name">
-              {isChecked ? (
-                <div className="form-fieldset-wrapper">
-                  {modelRegistryInput}
-                  <fieldset aria-hidden="true" className="form-fieldset">
-                    <legend className="form-fieldset-legend">
-                      <span>Model Registry</span>
-                    </legend>
-                  </fieldset>
-                </div>
-              ) : (
-                modelRegistryInput
-              )}
+              <div className="mui-theme form-fieldset-wrapper">
+                {modelRegistryInput}
+                <fieldset aria-hidden="true" className="form-fieldset">
+                  <legend className="form-fieldset-legend">
+                    <span>Model Registry</span>
+                  </legend>
+                </fieldset>
+              </div>
             </FormGroup>
           </StackItem>
           <StackItem>
@@ -250,32 +242,24 @@ const RegisterModel: React.FC = () => {
               }
             >
               <FormGroup label="Model name" isRequired fieldId="model-name">
-                {isChecked ? (
-                  <div className="form-fieldset-wrapper">
-                    {modelNameInput}
-                    <fieldset aria-hidden="true" className="form-fieldset">
-                      <legend className="form-fieldset-legend">
-                        <span>Model Name</span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                ) : (
-                  modelNameInput
-                )}
+                <div className="mui-theme form-fieldset-wrapper">
+                  {modelNameInput}
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Model Name</span>
+                    </legend>
+                  </fieldset>
+                </div>
               </FormGroup>
               <FormGroup label="Model description" fieldId="model-description">
-                {isChecked ? (
-                  <div className="form-fieldset-wrapper">
-                    {modelDescriptionInput}
-                    <fieldset aria-hidden="true" className="form-fieldset">
-                      <legend className="form-fieldset-legend">
-                        <span>Model Description</span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                ) : (
-                  modelDescriptionInput
-                )}
+                <div className="mui-theme mui-theme form-fieldset-wrapper">
+                  {modelDescriptionInput}
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Model Description</span>
+                    </legend>
+                  </fieldset>
+                </div>
               </FormGroup>
             </FormSection>
             <FormSection
@@ -289,46 +273,34 @@ const RegisterModel: React.FC = () => {
               }
             >
               <FormGroup label="Version name" isRequired fieldId="version-name">
-                {isChecked ? (
-                  <div className="form-fieldset-wrapper">
-                    {versionNameInput}
-                    <fieldset aria-hidden="true" className="form-fieldset">
-                      <legend className="form-fieldset-legend">
-                        <span>Version Name</span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                ) : (
-                  versionNameInput
-                )}
+                <div className="mui-theme form-fieldset-wrapper">
+                  {versionNameInput}
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Version Name</span>
+                    </legend>
+                  </fieldset>
+                </div>
               </FormGroup>
               <FormGroup label="Version description" fieldId="version-description">
-                {isChecked ? (
-                  <div className="form-fieldset-wrapper">
-                    {versionDescriptionInput}
-                    <fieldset aria-hidden="true" className="form-fieldset">
-                      <legend className="form-fieldset-legend">
-                        <span>Version Description</span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                ) : (
-                  versionDescriptionInput
-                )}
+                <div className="mui-theme form-fieldset-wrapper">
+                  {versionDescriptionInput}
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Version Description</span>
+                    </legend>
+                  </fieldset>
+                </div>
               </FormGroup>
               <FormGroup label="Source model format" fieldId="source-model-format">
-                {isChecked ? (
-                  <div className="form-fieldset-wrapper">
-                    {sourceModelFormatInput}
-                    <fieldset aria-hidden="true" className="form-fieldset">
-                      <legend className="form-fieldset-legend">
-                        <span>Source Model Format</span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                ) : (
-                  sourceModelFormatInput
-                )}
+                <div className="mui-theme form-fieldset-wrapper">
+                  {sourceModelFormatInput}
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Source Model Format</span>
+                    </legend>
+                  </fieldset>
+                </div>
               </FormGroup>
             </FormSection>
             <FormSection
@@ -354,70 +326,50 @@ const RegisterModel: React.FC = () => {
               {modelLocationType === ModelLocationType.ObjectStorage && (
                 <>
                   <FormGroup label="Endpoint" isRequired fieldId="location-endpoint">
-                    {isChecked ? (
-                      <div className="form-fieldset-wrapper">
-                        {endpointInput}
-                        <fieldset aria-hidden="true" className="form-fieldset">
-                          <legend className="form-fieldset-legend">
-                            <span>Endpoint</span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    ) : (
-                      endpointInput
-                    )}
+                    <div className="mui-theme form-fieldset-wrapper">
+                      {endpointInput}
+                      <fieldset aria-hidden="true" className="form-fieldset">
+                        <legend className="form-fieldset-legend">
+                          <span>Endpoint</span>
+                        </legend>
+                      </fieldset>
+                    </div>
                   </FormGroup>
                   <FormGroup label="Bucket" isRequired fieldId="location-bucket">
-                    {isChecked ? (
-                      <div className="form-fieldset-wrapper">
-                        {bucketInput}
-                        <fieldset aria-hidden="true" className="form-fieldset">
-                          <legend className="form-fieldset-legend">
-                            <span>Bucket</span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    ) : (
-                      bucketInput
-                    )}
+                    <div className="mui-theme form-fieldset-wrapper">
+                      {bucketInput}
+                      <fieldset aria-hidden="true" className="form-fieldset">
+                        <legend className="form-fieldset-legend">
+                          <span>Bucket</span>
+                        </legend>
+                      </fieldset>
+                    </div>
                   </FormGroup>
                   <FormGroup label="Region" fieldId="location-region">
-                    {isChecked ? (
-                      <div className="form-fieldset-wrapper">
-                        {regionInput}
-                        <fieldset aria-hidden="true" className="form-fieldset">
-                          <legend className="form-fieldset-legend">
-                            <span>Region</span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    ) : (
-                      regionInput
-                    )}
+                    <div className="mui-theme form-fieldset-wrapper">
+                      {regionInput}
+                      <fieldset aria-hidden="true" className="form-fieldset">
+                        <legend className="form-fieldset-legend">
+                          <span>Region</span>
+                        </legend>
+                      </fieldset>
+                    </div>
                   </FormGroup>
                   <FormGroup label="Path" isRequired fieldId="location-path">
-                    {isChecked ? (
-                      <Split hasGutter>
-                        <SplitItem>
-                          <InputGroupText isPlain>/</InputGroupText>
-                        </SplitItem>
-                        <SplitItem isFilled>
-                          <InputGroupItem>
-                            <div className="form-fieldset-wrapper">
-                              {pathInput}
-                              <fieldset aria-hidden="true" className="form-fieldset">
-                                <legend className="form-fieldset-legend">
-                                  <span>Path</span>
-                                </legend>
-                              </fieldset>
-                            </div>{' '}
-                            : {pathInput}
-                          </InputGroupItem>
-                        </SplitItem>
-                      </Split>
-                    ) : (
-                      pathInput
-                    )}
+                    <InputGroup>
+                      <InputGroupText isPlain>/</InputGroupText>
+                      <InputGroupItem isFill>
+                        <div className="mui-theme form-fieldset-wrapper">
+                          {pathInput}
+                          <fieldset aria-hidden="true" className="form-fieldset">
+                            <legend className="form-fieldset-legend">
+                              <span>Path</span>
+                            </legend>
+                          </fieldset>
+                        </div>
+                      </InputGroupItem>
+                    </InputGroup>
+
                     <HelperText>
                       <HelperTextItem>
                         Enter a path to a model or folder. This path cannot point to a root folder.
@@ -438,7 +390,7 @@ const RegisterModel: React.FC = () => {
               {modelLocationType === ModelLocationType.URI && (
                 <>
                   <FormGroup label="URI" isRequired fieldId="location-uri">
-                    <div className="form-fieldset-wrapper">
+                    <div className="mui-theme form-fieldset-wrapper">
                       <TextInput
                         isRequired
                         type="text"
diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
index b8cdb48eaf..6587c3cc66 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
+++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
@@ -153,12 +153,17 @@
   z-index: 1;
 }
 
-.mui-theme .pf-v6-c-form-control {
-  font-size: 16px;
-  width: 100%;
-  box-sizing: border-box;
-  transition: border-color 0.2s ease;
-  line-height: 1.5;
+// .mui-theme .pf-v6-c-form-control {
+//   font-size: 16px;
+//   width: 100%;
+//   box-sizing: border-box;
+//   transition: border-color 0.2s ease;
+//   line-height: 1.5;
+// }
+
+.mui-theme .pf-v6-c-form-control.pf-m-disabled {
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.23);
 }
 
 .mui-theme .pf-v6-c-form-control input {
@@ -181,6 +186,7 @@
 
 .mui-theme .form-fieldset-wrapper {
   position: relative;
+  width: 100%;
 }
 
 .mui-theme .form-fieldset-wrapper:focus-within .form-fieldset {

From f98bbef6dd2f50f38bb72dabdbb94a6ae3754a3a Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:49:33 -0400
Subject: [PATCH 8/9] updates to form with mcoker

---
 .../screens/RegisterModel/RegisterModel.tsx   | 40 +++++++++-------
 .../screens/RegisteredModels/MUI-theme.scss   | 47 +++++++++++++------
 2 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
index 66dd94d45a..10a6b309b4 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
+++ b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -22,6 +22,7 @@ import {
   TextInput,
   Title,
   InputGroup,
+  FormHelperText,
 } from '@patternfly/react-core';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -52,8 +53,6 @@ const RegisterModel: React.FC = () => {
   const [loading, setIsLoading] = React.useState(false);
   const [error, setError] = React.useState<Error | undefined>(undefined);
 
-
-
   enum ModelLocationType {
     ObjectStorage = 'Object storage',
     URI = 'URI',
@@ -219,7 +218,12 @@ const RegisterModel: React.FC = () => {
       <Form>
         <Stack hasGutter>
           <StackItem>
-            <FormGroup label="Model registry" isRequired fieldId="mr-name">
+            <FormGroup
+              className="mui-theme form-group-disabled"
+              label="Model registry"
+              isRequired
+              fieldId="mr-name"
+            >
               <div className="mui-theme form-fieldset-wrapper">
                 {modelRegistryInput}
                 <fieldset aria-hidden="true" className="form-fieldset">
@@ -355,10 +359,10 @@ const RegisterModel: React.FC = () => {
                       </fieldset>
                     </div>
                   </FormGroup>
-                  <FormGroup label="Path" isRequired fieldId="location-path">
-                    <InputGroup>
-                      <InputGroupText isPlain>/</InputGroupText>
-                      <InputGroupItem isFill>
+                  <InputGroup>
+                    <InputGroupText isPlain>/</InputGroupText>
+                    <InputGroupItem isFill>
+                      <FormGroup label="Path" isRequired fieldId="location-path">
                         <div className="mui-theme form-fieldset-wrapper">
                           {pathInput}
                           <fieldset aria-hidden="true" className="form-fieldset">
@@ -367,15 +371,19 @@ const RegisterModel: React.FC = () => {
                             </legend>
                           </fieldset>
                         </div>
-                      </InputGroupItem>
-                    </InputGroup>
-
-                    <HelperText>
-                      <HelperTextItem>
-                        Enter a path to a model or folder. This path cannot point to a root folder.
-                      </HelperTextItem>
-                    </HelperText>
-                  </FormGroup>
+                      </FormGroup>
+                    </InputGroupItem>
+                    <InputGroupItem isFill>
+                    <FormHelperText>
+                          <HelperText>
+                            <HelperTextItem>
+                              Enter a path to a model or folder. This path cannot point to a root
+                              folder.
+                            </HelperTextItem>
+                          </HelperText>
+                        </FormHelperText>
+                        </InputGroupItem>
+                  </InputGroup>
                 </>
               )}
               <Radio
diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
index 4e32b2eb5d..eabfad30cf 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
+++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
@@ -138,12 +138,17 @@
   position: relative;
 }
 
+.mui-theme .pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label {
+  color: rgba(0, 0, 0, 0.38);
+}
+
 .mui-theme .pf-v6-c-form__label {
   position: absolute;
   top: 35%;
   left: 12px;
   font-size: 14px;
-  color: #757575; /* MUI label color */
+  color: #757575;
+  /* MUI label color */
   pointer-events: none;
   transition: all 0.2s ease;
   transform-origin: left center;
@@ -151,6 +156,8 @@
   background-color: white;
   padding: 0 4px;
   z-index: 1;
+  --pf-v6-c-form__label-required--Color: currentColor;
+
 }
 
 // .mui-theme .pf-v6-c-form-control {
@@ -164,6 +171,7 @@
 .mui-theme .pf-v6-c-form-control.pf-m-disabled {
   background-color: white;
   border: 1px solid rgba(0, 0, 0, 0.23);
+  --pf-v6-c-form-control--m-disabled--Color: rgba(0, 0, 0, 0.38);
 }
 
 .mui-theme .pf-v6-c-form-control input {
@@ -175,7 +183,9 @@
   box-sizing: border-box;
 }
 
-.mui-theme .pf-v6-c-form-control>:is(input,select,textarea):focus {
+
+
+.mui-theme .pf-v6-c-form-control>:is(input, select, textarea):focus {
   --pf-v6-c-form-control--OutlineOffset: none;
   outline: none;
 }
@@ -232,25 +242,26 @@
 }
 
 .mui-theme .form-fieldset-wrapper .pf-v6-c-form-control {
+
   &::before,
   &::after {
     content: revert;
   }
 }
 
-.mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
-.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
+.mui-theme .pf-v6-c-form__group .pf-v6-c-form-control:focus-within+.pf-v6-c-form__label,
+.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown)+.pf-v6-c-form__label {
   color: var(--mui-palette-primary-main);
 }
 
-.mui-theme .pf-v6-c-form__group:focus-within .pf-v6-c-form-control
- {
+.mui-theme .pf-v6-c-form__group:focus-within .pf-v6-c-form-control {
   --pf-v6-c-form-control--after--BorderWidth: 2px;
   --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-main);
 }
 
 .mui-theme .pf-v6-c-form__group:focus-within .pf-v6-c-form__label {
-  color: var(--mui-palette-primary-main); /* Change color of the label when the input is focused */
+  color: var(--mui-palette-primary-main);
+  /* Change color of the label when the input is focused */
 }
 
 .mui-theme .pf-v6-c-menu {
@@ -347,7 +358,8 @@
 }
 
 .mui-theme .pf-v6-c-radio__input {
-  display: none; /* Hide default radio button */
+  display: none;
+  /* Hide default radio button */
 }
 
 .mui-theme .pf-v6-c-radio__label {
@@ -367,29 +379,34 @@
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
-  border: 2px solid var(--mui-palette-primary-main); /* Primary color */
+  border: 2px solid var(--mui-palette-primary-main);
+  /* Primary color */
   border-radius: 50%;
-  background: var(--mui-palette-common-white); /* Background color */
+  background: var(--mui-palette-common-white);
+  /* Background color */
   transition: background 0.3s, border-color 0.3s;
 }
 
 /* When radio is checked */
-.mui-theme .pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::before {
+.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::before {
   background: var(--mui-palette-common-white);
   border-color: var(--mui-palette-primary-main);
 }
 
 /* Inner dot for checked state */
-.mui-theme .pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::after {
+.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::after {
   content: '';
   position: absolute;
-  left: 5px; /* Center the dot */
+  left: 5px;
+  /* Center the dot */
   top: 50%;
   transform: translateY(-50%);
-  width: 10px; /* Size of inner dot */
+  width: 10px;
+  /* Size of inner dot */
   height: 10px;
   border-radius: 50%;
-  background: var(--mui-palette-primary-main); /* Dot color */
+  background: var(--mui-palette-primary-main);
+  /* Dot color */
 }
 
 .mui-theme .pf-v6-c-table {

From 1c5a29879d4feafc03f438debc0fa7b187c9d6ba Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:50:08 -0400
Subject: [PATCH 9/9] format

---
 .../screens/RegisterModel/RegisterModel.tsx    | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
index 10a6b309b4..7e9378c10c 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
+++ b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -374,15 +374,15 @@ const RegisterModel: React.FC = () => {
                       </FormGroup>
                     </InputGroupItem>
                     <InputGroupItem isFill>
-                    <FormHelperText>
-                          <HelperText>
-                            <HelperTextItem>
-                              Enter a path to a model or folder. This path cannot point to a root
-                              folder.
-                            </HelperTextItem>
-                          </HelperText>
-                        </FormHelperText>
-                        </InputGroupItem>
+                      <FormHelperText>
+                        <HelperText>
+                          <HelperTextItem>
+                            Enter a path to a model or folder. This path cannot point to a root
+                            folder.
+                          </HelperTextItem>
+                        </HelperText>
+                      </FormHelperText>
+                    </InputGroupItem>
                   </InputGroup>
                 </>
               )}