Add support to 'textarea' render type on basic forms (#1488)

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

@@ -29,6 +29,16 @@ const defaultProps = {
     description: "renders a basic deployment with a generic string",
     params: [{ path: "blogName", value: "my-blog", type: "string" } as IBasicFormParam],
   },
+  {
+    description: "renders a basic deployment with custom configuration",
+    params: [
+      {
+        path: "configuration",
+        value: "First line\n" + "Second line",
+        render: "textArea",
+      } as IBasicFormParam,
+    ],
+  },
   {
     description: "renders a basic deployment with a disk size",
     params: [

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

@@ -13,7 +13,7 @@ export interface IBasicDeploymentFormProps {
   params: IBasicFormParam[];
   handleBasicFormParamChange: (
     p: IBasicFormParam,
-  ) => (e: React.FormEvent<HTMLInputElement>) => void;
+  ) => (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   handleValuesChange: (value: string) => void;
   appValues: string;
 }
@@ -54,7 +54,7 @@ class BasicDeploymentForm extends React.Component<IBasicDeploymentFormProps> {
     id: string,
     handleBasicFormParamChange: (
       p: IBasicFormParam,
-    ) => (e: React.FormEvent<HTMLInputElement>) => void,
+    ) => (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => void,
   ) => {
     let paramComponent: JSX.Element = <></>;
     // If the type of the param is an array, represent it as its first type
@@ -98,6 +98,18 @@ class BasicDeploymentForm extends React.Component<IBasicDeploymentFormProps> {
           );
           break;
         }
+        if (param.render === "textArea") {
+          paramComponent = (
+            <TextParam
+              label={param.title || name}
+              handleBasicFormParamChange={handleBasicFormParamChange}
+              id={id}
+              param={param}
+              inputType="textarea"
+            />
+          );
+          break;
+        }
       }
       default:
         paramComponent = (

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

@@ -4,32 +4,32 @@ import { mount } from "enzyme";
 import { IBasicFormParam } from "shared/types";
 import TextParam from "./TextParam";
 
-const param = { path: "username", value: "user", type: "string" } as IBasicFormParam;
-const defaultProps = {
+const stringParam = { path: "username", value: "user", type: "string" } as IBasicFormParam;
+const stringProps = {
   id: "foo",
   label: "Username",
-  param,
+  param: stringParam,
   handleBasicFormParamChange: jest.fn(() => jest.fn()),
 };
 
-it("should render a text param with title and description", () => {
-  const wrapper = mount(<TextParam {...defaultProps} />);
+it("should render a string parameter with title and description", () => {
+  const wrapper = mount(<TextParam {...stringProps} />);
   const input = wrapper.find("input");
-  expect(input.prop("value")).toBe(defaultProps.param.value);
+  expect(input.prop("value")).toBe(stringProps.param.value);
   expect(wrapper).toMatchSnapshot();
 });
 
 it("should set the input type as number", () => {
-  const wrapper = mount(<TextParam {...defaultProps} inputType={"number"} />);
+  const wrapper = mount(<TextParam {...stringProps} inputType={"number"} />);
   const input = wrapper.find("input");
   expect(input.prop("type")).toBe("number");
 });
 
-it("should forward the proper value", () => {
+it("should forward the proper value when using a string parameter", () => {
   const handler = jest.fn();
   const handleBasicFormParamChange = jest.fn(() => handler);
   const wrapper = mount(
-    <TextParam {...defaultProps} handleBasicFormParamChange={handleBasicFormParamChange} />,
+    <TextParam {...stringProps} handleBasicFormParamChange={handleBasicFormParamChange} />,
   );
   const input = wrapper.find("input");
 
@@ -44,7 +44,7 @@ it("should forward the proper value", () => {
   expect(handler.mock.calls[0][0]).toMatchObject(event);
 });
 
-it("should set the input value as empty if the param value is not defined", () => {
+it("should set the input value as empty if a string parameter value is not defined", () => {
   const tparam = { path: "username", type: "string" } as IBasicFormParam;
   const tprops = {
     id: "foo",
@@ -57,3 +57,57 @@ it("should set the input value as empty if the param value is not defined", () =
   const input = wrapper.find("input");
   expect(input.prop("value")).toBe("");
 });
+
+const textAreaParam = {
+  path: "configuration",
+  value: "First line\n" + "Second line",
+  type: "string",
+} as IBasicFormParam;
+const textAreaProps = {
+  id: "bar",
+  label: "Configuration",
+  param: textAreaParam,
+  handleBasicFormParamChange: jest.fn(() => jest.fn()),
+  inputType: "textarea",
+};
+
+it("should render a textArea parameter with title and description", () => {
+  const wrapper = mount(<TextParam {...textAreaProps} />);
+  const input = wrapper.find("textarea");
+  expect(input.prop("value")).toBe(textAreaProps.param.value);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("should forward the proper value when using a textArea parameter", () => {
+  const handler = jest.fn();
+  const handleBasicFormParamChange = jest.fn(() => handler);
+  const wrapper = mount(
+    <TextParam {...textAreaProps} handleBasicFormParamChange={handleBasicFormParamChange} />,
+  );
+  const input = wrapper.find("textarea");
+
+  const event = { currentTarget: {} } as React.FormEvent<HTMLInputElement>;
+  (input.prop("onChange") as any)(event);
+
+  expect(handleBasicFormParamChange.mock.calls[0][0]).toEqual({
+    path: "configuration",
+    type: "string",
+    value: "First line\n" + "Second line",
+  });
+  expect(handler.mock.calls[0][0]).toMatchObject(event);
+});
+
+it("should set the input value as empty if a textArea param value is not defined", () => {
+  const tparam = { path: "configuration", type: "string" } as IBasicFormParam;
+  const tprops = {
+    id: "foo",
+    name: "configuration",
+    label: "Configuration",
+    param: tparam,
+    handleBasicFormParamChange: jest.fn(() => jest.fn()),
+    inputType: "textarea",
+  };
+  const wrapper = mount(<TextParam {...tprops} />);
+  const input = wrapper.find("textarea");
+  expect(input.prop("value")).toBe("");
+});

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

@@ -8,12 +8,29 @@ export interface IStringParamProps {
   param: IBasicFormParam;
   handleBasicFormParamChange: (
     p: IBasicFormParam,
-  ) => (e: React.FormEvent<HTMLInputElement>) => void;
+  ) => (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 }
 
 class TextParam extends React.Component<IStringParamProps> {
   public render() {
     const { id, param, label, inputType } = this.props;
+    let input = (
+      <input
+        id={id}
+        onChange={this.props.handleBasicFormParamChange(param)}
+        value={param.value === undefined ? "" : param.value}
+        type={inputType ? inputType : "text"}
+      />
+    );
+    if (inputType === "textarea") {
+      input = (
+        <textarea
+          id={id}
+          onChange={this.props.handleBasicFormParamChange(param)}
+          value={param.value === undefined ? "" : param.value}
+        />
+      );
+    }
     return (
       <div>
         <label htmlFor={id}>
@@ -22,12 +39,7 @@ class TextParam extends React.Component<IStringParamProps> {
               <div className="centered">{label}</div>
             </div>
             <div className="col-9 margin-t-small">
-              <input
-                id={id}
-                onChange={this.props.handleBasicFormParamChange(param)}
-                value={param.value === undefined ? "" : param.value}
-                type={inputType ? inputType : "text"}
-              />
+              {input}
               {param.description && <span className="description">{param.description}</span>}
             </div>
           </div>

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

@@ -980,6 +980,84 @@ exports[`renders a basic deployment with a username 1`] = `
 </BasicDeploymentForm>
 `;
 
+exports[`renders a basic deployment with custom configuration 1`] = `
+<BasicDeploymentForm
+  appValues=""
+  handleBasicFormParamChange={[Function]}
+  handleValuesChange={[Function]}
+  params={
+    Array [
+      Object {
+        "path": "configuration",
+        "render": "textArea",
+        "value": "First line
+    Second line",
+      },
+    ]
+  }
+>
+  <div
+    className="margin-t-normal"
+  >
+    <div
+      key="configuration-0"
+    >
+      <div
+        hidden={false}
+        key="configuration-0"
+      >
+        <TextParam
+          handleBasicFormParamChange={[Function]}
+          id="configuration-0"
+          inputType="string"
+          label="nodejs"
+          param={
+            Object {
+              "path": "configuration",
+              "render": "textArea",
+              "value": "First line
+            Second line",
+            }
+          }
+        >
+          <div>
+            <label
+              htmlFor="configuration-0"
+            >
+              <div
+                className="row"
+              >
+                <div
+                  className="col-3 block"
+                >
+                  <div
+                    className="centered"
+                  >
+                    nodejs
+                  </div>
+                </div>
+                <div
+                  className="col-9 margin-t-small"
+                >
+                  <input
+                    id="configuration-0"
+                    onChange={[Function]}
+                    type="string"
+                    value="First line
+                  Second line"
+                  />
+                </div>
+              </div>
+            </label>
+          </div>
+        </TextParam>
+      </div>
+      <hr />
+    </div>
+  </div>
+</BasicDeploymentForm>
+`;
+
 exports[`renders a basic deployment with username, password, email and a generic string 1`] = `
 <BasicDeploymentForm
   appValues=""

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render a text param with title and description 1`] = `
+exports[`should render a string parameter with title and description 1`] = `
 <TextParam
   handleBasicFormParamChange={[Function]}
   id="foo"
@@ -44,3 +44,50 @@ exports[`should render a text param with title and description 1`] = `
   </div>
 </TextParam>
 `;
+
+exports[`should render a textArea parameter with title and description 1`] = `
+<TextParam
+  handleBasicFormParamChange={[Function]}
+  id="bar"
+  inputType="textarea"
+  label="Configuration"
+  param={
+    Object {
+      "path": "configuration",
+      "type": "string",
+      "value": "First line
+    Second line",
+    }
+  }
+>
+  <div>
+    <label
+      htmlFor="bar"
+    >
+      <div
+        className="row"
+      >
+        <div
+          className="col-3 block"
+        >
+          <div
+            className="centered"
+          >
+            Configuration
+          </div>
+        </div>
+        <div
+          className="col-9 margin-t-small"
+        >
+          <textarea
+            id="bar"
+            onChange={[Function]}
+            value="First line
+          Second line"
+          />
+        </div>
+      </div>
+    </label>
+  </div>
+</TextParam>
+`;

docs/developer/basic-form-support.md

@@ -68,6 +68,24 @@ In order to render a slider, there are some requirements and additional tags tha
     }
 ```
 
+### Custom type: TextArea
+
+It's possible to render a component as a textArea instead of a single-line string.
+
+In order to render a component as a textArea, it's necessary to specify the tag `render` and set it to `textArea`.
+
+ This is an example of a textArea param:
+
+```json
+    "size": {
+      "type": "string",
+      "title": "Configuration",
+      "description": "Configuration to be used",
+      "form": true,
+      "render": "textArea"
+    }
+```
+
 ### Subsections
 
 When a property of type `object` is set with a `form` identifier, it will be rendered as a subsection. A subsection is a set of parameters that are grouped together: