Basic form improvements (#1210)

dashboard/package.json

@@ -53,7 +53,7 @@
     "semver": "^5.6.0",
     "ts-jest": "^22.0.1",
     "typesafe-actions": "^2.0.4",
-    "yaml": "^1.7.0"
+    "yaml": "^1.7.1"
   },
   "scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",

dashboard/src/components/DeploymentForm/BasicDeploymentForm/IngressSection.tsx_

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { setValue } from "../../../shared/schema";
+import { IBasicFormParam } from "../../../shared/types";
+import { getValueFromEvent } from "../../../shared/utils";
+import BooleanParam from "./BooleanParam";
+import TextParam from "./TextParam";
+
+export interface IIngressSectionProps {
+  label: string;
+  param: IBasicFormParam;
+  handleBasicFormParamChange: (
+    name: string,
+    p: IBasicFormParam,
+  ) => (e: React.FormEvent<HTMLInputElement>) => void;
+  handleValuesChange: (value: string) => void;
+  appValues: string;
+}
+
+const ENABLE_INGRESS_PARAM = "enableIngress";
+const ENABLE_CERT_MANAGER_PARAM = "enableCertManager";
+
+class IngressSection extends React.Component<IIngressSectionProps> {
+  public render() {
+    const { label, param } = this.props;
+    console.log("children ? ", param.children!);
+    return (
+      <div className="subsection margin-v-normal">
+        <BooleanParam
+          label="Use a Custom Domain"
+          handleBasicFormParamChange={this.handleChildrenParamChange}
+          id={"enable-ingress"}
+          // TODO: remove !
+          name={ENABLE_INGRESS_PARAM}
+          param={param.children![ENABLE_INGRESS_PARAM]}
+        />
+        <div hidden={!param.children![ENABLE_INGRESS_PARAM].value} className="margin-t-normal">
+          {/* TODO: Make this work with the hostname */}
+          <TextParam
+            label="Hostname"
+            handleBasicFormParamChange={this.handleHostnameChange}
+            key={"f"}
+            id={"F"}
+            name={name}
+            param={param.children!.hosts.children![0]}
+          />
+          <BooleanParam
+            label="Enable TLS with cert-manager"
+            handleBasicFormParamChange={this.handleChildrenParamChange}
+            id={"enable-ingress"}
+            // TODO: remove !
+            name={ENABLE_CERT_MANAGER_PARAM}
+            param={param.children![ENABLE_CERT_MANAGER_PARAM]}
+          />
+
+          {/* 
+          {param.children &&
+            Object.keys(param.children).map((paramName, i) => {
+              return this.renderParam(paramName, param.children![paramName], i);
+            })} */}
+        </div>
+      </div>
+    );
+  }
+
+  private handleChildrenParamChange = (name: string, param: IBasicFormParam) => {
+    return (e: React.FormEvent<HTMLInputElement>) => {
+      const value = getValueFromEvent(e);
+      this.props.handleValuesChange(setValue(this.props.appValues, param.path, value));
+      this.props.param.children![name] = { ...this.props.param.children![name], value };
+    };
+  };
+
+  // private renderParam(name: string, param: IBasicFormParam, index: number) {
+  //   const id = `${name}-${index}`;
+  //   const label = name;
+  //   const type = "text";
+  //   return (
+  //     <TextParam
+  //       label={label}
+  //       handleBasicFormParamChange={this.handleChildrenParamChange}
+  //       key={id}
+  //       id={id}
+  //       name={name}
+  //       param={param}
+  //       inputType={type}
+  //     />
+  //   );
+  // }
+}
+
+export default IngressSection;

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

@@ -2,7 +2,7 @@ import { mount, shallow } from "enzyme";
 import * as Moniker from "moniker-native";
 import * as React from "react";
 
-import { Tabs } from "react-tabs";
+import { Tab, Tabs } from "react-tabs";
 import itBehavesLike from "../../shared/specs";
 import { IChartState, IChartVersion, NotFoundError, UnprocessableEntity } from "../../shared/types";
 import { ErrorSelector } from "../ErrorAlert";
@@ -225,11 +225,25 @@ describe("when the basic form is not enabled", () => {
 
 describe("when the basic form is enabled", () => {
   it("renders the different tabs", () => {
-    const wrapper = shallow(<DeploymentForm {...props} enableBasicForm={true} />);
+    const basicFormParameters = {
+      username: {
+        path: "wordpressUsername",
+        value: "user",
+      },
+    };
+    const wrapper = mount(<DeploymentForm {...props} enableBasicForm={true} />);
+    wrapper.setState({ appValues: "wordpressUsername: user", basicFormParameters });
+    wrapper.update();
     expect(wrapper.find(LoadingWrapper)).not.toExist();
     expect(wrapper.find(Tabs)).toExist();
   });
 
+  it("should not render the tabs if there are no basic parameters", () => {
+    const wrapper = shallow(<DeploymentForm {...props} enableBasicForm={true} />);
+    expect(wrapper.find(LoadingWrapper)).not.toExist();
+    expect(wrapper.find(Tabs)).not.toExist();
+  });
+
   it("changes the parameter value", () => {
     const basicFormParameters = {
       username: {
@@ -255,6 +269,42 @@ describe("when the basic form is enabled", () => {
     expect(wrapper.state("appValues")).toBe("wordpressUsername: foo\n");
   });
 
+  it("should update existing params if the app values change and the user clicks on the Basic tab", () => {
+    const testProps = {
+      ...props,
+      selected: {
+        ...props.selected,
+        schema: { properties: { wordpressUsername: { type: "string", form: "username" } } },
+      },
+    };
+    const basicFormParameters = {
+      username: {
+        path: "wordpressUsername",
+        value: "user",
+      },
+    };
+    const wrapper = mount(<DeploymentForm {...testProps} enableBasicForm={true} />);
+    wrapper.setState({ appValues: "wordpressUsername: user", basicFormParameters });
+    wrapper.update();
+
+    // Fake onChange
+    (wrapper.instance() as any).handleValuesChange("wordpressUsername: foo");
+    wrapper.update();
+
+    const tab = wrapper
+      .find(Tab)
+      .findWhere(t => t.text() === "Basic")
+      .first();
+    tab.simulate("click");
+
+    expect(wrapper.state("basicFormParameters")).toMatchObject({
+      username: {
+        path: "wordpressUsername",
+        value: "foo",
+      },
+    });
+  });
+
   it("handles a parameter as a number", () => {
     const basicFormParameters = {
       replicas: {

dashboard/src/components/DeploymentForm/DeploymentForm.tsx

@@ -165,7 +165,7 @@ class DeploymentForm extends React.Component<IDeploymentFormProps, IDeploymentFo
                   ))}
                 </select>
               </div>
-              {this.props.enableBasicForm ? (
+              {this.shouldRenderBasicForm() ? (
                 this.renderTabs()
               ) : (
                 <AdvancedDeploymentForm
@@ -223,12 +223,21 @@ class DeploymentForm extends React.Component<IDeploymentFormProps, IDeploymentFo
     this.setState({ appValues: value, valuesModified: true });
   };
 
+  private refreshBasicParameters = () => {
+    this.setState({
+      basicFormParameters: retrieveBasicFormParams(
+        this.state.appValues,
+        this.props.selected.schema,
+      ),
+    });
+  };
+
   private renderTabs = () => {
     return (
       <div className="margin-t-normal">
         <Tabs>
           <TabList>
-            <Tab>Basic</Tab>
+            <Tab onClick={this.refreshBasicParameters}>Basic</Tab>
             <Tab>Advanced</Tab>
           </TabList>
           <TabPanel>
@@ -261,10 +270,12 @@ class DeploymentForm extends React.Component<IDeploymentFormProps, IDeploymentFo
           value = e.currentTarget.valueAsNumber;
           break;
       }
-      // Change raw values
-      this.handleValuesChange(setValue(this.state.appValues, param.path, value));
       // Change param definition
       this.setState({
+        // Change raw values
+        appValues: setValue(this.state.appValues, param.path, value),
+        valuesModified: true,
+        // Change param definition
         basicFormParameters: {
           ...this.state.basicFormParameters,
           [name]: {
@@ -275,6 +286,11 @@ class DeploymentForm extends React.Component<IDeploymentFormProps, IDeploymentFo
       });
     };
   };
+
+  // The basic form should be rendered both if it's enabled and if there are params to show
+  private shouldRenderBasicForm = () => {
+    return this.props.enableBasicForm && Object.keys(this.state.basicFormParameters).length > 0;
+  };
 }
 
 export default DeploymentForm;

dashboard/yarn.lock

@@ -11639,10 +11639,10 @@ yallist@^3.0.0, yallist@^3.0.3:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"
   integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==
 
-yaml@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.7.0.tgz#b4cddb83490051e6c4b6ffe2bb08221c23f4c6cf"
-  integrity sha512-BEXCJKbbJmDzjuG4At0R4nHJKlP81hxoLQqUCaxzqZ8HHgjAlOXbiOHVCQ4YuQqO/rLR8HoQ6kxGkYJ3tlKIsg==
+yaml@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.7.1.tgz#86db1b39a6434a7928d3750cbe08303a50a24d6b"
+  integrity sha512-sR0mJ2C3LVBgMST+0zrrrsKSijbw64bfHmTt4nEXLZTZFyIAuUVARqA/LO5kaZav2OVQMaZ+5WRrZv7QjxG3uQ==
   dependencies:
     "@babel/runtime" "^7.5.5"