Add ui for answers from source

web/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "keymaster": "^1.6.2",
+    "node-sass-chokidar": "0.0.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-md": "^1.2.8",
@@ -17,7 +18,7 @@
     "watch-css": "nodemon -e scss -x \"npm run watch-css-mine\"",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",
-    "react-build" : "react-scripts build",
+    "react-build": "react-scripts build",
     "build": "npm-run-all -p build-css react-build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

web/src/components/AnswerSource.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { Button, SelectionControlGroup } from 'react-md';
+import Modal from './modal/Modal';
+
+class AnswerSource extends Component {
+  constructor(props){
+    super(props);
+
+    this.state = {
+      isModalOpen: false
+    };
+  }
+
+  onOpen() {
+    this.setState({
+      isModalOpen: true
+    });
+  }
+
+  onClose() {
+    this.setState({
+      isModalOpen: false
+    });
+  }
+
+  render() {
+    let modal;
+    if (this.state.isModalOpen) {
+      modal = (
+        <Modal
+          title="Predefined answers"
+          actions={[
+            <Button flat swapTheming onClick={this.onClose.bind(this)} key="cancel">Cancel</Button>,
+            <Button flat primary swapTheming key="save">Save</Button>
+          ]}>
+          <SelectionControlGroup
+            id="answer-source"
+            name="answer-source"
+            type="radio"
+            label="Import answer from:"
+            controls={[{
+              label: 'RSS feed - latest',
+              value: 'latest',
+            }]}>
+
+          </SelectionControlGroup>
+        </Modal>
+        )
+    }
+    return (
+      <div>
+        <Button flat primary swapTheming 
+                onClick={this.onOpen.bind(this)}>
+          Predefined answers
+        </Button>
+        {modal}
+      </div>
+    );
+  }
+}
+
+export default AnswerSource;

web/src/components/IntentDetails.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import {Button, SVGIcon, TextField} from 'react-md';
+import AnswerSource from './AnswerSource.js';
 import '../css/components/IntentDetails.css';
 import '../css/Common.css';
 import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH, INTENT_EXPLANATION_MAX_LENGTH} from '../config/constants';
@@ -45,6 +46,7 @@ class IntentDetails extends Component {
             maxLength={INTENT_NAME_MAX_LENGTH}
             value={this.state.intent.intentName} />
         </div>
+        <AnswerSource />
         <h5 className="QuestionTitle">Question variants</h5>
         {
           this.state.intent.questions.map((question, index)=>{

web/src/components/modal/Modal.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import '../../css/components/Modal.css';
+
+class Modal extends Component {
+    render() {
+        const { title, children, actions } = this.props;
+        return (
+            <div className="modal">
+                <div className="modal-content">
+                    <h2 className="header">
+                        {title}
+                    </h2>
+                    {children}
+                    <div className="actions">
+                        {actions}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Modal;

web/src/css/components/Modal.scss

@@ -0,0 +1,32 @@
+.modal {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(37, 37, 37, .7);
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.modal-content {
+		color: black;
+		padding: 20px;
+		padding-bottom: 0px;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		height: auto;
+		background-color: #FFF;
+		min-width: 500px;
+		.actions {
+			border-top: 1px solid #bebebe;
+			width: 100%;
+			display: flex;
+			justify-content: flex-end;
+			min-width: 500px;
+			margin: 0 -20px;
+			padding: 10px;
+		}
+	}
+}

web/src/css/index.css

@@ -115,10 +115,10 @@ h5, .md-subheading-1 {
   line-height: 24px; }
 
 p, .md-body-1 {
-  line-height: 1.42857; }
+  line-height: 20px; }
 
 h6, .md-body-2 {
-  line-height: 1.42857; }
+  line-height: 24px; }
 
 caption, .md-caption {
   font-size: 12px; }
@@ -1378,7 +1378,7 @@ tbody .md-table-row {
     line-height: inherit; }
 
 .md-table-checkbox .md-selection-control-label {
-  display: block; }
+  display: flex; }
 
 .md-table-checkbox .md-selection-control-container {
   margin-left: 12px;

web/src/lib/api.js

@@ -17,4 +17,4 @@ export const updateSkill = (skill)=>{
     },
     body: JSON.stringify(skill),
   });
-}
+}