From 33b46e37135382244bd21d6b1f5dd34680d09a85 Mon Sep 17 00:00:00 2001
From: frikky <fredrik_9490@hotmail.com>
Date: Mon, 10 Jan 2022 13:32:24 +0100
Subject: [PATCH] Made magic button in code editor

---
 docker-compose.yml                            |  4 +-
 frontend/src/components/ShuffleCodeEditor.jsx | 56 ++++++++++++++---
 frontend/src/views/AngularWorkflow.jsx        | 63 ++++++++++++++++++-
 3 files changed, 111 insertions(+), 12 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 64eabd79..f1c7ff7c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '3'
 services:
   frontend:
-    build: ./frontend
+    #build: ./frontend
     image: ghcr.io/frikky/shuffle-frontend:nightly
     container_name: shuffle-frontend
     hostname: shuffle-frontend
@@ -16,7 +16,7 @@ services:
     depends_on:
       - backend
   backend:
-    build: ./backend
+    #build: ./backend
     image: ghcr.io/frikky/shuffle-backend:nightly
     container_name: shuffle-backend
     hostname: ${BACKEND_HOSTNAME}
diff --git a/frontend/src/components/ShuffleCodeEditor.jsx b/frontend/src/components/ShuffleCodeEditor.jsx
index bb0eb615..a1026f82 100644
--- a/frontend/src/components/ShuffleCodeEditor.jsx
+++ b/frontend/src/components/ShuffleCodeEditor.jsx
@@ -12,6 +12,10 @@ import {
 	FullscreenExit as FullscreenExitIcon,
 } from "@material-ui/icons";
 
+import {
+	AutoFixHigh as AutoFixHighIcon,
+} from '@mui/icons-material';
+
 import { useTheme } from '@material-ui/core/styles';
 import { validateJson } from "../views/Workflows.jsx";
 import ReactJson from "react-json-view";
@@ -28,6 +32,22 @@ const CodeEditor = (props) => {
 	const [validation, setValidation] = React.useState(false);
 	const [expOutput, setExpOutput] = React.useState(" ");
 
+	const autoFormat = (input) => {
+		if (validation !== true) {
+			return
+		}
+
+		try {
+			input = JSON.stringify(JSON.parse(input), null, 4)
+		} catch (e) {
+			console.log("Failed magic JSON stringification: ", e)
+		}
+
+		if (input !== localcodedata) {
+			setlocalcodedata(input)
+		}
+	}
+
 	function expectedOutput(input) {
 		
 		const found = input.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
@@ -80,14 +100,34 @@ const CodeEditor = (props) => {
 					display: 'flex',
 				}}
 			>
-				<DialogTitle
-					style={{
-						paddingBottom:20,
-						paddingLeft: 10, 
-					}}
-				>
-						Code Editor
-				</DialogTitle>
+				<div style={{display: "flex"}}>
+					<DialogTitle
+						style={{
+							paddingBottom:20,
+							paddingLeft: 10, 
+						}}
+					>
+							Code Editor
+					</DialogTitle>
+					<IconButton
+						style={{
+							marginLeft: 400, 
+							height: 50, 
+							width: 50, 
+						}}
+						onClick={() => {
+							autoFormat(localcodedata) 
+						}}
+					>
+						<Tooltip
+							color="primary"
+							title={"Auto format data"}
+							placement="top"
+						>
+							<AutoFixHighIcon style={{color: "rgba(255,255,255,0.7)"}}/>
+						</Tooltip>
+					</IconButton>
+				</div>
 			</div>
 			<span style={{
 				border: `2px solid ${theme.palette.inputColor}`,
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index 349c7598..2cc7e06d 100644
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -3,7 +3,7 @@ import { useInterval } from "react-powerhooks";
 import { makeStyles, useTheme } from "@material-ui/core/styles";
 
 import { v4 as uuidv4 } from "uuid";
-import { Link, useParams } from "react-router-dom";
+import { useNavigate, Link, useParams } from "react-router-dom";
 // import { Prompt } from "react-router"; // FIXME
 import { useBeforeunload } from "react-beforeunload";
 import ReactJson from "react-json-view";
@@ -80,6 +80,10 @@ import {
   AddComment as AddCommentIcon,
 } from "@material-ui/icons";
 
+import {
+		Preview as PreviewIcon,
+} from '@mui/icons-material';
+
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import * as cytoscape from "cytoscape";
 import * as edgehandles from "cytoscape-edgehandles";
@@ -214,6 +218,7 @@ const AngularWorkflow = (defaultprops) => {
   const { globalUrl, isLoggedIn, isLoaded, userdata } = defaultprops;
   const referenceUrl = globalUrl + "/api/v1/hooks/";
   const alert = useAlert()
+	let navigate = useNavigate();
 
 	const params = useParams();
 	var props = JSON.parse(JSON.stringify(defaultprops))
@@ -3335,6 +3340,17 @@ const AngularWorkflow = (defaultprops) => {
         typeof window === "undefined" || window.location === undefined
           ? ""
           : window.location.search;
+			const tmpExec = new URLSearchParams(cursearch).get("execution_highlight");
+      if (
+        tmpExec !== undefined &&
+        tmpExec !== null &&
+        tmpExec === "executions"
+      ) {
+        setExecutionModalOpen(true)
+        const newitem = removeParam("execution_highlight", cursearch);
+        props.history.push(curpath + newitem);
+			}
+
       const tmpView = new URLSearchParams(cursearch).get("view");
       if (
         tmpView !== undefined &&
@@ -11254,6 +11270,48 @@ const AngularWorkflow = (defaultprops) => {
                 }
               }
 
+
+							var similarActionsView = null
+							if (data.similar_actions !== undefined && data.similar_actions !== null) {
+								var minimumMatch = 85
+								var matching_executions = []
+								for (var k in data.similar_actions){
+									if (data.similar_actions.hasOwnProperty(k)) {
+										if (data.similar_actions[k].similarity > minimumMatch) {
+											matching_executions.push(data.similar_actions[k].execution_id)
+										}
+									}
+								}
+
+								if (matching_executions.length !== 0) {
+									var parsed_url = matching_executions.join(",")
+
+									similarActionsView = 
+										<Tooltip
+											color="primary"
+											title="See executions with similar results (not identical)"
+											placement="top"
+											style={{ zIndex: 50000, marginLeft: 20,}}
+										>
+											<IconButton
+													style={{
+														marginTop: "auto",
+														marginBottom: "auto",
+														height: 30,
+														paddingLeft: 0,
+														width: 30,
+													}}
+													onClick={() => {
+														navigate(`?execution_highlight=${parsed_url}`)
+													}}
+												>
+													<PreviewIcon style={{ color: "rgba(255,255,255,0.5)" }}/>
+											</IconButton>
+										</Tooltip>
+								}
+							}
+
+
               return (
                 <div
                   key={index}
@@ -11376,9 +11434,10 @@ const AngularWorkflow = (defaultprops) => {
                     <Typography variant="body1">
                       <b>Status&nbsp;</b>
                     </Typography>
-                    <Typography variant="body1" color="textSecondary">
+                    <Typography variant="body1" color="textSecondary" style={{marginRight: 15,}}>
                       {data.status}
                     </Typography>
+										{similarActionsView}
                   </div>
                   {validate.valid ? (
                     <span>