Fiddled with apps

frontend/src/views/AngularWorkflow.jsx

@@ -157,6 +157,7 @@ const AngularWorkflow = (props) => {
 	
 	const [apps, setApps] = React.useState([]);
 	const [filteredApps, setFilteredApps] = React.useState([]);
+	const [prioritizedApps, setPrioritizedApps] = React.useState([]);
 	const [firstrequest, setFirstrequest] = React.useState(true)
 	//const [apps, setApps] = React.useState(appdata);
 	//const [filteredApps, setFilteredApps] = React.useState();
@@ -794,6 +795,11 @@ const AngularWorkflow = (props) => {
 		});
 	}
 
+	const internalIds = [
+		"80a1fdd2-95c2-49ab-81f6-e05689beb745", // Shuffle tools
+		"39c5f8fa-a088-4cdc-826f-19e2e61cb284", // Testing
+	]
+
 	const getApps = () => {
 		fetch(globalUrl+"/api/v1/workflows/apps", {
 			method: 'GET',
@@ -819,6 +825,9 @@ const AngularWorkflow = (props) => {
 			setApps(responseJson)
 			setFilteredApps(responseJson)
 			getAppAuthentication() 
+
+
+			setPrioritizedApps(responseJson.filter(app => internalIds.includes(app.id)))
     })
 		.catch(error => {
 			alert.error(error.toString())
@@ -2206,33 +2215,9 @@ const AngularWorkflow = (props) => {
 		setFilteredApps(apps.filter(app => app.name.toLowerCase().includes(event.target.value.trim().toLowerCase())))
 	}
 
-	const AppView = () => {
+	const ParsedAppPaper = (props) => {
-		return(
+		const app = props.app
-			<div style={appViewStyle}>
+
-				<div style={{flex: "1"}}>
-					<div style={appScrollStyle}>
-					{/*
-					<TextField
-						style={{backgroundColor: inputColor, borderRadius: borderRadius,}} 
-						style={{backgroundColor: inputColor}} 
-						InputProps={{
-							style:{
-								color: "white",
-								minHeight: "50px", 
-								marginLeft: "5px",
-								maxWidth: "95%",
-								fontSize: "1em",
-							},
-						}}
-						fullWidth
-						color="primary"
-						placeholder={"Search apps"}
-						onChange={(event) => {
-							runAppSearch(event)
-						}}
-					/>
-					*/}
-					{filteredApps.map(app=> {
 		// FIXME - add label to apps, as this might be slow with A LOT of apps
 		var newAppname = app.name
 		newAppname = newAppname.replace("_", " ").charAt(0).toUpperCase()+newAppname.substring(1)
@@ -2241,15 +2226,9 @@ const AngularWorkflow = (props) => {
 			newAppname = newAppname.slice(0, maxlen)+".."
 		}
 
-						// Description fucks this up - fix overflow :)
-						//const maxdesclen = 5
-						//var desc = app.description
-						//if (newAppname.length > maxdesclen) {
-						//	desc = desc.slice(0, maxdesclen)+".."
-						//}
-
 		const image = "url("+app.large_image+")"
-						return(
+
+		return (
 			<Draggable 
 					onDrag={(e) => {handleAppDrag(e, app)}}
 					onStop={(e) => {handleDragStop(e, app)}}
@@ -2282,6 +2261,43 @@ const AngularWorkflow = (props) => {
 					</Paper>
 				</Draggable>
 			)
+	}
+
+	const AppView = () => {
+		return(
+			<div style={appViewStyle}>
+				<div style={{flex: "1"}}>
+					<div style={appScrollStyle}>
+					{/*
+					<TextField
+						style={{backgroundColor: inputColor, borderRadius: borderRadius,}} 
+						style={{backgroundColor: inputColor}} 
+						InputProps={{
+							style:{
+								color: "white",
+								minHeight: "50px", 
+								marginLeft: "5px",
+								maxWidth: "95%",
+								fontSize: "1em",
+							},
+						}}
+						fullWidth
+						color="primary"
+						placeholder={"Search apps"}
+						onChange={(event) => {
+							runAppSearch(event)
+						}}
+					/>
+					*/}
+					{prioritizedApps.map((app, index) => {	
+						return(
+							<ParsedAppPaper app={app} />	
+						)
+					})}
+					{filteredApps.filter(innerapp => !internalIds.includes(innerapp.id)).map((app, index) => {	
+						return(
+							<ParsedAppPaper app={app} />	
+						)
 					})}
 					</div>
 				</div>
@@ -3347,6 +3363,7 @@ const AngularWorkflow = (props) => {
 		overflow: "scroll",
 		overflowX: "auto",
 		overflowY: "auto",
+		zIndex: 1000,
 	}
 
 	const setTriggerFolderWrapperMulti = event => {