Started creating introduction screen

2020-08-26 20:02:46 +02:00
parent f61f59981c
commit 0fc9c78385
8 changed files with 380 additions and 21 deletions
@@ -22,6 +22,7 @@ import Dashboard from "./views/Dashboard";
 import AdminSetup from "./views/AdminSetup";
 import Admin from "./views/Admin";
 import Docs from "./views/Docs";
+import Introduction from "./views/Introduction";

 import LandingPageNew from "./views/LandingpageNew";
 import LoginPage from "./views/LoginPage";
@@ -95,6 +96,7 @@ const App = (message, props) => {
 			.then(response => response.json())
 			.then(responseJson => {
 				if (responseJson.success === true) {
+					//console.log(responseJson.success)
 					setUserData(responseJson)
 					setIsLoggedIn(true)

@@ -141,6 +143,8 @@ const App = (message, props) => {
 			<Route exact path="/workflows/:key" render={props => <AngularWorkflow globalUrl={globalUrl} isLoaded={isLoaded} isLoggedIn={isLoggedIn} {...props} />} />
 			<Route exact path="/docs/:key" render={props => <Docs isLoaded={isLoaded} globalUrl={globalUrl} {...props} />} />
 			<Route exact path="/docs" render={props => { window.location.pathname = "/docs/about" }} />
+			<Route exact path="/introduction" render={props => <Introduction isLoaded={isLoaded} globalUrl={globalUrl} {...props} />} />
+			<Route exact path="/introduction/:key" render={props => <Introduction isLoaded={isLoaded} globalUrl={globalUrl} {...props} />} />
 			<Route exact path="/" render={props => { window.location.pathname = "/login" }} />
 		</div>

@@ -22,6 +22,9 @@ import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import AppsIcon from '@material-ui/icons/Apps';
 import CircularProgress from '@material-ui/core/CircularProgress';

+import Chip from '@material-ui/core/Chip';
+import ChipInput from 'material-ui-chip-input'
+
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import { useAlert } from "react-alert";
 import words from "shellwords"
@@ -201,11 +204,14 @@ const AppCreator = (props) => {
 	const [actionsModalOpen, setActionsModalOpen] = useState(false);
 	const [authenticationRequired, setAuthenticationRequired] = useState(false);
 	const [authenticationOption, setAuthenticationOption] = useState(authenticationOptions[0]);
+	const [newWorkflowTags, setNewWorkflowTags] = React.useState([]);
+	const [newWorkflowCategories, setNewWorkflowCategories] = React.useState([]);
 	const [parameterName, setParameterName] = useState("");
 	const [parameterLocation, setParameterLocation] = useState(apikeySelection.length > 0 ? apikeySelection[0] : "");
 	const [urlPath, setUrlPath] = useState("");
 	//const [urlPathQueries, setUrlPathQueries] = useState([{"name": "test", "required": false}]);
 	const [urlPathQueries, setUrlPathQueries] = useState([]);
+	const [update, setUpdate] = useState("")
 	const [urlPathParameters, ] = useState([]);
 	const [firstrequest, setFirstrequest] = React.useState(true)
 	const [, setBasedata] = React.useState({})
@@ -355,13 +361,20 @@ const AppCreator = (props) => {
 		setDescription(data.info.description)
 		document.title = "Apps - "+data.info.title

-		if (data.info !== null && data.info !== undefined && data.info["x-logo"] !== undefined) {
-			setFileBase64(data.info["x-logo"])
+		if (data.info !== null && data.info !== undefined)  {
+			if (data.info["x-logo"] !== undefined) {
+				setFileBase64(data.info["x-logo"])
+			}
+
+			if (data.info.contact !== undefined) {
+				setContact(data.info.contact)
+			}
+
+			if (data.info["x-categories"] !== undefined  && data.info["x-categories"].length > 0) {
+				setNewWorkflowCategories(data.info["x-categories"])
+			}
 		}

-		if (data.info.contact != undefined) {
-			setContact(data.info.contact)
-		}

 		if (data.servers !== undefined && data.servers.length > 0) {
 			var firstUrl = data.servers[0].url
@@ -372,6 +385,16 @@ const AppCreator = (props) => {
 			}
 		} 

+		if (data.tags !== undefined && data.tags.length > 0) {
+			for (var key in data.tags) {
+				newWorkflowTags.push(data.tags[key].name)
+			}
+
+			setNewWorkflowTags(newWorkflowTags)
+		}
+
+		console.log(data.info)
+
 		// This is annoying (:
 		var securitySchemes = data.components.securityDefinitions
 		if (securitySchemes === undefined) {
@@ -553,7 +576,6 @@ const AppCreator = (props) => {
 					"securitySchemes": {},
 				},
 				"id": props.match.params.appid,
-  			"securityDefinitions": {},
 		}

 		if (contact === "") {
@@ -566,8 +588,20 @@ const AppCreator = (props) => {
 			data.info["contact"] = contact
 		}

-		//console.log("LOADED IMAGE: ", data.image)
+		if (newWorkflowTags.length > 0) {
+			var newtags = []
+			for (var key in newWorkflowTags) {
+				newtags.push({"name": newWorkflowTags[key]})
+			}

+			data["tags"] = newtags 
+		}
+
+		if (newWorkflowCategories.length > 0) {
+			data["info"]["x-categories"] = newWorkflowCategories
+		}
+
+		// Handles actions
 		for (var key in actions) {
 			const item = actions[key]
 			if (item.errors.length > 0) {
@@ -594,7 +628,7 @@ const AppCreator = (props) => {
 				"parameters": []
 			}

-			console.log("ACTION: ", item)
+			//console.log("ACTION: ", item)

 			if (item.queries.length > 0) {
 				for (var querykey in item.queries) {
@@ -1455,6 +1489,55 @@ const AppCreator = (props) => {
 			</FormControl>
 		</Dialog>

+	const tagView = 
+		<div style={{color: "white"}}>
+			<h2>Tags</h2>
+			<ChipInput
+				style={{marginTop: 10}}
+				InputProps={{
+					style:{
+						color: "white",
+					},
+				}}
+				placeholder="Tags"
+				color="primary"
+				fullWidth
+				value={newWorkflowTags}
+				onAdd={(chip) => {
+					newWorkflowTags.push(chip)
+					setNewWorkflowTags(newWorkflowTags)
+					setUpdate("added"+chip)
+				}}
+				onDelete={(chip, index) => {
+					newWorkflowTags.splice(index, 1)
+					setNewWorkflowTags(newWorkflowTags)
+					setUpdate("delete "+chip)
+				}}
+			/>
+			<ChipInput
+				style={{marginTop: 10}}
+				InputProps={{
+					style:{
+						color: "white",
+					},
+				}}
+				placeholder="Categories"
+				color="primary"
+				fullWidth
+				value={newWorkflowCategories}
+				onAdd={(chip) => {
+					newWorkflowCategories.push(chip)
+					setNewWorkflowCategories(newWorkflowCategories)
+					setUpdate("added "+chip)
+				}}
+				onDelete={(chip, index) => {
+					newWorkflowCategories.splice(index, 1)
+					setNewWorkflowCategories(newWorkflowCategories)
+					setUpdate("delete "+chip)
+				}}
+			/>
+		</div>
+
 	const actionView = 
 		<div style={{color: "white"}}>
 			<h2>Actions</h2>
@@ -1705,6 +1788,12 @@ const AppCreator = (props) => {
 					<div style={{marginTop: "25px"}}>
 						{actionView}
 					</div>
+
+					<Divider style={{marginBottom: "10px", marginTop: "30px", height: "1px", width: "100%", backgroundColor: "grey"}}/>
+					<div style={{marginTop: "25px"}}>
+						{tagView}
+					</div>
+					{/*
 					{/*
 					<Divider style={{marginBottom: "10px", marginTop: "30px", height: "1px", width: "100%", backgroundColor: "grey"}}/>
 						{testView}
@@ -20,6 +20,7 @@ import YAML from 'yaml'
 import {Link} from 'react-router-dom';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import ReactJson from 'react-json-view'
+import Chip from '@material-ui/core/Chip';

 import CachedIcon from '@material-ui/icons/Cached';
 import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
@@ -477,13 +478,26 @@ const Apps = (props) => {
 					</div>
 					<div style={{maxWidth: "75%", overflow: "hidden"}}>
 						<h2>{newAppname}</h2>
-						<p>{description}</p>
+						<p>{description}</p>	
 					</div>
 				</div>
 				{activateButton}
 				{downloadButton}
 				{editButton}
 				{deleteButton}
+				{selectedApp.tags !== undefined && selectedApp.tags !== null ?
+					<div style={{display: "inline-block", marginLeft: 15, float: "right",}}>
+						{selectedApp.tags.map(tag => {
+							return (
+								<Chip
+									style={{marginRight: 5, marginTop: 7, cursor: "pointer",}}
+									label={tag}
+									color="primary"
+								/>
+							)
+						})}
+					</div>
+				: null}
 				<Divider style={{marginBottom: "10px", marginTop: "10px", backgroundColor: dividerColor}}/>
 				{selectedApp.link.length > 0 ? <p><b>URL:</b> {selectedApp.link}</p> : null}
 				<p><b>ID:</b> {selectedApp.id}</p>
@@ -549,7 +563,7 @@ const Apps = (props) => {
 							})}
 					</div>
 				: null}
-				{selectedAction.description !== undefined && selectedAction.description !== null ? 
+				{selectedAction.description !== undefined && selectedAction.description !== null && selectedAction.description.length > 0 ? 
 					<div>
 						<b>Action Description</b><div/>
 						{selectedAction.description}
@@ -985,7 +999,7 @@ const Apps = (props) => {
 	}

 	const deleteModal = deleteModalOpen ? 
-		<Dialog modal 
+		<Dialog 
 			open={deleteModalOpen}
 			onClose={() => {
 				setDeleteModalOpen(false)
@@ -1017,7 +1031,7 @@ const Apps = (props) => {

 	const circularLoader = validation ? <CircularProgress color="primary" /> : null
 	const appsModalLoad = loadAppsModalOpen ? 
-		<Dialog modal 
+		<Dialog 
 			open={loadAppsModalOpen}
 			onClose={() => {
 				setOpenApi("")
@@ -1115,7 +1129,7 @@ const Apps = (props) => {

 	const errorText = openApiError.length > 0 ? <div>Error: {openApiError}</div> : null
 	const modalView = openApiModal ? 
-		<Dialog modal 
+		<Dialog 
 			open={openApiModal}
 			onClose={() => {setOpenApiModal(false)}}
 			PaperProps={{
@@ -0,0 +1,217 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '@material-ui/core/styles';
+
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardContent from '@material-ui/core/CardContent';
+import CardHeader from '@material-ui/core/CardHeader';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+
+const Workflows = (props) => {
+  const { globalUrl, isLoggedIn, isLoaded, } = props
+	const theme = useTheme();
+	const [curView, setCurView] = useState(0);
+	const [firstrequest, setFirstrequest] = useState(true)
+	const [selectedItems, setSelectedItems] = useState([])
+
+	const viewdata1 = [
+		{
+			"title": "General",
+			"content": "Learn about our ticketing solutions",
+			"subitems": [
+				{
+					"name": "Search",
+					"subtitle": "Search for anything, anywhere",
+				},
+				{
+					"name": "Message",
+					"subtitle": "Read and send messages",
+				},
+				{
+					"name": "Parse emails",
+					"subtitle": "what",
+				},
+			],
+		},
+		{
+			"title": "Ticketing",
+			"subitems": [
+				{
+					"name": "Search",
+					"subtitle": "Search for anything, anywhere",
+				},
+				{
+					"name": "Message",
+					"subtitle": "Read and send messages",
+				},
+				{
+					"name": "Parse emails",
+					"subtitle": "what",
+				},
+			],
+		},
+		{
+			"title": "Threat intel",
+			"subitems": [
+				{
+					"name": "Search",
+					"subtitle": "Search for anything, anywhere",
+				},
+				{
+					"name": "Message",
+					"subtitle": "Read and send messages",
+				},
+				{
+					"name": "Parse emails",
+					"subtitle": "what",
+				},
+			],
+		},
+	]
+
+	if (firstrequest) {
+		setFirstrequest(false)
+		if (props.match.params.key) {
+			console.log("PROPS: ", props.match.params.key)
+			const viewitem = viewdata1.find(item => item.title.toLowerCase() === props.match.params.key.toLowerCase())
+			if (viewitem !== undefined && viewitem !== null) {
+				setCurView(1)
+				//setSelectedItem(viewitem)
+			}
+		}
+	}
+
+	
+
+	const cardContentStyle = {
+		height: "100%", 
+		width: "100%", 
+		padding: 40,
+	}
+
+	const outerGridView = {
+		width: "100%",
+		marginTop: 15,
+	}
+
+	const paperStyle = {
+			height: 300, 
+			color: "white",
+			backgroundColor: theme.palette.surfaceColor,
+			color: "white",
+			cursor: "pointer",
+			display: "flex",
+			textAlign: "center",
+	}
+
+	const HandleSelection = (data) => {
+		const [selected, setSelected] = useState(false);
+
+		var baseStyle = JSON.parse(JSON.stringify(paperStyle))
+		if (selected) {
+			baseStyle.backgroundColor = "white"
+			baseStyle.color = "black"
+		}
+
+		return (
+			<Grid item xs={4} onClick={() => {
+				console.log(selectedItems)
+				if (selected) {
+					const index = selectedItems.findIndex(item => item.title === data.title)
+					if (index >= 0) {
+						selectedItems.splice(index, 1)
+						setSelectedItems(selectedItems)
+					}
+				} else {
+					selectedItems.push(data)
+					setSelectedItems(selectedItems)
+				}
+
+				setSelected(!selected)
+				
+				//setCurView(1)
+				//setSelectedItem(data)
+				//window.location.pathname += "/"+data.title.toLowerCase()
+			}}>
+				<Card style={baseStyle}>
+					<CardActionArea style={cardContentStyle}>	
+						<CardContent>	
+							<Typography variant="h4">
+								{data.title}
+							</Typography>
+						</CardContent>	
+					</CardActionArea>	
+				</Card>
+			</Grid>
+		)
+	}
+
+	const view1 = curView === 0 ? 
+		<div>
+			<Typography variant="h4">
+				What are you interested in?	
+			</Typography>
+			<Grid container style={outerGridView} spacing={3}>
+				{viewdata1.map(data => {
+					return (
+						HandleSelection(data)	
+					)
+				})}
+			</Grid>
+			{/*
+			<Button variant="contained" color="primary" style={{height: 50, width: 300, margin: "auto",}} onClick={() => {
+				setCurView(1)
+			}}>
+				Continue
+			</Button>
+			*/}
+		</div>
+	: null
+
+	const view2 = curView === 1 ? 
+		<div>
+			<Typography variant="h4">
+				Step 2.
+			</Typography>
+			{/*
+			<Grid container style={outerGridView} spacing={3}>
+				{selectedItem.subitems === undefined ? null : 
+					selectedItem.subitems.map(data => {
+					return (
+						<Grid item xs={4}>
+							<Card style={paperStyle}>
+								<CardActionArea style={cardContentStyle}>	
+									<CardContent>	
+										<Typography variant="h4">
+											{data.name}
+										</Typography>
+										<Typography variant="body1" style={{marginTop: 10}}>
+											{data.subtitle}
+										</Typography>
+									</CardContent>	
+								</CardActionArea>	
+							</Card>
+						</Grid>
+					)
+				})}
+			</Grid>
+			*/}
+		</div>
+	: null
+
+	const baseView = 
+		<div style={{maxWidth: 1024, margin: "auto", paddingTop: 50,}}>
+			{view1}
+			{view2}
+		</div>
+
+	return (
+		<div>
+			{baseView}
+		</div>
+	)
+}
+
+export default Workflows 
@@ -81,7 +81,7 @@ const Workflows = (props) => {
 	})

 	const deleteModal = deleteModalOpen ? 
-		<Dialog modal 
+		<Dialog
 			open={deleteModalOpen}
 			onClose={() => {
 				setDeleteModalOpen(false)
@@ -102,8 +102,9 @@ const Workflows = (props) => {
 			</DialogTitle>
 			<DialogContent style={{color: "rgba(255,255,255,0.65)", textAlign: "center"}}>
 				<Button style={{}} onClick={() => {
-					if (editingWorkflow.id.length > 0) {
-						deleteWorkflow(editingWorkflow.id)		
+					console.log("Editing: ", editingWorkflow)
+					if (selectedWorkflowId) {
+						deleteWorkflow(selectedWorkflowId)		
 						getAvailableWorkflows() 
 					}
 					setDeleteModalOpen(false)
@@ -968,13 +969,11 @@ const Workflows = (props) => {
 						value={newWorkflowTags}
 						onAdd={(chip) => {
 							newWorkflowTags.push(chip)
-							console.log("Add: ", newWorkflowTags)
 							setNewWorkflowTags(newWorkflowTags)
 						}}
 						onDelete={(chip, index) => {
 							newWorkflowTags.splice(index, 1)
 							setNewWorkflowTags(newWorkflowTags)
-							console.log("Delete: ", chip, index)
 							setUpdate("delete "+chip)
 						}}
 					/>