Add support for enabling a external database

dashboard/src/components/DeploymentForm/BasicDeploymentForm/BasicDeploymentForm.scss

@@ -3,6 +3,12 @@
   font-size: 0.9em;
 }
 
+.subsection {
+  border: 1px solid #aaa;
+  border-radius: 5px;
+  padding: 10px;
+}
+
 .react-switch {
   vertical-align: middle;
   margin-left: 10px;

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

@@ -3,10 +3,13 @@ import * as React from "react";
 import { mount } from "enzyme";
 import { IBasicFormParam } from "shared/types";
 import BasicDeploymentForm from "./BasicDeploymentForm";
+import DatabaseSection from "./DatabaseSection";
 
 const defaultProps = {
   params: [],
   handleBasicFormParamChange: jest.fn(() => jest.fn()),
+  appValues: "",
+  handleValuesChange: jest.fn(),
 };
 
 [
@@ -77,3 +80,20 @@ const defaultProps = {
     });
   });
 });
+
+it("should render an external database section", () => {
+  const params = {
+    externalDatabase: {
+      path: "edbs",
+      value: {},
+      type: "object",
+      children: {
+        useSelfHostedDatabase: { path: "mariadb.enabled", value: {}, type: "boolean" },
+      },
+    },
+  };
+  const wrapper = mount(<BasicDeploymentForm {...defaultProps} params={params} />);
+
+  const dbsec = wrapper.find(DatabaseSection);
+  expect(dbsec).toExist();
+});

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

@@ -4,6 +4,7 @@ import TextParam from "./TextParam";
 
 import "./BasicDeploymentForm.css";
 import BooleanParam from "./BooleanParam";
+import DatabaseSection from "./DatabaseSection";
 import DiskSizeParam from "./DiskSizeParam";
 
 export interface IBasicDeploymentFormProps {
@@ -12,6 +13,8 @@ export interface IBasicDeploymentFormProps {
     name: string,
     p: IBasicFormParam,
   ) => (e: React.FormEvent<HTMLInputElement>) => void;
+  handleValuesChange: (value: string) => void;
+  appValues: string;
 }
 
 class BasicDeploymentForm extends React.Component<IBasicDeploymentFormProps> {
@@ -57,6 +60,16 @@ class BasicDeploymentForm extends React.Component<IBasicDeploymentFormProps> {
             param={param}
           />
         );
+      case "externalDatabase":
+        return (
+          <DatabaseSection
+            label="External Database Details"
+            handleValuesChange={this.props.handleValuesChange}
+            appValues={this.props.appValues}
+            key={id}
+            param={param}
+          />
+        );
       case "diskSize":
         return (
           <DiskSizeParam

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

@@ -23,7 +23,7 @@ class BooleanParam extends React.Component<IStringParamProps> {
           <Switch
             id={id}
             onChange={this.handleChange}
-            checked={param.value}
+            checked={!!param.value}
             className="react-switch"
           />
         </div>

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

@@ -0,0 +1,75 @@
+import { mount, shallow } from "enzyme";
+import * as React from "react";
+
+import { IBasicFormParam } from "shared/types";
+import DatabaseSection, { IDatabaseSectionProps } from "./DatabaseSection"; // , {
+import TextParam from "./TextParam";
+
+const defaultProps = {
+  label: "Enable an external database",
+  param: {
+    children: {
+      externalDatabaseDB: {
+        path: "externalDatabase.database",
+        type: "string",
+        value: "bitnami_wordpress",
+      },
+      externalDatabaseHost: { path: "externalDatabase.host", type: "string", value: "localhost" },
+      externalDatabasePassword: { path: "externalDatabase.password", type: "string" },
+      externalDatabasePort: { path: "externalDatabase.port", type: "integer", value: 3306 },
+      externalDatabaseUser: {
+        path: "externalDatabase.user",
+        type: "string",
+        value: "bn_wordpress",
+      },
+      useSelfHostedDatabase: {
+        path: "mariadb.enabled",
+        title: "Enable External Database",
+        type: "boolean",
+        value: true,
+      } as IBasicFormParam,
+    },
+    path: "externalDatabase",
+    title: "External Database Details",
+    type: "object",
+  } as IBasicFormParam,
+  handleBasicFormParamChange: jest.fn(),
+  appValues: "externalDatabase: {}",
+  handleValuesChange: jest.fn(),
+} as IDatabaseSectionProps;
+
+it("should render a external database section", () => {
+  const wrapper = shallow(<DatabaseSection {...defaultProps} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("should hide/show the database params if the self-hosted database is enabled/disabled", () => {
+  const wrapper = shallow(<DatabaseSection {...defaultProps} />);
+  expect(defaultProps.param.children!.useSelfHostedDatabase.value).toBe(true);
+  expect(wrapper.find(".margin-t-normal").prop("hidden")).toBe(true);
+
+  wrapper.setProps({
+    ...defaultProps,
+    param: {
+      ...defaultProps.param,
+      children: {
+        ...defaultProps.param.children,
+        useSelfHostedDatabase: { path: "mariadb.enabled", value: false, type: "boolean" },
+      },
+    },
+  });
+  wrapper.update();
+  expect(wrapper.find(".margin-t-normal").prop("hidden")).toBe(false);
+});
+
+it("should change the parent parameter when a children is modified", () => {
+  const wrapper = mount(<DatabaseSection {...defaultProps} />);
+
+  const hostParam = wrapper.find(TextParam).findWhere(t => t.prop("label") === "Host");
+  (hostParam.prop("handleBasicFormParamChange") as any)(
+    "externalDatabaseHost",
+    defaultProps.param.children!.externalDatabaseHost,
+  )({ currentTarget: { value: "foo" } });
+
+  expect(defaultProps.param.children!.externalDatabaseHost.value).toBe("foo");
+});

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

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { setValue, USE_SELF_HOSTED_DB } from "../../../shared/schema";
+import { IBasicFormParam } from "../../../shared/types";
+import { getValueFromEvent } from "../../../shared/utils";
+import BooleanParam from "./BooleanParam";
+import TextParam from "./TextParam";
+
+export interface IDatabaseSectionProps {
+  label: string;
+  param: IBasicFormParam;
+  handleValuesChange: (value: string) => void;
+  appValues: string;
+}
+
+class DatabaseSection extends React.Component<IDatabaseSectionProps> {
+  public render() {
+    const { label, param } = this.props;
+    return (
+      <div className="subsection margin-v-normal">
+        <BooleanParam
+          label="Use a Self Hosted Database"
+          handleBasicFormParamChange={this.handleChildrenParamChange}
+          id={"enable-self-hosted-db"}
+          name={USE_SELF_HOSTED_DB}
+          param={param.children![USE_SELF_HOSTED_DB]}
+        />
+        <div hidden={param.children![USE_SELF_HOSTED_DB].value} className="margin-t-normal">
+          <span>{label}</span>
+          {param.children &&
+            Object.keys(param.children)
+              .filter(p => p !== USE_SELF_HOSTED_DB)
+              .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}`;
+    let label = "";
+    let type = "text";
+    switch (name) {
+      case "externalDatabaseHost":
+        label = "Host";
+        break;
+      case "externalDatabaseUser":
+        label = "User";
+        break;
+      case "externalDatabasePassword":
+        label = "Password";
+        break;
+      case "externalDatabaseName":
+        label = "Database";
+        break;
+      case "externalDatabasePort":
+        label = "Port";
+        type = "number";
+        break;
+    }
+    return (
+      <TextParam
+        label={label}
+        handleBasicFormParamChange={this.handleChildrenParamChange}
+        key={id}
+        id={id}
+        name={name}
+        param={param}
+        inputType={type}
+      />
+    );
+  }
+}
+
+export default DatabaseSection;

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

@@ -2,7 +2,9 @@
 
 exports[`renders a basic deployment with a disk size 1`] = `
 <BasicDeploymentForm
+  appValues=""
   handleBasicFormParamChange={[Function]}
+  handleValuesChange={[Function]}
   params={
     Object {
       "diskSize": Object {
@@ -310,7 +312,9 @@ exports[`renders a basic deployment with a disk size 1`] = `
 
 exports[`renders a basic deployment with a email 1`] = `
 <BasicDeploymentForm
+  appValues=""
   handleBasicFormParamChange={[Function]}
+  handleValuesChange={[Function]}
   params={
     Object {
       "email": Object {
@@ -352,7 +356,9 @@ exports[`renders a basic deployment with a email 1`] = `
 
 exports[`renders a basic deployment with a generic boolean 1`] = `
 <BasicDeploymentForm
+  appValues=""
   handleBasicFormParamChange={[Function]}
+  handleValuesChange={[Function]}
   params={
     Object {
       "enableMetrics": Object {
@@ -606,7 +612,9 @@ exports[`renders a basic deployment with a generic boolean 1`] = `
 
 exports[`renders a basic deployment with a generic number 1`] = `
 <BasicDeploymentForm
+  appValues=""
   handleBasicFormParamChange={[Function]}
+  handleValuesChange={[Function]}
   params={
     Object {
       "replicas": Object {
@@ -650,7 +658,9 @@ exports[`renders a basic deployment with a generic number 1`] = `
 
 exports[`renders a basic deployment with a generic string 1`] = `
 <BasicDeploymentForm
+  appValues=""
   handleBasicFormParamChange={[Function]}
+  handleValuesChange={[Function]}
   params={
     Object {
       "blogName": Object {
@@ -693,7 +703,9 @@ exports[`renders a basic deployment with a generic string 1`] = `
 
 exports[`renders a basic deployment with a password 1`] = `
 <BasicDeploymentForm
+  appValues=""
   handleBasicFormParamChange={[Function]}
+  handleValuesChange={[Function]}
   params={
     Object {
       "password": Object {
@@ -735,7 +747,9 @@ exports[`renders a basic deployment with a password 1`] = `
 
 exports[`renders a basic deployment with a username 1`] = `
 <BasicDeploymentForm
+  appValues=""
   handleBasicFormParamChange={[Function]}
+  handleValuesChange={[Function]}
   params={
     Object {
       "username": Object {
@@ -777,7 +791,9 @@ exports[`renders a basic deployment with a username 1`] = `
 
 exports[`renders a basic deployment with username, password, email and a generic string 1`] = `
 <BasicDeploymentForm
+  appValues=""
   handleBasicFormParamChange={[Function]}
+  handleValuesChange={[Function]}
   params={
     Object {
       "blogName": Object {