Fix some param bugs when the value is undefined (#1215)

dashboard/src/components/DeploymentForm/BasicDeploymentForm/BasicDeploymentForm.test.tsx

@@ -72,6 +72,7 @@ const defaultProps = {
       />,
     );
     expect(wrapper).toMatchSnapshot();
+
     Object.keys(t.params).map((param, i) => {
       wrapper.find(`input#${param}-${i}`).simulate("change");
       const mockCalls = handleBasicFormParamChange.mock.calls;

dashboard/src/components/DeploymentForm/BasicDeploymentForm/SliderParam.test.tsx

@@ -151,3 +151,14 @@ it("uses the param minimum and maximum if defined", () => {
   expect(slider.prop("min")).toBe(5);
   expect(slider.prop("max")).toBe(50);
 });
+
+it("defaults to the min if the value is undefined", () => {
+  const param = {
+    type: "string",
+    path: "disk",
+  } as IBasicFormParam;
+
+  const wrapper = shallow(<SliderParam {...defaultProps} param={param} min={5} />);
+
+  expect(wrapper.state("value")).toBe(5);
+});

dashboard/src/components/DeploymentForm/BasicDeploymentForm/SliderParam.tsx

@@ -27,7 +27,7 @@ function toNumber(value: string) {
 
 class SliderParam extends React.Component<ISliderParamProps, ISliderParamState> {
   public state: ISliderParamState = {
-    value: toNumber(this.props.param.value) || this.props.min,
+    value: (this.props.param.value && toNumber(this.props.param.value)) || this.props.min,
   };
 
   // onChangeSlider is executed when the slider is dropped at one point

dashboard/src/components/DeploymentForm/BasicDeploymentForm/TextParam.test.tsx

@@ -9,13 +9,13 @@ const defaultProps = {
   name: "username",
   label: "Username",
   param,
-  handleBasicFormParamChange: jest.fn(),
+  handleBasicFormParamChange: jest.fn(() => jest.fn()),
 };
 
 it("should render a text param with title and description", () => {
   const wrapper = mount(<TextParam {...defaultProps} />);
   const input = wrapper.find("input");
-  expect(input.prop("defaultValue")).toBe(defaultProps.param.value);
+  expect(input.prop("value")).toBe(defaultProps.param.value);
   expect(wrapper).toMatchSnapshot();
 });
 
@@ -39,3 +39,17 @@ it("should forward the proper value", () => {
   expect(handleBasicFormParamChange.mock.calls[0][0]).toBe("username");
   expect(handler.mock.calls[0][0]).toMatchObject(event);
 });
+
+it("should set the input value as empty if the param value is not defined", () => {
+  const tparam = { path: "username", type: "string" };
+  const tprops = {
+    id: "foo",
+    name: "username",
+    label: "Username",
+    param: tparam,
+    handleBasicFormParamChange: jest.fn(() => jest.fn()),
+  };
+  const wrapper = mount(<TextParam {...tprops} />);
+  const input = wrapper.find("input");
+  expect(input.prop("value")).toBe("");
+});

dashboard/src/components/DeploymentForm/BasicDeploymentForm/TextParam.tsx

@@ -29,7 +29,7 @@ class TextParam extends React.Component<IStringParamProps> {
           <input
             id={id}
             onChange={this.props.handleBasicFormParamChange(name, param)}
-            defaultValue={param.value}
+            value={param.value === undefined ? "" : param.value}
             type={inputType ? inputType : "text"}
           />
         </label>

dashboard/src/components/DeploymentForm/BasicDeploymentForm/__snapshots__/BasicDeploymentForm.test.tsx.snap

@@ -347,10 +347,10 @@ exports[`renders a basic deployment with a email 1`] = `
       >
         email
         <input
-          defaultValue="user@example.com"
           id="email-0"
           onChange={[Function]}
           type="string"
+          value="user@example.com"
         />
       </label>
     </div>
@@ -652,10 +652,10 @@ exports[`renders a basic deployment with a generic number 1`] = `
       >
         replicas
         <input
-          defaultValue={1}
           id="replicas-0"
           onChange={[Function]}
           type="number"
+          value={1}
         />
       </label>
     </div>
@@ -699,10 +699,10 @@ exports[`renders a basic deployment with a generic string 1`] = `
       >
         blogName
         <input
-          defaultValue="my-blog"
           id="blogName-0"
           onChange={[Function]}
           type="string"
+          value="my-blog"
         />
       </label>
     </div>
@@ -744,10 +744,10 @@ exports[`renders a basic deployment with a password 1`] = `
       >
         password
         <input
-          defaultValue="sserpdrow"
           id="password-0"
           onChange={[Function]}
           type="string"
+          value="sserpdrow"
         />
       </label>
     </div>
@@ -789,10 +789,10 @@ exports[`renders a basic deployment with a username 1`] = `
       >
         username
         <input
-          defaultValue="user"
           id="username-0"
           onChange={[Function]}
           type="string"
+          value="user"
         />
       </label>
     </div>
@@ -847,10 +847,10 @@ exports[`renders a basic deployment with username, password, email and a generic
       >
         username
         <input
-          defaultValue="user"
           id="username-0"
           onChange={[Function]}
           type="string"
+          value="user"
         />
       </label>
     </div>
@@ -875,10 +875,10 @@ exports[`renders a basic deployment with username, password, email and a generic
       >
         password
         <input
-          defaultValue="sserpdrow"
           id="password-1"
           onChange={[Function]}
           type="string"
+          value="sserpdrow"
         />
       </label>
     </div>
@@ -903,10 +903,10 @@ exports[`renders a basic deployment with username, password, email and a generic
       >
         email
         <input
-          defaultValue="user@example.com"
           id="email-2"
           onChange={[Function]}
           type="string"
+          value="user@example.com"
         />
       </label>
     </div>
@@ -932,10 +932,10 @@ exports[`renders a basic deployment with username, password, email and a generic
       >
         blogName
         <input
-          defaultValue="my-blog"
           id="blogName-3"
           onChange={[Function]}
           type="string"
+          value="my-blog"
         />
       </label>
     </div>

dashboard/src/components/DeploymentForm/BasicDeploymentForm/__snapshots__/TextParam.test.tsx.snap

@@ -20,9 +20,10 @@ exports[`should render a text param with title and description 1`] = `
     >
       Username
       <input
-        defaultValue="user"
         id="foo"
+        onChange={[Function]}
         type="text"
+        value="user"
       />
     </label>
   </div>