From 26522569838124a7092e1c87cbae1fd9dcf2f436 Mon Sep 17 00:00:00 2001
From: Juntao Wang <juntwang@redhat.com>
Date: Mon, 19 Aug 2024 12:54:58 -0400
Subject: [PATCH] Adapt model deployment modals to the latest design

---
 .../cypress/cypress/pages/modelServing.ts     |   6 +-
 .../components/DeployRegisteredModelModal.tsx |  14 +-
 .../DataConnectionExistingField.tsx           |   4 +-
 .../DataConnectionFolderPathField.tsx         |   1 +
 .../InferenceServiceFrameworkSection.tsx      |   7 +-
 .../InferenceServiceNameSection.tsx           |  23 +--
 .../InferenceServiceServingRuntimeSection.tsx |   3 +-
 .../ManageInferenceServiceModal.tsx           |   2 +-
 .../InferenceServiceModal/ProjectSelector.tsx |   5 +-
 .../AuthServingRuntimeSection.tsx             |  39 +++---
 .../ServingRuntimeSizeSection.tsx             |  27 ++--
 .../ServingRuntimeTemplateSection.tsx         |   4 +-
 .../ServingRuntimeTokenSection.tsx            | 132 +++++++++---------
 .../KServeAutoscalerReplicaSection.tsx        |  75 +++++-----
 .../kServeModal/ManageKServeModal.tsx         | 130 ++++++++---------
 .../server/AcceleratorProfileSelectField.tsx  |   3 +-
 16 files changed, 237 insertions(+), 238 deletions(-)

diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts b/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts
index 16566af7e3..fc8f649392 100644
--- a/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts
+++ b/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts
@@ -117,7 +117,7 @@ class InferenceServiceModal extends Modal {
 
   findExistingConnectionSelect() {
     return this.find()
-      .findByRole('group', { name: 'Model location' })
+      .findByRole('group', { name: 'Source model location' })
       .findByRole('button', { name: 'Options menu' });
   }
 
@@ -202,9 +202,7 @@ class ServingRuntimeModal extends Modal {
   }
 
   findModelServerSizeSelect() {
-    return this.find()
-      .findByRole('group', { name: 'Compute resources per replica' })
-      .findByTestId('model-server-size-selection');
+    return this.find().findByTestId('model-server-size-selection');
   }
 
   findModelServerReplicasMinusButton() {
diff --git a/frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx b/frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx
index e0593b5ccb..659cb1b12a 100644
--- a/frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx
+++ b/frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Button, Form, Modal, Spinner } from '@patternfly/react-core';
+import { Alert, Button, Form, FormSection, Modal, Spinner } from '@patternfly/react-core';
 import { ModelVersion } from '~/concepts/modelRegistry/types';
 import { ProjectKind } from '~/k8sTypes';
 import useProjectErrorForRegisteredModel from '~/pages/modelRegistry/screens/RegisteredModels/useProjectErrorForRegisteredModel';
@@ -92,11 +92,13 @@ const DeployRegisteredModelModal: React.FC<DeployRegisteredModelModalProps> = ({
           ) : !deployInfoLoaded ? (
             <Spinner />
           ) : (
-            <ProjectSelector
-              selectedProject={selectedProject}
-              setSelectedProject={setSelectedProject}
-              error={error}
-            />
+            <FormSection title="Model deployment">
+              <ProjectSelector
+                selectedProject={selectedProject}
+                setSelectedProject={setSelectedProject}
+                error={error}
+              />
+            </FormSection>
           )}
         </Form>
       </Modal>
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/DataConnectionExistingField.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/DataConnectionExistingField.tsx
index f2ab552f28..0f95a8a1aa 100644
--- a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/DataConnectionExistingField.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/DataConnectionExistingField.tsx
@@ -74,9 +74,8 @@ const DataConnectionExistingField: React.FC<DataConnectionExistingFieldType> = (
             </Button>
           </Popover>
         )}
-        <FormGroup label="Name" isRequired>
+        <FormGroup label="Name" fieldId="inference-service-data-connection" isRequired>
           <SimpleSelect
-            id="inference-service-data-connection"
             isFullWidth
             isDisabled={isDataConnectionsEmpty}
             options={connectionsWithoutBucket.map((connection) => ({
@@ -84,6 +83,7 @@ const DataConnectionExistingField: React.FC<DataConnectionExistingFieldType> = (
               dropdownLabel: getLabeledOption(connection),
               label: getDataConnectionDisplayName(connection.dataConnection),
             }))}
+            toggleProps={{ id: 'inference-service-data-connection' }}
             value={data.storage.dataConnection}
             toggleLabel={
               selectedDataConnection ? getLabeledOption(selectedDataConnection) : placeholderText
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/DataConnectionFolderPathField.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/DataConnectionFolderPathField.tsx
index 3d71404df3..0cb29251e9 100644
--- a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/DataConnectionFolderPathField.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/DataConnectionFolderPathField.tsx
@@ -46,6 +46,7 @@ const DataConnectionFolderPathField: React.FC<DataConnectionFolderPathFieldProps
   return (
     <FormGroup fieldId="folder-path" label="Path" isRequired>
       <TextInput
+        id="folder-path"
         aria-label="folder-path"
         data-testid="folder-path"
         type="text"
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx
index 84c4740d99..25a7bfdd9d 100644
--- a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx
@@ -52,10 +52,15 @@ const InferenceServiceFrameworkSection: React.FC<InferenceServiceFrameworkSectio
   }
 
   return (
-    <FormGroup label="Model framework (name - version)" isRequired>
+    <FormGroup
+      label="Model framework (name - version)"
+      fieldId="inference-service-framework-selection"
+      isRequired
+    >
       <SimpleSelect
         dataTestId="inference-service-framework-selection"
         isDisabled={models.length === 0}
+        toggleProps={{ id: 'inference-service-framework-selection' }}
         options={models.map((framework) => {
           const name = framework.version
             ? `${framework.name} - ${framework.version}`
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceNameSection.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceNameSection.tsx
index d5ded68074..9a030d189a 100644
--- a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceNameSection.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceNameSection.tsx
@@ -24,7 +24,7 @@ const InferenceServiceNameSection: React.FC<InferenceServiceNameSectionProps> =
   const validated = !isNameValid ? 'warning' : 'default';
 
   return (
-    <FormGroup label="Model name" fieldId="inference-service-name-input" isRequired>
+    <FormGroup label="Model deployment name" fieldId="inference-service-name-input" isRequired>
       <TextInput
         isRequired
         id="inference-service-name-input"
@@ -33,15 +33,18 @@ const InferenceServiceNameSection: React.FC<InferenceServiceNameSectionProps> =
         onChange={(e, name) => setData('name', name)}
         validated={validated}
       />
-      {validated === 'warning' && (
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem variant={validated} icon={<ExclamationTriangleIcon />}>
-              Cannot exceed 253 characters
-            </HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      )}
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem
+            variant={validated}
+            icon={isNameValid ? undefined : <ExclamationTriangleIcon />}
+          >
+            {isNameValid
+              ? 'This is the name of the inference service created when the model is deployed'
+              : 'Cannot exceed 253 characters'}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 };
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceServingRuntimeSection.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceServingRuntimeSection.tsx
index 869cf2a90f..c62eaa2ebd 100644
--- a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceServingRuntimeSection.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceServingRuntimeSection.tsx
@@ -49,7 +49,7 @@ const InferenceServiceServingRuntimeSection: React.FC<
   }
 
   return (
-    <FormGroup label="Model servers" isRequired>
+    <FormGroup label="Model server" fieldId="inference-service-model-selection" isRequired>
       <SimpleSelect
         dataTestId="inference-service-model-selection"
         isDisabled={servingRuntimes.length === 0}
@@ -57,6 +57,7 @@ const InferenceServiceServingRuntimeSection: React.FC<
           key: servingRuntime.metadata.name,
           label: getDisplayNameFromK8sResource(servingRuntime),
         }))}
+        toggleProps={{ id: 'inference-service-model-selection' }}
         isFullWidth
         value={data.servingRuntimeName}
         toggleLabel={
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx
index 83e3ed012e..76ca7e7eef 100644
--- a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx
@@ -182,7 +182,7 @@ const ManageInferenceServiceModal: React.FC<ManageInferenceServiceModalProps> =
                 />
               </StackItem>
               <StackItem>
-                <FormSection title="Model location" id="model-location">
+                <FormSection title="Source model location" id="model-location">
                   <DataConnectionSection
                     data={createData}
                     setData={setCreateData}
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ProjectSelector.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ProjectSelector.tsx
index 9c6e48a960..247b50237f 100644
--- a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ProjectSelector.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ProjectSelector.tsx
@@ -31,7 +31,7 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
   const { projects } = React.useContext(ProjectsContext);
 
   return (
-    <FormGroup label="Project" isRequired>
+    <FormGroup label="Project" fieldId="deploy-model-project-selector" isRequired>
       <Stack hasGutter>
         <StackItem>
           <Select
@@ -56,6 +56,7 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
                 isExpanded={isOpen}
                 isFullWidth
                 data-testid="deploy-model-project-selector"
+                id="deploy-model-project-selector"
               >
                 {selectedProject
                   ? getDisplayNameFromK8sResource(selectedProject)
@@ -82,7 +83,7 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
               <Link
                 to={`/projects/${selectedProject.metadata.name}?section=${ProjectSectionID.MODEL_SERVER}`}
               >
-                Go to {getDisplayNameFromK8sResource(selectedProject)} project page
+                Go to <b>{getDisplayNameFromK8sResource(selectedProject)}</b> project page
               </Link>
             </Alert>
           </StackItem>
diff --git a/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/AuthServingRuntimeSection.tsx b/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/AuthServingRuntimeSection.tsx
index 5726b31c11..e365356048 100644
--- a/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/AuthServingRuntimeSection.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/AuthServingRuntimeSection.tsx
@@ -4,7 +4,6 @@ import {
   Button,
   Checkbox,
   FormGroup,
-  FormSection,
   Popover,
   Stack,
   StackItem,
@@ -70,27 +69,25 @@ const AuthServingRuntimeSection: React.FC<AuthServingRuntimeSectionProps> = ({
       )}
       {publicRoute && (
         <StackItem>
-          <FormSection title="Model route" titleElement="div">
-            <FormGroup>
-              <Checkbox
-                label="Make deployed models available through an external route"
-                id="alt-form-checkbox-route"
-                data-testid="alt-form-checkbox-route"
-                name="alt-form-checkbox-route"
-                isChecked={data.externalRoute}
-                isDisabled={!allowCreate}
-                onChange={(e, check) => {
-                  setData('externalRoute', check);
-                  if (check && allowCreate) {
-                    setData('tokenAuth', check);
-                    if (data.tokens.length === 0) {
-                      createNewToken();
-                    }
+          <FormGroup fieldId="alt-form-checkbox-route" label="Model route">
+            <Checkbox
+              label="Make deployed models available through an external route"
+              id="alt-form-checkbox-route"
+              data-testid="alt-form-checkbox-route"
+              name="alt-form-checkbox-route"
+              isChecked={data.externalRoute}
+              isDisabled={!allowCreate}
+              onChange={(e, check) => {
+                setData('externalRoute', check);
+                if (check && allowCreate) {
+                  setData('tokenAuth', check);
+                  if (data.tokens.length === 0) {
+                    createNewToken();
                   }
-                }}
-              />
-            </FormGroup>
-          </FormSection>
+                }
+              }}
+            />
+          </FormGroup>
         </StackItem>
       )}
       <StackItem>
diff --git a/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeSection.tsx b/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeSection.tsx
index e6dc9fe2ef..0d2286cf30 100644
--- a/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeSection.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeSection.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormGroup, FormSection, Stack, StackItem, Popover, Icon } from '@patternfly/react-core';
+import { FormGroup, Stack, StackItem, Popover, Icon } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import {
@@ -75,7 +75,7 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
     });
 
   return (
-    <FormSection title="Compute resources per replica">
+    <>
       <FormGroup
         label="Model server size"
         labelIcon={
@@ -87,6 +87,8 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
             </Popover>
           ) : undefined
         }
+        fieldId="model-server-size-selection"
+        isRequired
       >
         <Stack hasGutter>
           <StackItem>
@@ -94,6 +96,7 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
               dataTestId="model-server-size-selection"
               isFullWidth
               options={sizeOptions()}
+              toggleProps={{ id: 'model-server-size-selection' }}
               toggleLabel={data.modelSize.name || 'Select a model server size'}
               onChange={(option) => {
                 const valuesSelected = sizeCustom.find((element) => element.name === option);
@@ -112,18 +115,16 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
         </Stack>
       </FormGroup>
       {!gpuDisabled && (
-        <FormGroup>
-          <AcceleratorProfileSelectField
-            acceleratorProfileState={acceleratorProfileState}
-            supportedAcceleratorProfiles={supportedAcceleratorProfiles}
-            resourceDisplayName="serving runtime"
-            infoContent="Ensure that appropriate tolerations are in place before adding an accelerator to your model server."
-            selectedAcceleratorProfile={selectedAcceleratorProfile}
-            setSelectedAcceleratorProfile={setSelectedAcceleratorProfile}
-          />
-        </FormGroup>
+        <AcceleratorProfileSelectField
+          acceleratorProfileState={acceleratorProfileState}
+          supportedAcceleratorProfiles={supportedAcceleratorProfiles}
+          resourceDisplayName="serving runtime"
+          infoContent="Ensure that appropriate tolerations are in place before adding an accelerator to your model server."
+          selectedAcceleratorProfile={selectedAcceleratorProfile}
+          setSelectedAcceleratorProfile={setSelectedAcceleratorProfile}
+        />
       )}
-    </FormSection>
+    </>
   );
 };
 
diff --git a/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx b/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx
index a7ed7bed1e..08b54d671d 100644
--- a/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx
@@ -59,11 +59,10 @@ const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps
   }));
 
   return (
-    <FormGroup label="Serving runtime" fieldId="serving-runtime-selection" isRequired>
+    <FormGroup label="Serving runtime" fieldId="serving-runtime-template-selection" isRequired>
       <SimpleSelect
         isFullWidth
         isDisabled={isEditing || filteredTemplates.length === 0}
-        id="serving-runtime-template-selection"
         dataTestId="serving-runtime-template-selection"
         aria-label="Select a template"
         options={options}
@@ -72,6 +71,7 @@ const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps
             ? data.servingRuntimeTemplateName
             : 'Select one'
         }
+        toggleProps={{ id: 'serving-runtime-template-selection' }}
         value={data.servingRuntimeTemplateName}
         onChange={(name) => {
           setData('servingRuntimeTemplateName', name);
diff --git a/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTokenSection.tsx b/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTokenSection.tsx
index 2ed8b7f496..363a4ddd5f 100644
--- a/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTokenSection.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTokenSection.tsx
@@ -1,13 +1,5 @@
 import * as React from 'react';
-import {
-  Alert,
-  Button,
-  Checkbox,
-  FormGroup,
-  FormSection,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Alert, Button, Checkbox, FormGroup, Stack, StackItem } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
 import IndentSection from '~/pages/projects/components/IndentSection';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
@@ -32,63 +24,71 @@ const ServingRuntimeTokenSection: React.FC<ServingRuntimeTokenSectionProps> = ({
   allowCreate,
   createNewToken,
 }) => (
-  <FormSection title="Token authentication" id="auth-section" data-testid="auth-section">
-    <FormGroup>
-      <Checkbox
-        label="Require token authentication"
-        id="alt-form-checkbox-auth"
-        data-testid="alt-form-checkbox-auth"
-        name="alt-form-checkbox-auth"
-        isDisabled={!allowCreate}
-        isChecked={data.tokenAuth}
-        onChange={(e, check) => {
-          setData('tokenAuth', check);
-          if (data.tokens.length === 0) {
-            createNewToken();
-          }
-        }}
-      />
-    </FormGroup>
-    {data.tokenAuth && (
-      <IndentSection>
-        <Stack hasGutter>
-          {allowCreate && (
-            <StackItem>
-              <Alert
-                variant="info"
-                isInline
-                title="The actual tokens will be created and displayed when the model server is configured."
-              />
-            </StackItem>
-          )}
-          {data.tokens.map((token) => (
-            <StackItem key={token.uuid}>
-              <ServingRuntimeTokenInput
-                token={token}
-                data={data}
-                setData={setData}
-                disabled={!allowCreate}
-              />
-            </StackItem>
-          ))}
-          <StackItem>
-            <Button
-              onClick={() => {
-                createNewToken();
-              }}
-              isInline
-              iconPosition="left"
-              variant="link"
-              icon={<PlusCircleIcon />}
-              isDisabled={!allowCreate}
-            >
-              Add a service account
-            </Button>
-          </StackItem>
-        </Stack>
-      </IndentSection>
-    )}
-  </FormSection>
+  <FormGroup
+    label="Token authentication"
+    data-testid="auth-section"
+    fieldId="alt-form-checkbox-auth"
+  >
+    <Stack hasGutter id="auth-section">
+      <StackItem>
+        <Checkbox
+          label="Require token authentication"
+          id="alt-form-checkbox-auth"
+          data-testid="alt-form-checkbox-auth"
+          name="alt-form-checkbox-auth"
+          isDisabled={!allowCreate}
+          isChecked={data.tokenAuth}
+          onChange={(e, check) => {
+            setData('tokenAuth', check);
+            if (data.tokens.length === 0) {
+              createNewToken();
+            }
+          }}
+        />
+      </StackItem>
+      {data.tokenAuth && (
+        <StackItem>
+          <IndentSection>
+            <Stack hasGutter>
+              {allowCreate && (
+                <StackItem>
+                  <Alert
+                    variant="info"
+                    isInline
+                    title="The actual tokens will be created and displayed when the model server is configured."
+                  />
+                </StackItem>
+              )}
+              {data.tokens.map((token) => (
+                <StackItem key={token.uuid}>
+                  <ServingRuntimeTokenInput
+                    token={token}
+                    data={data}
+                    setData={setData}
+                    disabled={!allowCreate}
+                  />
+                </StackItem>
+              ))}
+              <StackItem>
+                <Button
+                  onClick={() => {
+                    createNewToken();
+                  }}
+                  isInline
+                  iconPosition="left"
+                  variant="link"
+                  icon={<PlusCircleIcon />}
+                  isDisabled={!allowCreate}
+                >
+                  Add a service account
+                </Button>
+              </StackItem>
+            </Stack>
+          </IndentSection>
+        </StackItem>
+      )}
+    </Stack>
+  </FormGroup>
 );
 
 export default ServingRuntimeTokenSection;
diff --git a/frontend/src/pages/modelServing/screens/projects/kServeModal/KServeAutoscalerReplicaSection.tsx b/frontend/src/pages/modelServing/screens/projects/kServeModal/KServeAutoscalerReplicaSection.tsx
index d238080084..2e1496715f 100644
--- a/frontend/src/pages/modelServing/screens/projects/kServeModal/KServeAutoscalerReplicaSection.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/kServeModal/KServeAutoscalerReplicaSection.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormGroup, FormSection, NumberInput, Popover, Icon } from '@patternfly/react-core';
+import { FormGroup, NumberInput, Popover, Icon } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import { CreatingInferenceServiceObject } from '~/pages/modelServing/screens/types';
@@ -25,42 +25,43 @@ const KServeAutoscalerReplicaSection: React.FC<KServeAutoscalerReplicaSectionPro
   };
 
   return (
-    <FormSection title="Model server replicas">
-      <FormGroup
-        label="Number of model server replicas to deploy"
-        labelIcon={
-          infoContent ? (
-            <Popover bodyContent={<div>{infoContent}</div>}>
-              <Icon aria-label="Model server replicas info" role="button">
-                <OutlinedQuestionCircleIcon />
-              </Icon>
-            </Popover>
-          ) : undefined
-        }
-      >
-        <NumberInput
-          inputAriaLabel="model server replicas number input"
-          value={data.minReplicas}
-          widthChars={10}
-          min={MIN_SIZE}
-          onPlus={() => onStep(1)}
-          onMinus={() => onStep(-1)}
-          onChange={(event) => {
-            if (isHTMLInputElement(event.target)) {
-              const newSize = Number(event.target.value);
-              setData(
-                'minReplicas',
-                Number.isNaN(newSize) ? MIN_SIZE : normalizeBetween(newSize, MIN_SIZE),
-              );
-              setData(
-                'maxReplicas',
-                Number.isNaN(newSize) ? MIN_SIZE : normalizeBetween(newSize, MIN_SIZE),
-              );
-            }
-          }}
-        />
-      </FormGroup>
-    </FormSection>
+    <FormGroup
+      label="Number of model server replicas to deploy"
+      labelIcon={
+        infoContent ? (
+          <Popover bodyContent={<div>{infoContent}</div>}>
+            <Icon aria-label="Model server replicas info" role="button">
+              <OutlinedQuestionCircleIcon />
+            </Icon>
+          </Popover>
+        ) : undefined
+      }
+      fieldId="model-server-replicas"
+      isRequired
+    >
+      <NumberInput
+        inputProps={{ id: 'model-server-replicas' }}
+        inputAriaLabel="model server replicas number input"
+        value={data.minReplicas}
+        widthChars={10}
+        min={MIN_SIZE}
+        onPlus={() => onStep(1)}
+        onMinus={() => onStep(-1)}
+        onChange={(event) => {
+          if (isHTMLInputElement(event.target)) {
+            const newSize = Number(event.target.value);
+            setData(
+              'minReplicas',
+              Number.isNaN(newSize) ? MIN_SIZE : normalizeBetween(newSize, MIN_SIZE),
+            );
+            setData(
+              'maxReplicas',
+              Number.isNaN(newSize) ? MIN_SIZE : normalizeBetween(newSize, MIN_SIZE),
+            );
+          }
+        }}
+      />
+    </FormGroup>
   );
 };
 
diff --git a/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx b/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx
index f1799cf66a..789d10833b 100644
--- a/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx
@@ -313,88 +313,76 @@ const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
             </StackItem>
           )}
           <StackItem>
-            {projectSection || (
-              <ProjectSection
-                projectName={
-                  (projectContext?.currentProject &&
-                    getDisplayNameFromK8sResource(projectContext.currentProject)) ||
-                  editInfo?.inferenceServiceEditInfo?.metadata.namespace ||
-                  ''
-                }
-              />
-            )}
-          </StackItem>
-          {!shouldFormHidden && (
-            <>
-              <StackItem>
-                <StackItem>
+            <FormSection title="Model deployment">
+              {projectSection || (
+                <ProjectSection
+                  projectName={
+                    (projectContext?.currentProject &&
+                      getDisplayNameFromK8sResource(projectContext.currentProject)) ||
+                    editInfo?.inferenceServiceEditInfo?.metadata.namespace ||
+                    ''
+                  }
+                />
+              )}
+              {!shouldFormHidden && (
+                <>
                   <InferenceServiceNameSection
                     data={createDataInferenceService}
                     setData={setCreateDataInferenceService}
                     isNameValid={isInferenceServiceNameWithinLimit}
                   />
-                </StackItem>
-              </StackItem>
-              <StackItem>
-                <ServingRuntimeTemplateSection
-                  data={createDataServingRuntime}
-                  setData={setCreateDataServingRuntime}
-                  templates={servingRuntimeTemplates || []}
-                  isEditing={!!editInfo}
-                  selectedAcceleratorProfile={selectedAcceleratorProfile}
-                />
-              </StackItem>
-              <StackItem>
-                <InferenceServiceFrameworkSection
-                  data={createDataInferenceService}
-                  setData={setCreateDataInferenceService}
-                  modelContext={servingRuntimeSelected?.spec.supportedModelFormats}
-                  registeredModelFormat={registeredModelDeployInfo?.modelFormat}
-                />
-              </StackItem>
-              <StackItem>
-                <KServeAutoscalerReplicaSection
-                  data={createDataInferenceService}
-                  setData={setCreateDataInferenceService}
-                  infoContent="Consider network traffic and failover scenarios when specifying the number of model
-                server replicas."
-                />
-              </StackItem>
-              <StackItem>
-                <ServingRuntimeSizeSection
-                  data={createDataInferenceService}
-                  setData={setCreateDataInferenceService}
-                  sizes={sizes}
-                  servingRuntimeSelected={servingRuntimeSelected}
-                  acceleratorProfileState={acceleratorProfileState}
-                  selectedAcceleratorProfile={selectedAcceleratorProfile}
-                  setSelectedAcceleratorProfile={setSelectedAcceleratorProfile}
-                  infoContent="Select a server size that will accommodate your largest model. See the product documentation for more information."
-                />
-              </StackItem>
-              {isAuthorinoEnabled && (
-                <StackItem>
-                  <AuthServingRuntimeSection
+                  <ServingRuntimeTemplateSection
+                    data={createDataServingRuntime}
+                    setData={setCreateDataServingRuntime}
+                    templates={servingRuntimeTemplates || []}
+                    isEditing={!!editInfo}
+                    selectedAcceleratorProfile={selectedAcceleratorProfile}
+                  />
+                  <InferenceServiceFrameworkSection
                     data={createDataInferenceService}
                     setData={setCreateDataInferenceService}
-                    allowCreate={allowCreate}
-                    publicRoute
+                    modelContext={servingRuntimeSelected?.spec.supportedModelFormats}
+                    registeredModelFormat={registeredModelDeployInfo?.modelFormat}
                   />
-                </StackItem>
-              )}
-              <StackItem>
-                <FormSection title="Model location" id="model-location">
-                  <DataConnectionSection
+                  <KServeAutoscalerReplicaSection
                     data={createDataInferenceService}
                     setData={setCreateDataInferenceService}
-                    loaded={!!projectContext?.dataConnections || dataConnectionsLoaded}
-                    loadError={dataConnectionsLoadError}
-                    dataConnections={dataConnections}
+                    infoContent="Consider network traffic and failover scenarios when specifying the number of model
+                server replicas."
                   />
-                </FormSection>
-              </StackItem>
-            </>
-          )}
+                  <ServingRuntimeSizeSection
+                    data={createDataInferenceService}
+                    setData={setCreateDataInferenceService}
+                    sizes={sizes}
+                    servingRuntimeSelected={servingRuntimeSelected}
+                    acceleratorProfileState={acceleratorProfileState}
+                    selectedAcceleratorProfile={selectedAcceleratorProfile}
+                    setSelectedAcceleratorProfile={setSelectedAcceleratorProfile}
+                    infoContent="Select a server size that will accommodate your largest model. See the product documentation for more information."
+                  />
+                  {isAuthorinoEnabled && (
+                    <AuthServingRuntimeSection
+                      data={createDataInferenceService}
+                      setData={setCreateDataInferenceService}
+                      allowCreate={allowCreate}
+                      publicRoute
+                    />
+                  )}
+                </>
+              )}
+            </FormSection>
+            {!shouldFormHidden && (
+              <FormSection title="Source model location" id="model-location">
+                <DataConnectionSection
+                  data={createDataInferenceService}
+                  setData={setCreateDataInferenceService}
+                  loaded={!!projectContext?.dataConnections || dataConnectionsLoaded}
+                  loadError={dataConnectionsLoadError}
+                  dataConnections={dataConnections}
+                />
+              </FormSection>
+            )}
+          </StackItem>
         </Stack>
       </Form>
     </Modal>
diff --git a/frontend/src/pages/notebookController/screens/server/AcceleratorProfileSelectField.tsx b/frontend/src/pages/notebookController/screens/server/AcceleratorProfileSelectField.tsx
index a9f958075c..a4be20367c 100644
--- a/frontend/src/pages/notebookController/screens/server/AcceleratorProfileSelectField.tsx
+++ b/frontend/src/pages/notebookController/screens/server/AcceleratorProfileSelectField.tsx
@@ -187,6 +187,7 @@ const AcceleratorProfileSelectField: React.FC<AcceleratorProfileSelectFieldProps
               </Popover>
             ) : undefined
           }
+          isRequired
         >
           <SimpleSelect
             isFullWidth
@@ -234,7 +235,7 @@ const AcceleratorProfileSelectField: React.FC<AcceleratorProfileSelectFieldProps
       )}
       {selectedAcceleratorProfile.profile && (
         <StackItem>
-          <FormGroup label="Number of accelerators" fieldId="number-of-accelerators">
+          <FormGroup label="Number of accelerators" fieldId="number-of-accelerators" isRequired>
             <InputGroup>
               <NumberInput
                 inputAriaLabel="Number of accelerators"