set initial value and test

Author: katieperry4

frontend/src/__tests__/cypress/cypress/pages/modelServing.ts

@@ -456,6 +456,26 @@ class ServingRuntimeModal extends Modal {
     return this.find().findByTestId('model-server-size-selection');
   }
 
+  findModelServerSizeSelectOption(name: string) {
+    return cy.findByTestId(`model-server-size-select-option-${name}`);
+  }
+
+  findCPURequestInput() {
+    return this.find().findByTestId('cpu-request-input');
+  }
+
+  findCPULimitInput() {
+    return this.find().findByTestId('cpu-limit-input');
+  }
+
+  findMemoryRequestInput() {
+    return this.find().findByTestId('memory-request-input');
+  }
+
+  findMemoryLimitInput() {
+    return this.find().findByTestId('memory-limit-input');
+  }
+
   findDeployedModelRouteCheckbox() {
     return this.find().findByTestId('alt-form-checkbox-route');
   }

frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/runtime/servingRuntimeList.cy.ts

@@ -896,6 +896,25 @@ describe('Serving Runtime List', () => {
       kserveModal.findServingRuntimeEnvVarsValue('0').type('test-value');
       kserveModal.findSubmitButton().should('be.enabled');
 
+      // test model server size select
+      kserveModal.findModelServerSizeSelect().click();
+      kserveModal.findModelServerSizeSelectOption('Medium').find('button').click();
+      kserveModal.findSubmitButton().should('be.enabled');
+      kserveModal.findModelServerSizeSelect().click();
+      kserveModal.findModelServerSizeSelectOption('Custom').find('button').click();
+      kserveModal.findSubmitButton().should('be.enabled');
+
+      // test custom cpu and memory
+      kserveModal.findCPURequestInput().clear().type('3');
+      kserveModal.findCPULimitInput().clear().type('2');
+      kserveModal.findMemoryRequestInput().clear().type('4Gi');
+      kserveModal.findMemoryLimitInput().clear().type('3Gi');
+      kserveModal.findSubmitButton().should('be.disabled');
+
+      kserveModal.findModelServerSizeSelect().click();
+      kserveModal.findModelServerSizeSelectOption('Small').find('button').click();
+      kserveModal.findSubmitButton().should('be.enabled');
+
       // test submitting form, the modal should close to indicate success.
       kserveModal.findSubmitButton().click();
       kserveModal.shouldBeOpen(false);

frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeExpandedField.tsx

@@ -32,31 +32,45 @@ const ServingRuntimeSizeExpandedField = ({
       },
     });
   };
+  const setInitialValue = (
+    type: ContainerResourceAttributes,
+    variant: ResourceKeys,
+  ): string | number => {
+    if (data.resources[variant]?.[type] === undefined) {
+      handleChange(type, variant, '1');
+      return '1';
+    }
+    return data.resources[variant][type];
+  };
 
   return (
     <Grid hasGutter md={6}>
       <FormGroup label="CPUs requested">
         <CPUField
           onChange={(value) => handleChange(ContainerResourceAttributes.CPU, 'requests', value)}
-          value={data.resources.requests?.cpu}
+          value={setInitialValue(ContainerResourceAttributes.CPU, 'requests')}
+          dataTestId="cpu-request"
         />
       </FormGroup>
       <FormGroup label="Memory requested">
         <MemoryField
           onChange={(value) => handleChange(ContainerResourceAttributes.MEMORY, 'requests', value)}
-          value={data.resources.requests?.memory}
+          value={setInitialValue(ContainerResourceAttributes.MEMORY, 'requests')}
+          dataTestId="memory-request"
         />
       </FormGroup>
       <FormGroup label="CPU limit">
         <CPUField
           onChange={(value) => handleChange(ContainerResourceAttributes.CPU, 'limits', value)}
-          value={data.resources.limits?.cpu}
+          value={setInitialValue(ContainerResourceAttributes.CPU, 'limits')}
+          dataTestId="cpu-limit"
         />
       </FormGroup>
       <FormGroup label="Memory limit">
         <MemoryField
           onChange={(value) => handleChange(ContainerResourceAttributes.MEMORY, 'limits', value)}
-          value={data.resources.limits?.memory}
+          value={setInitialValue(ContainerResourceAttributes.MEMORY, 'limits')}
+          dataTestId="memory-limit"
         />
       </FormGroup>
     </Grid>

frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeSection.tsx

@@ -53,14 +53,15 @@ const ServingRuntimeSizeSection = ({
   const sizeOptions = () =>
     sizeCustom.map((size) => {
       const { name } = size;
+      const dataTestId = `model-server-size-select-option-${name}`;
       const desc =
         name !== 'Custom'
           ? `Limits: ${size.resources.limits?.cpu || '??'} CPU, ` +
             `${formatMemory(size.resources.limits?.memory) || '??'} Memory ` +
             `Requests: ${size.resources.requests?.cpu || '??'} CPU, ` +
             `${formatMemory(size.resources.requests?.memory) || '??'} Memory`
           : '';
-      return { key: name, label: name, description: desc };
+      return { key: name, label: name, description: desc, dataTestId };
     });
 
   const isHardwareProfileSupported = React.useCallback(