Fixed import of workflow

frontend/src/Admin.js

@@ -371,7 +371,7 @@ const Admin = (props) => {
 				<Tabs
 					value={curTab}
 					indicatorColor="primary"
-					textColor="primary"
+					textColor="white"
 					onChange={setConfig}
 					aria-label="disabled tabs example"
 				>

frontend/src/App.js

@@ -42,8 +42,6 @@ var globalUrl = window.location.origin
 if (window.location.protocol == "http:" && window.location.port === "3000") {
 	globalUrl = "http://192.168.3.6:5001"
 }
-console.log(window.location)
-console.log(globalUrl)
 
 const surfaceColor = "#27292D"
 const inputColor = "#383B40"

frontend/src/SettingsPage.js

@@ -3,6 +3,7 @@ import React, {useState, useEffect} from 'react';
 import Paper from '@material-ui/core/Paper';
 import Button from '@material-ui/core/Button';
 import Divider from '@material-ui/core/Divider';
+import {Link} from 'react-router-dom';
 
 import TextField from '@material-ui/core/TextField';
 
@@ -51,6 +52,7 @@ const Settings = (props) => {
 	
 	const boxStyle = {
 		flex: "1",
+		color: "white",
 		marginLeft: "10px",
 		marginRight: "10px",
 		paddingLeft: "30px",
@@ -181,6 +183,7 @@ const Settings = (props) => {
 			<div style={{display: "flex", marginTop: "80px"}}>
 				<Paper style={boxStyle}>
 					<h2>APIKEY</h2>
+					<Link to="/docs/api#authentication" style={{textDecoration: "none", color: "#f85a3e"}}>What is the API key used for?</Link>
 					<TextField
 						style={{backgroundColor: inputColor, flex: "1"}}
 						InputProps={{

frontend/src/Workflows.js

@@ -37,6 +37,9 @@ const Workflows = (props) => {
 
 	const alert = useAlert()
 
+	var upload = ""
+	const [file, setFile] = React.useState("");
+
 	const [workflows, setWorkflows] = React.useState([]);
 	const [selectedWorkflow, setSelectedWorkflow] = React.useState({});
 	const [selectedExecution, setSelectedExecution] = React.useState({});
@@ -695,10 +698,8 @@ const Workflows = (props) => {
 		)
 	}
 
-	const setNewWorkflow = () => {
-		if (newWorkflowName.length === 0) {
-			return
-		}
+	// Can create and set workflows
+	const setNewWorkflow = (name, description, editingWorkflow, redirect) => {
 
 		var method = "POST"
 		var extraData = ""
@@ -710,12 +711,12 @@ const Workflows = (props) => {
 			workflowdata = editingWorkflow
 		}
 
-		workflowdata["name"] = newWorkflowName
-		workflowdata["description"] = newWorkflowDescription
+		workflowdata["name"] = name 
+		workflowdata["description"] = description 
 		//console.log(workflowdata)
 		//return
 
-		fetch(globalUrl+"/api/v1/workflows"+extraData, {
+		return fetch(globalUrl+"/api/v1/workflows"+extraData, {
     	  method: method,
 				headers: {
 					'Content-Type': 'application/json',
@@ -732,17 +733,71 @@ const Workflows = (props) => {
 			return response.json()
 		})
     .then((responseJson) => {
-			if (method === "POST") {
+			if (method === "POST" && redirect) {
 				window.location.pathname = "/workflows/"+responseJson["id"] 
+			} else if (!redirect) {
+				// Update :)		
+				getAvailableWorkflows()
 			} else { 
 				alert.info("Successfully changed basic info for workflow")
 			}
+
+			return responseJson
     })
 		.catch(error => {
 			alert.error(error.toString())
 		});
 	}
 
+
+	const importFiles = (event) => {
+		const file = event.target.value
+		if (event.target.files.length > 0) {
+			for (var key in event.target.files) {
+				const file = event.target.files[key]
+				if (file.type !== "application/json") {
+					//alert.error("File has to contain json.")
+					continue
+				}
+
+  			const reader = new FileReader()
+				// Waits for the read
+	  		reader.addEventListener('load', (event) => {
+					var data = reader.result
+					try {
+						data = JSON.parse(reader.result)
+					} catch (e) {
+						alert.error("Invalid JSON: "+e)
+						return
+					}
+
+					// Initialize the workflow itself
+					const ret = setNewWorkflow(data.name, data.description, {}, false)
+					.then((response) => {
+						if (response !== undefined) {
+							// SET THE FULL THING
+							data.id = response.id
+
+							// Actually create it
+							const ret = setNewWorkflow(data.name, data.description, data, false)
+							.then((response) => {
+								if (response !== undefined) {
+									alert.success("Successfully created "+data.name)
+								}
+							})
+						}
+					})
+					.catch(error => {
+						alert.error("Import error: "+error.toString())
+					});
+				})
+
+				// Actually reads
+		  	reader.readAsText(file)
+			}
+		}
+	}
+
 	const modalView = modalOpen ? 
 		<Dialog modal 
 			open={modalOpen} 
@@ -791,7 +846,7 @@ const Workflows = (props) => {
 						Cancel
 					</Button>
 					<Button style={{}} disabled={newWorkflowName.length === 0} onClick={() => {
-						setNewWorkflow()
+						setNewWorkflow(newWorkflowName, newWorkflowDescription, {}, true)
 						setModalOpen(false)
 					}} color="primary">
 	        	Submit	
@@ -825,13 +880,10 @@ const Workflows = (props) => {
 					<div style={{flex: "4"}}>
 						<h2>Workflows</h2> 
 					</div>
-					<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
-						<div>
-							<Button disabled={true} color="primary" style={{marginTop: "20px",}} variant="outlined" onClick={() => setModalOpen(true)}>Import</Button> 				
-						</div>
-						<div>
-							<Button color="primary" style={{marginTop: "20px",}} variant="outlined" onClick={() => setModalOpen(true)}>New</Button> 				
-						</div>
+					<div style={{marginTop: 20}}>
+						<Button color="primary" style={{}} variant="outlined" onClick={() => setModalOpen(true)}>New</Button> 				
+						<Button color="primary" style={{}} variant="outlined" onClick={() => upload.click()}>Import</Button> 				
+						<input hidden type="file" ref={(ref) => upload = ref} onChange={importFiles} />
 					</div>
 				</div>
 				<Divider style={{marginBottom: "10px", height: "1px", width: "100%", backgroundColor: dividerColor}}/>