#44: Added error check when deleting an app

frontend/src/AngularWorkflow.js

@@ -814,7 +814,7 @@ const AngularWorkflow = (props) => {
 		//console.log("ACTION: ", selectedAction)
 		//console.log("APP: ", selectedApp)
 		setSelectedAction({})
-		//setSelectedApp({})
+		setSelectedApp({})
 		//setSelectedTrigger({})
 		//setSelectedEdge({})
 
@@ -848,6 +848,7 @@ const AngularWorkflow = (props) => {
 
 	const onNodeSelect = (event) => {
 		const data = event.target.data()
+		console.log("NODE: ", data)
 		setLastSaved(false)
 		//console.log(data)
 
@@ -2564,10 +2565,16 @@ const AngularWorkflow = (props) => {
 
 	const appApiView = Object.getOwnPropertyNames(selectedAction).length > 0 && Object.getOwnPropertyNames(selectedApp).length > 0 ? 
 		<div style={appApiViewStyle}>
-			<div style={{display: "flex", height: 40, marginBottom: 30}}>
-				<div style={{flex: "1"}}>
-					<h3 style={{marginBottom: "5px"}}>{selectedAction.app_name}</h3>
+			<div style={{display: "flex", minHeight: 40, marginBottom: 30}}>
+				<div style={{flex: 1}}>
+					<h3 style={{marginBottom: 5}}>{selectedAction.app_name}</h3>
 					<Link to="/docs/apps" style={{textDecoration: "none", color: "#f85a3e"}}>What are apps?</Link>
+					{selectedAction.errors !== null && selectedAction.errors.length > 0 ? 
+						<div>
+							Errors: {selectedAction.errors.join("\n")}
+						</div>
+						: null
+					}
 				</div>
 				<div style={{flex: "1"}}>
 					<Button disabled={selectedAction.id === workflow.start} style={{zIndex: 5000, marginTop: "15px",}} color="primary" variant="outlined" onClick={(e) => {

frontend/src/Apps.js

@@ -56,6 +56,7 @@ const Apps = (props) => {
 	const [openApiData, setOpenApiData] = React.useState("")
 	const [appValidation, setAppValidation] = React.useState("")
 	const [loadAppsModalOpen, setLoadAppsModalOpen] = React.useState(false);
+	const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
 	const [openApiModal, setOpenApiModal] = React.useState(false);
 	const [openApiModalType, setOpenApiModalType] = React.useState("");
 	const [openApiError, setOpenApiError] = React.useState("")
@@ -352,7 +353,7 @@ const Apps = (props) => {
 					color="primary"
 					style={{marginLeft: 5, marginTop: 10}}
 					onClick={() => {
-						deleteApp(selectedApp.id)
+						setDeleteModalOpen(true)
 					}}
 				>
 					<DeleteIcon />
@@ -819,13 +820,42 @@ const Apps = (props) => {
 		window.location.href = "/apps/new?id="+appValidation
 	}
 
-
-
 	const handleGithubValidation = () => {
 		getSpecificApps(openApi)
 		setLoadAppsModalOpen(false)
 	}
 
+	const deleteModal = deleteModalOpen ? 
+		<Dialog modal 
+			open={deleteModalOpen}
+			onClose={() => {
+				setDeleteModalOpen(false)
+			}}
+			PaperProps={{
+				style: {
+					backgroundColor: surfaceColor,
+					color: "white",
+					minWidth: 500,
+				},
+			}}
+		>
+			<DialogTitle>
+				<div style={{textAlign: "center", color: "rgba(255,255,255,0.9)"}}>
+					Are you sure? <div/>Some workflows may stop working.
+				</div>
+			</DialogTitle>
+			<DialogContent style={{color: "rgba(255,255,255,0.65)", textAlign: "center"}}>
+				<Button style={{}} onClick={() => {deleteApp(selectedApp.id); setDeleteModalOpen(false)}} color="primary">
+					Yes
+				</Button>
+				<Button variant="outlined" style={{}} onClick={() => {setDeleteModalOpen(false)}} color="primary">
+					No
+				</Button>
+			</DialogContent>
+			
+		</Dialog>
+	: null
+
 	const appsModalLoad = loadAppsModalOpen ? 
 		<Dialog modal 
 			open={loadAppsModalOpen}
@@ -1006,6 +1036,7 @@ const Apps = (props) => {
 			{appView}
 			{modalView}
 			{appsModalLoad}
+			{deleteModal}
 		</div>
 		:
 		<div>

frontend/src/Workflows.js

@@ -319,7 +319,7 @@ const Workflows = (props) => {
 
 	// dropdown with copy etc I guess
 	const WorkflowPaper = (props) => {
-  		const { data } = props;
+  	const { data } = props;
 		const [open, setOpen] = React.useState(false);
 		const [anchorEl, setAnchorEl] = React.useState(null);
 

frontend/src/defaultCytoscapeStyle.js

@@ -101,10 +101,10 @@ const data = [{
 			},
 		},
 		{
-			selector: 'node[?hasErrors]',
+			selector: "node[!is_valid]",
 			css: {
-				'color': '#991818',
-				'font-style': 'italic',
+				'border-color': 'red',
+				'border-width': '10px',
 			},
 		},
 		{