Minor fixes to bad app viewing

frontend/src/views/AngularWorkflow.jsx

@@ -134,6 +134,7 @@ import ParsedAction from "../components/ParsedAction.jsx";
 import PaperComponent from "../components/PaperComponent.jsx"
 import ExtraApps from "../components/ExtraApps.jsx"
 import EditWorkflow from "../components/EditWorkflow.jsx"
+import AppStats from "../components/AppStats.jsx";
 
 const surfaceColor = "#27292D";
 const inputColor = "#383B40";
@@ -250,11 +251,10 @@ const svgSize = 24;
 
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const AngularWorkflow = (defaultprops) => {
-  const { globalUrl, isLoggedIn, isLoaded, userdata } = defaultprops;
+  const { globalUrl, isLoggedIn, isLoaded, userdata, data_id } = defaultprops;
   const referenceUrl = globalUrl + "/api/v1/hooks/";
   const alert = useAlert()
   let navigate = useNavigate();
-
   const params = useParams();
   var props = JSON.parse(JSON.stringify(defaultprops))
   props.match = {}
@@ -383,6 +383,7 @@ const AngularWorkflow = (defaultprops) => {
   const [userediting, setUserediting] = React.useState(false)
 
   const [lastSaved, setLastSaved] = React.useState(true);
+  const [selectionOpen, setSelectionOpen] = React.useState(false);
 
   // eslint-disable-next-line no-unused-vars
   const [_, setUpdate] = useState(""); // Used for rendring, don't remove
@@ -1748,9 +1749,11 @@ const AngularWorkflow = (defaultprops) => {
         if (responseJson.files !== undefined && responseJson.files !== null) {
           setFiles(responseJson);
         } else {
-          setFiles({"namespaces": [
+          setFiles({
+            "namespaces": [
               "default"
-					]});
+            ]
+          });
         }
 
         if (
@@ -2917,7 +2920,7 @@ const AngularWorkflow = (defaultprops) => {
           getAvailableWorkflows(trigger_index);
           getSettings();
         } else if (data.app_name === "Webhook") {
-    	    if (workflow.triggers[trigger_index].parameters !== undefined) {
+          if (workflow.triggers[trigger_index].parameters !== undefined && workflow.triggers[trigger_index].parameters !== null && workflow.triggers[trigger_index].parameters.length > 0) {
             workflow.triggers[trigger_index].parameters[0] = {
               name: "url",
               value: referenceUrl + "webhook_" + workflow.triggers[trigger_index].id,
@@ -6140,6 +6143,11 @@ const AngularWorkflow = (defaultprops) => {
       const app = props.app;
       const [hover, setHover] = React.useState(false);
 
+			if (app.id === "" || app.name === "") {
+				console.log("Skipping app: ", app)
+				return null
+			}
+
       const maxlen = 24;
       var newAppname = app.name;
       newAppname = newAppname.charAt(0).toUpperCase() + newAppname.substring(1);
@@ -6149,6 +6157,10 @@ const AngularWorkflow = (defaultprops) => {
 
       newAppname = newAppname.replaceAll("_", " ");
 
+			if (app.large_image === undefined || app.large_image === null || app.large_image === "") {
+				app.large_image = theme.palette.defaultImage
+			}
+
       const image = app.large_image;
       const newAppStyle = JSON.parse(JSON.stringify(paperAppStyle));
       const pixelSize = !hover ? "2px" : "4px";
@@ -6590,7 +6602,8 @@ const AngularWorkflow = (defaultprops) => {
 											*/}
                     </ListItem>
                   </div>
-							)})
+                )
+              })
             }
           </List>
         </div>
@@ -8228,7 +8241,7 @@ const AngularWorkflow = (defaultprops) => {
     };
 
     const getTriggerAuth = () => {
-      fetch(globalUrl + "/api/v1/triggers/" + selectedTrigger.id, {
+      fetch(`${globalUrl}/api/v1/triggers/${selectedTrigger.id}`, {
         method: "GET",
         headers: { "content-type": "application/json" },
         credentials: "include",
@@ -8309,7 +8322,7 @@ const AngularWorkflow = (defaultprops) => {
             console.log("BRANCH: ", branch);
             const startnode = branch.destination_id;
             const scopes = "https://www.googleapis.com/auth/gmail.readonly";
-            const url = `https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&scope=${scopes}&state=workflow_id%3D${props.match.params.key}%26trigger_id%3D${selectedTrigger.id}%26username%3D${username}%26type%3Dgmail%26start%3d${startnode}`;
+            const url = `https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&prompt=consent&client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&scope=${scopes}&state=workflow_id%3D${props.match.params.key}%26trigger_id%3D${selectedTrigger.id}%26username%3D${username}%26type%3Dgmail%26start%3d${startnode}`;
             console.log("URL: ", url);
 
             var newwin = window.open(url, "", "width=800,height=600");
@@ -8317,7 +8330,7 @@ const AngularWorkflow = (defaultprops) => {
             // Check whether we got a callback somewhere
             var id = setInterval(function () {
               fetch(
-                globalUrl + "/api/v1/triggers/" + selectedTrigger.id,
+                `${globalUrl}/api/v1/triggers/${selectedTrigger.id}`,
                 {
                   method: "GET",
                   headers: { "content-type": "application/json" },
@@ -8418,7 +8431,7 @@ const AngularWorkflow = (defaultprops) => {
             // Check whether we got a callback somewhere
             var id = setInterval(function () {
               fetch(
-                globalUrl + "/api/v1/triggers/ " + selectedTrigger.id,
+                `${globalUrl}/api/v1/triggers/${selectedTrigger.id}`,
                 {
                   method: "GET",
                   headers: { "content-type": "application/json" },
@@ -12209,7 +12222,8 @@ const AngularWorkflow = (defaultprops) => {
       }
 
       {appGroup.length > 0 ?
-				<div style={{display: "flex", marginTop: 10, }}>
+        <div style={{ marginTop: 10, }}>
+          <div style={{ display: "flex" }}>
             <Typography variant="body1">
               Apps
             </Typography>
@@ -12223,6 +12237,7 @@ const AngularWorkflow = (defaultprops) => {
               })}
             </AvatarGroup>
           </div>
+        </div>
         : null}
 
       {triggerGroup.length > 0 ?
@@ -12325,6 +12340,21 @@ const AngularWorkflow = (defaultprops) => {
         </div>
         : null}
 
+			{/*
+			<div style={{ display: "flex" }}>
+				<Button
+					color="primary"
+					variant="contained"
+					fullWidth
+					style={{ marginTop: 15, display: "flex" }}
+					onClick={() => {
+						setSelectionOpen(true)
+					}}
+				>
+					Statistics
+				</Button>
+			</div>
+			*/}
       {userdata.avatar !== undefined && (userdata.avatar === creatorProfile.github_avatar || allowList.includes(userdata.public_username)) ?
         <div style={{ marginTop: 50, }}>
           <Typography variant="body2" color="textSecondary">
@@ -15093,7 +15123,6 @@ const AngularWorkflow = (defaultprops) => {
       </div>
     </Dialog>
   ) : null;
-
   const loadedCheck =
     isLoaded && workflowDone ? (
       <div>
@@ -15118,6 +15147,34 @@ const AngularWorkflow = (defaultprops) => {
           />
           : null}
         
+        {/*selectionOpen === true ?
+          <div style={{ borderRadius: theme.palette.borderRadius, backgroundColor: surfaceColor, zIndex: 12501,position:"fixed", left: 190, bottom: 20,top:70, width: 950, overflowY: "scroll"}}>
+            <div>
+            <IconButton
+              style={{
+                zIndex: 12502,
+                position: "absolute",
+                top: 6,
+                right: 6,
+                color: "white",
+              }}
+              onClick={() => {
+                setSelectionOpen(false)
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+            </div>
+            <div style={{marginTop: 60, marginLeft: 55}}>
+            <AppStats 
+              globalUrl={globalUrl}
+              workflowId={workflow.id}
+              {...props}
+            />
+            </div>
+          </div>
+        : null*/}
+
         {showVideo !== undefined && showVideo.length > 0 ?
           <div style={{ borderRadius: theme.palette.borderRadius, zIndex: 12501, position: "fixed", left: 40, bottom: 150, width: 300, }}>
             <IconButton