Form key refactor (#1258)

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

@@ -15,55 +15,47 @@ const defaultProps = {
 [
   {
     description: "renders a basic deployment with a username",
-    params: { username: { path: "wordpressUsername", value: "user" } as IBasicFormParam },
+    params: [{ path: "wordpressUsername", value: "user" } as IBasicFormParam],
   },
   {
     description: "renders a basic deployment with a password",
-    params: {
-      password: { path: "wordpressPassword", value: "sserpdrow" } as IBasicFormParam,
-    },
+    params: [{ path: "wordpressPassword", value: "sserpdrow" } as IBasicFormParam],
   },
   {
     description: "renders a basic deployment with a email",
-    params: { email: { path: "wordpressEmail", value: "[email protected]" } as IBasicFormParam },
+    params: [{ path: "wordpressEmail", value: "[email protected]" } as IBasicFormParam],
   },
   {
     description: "renders a basic deployment with a generic string",
-    params: {
-      blogName: { path: "blogName", value: "my-blog", type: "string" } as IBasicFormParam,
-    },
+    params: [{ path: "blogName", value: "my-blog", type: "string" } as IBasicFormParam],
   },
   {
     description: "renders a basic deployment with a disk size",
-    params: {
-      diskSize: {
+    params: [
+      {
         path: "size",
         value: "10Gi",
         type: "string",
         render: "slider",
       } as IBasicFormParam,
-    },
+    ],
   },
   {
     description: "renders a basic deployment with username, password, email and a generic string",
-    params: {
-      username: { path: "wordpressUsername", value: "user" } as IBasicFormParam,
-      password: { path: "wordpressPassword", value: "sserpdrow" } as IBasicFormParam,
-      email: { path: "wordpressEmail", value: "[email protected]" } as IBasicFormParam,
-      blogName: { path: "blogName", value: "my-blog", type: "string" } as IBasicFormParam,
-    },
+    params: [
+      { path: "wordpressUsername", value: "user" } as IBasicFormParam,
+      { path: "wordpressPassword", value: "sserpdrow" } as IBasicFormParam,
+      { path: "wordpressEmail", value: "[email protected]" } as IBasicFormParam,
+      { path: "blogName", value: "my-blog", type: "string" } as IBasicFormParam,
+    ],
   },
   {
     description: "renders a basic deployment with a generic boolean",
-    params: {
-      enableMetrics: { path: "enableMetrics", value: true, type: "boolean" } as IBasicFormParam,
-    },
+    params: [{ path: "enableMetrics", value: true, type: "boolean" } as IBasicFormParam],
   },
   {
     description: "renders a basic deployment with a generic number",
-    params: {
-      replicas: { path: "replicas", value: 1, type: "integer" } as IBasicFormParam,
-    },
+    params: [{ path: "replicas", value: 1, type: "integer" } as IBasicFormParam],
   },
 ].forEach(t => {
   it(t.description, () => {
@@ -78,44 +70,42 @@ const defaultProps = {
     );
     expect(wrapper).toMatchSnapshot();
 
-    Object.keys(t.params).map((param, i) => {
-      wrapper.find(`input#${param}-${i}`).simulate("change");
+    t.params.map((param, i) => {
+      wrapper.find(`input#${param.path}-${i}`).simulate("change");
       const mockCalls = handleBasicFormParamChange.mock.calls;
-      expect(mockCalls[i]).toEqual([param, t.params[param]]);
+      expect(mockCalls[i]).toEqual([param]);
       expect(onChange.mock.calls.length).toBe(i + 1);
     });
   });
 });
 
 it("should render an external database section", () => {
-  const params = {
-    externalDatabase: {
+  const params = [
+    {
       path: "edbs",
       value: {},
       type: "object",
-      children: {
-        useSelfHostedDatabase: { path: "mariadb.enabled", value: {}, type: "boolean" },
-      },
+      children: [{ path: "mariadb.enabled", value: {}, type: "boolean" }],
     },
-  };
+  ];
   const wrapper = mount(<BasicDeploymentForm {...defaultProps} params={params} />);
 
   const dbsec = wrapper.find(Subsection);
   expect(dbsec).toExist();
 });
 
 it("should hide an element if it depends on a param (string)", () => {
-  const params = {
-    foo: {
+  const params = [
+    {
       path: "foo",
       type: "string",
       hidden: "bar",
     },
-    bar: {
+    {
       path: "bar",
       type: "boolean",
     },
-  };
+  ];
   const appValues = "foo: 1\nbar: true";
   const wrapper = shallow(
     <BasicDeploymentForm {...defaultProps} params={params} appValues={appValues} />,
@@ -126,20 +116,20 @@ it("should hide an element if it depends on a param (string)", () => {
 });
 
 it("should hide an element if it depends on a param (object)", () => {
-  const params = {
-    foo: {
+  const params = [
+    {
       path: "foo",
       type: "string",
       hidden: {
         value: "bar",
         condition: "enabled",
       },
     },
-    bar: {
+    {
       path: "bar",
       type: "string",
     },
-  };
+  ];
   const appValues = "foo: 1\nbar: enabled";
   const wrapper = shallow(
     <BasicDeploymentForm {...defaultProps} params={params} appValues={appValues} />,

dashboard/src/components/DeploymentFormBody/BasicDeploymentForm/BasicDeploymentForm.tsx

@@ -9,9 +9,8 @@ import SliderParam from "./SliderParam";
 import Subsection from "./Subsection";
 
 export interface IBasicDeploymentFormProps {
-  params: { [name: string]: IBasicFormParam };
+  params: IBasicFormParam[];
   handleBasicFormParamChange: (
-    name: string,
     p: IBasicFormParam,
   ) => (e: React.FormEvent<HTMLInputElement>) => void;
   handleValuesChange: (value: string) => void;
@@ -22,16 +21,11 @@ class BasicDeploymentForm extends React.Component<IBasicDeploymentFormProps> {
   public render() {
     return (
       <div className="margin-t-normal">
-        {Object.keys(this.props.params).map((paramName, i) => {
-          const id = `${paramName}-${i}`;
+        {this.props.params.map((param, i) => {
+          const id = `${param.path}-${i}`;
           return (
             <div key={id}>
-              {this.renderParam(
-                paramName,
-                this.props.params[paramName],
-                id,
-                this.props.handleBasicFormParamChange,
-              )}
+              {this.renderParam(param, id, this.props.handleBasicFormParamChange)}
               <hr />
             </div>
           );
@@ -55,72 +49,63 @@ class BasicDeploymentForm extends React.Component<IBasicDeploymentFormProps> {
   };
 
   private renderParam = (
-    name: string,
     param: IBasicFormParam,
     id: string,
     handleBasicFormParamChange: (
-      name: string,
       p: IBasicFormParam,
     ) => (e: React.FormEvent<HTMLInputElement>) => void,
   ) => {
     let paramComponent: JSX.Element = <></>;
-    switch (name) {
-      default:
-        switch (param.type) {
-          case "boolean":
-            paramComponent = (
-              <BooleanParam
-                label={param.title || name}
-                handleBasicFormParamChange={handleBasicFormParamChange}
-                id={id}
-                name={name}
-                param={param}
-              />
-            );
-            break;
-          case "object": {
-            paramComponent = (
-              <Subsection
-                label={param.title || name}
-                handleValuesChange={this.props.handleValuesChange}
-                appValues={this.props.appValues}
-                renderParam={this.renderParam}
-                name={name}
-                param={param}
-              />
-            );
-            break;
-          }
-          case "string": {
-            if (param.render === "slider") {
-              const p = param as IBasicFormSliderParam;
-              paramComponent = (
-                <SliderParam
-                  label={param.title || name}
-                  handleBasicFormParamChange={handleBasicFormParamChange}
-                  id={id}
-                  name={name}
-                  param={param}
-                  min={p.sliderMin || 1}
-                  max={p.sliderMax || 1000}
-                  unit={p.sliderUnit || ""}
-                />
-              );
-              break;
-            }
-          }
-          default:
-            paramComponent = (
-              <TextParam
-                label={param.title || name}
-                handleBasicFormParamChange={handleBasicFormParamChange}
-                id={id}
-                name={name}
-                param={param}
-                inputType={param.type === "integer" ? "number" : "string"}
-              />
-            );
+    switch (param.type) {
+      case "boolean":
+        paramComponent = (
+          <BooleanParam
+            label={param.title || param.path}
+            handleBasicFormParamChange={handleBasicFormParamChange}
+            id={id}
+            param={param}
+          />
+        );
+        break;
+      case "object": {
+        paramComponent = (
+          <Subsection
+            label={param.title || param.path}
+            handleValuesChange={this.props.handleValuesChange}
+            appValues={this.props.appValues}
+            renderParam={this.renderParam}
+            param={param}
+          />
+        );
+        break;
+      }
+      case "string": {
+        if (param.render === "slider") {
+          const p = param as IBasicFormSliderParam;
+          paramComponent = (
+            <SliderParam
+              label={param.title || param.path}
+              handleBasicFormParamChange={handleBasicFormParamChange}
+              id={id}
+              param={param}
+              min={p.sliderMin || 1}
+              max={p.sliderMax || 1000}
+              unit={p.sliderUnit || ""}
+            />
+          );
+          break;
         }
+      }
+      default:
+        paramComponent = (
+          <TextParam
+            label={param.title || name}
+            handleBasicFormParamChange={handleBasicFormParamChange}
+            id={id}
+            param={param}
+            inputType={param.type === "integer" ? "number" : "string"}
+          />
+        );
     }
     return (
       <div key={id} hidden={this.isHidden(param)}>

dashboard/src/components/DeploymentFormBody/BasicDeploymentForm/BooleanParam.test.tsx

@@ -6,7 +6,6 @@ import BooleanParam from "./BooleanParam";
 const param = { path: "enableMetrics", value: true, type: "boolean" };
 const defaultProps = {
   id: "foo",
-  name: "enableMetrics",
   label: "Enable Metrics",
   param,
   handleBasicFormParamChange: jest.fn(),
@@ -29,7 +28,11 @@ it("should send a checkbox event to handleBasicFormParamChange", () => {
 
   (s.prop("onChange") as any)(false);
 
-  expect(handleBasicFormParamChange.mock.calls[0][0]).toBe("enableMetrics");
+  expect(handleBasicFormParamChange.mock.calls[0][0]).toEqual({
+    path: "enableMetrics",
+    type: "boolean",
+    value: true,
+  });
   expect(handler.mock.calls[0][0]).toMatchObject({
     currentTarget: { value: "false", type: "checkbox", checked: false },
   });

dashboard/src/components/DeploymentFormBody/BasicDeploymentForm/BooleanParam.tsx

@@ -4,11 +4,9 @@ import { IBasicFormParam } from "shared/types";
 
 export interface IStringParamProps {
   id: string;
-  name: string;
   label: string;
   param: IBasicFormParam;
   handleBasicFormParamChange: (
-    name: string,
     p: IBasicFormParam,
   ) => (e: React.FormEvent<HTMLInputElement>) => void;
 }
@@ -34,11 +32,11 @@ class BooleanParam extends React.Component<IStringParamProps> {
 
   // handleChange transform the event received by the Switch component to a checkbox event
   public handleChange = (checked: boolean) => {
-    const { name, param } = this.props;
+    const { param } = this.props;
     const event = {
       currentTarget: { value: String(checked), type: "checkbox", checked },
     } as React.FormEvent<HTMLInputElement>;
-    this.props.handleBasicFormParamChange(name, param)(event);
+    this.props.handleBasicFormParamChange(param)(event);
   };
 }
 

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

@@ -6,7 +6,6 @@ import SliderParam from "./SliderParam";
 
 const defaultProps = {
   id: "disk",
-  name: "diskSize",
   label: "Disk Size",
   param: {
     value: "10Gi",
@@ -50,7 +49,6 @@ it("changes the value of the param when the slider changes", () => {
 
   expect(param.value).toBe("20Gi");
   expect(handleBasicFormParamChange.mock.calls[0]).toEqual([
-    "diskSize",
     { value: "20Gi", type: "string", path: "disk" },
   ]);
 });

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

@@ -4,14 +4,12 @@ import Slider from "../../Slider";
 
 export interface ISliderParamProps {
   id: string;
-  name: string;
   label: string;
   param: IBasicFormParam;
   unit: string;
   min: number;
   max: number;
   handleBasicFormParamChange: (
-    name: string,
     p: IBasicFormParam,
   ) => (e: React.FormEvent<HTMLInputElement>) => void;
 }
@@ -89,7 +87,7 @@ class SliderParam extends React.Component<ISliderParamProps, ISliderParamState>
   }
 
   private handleParamChange = (value: number) => {
-    this.props.handleBasicFormParamChange(this.props.name, this.props.param)({
+    this.props.handleBasicFormParamChange(this.props.param)({
       currentTarget: { value: `${value}${this.props.unit}` },
     } as React.FormEvent<HTMLInputElement>);
   };