From 77ff701ff83e05abd4b581348f0c1b408f43b0ba Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 18 Dec 2017 14:09:55 -0700
Subject: [PATCH] define shape of prop for instructionVariants and params.
 Create NumberParameter and StringParameter components

---
 .../kibana/common/tutorials/param_types.js    |  1 +
 .../components/tutorial/instruction_set.js    | 14 +++++-
 .../{parameter.js => number_parameter.js}     |  6 +--
 .../components/tutorial/parameter_form.js     | 46 ++++++++++++++-----
 .../components/tutorial/string_parameter.js   | 33 +++++++++++++
 5 files changed, 85 insertions(+), 15 deletions(-)
 rename src/core_plugins/kibana/public/home/components/tutorial/{parameter.js => number_parameter.js} (82%)
 create mode 100644 src/core_plugins/kibana/public/home/components/tutorial/string_parameter.js

diff --git a/src/core_plugins/kibana/common/tutorials/param_types.js b/src/core_plugins/kibana/common/tutorials/param_types.js
index 9d5545f5f831ed..f5e5b58ac2e00e 100644
--- a/src/core_plugins/kibana/common/tutorials/param_types.js
+++ b/src/core_plugins/kibana/common/tutorials/param_types.js
@@ -1,3 +1,4 @@
 export const PARAM_TYPES = {
   NUMBER: 'number',
+  STRING: 'string'
 };
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/instruction_set.js b/src/core_plugins/kibana/public/home/components/tutorial/instruction_set.js
index f9d8d98488aa8f..b1f1eb493c842a 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/instruction_set.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/instruction_set.js
@@ -151,9 +151,21 @@ export class InstructionSet extends React.Component {
   }
 }
 
+const instructionShape = PropTypes.shape({
+  title: PropTypes.string,
+  textPre: PropTypes.string,
+  commands: PropTypes.arrayOf(PropTypes.string),
+  textPost: PropTypes.string
+});
+
+const instructionVariantShape = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  instructions: PropTypes.arrayOf(instructionShape).isRequired,
+});
+
 InstructionSet.propTypes = {
   title: PropTypes.string.isRequired,
-  instructionVariants: PropTypes.array.isRequired,
+  instructionVariants: PropTypes.arrayOf(instructionVariantShape).isRequired,
   offset: PropTypes.number.isRequired,
   params: PropTypes.array,
   paramValues: PropTypes.object.isRequired,
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/parameter.js b/src/core_plugins/kibana/public/home/components/tutorial/number_parameter.js
similarity index 82%
rename from src/core_plugins/kibana/public/home/components/tutorial/parameter.js
rename to src/core_plugins/kibana/public/home/components/tutorial/number_parameter.js
index 2b2203c894012e..c3f94ed02fcdc9 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/parameter.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/number_parameter.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function Parameter({ id, label, value, setParameter }) {
+export function NumberParameter({ id, label, value, setParameter }) {
   const handleChange = (evt) => {
     setParameter(id, parseFloat(evt.target.value));
   };
@@ -25,9 +25,9 @@ export function Parameter({ id, label, value, setParameter }) {
   );
 }
 
-Parameter.propTypes = {
+NumberParameter.propTypes = {
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   value: PropTypes.number.isRequired,
-  setParameter: PropTypes.func.isRequired
+  setParameter: PropTypes.func.isRequired,
 };
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/parameter_form.js b/src/core_plugins/kibana/public/home/components/tutorial/parameter_form.js
index a1b75e8c471e13..686cb1742aab62 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/parameter_form.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/parameter_form.js
@@ -1,19 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Parameter } from './parameter';
+import { NumberParameter } from './number_parameter';
+import { StringParameter } from './string_parameter';
 
 export class ParameterForm extends React.Component {
 
   renderInputs = () => {
-    return this.props.params.map(param => (
-      <Parameter
-        key={param.id}
-        id={param.id}
-        label={param.label}
-        value={this.props.paramValues[param.id]}
-        setParameter={this.props.setParameter}
-      />
-    ));
+    return this.props.params.map(param => {
+      switch (param.type) {
+        case 'number':
+          return (
+            <NumberParameter
+              key={param.id}
+              id={param.id}
+              label={param.label}
+              value={this.props.paramValues[param.id]}
+              setParameter={this.props.setParameter}
+            />
+          );
+        case 'string':
+          return (
+            <StringParameter
+              key={param.id}
+              id={param.id}
+              label={param.label}
+              value={this.props.paramValues[param.id]}
+              setParameter={this.props.setParameter}
+            />
+          );
+        default:
+          throw new Error(`Unhandled parameter type ${param.type}`);
+      }
+    });
   }
 
   render() {
@@ -29,8 +47,14 @@ export class ParameterForm extends React.Component {
   }
 }
 
+const paramsShape = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+});
+
 ParameterForm.propTypes = {
-  params: PropTypes.array.isRequired,
+  params: PropTypes.arrayOf(paramsShape).isRequired,
   paramValues: PropTypes.object.isRequired,
   setParameter: PropTypes.func.isRequired
 };
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/string_parameter.js b/src/core_plugins/kibana/public/home/components/tutorial/string_parameter.js
new file mode 100644
index 00000000000000..44b003e30557cb
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/tutorial/string_parameter.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function StringParameter({ id, label, value, setParameter }) {
+  const handleChange = (evt) => {
+    setParameter(id, evt.target.value);
+  };
+
+  return (
+    <div className="kuiSideBarFormRow">
+      <label
+        className="kuiSideBarFormRow__label"
+      >
+        {label}
+      </label>
+      <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
+        <input
+          className="kuiTextInput"
+          type="number"
+          value={value}
+          onChange={handleChange}
+        />
+      </div>
+    </div>
+  );
+}
+
+StringParameter.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  setParameter: PropTypes.func.isRequired,
+};