define shape of prop for instructionVariants and params. Create Numbe…

…rParameter and StringParameter components

src/core_plugins/kibana/common/tutorials/param_types.js

@@ -1,3 +1,4 @@
 export const PARAM_TYPES = {
   NUMBER: 'number',
+  STRING: 'string'
 };

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,

src/core_plugins/kibana/public/home/components/tutorial/parameter.js → 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,
 };

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
 };

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,
+};