Fixed some stuff. More is broken.

frontend/package.json

@@ -68,6 +68,7 @@
     "react-router-dom": "^6.14.1",
     "react-scripts": "^5.0.1",
     "reaviz": "^14.9.4",
+    "remark-gfm": "^3.0.1",
     "search-insights": "^2.2.1",
     "shellwords": "^0.1.1",
     "simplebar": "^4.2.3",

frontend/src/components/ConfigureWorkflow.jsx

@@ -506,13 +506,6 @@ const ConfigureWorkflow = (props) => {
                 borderRadius: 5,
               }}
               InputProps={{
-                style: {
-                  color: "white",
-                  minHeight: 50,
-                  marginLeft: 5,
-                  maxWidth: "95%",
-                  fontSize: "1em",
-                },
                 endAdornment: <InputAdornment position="end"></InputAdornment>,
               }}
               fullWidth

frontend/src/components/ParsedAction.jsx

@@ -1159,6 +1159,8 @@ const ParsedAction = (props) => {
           		    const iconInfo = GetIconInfo({ name: data.app_name });
           		    const useIcon = iconInfo.originalIcon;
 
+					console.log("Actionname 1: ", newActionname)
+
           		    newActionname = (
           		      newActionname.charAt(0).toUpperCase() +
           		      newActionname.substring(1)
@@ -1362,7 +1364,7 @@ const ParsedAction = (props) => {
             }
 
             var disabled = false;
-            var rows = "5";
+            var rows = "3";
             var openApiHelperText = "This is an OpenAPI specific field";
 						/*
             if (
@@ -1554,8 +1556,8 @@ const ParsedAction = (props) => {
             }
 
             if (tmpitem === "from_shuffle") {
-							tmpitem = "from"
+				tmpitem = "from"
-						}
+			}
 
             tmpitem = (
               tmpitem.charAt(0).toUpperCase() + tmpitem.substring(1)
@@ -1585,14 +1587,7 @@ const ParsedAction = (props) => {
                   fontSize: "1em",
                 }}
                 InputProps={{
-                  style: {
+				  disableUnderline: true,
-                    color: "white",
-                    minHeight: 50,
-                    marginLeft: 5,
-                    maxWidth: "95%",
-                    fontSize: "1em",
-                  },
-									disableUnderline: true,
                   endAdornment: hideExtraTypes ? null : (
                     <InputAdornment position="end">
 											<ButtonGroup orientation={multiline ? "vertical" : "horizontal"}>
@@ -1940,13 +1935,6 @@ const ParsedAction = (props) => {
                     borderRadius: theme.palette.borderRadius,
                   }}
                   InputProps={{
-                    style: {
-                      color: "white",
-                      minHeight: 50,
-                      marginLeft: "5px",
-                      maxWidth: "95%",
-                      fontSize: "1em",
-                    },
                     endAdornment: hideExtraTypes ? null : (
                       <InputAdornment position="end">
                         <Tooltip title="Autocomplete text" placement="top">
@@ -1969,7 +1957,7 @@ const ParsedAction = (props) => {
                 	helperText={returnHelperText(data.name, data.value)}
                   fullWidth
                   multiline={multiline}
-                  rows="5"
+                  rows={"3"}
                   color="primary"
                   defaultValue={data.value}
                   type={"text"}
@@ -3166,14 +3154,6 @@ const ParsedAction = (props) => {
 									<span>
 										<Typography style={{color: "rgba(255,255,255,0.7)"}}>Delay</Typography>
 										<TextField
-											style={{
-												backgroundColor: theme.palette.inputColor,
-												borderRadius: theme.palette.borderRadius,
-												color: "white",
-												width: 50,
-												height: 50,
-												fontSize: "1em",
-											}}
 											InputProps={{
 												style: theme.palette.innerTextfieldStyle,
 												disableUnderline: true,
@@ -3499,18 +3479,20 @@ const ParsedAction = (props) => {
                 color: "white",
               },
             }}
-						filterOptions={(options, { inputValue }) => {
+			filterOptions={(options, { inputValue }) => {
-							//console.log("Option contains?: ", inputValue, options)
+				//console.log("Option contains?: ", inputValue, options)
-							const lowercaseValue = inputValue.toLowerCase()
+				const lowercaseValue = inputValue.toLowerCase()
-							options = options.filter(x => x.name.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description.toLowerCase().includes(lowercaseValue))
+				options = options.filter(x => x.name.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description.toLowerCase().includes(lowercaseValue))
 
-							return options
+				return options
-						}}
+			}}
             getOptionLabel={(option) => {
               if (option === undefined || option === null || option.name === undefined || option.name === null ) {
                 return null;
               }
 
+			  console.log("OPTION: ", option)
+
               const newname = (
                 option.name.charAt(0).toUpperCase() + option.name.substring(1)
               ).replaceAll("_", " ");
@@ -3533,45 +3515,50 @@ const ParsedAction = (props) => {
 								});
               }
             }}
-            renderOption={(data) => {
+            renderOption={(props, data, state) => {
               var newActionname = data.name;
               if (data.label !== undefined && data.label !== null && data.label.length > 0) {
                 newActionname = data.label;
               }
 
               var newActiondescription = data.description;
-							//console.log("DESC: ", newActiondescription)
+			  //console.log("DESC: ", newActiondescription)
               if (data.description === undefined || data.description === null) {
-								newActiondescription = "Description: No description defined for this action"
+				newActiondescription = "Description: No description defined for this action"
               } else {
-								newActiondescription = "Description: "+newActiondescription
+				newActiondescription = "Description: "+newActiondescription
-							}
+			  }
 
               const iconInfo = GetIconInfo({ name: data.name });
               const useIcon = iconInfo.originalIcon;
 
-              newActionname = (
+			  if (newActionname === undefined || newActionname === null) {
-                newActionname.charAt(0).toUpperCase() +
+				  newActionname = "No name"
-                newActionname.substring(1)
+				  data.name = "No name"
-              ).replaceAll("_", " ");
+				  data.label = "No name"
+			  }
 
-							var method = ""
+			  console.log("Name: ", newActionname)
-							var extraDescription = ""
+
-							if (data.name.includes("get_")) {
+              newActionname = (newActionname.charAt(0).toUpperCase() + newActionname.substring(1)).replaceAll("_", " ");
-								method = "GET"
+
-							} else if (data.name.includes("post_")) {
+				var method = ""
-								method = "POST"
+				var extraDescription = ""
-							} else if (data.name.includes("put_")) {
+				if (data.name.includes("get_")) {
-								method = "PUT"
+					method = "GET"
-							} else if (data.name.includes("patch_")) {
+				} else if (data.name.includes("post_")) {
-								method = "PATCH"
+					method = "POST"
-							} else if (data.name.includes("delete_")) {
+				} else if (data.name.includes("put_")) {
-								method = "DELETE"
+					method = "PUT"
-							} else if (data.name.includes("options_")) {
+				} else if (data.name.includes("patch_")) {
-								method = "OPTIONS"
+					method = "PATCH"
-							} else if (data.name.includes("connect_")) {
+				} else if (data.name.includes("delete_")) {
-								method = "CONNECT"
+					method = "DELETE"
-							}
+				} else if (data.name.includes("options_")) {
+					method = "OPTIONS"
+				} else if (data.name.includes("connect_")) {
+					method = "CONNECT"
+				}
 
 							// FIXME: Should it require a base URL?
 							if (method.length > 0 && data.description !== undefined && data.description !== null && data.description.includes("http")) {

frontend/src/theme.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { createTheme, adaptV4Theme } from "@mui/material/styles";
 
-//const theme = createTheme(adaptV4Theme({
+//const theme = createTheme({
-const theme = createTheme({
+const theme = createTheme(adaptV4Theme({
   palette: {
     main: "#F86743",
     primary: {
@@ -34,12 +34,12 @@ const theme = createTheme({
       borderRadius: 5,
     },
     innerTextfieldStyle: {
-      color: "white",
+      //color: "white",
-      minHeight: 50,
+      //minHeight: 50,
-      marginLeft: "5px",
+      //marginLeft: "5px",
-      maxWidth: "95%",
+      //maxWidth: "95%",
-      fontSize: "1em",
+      //fontSize: "1em",
-      borderRadius: 5,
+      //borderRadius: 5,
     },
     tooltip: {
       backgroundColor: "white",
@@ -80,7 +80,7 @@ const theme = createTheme({
 			  font-family: 'roboto';
 			  font-style: normal;
 			  font-display: swap;
-			  font-weight: 400;
+			  font-weight: 300;
 			  src: local('roboto'), local('roboto'), format('truetype');
 			  unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
 			}
@@ -88,6 +88,6 @@ const theme = createTheme({
 		},
 	},
   },
-});
+}));
 
 export default theme;

frontend/src/views/AngularWorkflow.jsx

@@ -7080,12 +7080,6 @@ const AngularWorkflow = (defaultprops) => {
       <div style={appViewStyle}>
         <div style={{ flex: "1" }}>
           <TextField
-            style={{
-              backgroundColor: inputColor,
-              borderRadius: theme.palette.borderRadius,
-              marginTop: 5,
-              marginRight: 10,
-            }}
             InputProps={{
               style: {
                 color: "white",
@@ -7789,15 +7783,6 @@ const AngularWorkflow = (defaultprops) => {
           backgroundColor: inputColor,
           borderRadius: theme.palette.borderRadius,
         }}
-        InputProps={{
-          style: {
-            color: "white",
-            minHeight: 50,
-            marginLeft: "5px",
-            maxWidth: "95%",
-            fontSize: "1em",
-          },
-        }}
         fullWidth
         multiline={multiline}
         color="primary"
@@ -9146,15 +9131,6 @@ const AngularWorkflow = (defaultprops) => {
             backgroundColor: inputColor,
             borderRadius: theme.palette.borderRadius,
           }}
-          InputProps={{
-            style: {
-              color: "white",
-              marginLeft: "5px",
-              maxWidth: "95%",
-              height: 50,
-              fontSize: "1em",
-            },
-          }}
           fullWidth
           color="primary"
           placeholder={selectedTrigger.label}
@@ -9169,13 +9145,6 @@ const AngularWorkflow = (defaultprops) => {
               borderRadius: theme.palette.borderRadius,
             }}
             InputProps={{
-              style: {
-                color: "white",
-                marginLeft: "5px",
-                maxWidth: "95%",
-                height: 50,
-                fontSize: "1em",
-              },
             }}
             required
             disabled
@@ -9906,15 +9875,6 @@ const AngularWorkflow = (defaultprops) => {
                   backgroundColor: inputColor,
                   borderRadius: theme.palette.borderRadius,
                 }}
-                InputProps={{
-                  style: {
-                    color: "white",
-                    marginLeft: "5px",
-                    maxWidth: "95%",
-                    height: 50,
-                    fontSize: "1em",
-                  },
-                }}
                 fullWidth
                 color="primary"
                 placeholder={selectedTrigger.label}
@@ -9931,14 +9891,6 @@ const AngularWorkflow = (defaultprops) => {
                   <span>
                     <Typography>Delay</Typography>
                     <TextField
-                      style={{
-                        backgroundColor: theme.palette.inputColor,
-                        borderRadius: theme.palette.borderRadius,
-                        color: "white",
-                        width: 50,
-                        height: 50,
-                        fontSize: "1em",
-                      }}
                       InputProps={{
                         style: theme.palette.innerTextfieldStyle,
                       }}
@@ -10259,12 +10211,6 @@ const AngularWorkflow = (defaultprops) => {
                   borderRadius: theme.palette.borderRadius,
                 }}
                 InputProps={{
-                  style: {
-                    color: "white",
-                    marginLeft: "5px",
-                    maxWidth: "95%",
-                    fontSize: "1em",
-                  },
                   endAdornment: (
                     <InputAdornment position="end">
                       <Tooltip title="Autocomplete text" placement="top">
@@ -10411,12 +10357,6 @@ const AngularWorkflow = (defaultprops) => {
               borderRadius: theme.palette.borderRadius,
             }}
             InputProps={{
-              style: {
-                color: "white",
-                marginLeft: "5px",
-                maxWidth: "95%",
-                fontSize: "1em",
-              },
             }}
             multiline
             rows="4"
@@ -10438,13 +10378,6 @@ const AngularWorkflow = (defaultprops) => {
                   borderRadius: theme.palette.borderRadius,
                 }}
                 InputProps={{
-                  style: {
-                    color: "white",
-                    marginLeft: "5px",
-                    maxWidth: "95%",
-                    height: 50,
-                    fontSize: "1em",
-                  },
                 }}
                 fullWidth
                 color="primary"
@@ -10492,13 +10425,6 @@ const AngularWorkflow = (defaultprops) => {
                   borderRadius: theme.palette.borderRadius,
                 }}
                 InputProps={{
-                  style: {
-                    color: "white",
-                    marginLeft: "5px",
-                    maxWidth: "95%",
-                    height: 50,
-                    fontSize: "1em",
-                  },
                 }}
                 fullWidth
                 color="primary"
@@ -10518,13 +10444,6 @@ const AngularWorkflow = (defaultprops) => {
                   borderRadius: theme.palette.borderRadius,
                 }}
                 InputProps={{
-                  style: {
-                    color: "white",
-                    marginLeft: "5px",
-                    maxWidth: "95%",
-                    height: 50,
-                    fontSize: "1em",
-                  },
                 }}
                 fullWidth
                 color="primary"
@@ -10544,13 +10463,6 @@ const AngularWorkflow = (defaultprops) => {
               borderRadius: theme.palette.borderRadius,
             }}
             InputProps={{
-              style: {
-                color: "white",
-                marginLeft: "5px",
-                maxWidth: "95%",
-                height: 50,
-                fontSize: "1em",
-              },
             }}
             fullWidth
             color="primary"
@@ -10655,13 +10567,6 @@ const AngularWorkflow = (defaultprops) => {
               borderRadius: theme.palette.borderRadius,
             }}
             InputProps={{
-              style: {
-                color: "white",
-                marginLeft: "5px",
-                maxWidth: "95%",
-                height: 50,
-                fontSize: "1em",
-              },
             }}
             fullWidth
             color="primary"
@@ -11008,12 +10913,6 @@ const AngularWorkflow = (defaultprops) => {
                   id="webhook_uri_header"
                   onClick={() => { }}
                   InputProps={{
-                    style: {
-                      color: "white",
-                      marginLeft: "5px",
-                      maxWidth: "95%",
-                      fontSize: "1em",
-                    },
                   }}
                   fullWidth
                   multiline
@@ -11065,12 +10964,6 @@ const AngularWorkflow = (defaultprops) => {
                   id="webhook_uri_header"
                   onClick={() => { }}
                   InputProps={{
-                    style: {
-                      color: "white",
-                      marginLeft: "5px",
-                      maxWidth: "95%",
-                      fontSize: "1em",
-                    },
                   }}
                   fullWidth
                   multiline
@@ -11474,13 +11367,6 @@ const AngularWorkflow = (defaultprops) => {
               borderRadius: theme.palette.borderRadius,
             }}
             InputProps={{
-              style: {
-                color: "white",
-                marginLeft: "5px",
-                maxWidth: "95%",
-                height: 50,
-                fontSize: "1em",
-              },
             }}
             fullWidth
             color="primary"
@@ -11548,13 +11434,6 @@ const AngularWorkflow = (defaultprops) => {
                 borderRadius: theme.palette.borderRadius,
               }}
               InputProps={{
-                style: {
-                  color: "white",
-                  marginLeft: "5px",
-                  maxWidth: "95%",
-                  marginTop: "3px",
-                  fontSize: "1em",
-                },
               }}
               fullWidth
               rows="4"
@@ -11762,13 +11641,6 @@ const AngularWorkflow = (defaultprops) => {
 									marginTop: 10,
                 }}
                 InputProps={{
-                  style: {
-                    color: "white",
-                    marginLeft: "5px",
-                    maxWidth: "95%",
-                    height: 50,
-                    fontSize: "1em",
-                  },
                 }}
                 fullWidth
                 color="primary"
@@ -11851,13 +11723,6 @@ const AngularWorkflow = (defaultprops) => {
               borderRadius: theme.palette.borderRadius,
             }}
             InputProps={{
-              style: {
-                color: "white",
-                marginLeft: "5px",
-                maxWidth: "95%",
-                height: 50,
-                fontSize: "1em",
-              },
             }}
             fullWidth
             color="primary"
@@ -11955,13 +11820,6 @@ const AngularWorkflow = (defaultprops) => {
                   borderRadius: theme.palette.borderRadius,
                 }}
                 InputProps={{
-                  style: {
-                    color: "white",
-                    height: 50,
-                    marginLeft: "5px",
-                    maxWidth: "95%",
-                    fontSize: "1em",
-                  },
                 }}
                 fullWidth
                 disabled={
@@ -12010,13 +11868,6 @@ const AngularWorkflow = (defaultprops) => {
                   borderRadius: theme.palette.borderRadius,
                 }}
                 InputProps={{
-                  style: {
-                    color: "white",
-                    marginLeft: "5px",
-                    maxWidth: "95%",
-                    marginTop: "3px",
-                    fontSize: "1em",
-                  },
                 }}
                 disabled={
                   workflow.triggers[selectedTriggerIndex].status === "running"

frontend/src/views/Docs.jsx

@@ -5,6 +5,7 @@ import { BrowserView, MobileView } from "react-device-detect";
 import { useParams, useNavigate, Link } from "react-router-dom";
 import { isMobile } from "react-device-detect";
 import theme from '../theme.jsx';
+import remarkGfm from 'remark-gfm'
 
 import {
 	Grid,
@@ -364,6 +365,7 @@ const Docs = (defaultprops) => {
   };
 
   function OuterLink(props) {
+	  console.log("Link: ", props.href)
     if (props.href.includes("http") || props.href.includes("mailto")) {
       return (
         <a
@@ -385,7 +387,7 @@ const Docs = (defaultprops) => {
   }
 
   function Img(props) {
-    return <img style={{ borderRadius: theme.palette.borderRadius, maxWidth: "100%", marginTop: 15, marginBottom: 15, }} alt={props.alt} src={props.src} />;
+    return <img style={{ borderRadius: theme.palette.borderRadius, width: 750, maxWidth: "100%", marginTop: 15, marginBottom: 15, }} alt={props.alt} src={props.src} />;
   }
 
   function CodeHandler(props) {
@@ -789,17 +791,21 @@ const Docs = (defaultprops) => {
 					:
 						<div id="markdown_wrapper_outer" style={markdownStyle}>
 							<ReactMarkdown
-								id="markdown_wrapper"
+								components={{
-								escapeHtml={false}
-								source={data}
-								style={{maxWidth: "100%", minWidth: "100%", }}
-								renderers={{
 									link: OuterLink,
 									image: Img,
 									code: CodeHandler,
 									heading: Heading,
 								}}
-							/>
+								id="markdown_wrapper"
+								escapeHtml={false}
+								style={{
+									maxWidth: "100%", minWidth: "100%", 
+								}}
+								remarkPlugins={[remarkGfm]}
+							>
+								{data}
+							</ReactMarkdown>
 						</div>
 					}
 				</div>