Loads of minor bugfixes to Shuffle UI

backend/app_sdk/app_base.py

@@ -3312,7 +3312,7 @@ class AppBase:
 
                                         newres = json.dumps({
                                             "success": False,
-                                            "reason": "An exception occurred while running this function. See exception for more details and contact support if this persists (support@shuffler.io)",
+                                            "reason": "An exception occurred while running this function (1). See exception for more details and contact support if this persists (support@shuffler.io)",
                                             "exception": e,
                                         })
                                         break
@@ -3343,7 +3343,7 @@ class AppBase:
 
                                     newres = json.dumps({
                                         "success": False,
-                                        "reason": "An exception occurred while running this function. See exception for more details and contact support if this persists (support@shuffler.io)",
+                                        "reason": "An exception occurred while running this function (2). See exception for more details and contact support if this persists (support@shuffler.io)",
                                         "exception": e,
                                     })
                                     break

backend/go-app/docker.go

@@ -2,9 +2,8 @@ package main
 
 // Docker
 import (
-	"github.com/shuffle/shuffle-shared"
-
 	"archive/tar"
+	"github.com/shuffle/shuffle-shared"
 	//"bufio"
 	"path/filepath"
 	//"strconv"

backend/go-app/go.mod

@@ -2,7 +2,7 @@ module main
 
 go 1.16
 
-//replace github.com/shuffle/shuffle-shared => ../../../shuffle-shared
+replace github.com/shuffle/shuffle-shared => ../../../shuffle-shared
 
 //replace github.com/frikky/kin-openapi => ../../../../git/kin-openapi
 //replace github.com/frikky/go-elasticsearch => ../../../../git/go-elasticsearch

backend/go-app/main.go

@@ -3187,6 +3187,7 @@ func buildSwaggerApp(resp http.ResponseWriter, body []byte, user shuffle.User) {
 		return
 	}
 
+	swagger.Info.Title = shuffle.FixFunctionName(swagger.Info.Title, swagger.Info.Title, false)
 	if strings.Contains(swagger.Info.Title, " ") {
 		swagger.Info.Title = strings.Replace(swagger.Info.Title, " ", "_", -1)
 	}
@@ -4800,7 +4801,6 @@ func runInit(ctx context.Context) {
 					continue
 				}
 
-				log.Printf("ENV: %s", item.Environment)
 				if item.Environment == "cloud" {
 					log.Printf("Skipping cloud schedule")
 					continue

frontend/src/defaultCytoscapeStyle.js

@@ -57,6 +57,7 @@ const data = [
       padding: "0px",
       margin: "0px",
       "background-color": "data(backgroundcolor)",
+      "background-image": "data(backgroundimage)",
       "border-color": "#ffffff",
       "text-margin-x": "0px",
       "z-index": 4999,

frontend/src/views/Admin.jsx

@@ -349,7 +349,6 @@ const Admin = (props) => {
     })
       .then((response) =>
         response.json().then((responseJson) => {
-          console.log("RESP: ", responseJson);
           if (responseJson["success"] === false) {
             alert.error("Failed deleting auth");
           } else {
@@ -825,7 +824,7 @@ const Admin = (props) => {
             handleGetDeals(orgId);
           }
 
-          setSelectedOrganization(responseJson);
+          setSelectedOrganization(responseJson)
           var lists = {
             active: {
               triggers: [],
@@ -2381,7 +2380,7 @@ const Admin = (props) => {
       <CheckCircleIcon style={{ color: "green" }} />
     ) : (
       <CloseIcon style={{ color: "red" }} />
-    );
+    )
 
     return (
       <Grid
@@ -2397,8 +2396,8 @@ const Admin = (props) => {
             margin: 4,
             backgroundColor: theme.palette.inputColor,
             color: "white",
-            minHeight: expanded ? 200 : "inherit",
+            minHeight: expanded ? 250 : "inherit",
-            maxHeight: expanded ? 200 : "inherit",
+            maxHeight: expanded ? 250 : "inherit",
           }}
         >
           <ListItem>
@@ -2414,19 +2413,19 @@ const Admin = (props) => {
           {expanded ? (
             <div style={{ padding: 15 }}>
               <Typography>
-                Usage:{" "}
+                <b>Usage:&nbsp;</b>
                 {props.data.limit === 0 ? (
-                  "Infinite"
+                  "Unlimited"
                 ) : (
                   <span>
-                    {props.data.usage} / {props.data.limit}
+                    {props.data.usage} / {props.data.limit === "" ? "Unlimited" : props.data.limit}
                   </span>
                 )}
               </Typography>
-              <Typography>
+              {/*<Typography>
                 Data sharing: {props.data.data_collection}
-              </Typography>
+              </Typography>*/}
-              <Typography>Description: {secondary}</Typography>
+              <Typography style={{maxHeight: 150, overflowX: "hidden", overflowY: "auto"}}><b>Description:</b> {secondary}</Typography>
             </div>
           ) : null}
         </Card>
@@ -2935,7 +2934,7 @@ const Admin = (props) => {
             <Typography
               style={{ marginTop: 40, marginLeft: 10, marginBottom: 5 }}
             >
-              Cloud sync features
+              Cloud sync features (monthly usage)
             </Typography>
             <Grid container style={{ width: "100%", marginBottom: 15 }}>
               {selectedOrganization.sync_features === undefined ||
@@ -2945,11 +2944,16 @@ const Admin = (props) => {
                     key,
                     index
                   ) {
-                    if (key === "schedule") {
+										// unnecessary parts
+                    if (key === "schedule" || key === "apps" || key === "updates") {
                       return null;
                     }
 
                     const item = selectedOrganization.sync_features[key];
+										if (item === null) {
+											return null
+										}
+
                     const newkey = key.replaceAll("_", " ");
                     const griditem = {
                       primary: newkey,
@@ -2960,7 +2964,8 @@ const Admin = (props) => {
                           ? "Not defined yet"
                           : item.description,
                       limit: item.limit,
-                      usage: 0,
+                      usage: item.usage === undefined ||
+                        item.usage === null ? 0 : item.usage,
                       data_collection: "None",
                       active: item.active,
                       icon: <PolymerIcon style={{ color: itemColor }} />,
@@ -4716,9 +4721,13 @@ const Admin = (props) => {
               primary="Orborus running"
               style={{ minWidth: 200, maxWidth: 200 }}
             />
+            <ListItemText
+              primary="Command"
+              style={{ minWidth: 100, maxWidth: 100 }}
+            />
             <ListItemText
               primary="Type"
-              style={{ minWidth: 150, maxWidth: 150 }}
+              style={{ minWidth: 125, maxWidth: 125 }}
             />
             <ListItemText
               primary="Default"
@@ -4770,7 +4779,10 @@ const Admin = (props) => {
                           ? environment.running_ip === undefined ||
                             environment.running_ip === null ||
                             environment.running_ip.length === 0
-                            ? "Not running"
+                            ? 
+														<div>
+															Not running
+														</div>
                             : environment.running_ip
                           : "N/A"
                       }
@@ -4780,9 +4792,52 @@ const Admin = (props) => {
                         overflow: "hidden",
                       }}
                     />
+
+                    <ListItemText
+                      style={{ minWidth: 100, maxWidth: 100 }}
+                      primary={
+												<Tooltip
+													title={"Copy Orborus command"}
+													style={{}}
+													aria-label={"Copy orborus command"}
+												>
+													<IconButton
+														style={{}}
+														onClick={() => {
+															const elementName = "copy_element_shuffle";
+															const auth = environment.auth === "" ? 'cb5st3d3Z!3X3zaJ*Pc' : environment.auth
+															const commandData = `docker run -d --volume "/var/run/docker.sock:/var/run/docker.sock" -e ENVIRONMENT_NAME="${environment.Name}" -e 'AUTH=${auth}' -e ORG="${props.userdata.active_org.id}" -e DOCKER_API_VERSION=1.40 -e BASE_URL="https://shuffler.io" ghcr.io/frikky/shuffle-orborus:latest`
+															var copyText = document.getElementById(elementName);
+															if (copyText !== null && copyText !== undefined) {
+																const clipboard = navigator.clipboard;
+																if (clipboard === undefined) {
+																	alert.error("Can only copy over HTTPS (port 3443)");
+																	return;
+																}
+
+																navigator.clipboard.writeText(commandData);
+																copyText.select();
+																copyText.setSelectionRange(
+																	0,
+																	99999
+																); /* For mobile devices */
+
+																/* Copy the text inside the text field */
+																document.execCommand("copy");
+
+																alert.info("Orborus command copied to clipboard");
+															}
+														}}
+													>
+														<FileCopyIcon disabled={environment.Type === "cloud"} style={{ color: "rgba(255,255,255,0.8)" }} />
+													</IconButton>
+												</Tooltip>
+											}
+                    />
+
                     <ListItemText
                       primary={environment.Type}
-                      style={{ minWidth: 150, maxWidth: 150 }}
+                      style={{ minWidth: 125, maxWidth: 125 }}
                     />
                     <ListItemText
                       style={{
@@ -4857,7 +4912,7 @@ const Admin = (props) => {
                           }}
                           color="primary"
                         >
-                          Clear executions
+                          Clear
                         </Button>
                       </div>
                     </ListItemText>

frontend/src/views/AngularWorkflow.jsx

@@ -2815,17 +2815,23 @@ const AngularWorkflow = (defaultprops) => {
     	    cy.on("free", "node", (e) => onNodeDragStop(e, curaction));
     	  }
 
-				console.log("Object: ", environments)
+				console.log("Object: ", environments, curaction.environment)
     	  if (environments !== undefined && environments !== null && (typeof environments === "array" || typeof environments === "object")) {
+					console.log("Type: ", typeof(environments))
+
 					var parsedenv = environments
-					if (typeof environments === "object") {
+					//if (typeof environments === "object") {
-						parsedenv = [environments]
+					//	parsedenv = [environments]
+					//}
+
+    	    const envs = parsedenv.find((a) => a.Name === curaction.environment);
+    	    var env = environments[defaultEnvironmentIndex]
+					console.log("Inner envs: ", envs, curaction.environment)
+					if (envs !== undefined && envs !== null) {
+						env = envs
 					}
 
-    	    var env = parsedenv.find((a) => a.Name === curaction.environment);
+					console.log("env: ", env)
-    	    if (!env || env === undefined) {
-    	      env = parsedenv[defaultEnvironmentIndex];
-    	    }
 
     	    setSelectedActionEnvironment(env);
     	  }
@@ -9426,6 +9432,31 @@ const AngularWorkflow = (defaultprops) => {
               />
             </div>
           </div>
+					<div style={{marginTop: 15,}}>Background-Image</div>
+					<TextField
+						style={{
+							backgroundColor: inputColor,
+							borderRadius: theme.palette.borderRadius,
+						}}
+						InputProps={{
+							style: {
+								color: "white",
+								marginLeft: "5px",
+								maxWidth: "95%",
+								height: 50,
+								fontSize: "1em",
+							},
+						}}
+						fullWidth
+						color="primary"
+						placeholder={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr69kkDcJiR4Vm59ypxhGkD1JDIV0oLVDiBQ&usqp=CAU"}
+						defaultValue={selectedComment["backgroundimage"]}
+						onChange={(event) => {
+							selectedComment.backgroundimage = event.target.value;
+							console.log("Comment: ", selectedComment)
+							setSelectedComment(selectedComment);
+						}}
+					/>
         </div>
       );
     }
@@ -14142,7 +14173,6 @@ const AngularWorkflow = (defaultprops) => {
             backgroundColor: surfaceColor,
             color: "white",
             minWidth: 600,
-            padding: 50,
 						border: theme.palette.defaultBorder,
           },
         }}
@@ -14153,7 +14183,7 @@ const AngularWorkflow = (defaultprops) => {
             position: "absolute",
             top: 14,
             right: 14,
-            color: "grey",
+            color: "white",
           }}
           onClick={() => {
             setConfigureWorkflowModalOpen(false);

frontend/src/views/AppCreator.jsx

@@ -1814,7 +1814,7 @@ const AppCreator = (defaultprops) => {
         for (var querykey in item.queries) {
           const queryitem = item.queries[querykey];
 
-					if (queryitem === undefined || queryitem === null || queryitem.name === undefined || queryitem.name === null) {
+					if (queryitem === undefined || queryitem === null || queryitem.name === undefined || queryitem.name === null || queryitem.name === "") {
 						continue
 					}
 
@@ -1824,7 +1824,6 @@ const AppCreator = (defaultprops) => {
 					}
 
 					querynames.push(queryitem.name.toLowerCase())
-
           if (queryitem.name.toLowerCase() == "url") {
             console.log(item.name + " uses a bad query: url");
             continue;

frontend/src/views/Apps.jsx

@@ -2265,7 +2265,7 @@ const Apps = (props) => {
       <FormControl>
         <DialogTitle>
           <div style={{ color: "rgba(255,255,255,0.9)" }}>
-            Create a new integration
+            Create a new app 
           </div>
         </DialogTitle>
         <DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>

frontend/src/views/Dashboard.jsx

@@ -776,8 +776,6 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																					var baseTypeInfo = subcase.type !== undefined ? subcase.type : "communication"
 																					if (frameworkData !== undefined && frameworkData !== null) {
 																						if (frameworkData[baseTypeInfo] !== undefined && frameworkData[baseTypeInfo] !== null && subdata.app !== undefined && subdata.app !== null) {
-																							console.log("Name: ", frameworkData[baseTypeInfo], baseTypeInfo)
-																							console.log("Name2: ", subdata.app)
 																							if (frameworkData[baseTypeInfo].name !== undefined && frameworkData[baseTypeInfo].name.toLowerCase().replaceAll("_", " ") === subdata.app.toLowerCase().replaceAll("_", " ")) {
 																								highlight = true
 																							}

frontend/src/views/GettingStarted.jsx

@@ -2373,6 +2373,12 @@ const GettingStarted = (props) => {
 								</Button>
 							</a>
 						</div>
+						<div style={{position: "fixed", bottom: 110, right: 110, display: "flex", }}>
+							<Typography variant="body1" color="textSecondary" style={{marginRight: 0, maxWidth: 150, }}>
+								Need assistance? Ask our support team (it's free!).
+							</Typography>
+							<img src="/images/Arrow.png" style={{width: 150}} />
+						</div>
 					</div>
           {/*
 					<div style={flexContainerStyle}>

frontend/src/views/SettingsPage.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 
+import { useNavigate, Link } from "react-router-dom";
 import {
   Grid,
   Typography,
@@ -8,7 +9,6 @@ import {
   Divider,
   TextField,
 } from "@material-ui/core";
-import { Link } from "react-router-dom";
 import { useAlert } from "react-alert";
 import { useTheme } from "@material-ui/core/styles";
 
@@ -18,6 +18,7 @@ const Settings = (props) => {
   const { globalUrl, isLoaded, userdata, setUserData } = props;
   const theme = useTheme();
   const alert = useAlert();
+	let navigate = useNavigate();
 
   const [username, setUsername] = useState("");
   const [firstname, setFirstname] = useState("");
@@ -414,7 +415,15 @@ const Settings = (props) => {
       src={imageData}
       alt="Click to upload an image (174x174)"
       id="logo"
+			onClick={() => {
+				if (imageData !== theme.palette.defaultImage) {
+					navigate(`/creators/${userdata.public_username}`)
+				} else {
+					navigate(`/creators`)
+				}
+			}}
       style={{
+				cursor: "pointer",
         maxWidth: 100,
         maxHeight: 100,
         minWidth: 100,
@@ -810,7 +819,7 @@ const Settings = (props) => {
 						) : null}
           </div>
           <div style={{ flex: 1, marginTop: 20 }}>
-          {userdata !== undefined &&
+          {/*userdata !== undefined &&
             userdata.eth_info !== undefined &&
             userdata.eth_info.account !== undefined &&
             userdata.eth_info.account.length > 0 ? (
@@ -868,7 +877,7 @@ const Settings = (props) => {
               >
                 Authenticate Metamask Wallet
               </Button>
-            )}
+            )*/}
           </div>
         </div>
 

frontend/src/views/Workflows.jsx

@@ -1075,6 +1075,7 @@ const Workflows = (props) => {
     minWidth: isMobile ? "100%" : 1024,
     maxWidth: isMobile ? "100%" : 1024,
     margin: "auto",
+		paddingBottom: 200,
   };
 
   const emptyWorkflowStyle = {
@@ -1145,9 +1146,11 @@ const Workflows = (props) => {
       for (var key in data.triggers) {
         const trigger = data.triggers[key];
         if (trigger.app_name === "Shuffle Workflow") {
-          if (trigger.parameters.length > 2) {
+					if (trigger.parameters !== null && trigger.parameters !== undefined) {
-            trigger.parameters[2].value = "";
+						if (trigger.parameters.length > 2) {
-          }
+							trigger.parameters[2].value = "";
+						}
+					}
         }
 
         if (trigger.status === "running") {
@@ -3500,7 +3503,13 @@ const Workflows = (props) => {
         {exportVerifyModal}
         {publishModal}
         {workflowDownloadModalOpen}
-      </div>
+				{/*<div style={{zIndex: 1, position: "fixed", bottom: 110, right: 110, display: "flex", }}>
+					<Typography variant="body1" color="textSecondary" style={{zIndex: 1, marginRight: 0, maxWidth: 150, }}>
+						Need assistance? Ask our support team (it's free!).
+					</Typography>
+					<img src="/images/Arrow.png" style={{width: 150, zIndex: 1,}} />
+				</div>*/}
+			</div>
     ) : (
       <div
         style={{