Fixed debouncecallback ref

backend/go-app/go.sum

@@ -365,6 +365,8 @@ github.com/sergi/go-diff v1.3.2-0.20230802210424-5b0b94c5c0d3 h1:n661drycOFuPLCN
 github.com/sergi/go-diff v1.3.2-0.20230802210424-5b0b94c5c0d3/go.mod h1:A0bzQcvG0E7Rwjx0REVgAGH58e96+X0MeOfepqsbeW4=
 github.com/shuffle/shuffle-shared v0.9.30 h1:3CYvNyD7sTxdxoZjTVrtaDqFvSWQRKAFGaga6rPGf8A=
 github.com/shuffle/shuffle-shared v0.9.30/go.mod h1:PhDEizuz4SmJaSmy0+yrFWwD1mXVUsy8/knKlrqF1qw=
+github.com/shuffle/shuffle-shared v0.9.31 h1:BMoDO4Sgz4+I12aHhc3cWHiCuAQ827XIxajPqCJ9cXA=
+github.com/shuffle/shuffle-shared v0.9.31/go.mod h1:vfI2QDGphZGrcwuUPQ1yI/Hgc8aseFro5+2k36irfkQ=
 github.com/shuffle/singul v0.0.16 h1:dW+0Mln9R1aUJ0fjikpWcxbjoQWqJHxe4kSxh2tQN5E=
 github.com/shuffle/singul v0.0.16/go.mod h1:LYkp320A6gsoPlYbXUM+WvEPUVAuutlSsqnVKyRy4gs=
 github.com/sirupsen/logrus v1.7.0/go.mod h1:yWOB1SBYBC5VeMP7gHvWumXLIWorT60ONWic61uBYv0=

frontend/src/components/AuthenticationModal.jsx

@@ -0,0 +1,891 @@
+import React, { useState, useEffect, useContext, memo } from "react";
+import { CodeHandler, Img, OuterLink, } from '../views/Docs.jsx'
+import { getTheme } from "../theme.jsx";
+import { isMobile } from "react-device-detect"
+import Markdown from "react-markdown";
+import { Context } from '../context/ContextApi.jsx';
+import PaperComponent from "../components/PaperComponent.jsx";
+import { toast } from "react-toastify";
+import { v4 as uuidv4} from "uuid";
+import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
+
+import {
+    Edit as EditIcon,
+	DragIndicator as DragIndicatorIcon,
+	Close as CloseIcon,
+	LockOpen as LockOpenIcon,
+} from "@mui/icons-material";
+
+import {
+	Button,
+	Typography,
+	Dialog,
+	DialogContent,
+	DialogTitle,
+	DialogActions,
+	MenuItem,
+	Select,
+	TextField,
+	IconButton,
+	Tooltip,
+	Divider,
+} from "@mui/material";
+
+const AuthenticationModal = (props) => { 
+	const {
+		globalUrl,
+		userdata, 
+
+		selectedAppData, 
+		getAppAuthentication, 
+		appAuthentication, 
+		setSelectedAction, 
+
+		selectedMeta, 
+		setSelectedMeta,
+
+		setAppAuthentication,
+	} = props;
+
+  	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "migration.shuffler.io";
+    const [selectedAuthentication, setSelectedAuthentication] = React.useState({});
+	const [authenticationModalOpen, setAuthenticationModalOpen] = React.useState(false);
+	const [authenticationType, setAuthenticationType] = React.useState({})
+
+    const [appid, setAppId] = useState("")
+
+    //const [appAuthentication, setAppAuthentication] = useState([]);
+
+  	const { themeMode, supportEmail, brandColor } = useContext(Context)
+	const theme = getTheme(themeMode, brandColor)
+
+	useEffect(() => { 
+		if (selectedAppData === undefined || selectedAppData === null || Object.getOwnPropertyNames(selectedAppData).length === 0) {
+			return
+		}
+
+		if (selectedAppData.authentication === undefined || selectedAppData.authentication === null) {
+		  setAuthenticationType({
+			  type: "",
+		  })
+
+		  selectedAppData.authentication = {
+			type: "",
+			required: false,
+		  }
+		} else {
+		  setAuthenticationType(
+			selectedAppData.authentication.type === "oauth2-app" || (selectedAppData.authentication.type === "oauth2" && selectedAppData.authentication.redirect_uri !== undefined && selectedAppData.authentication.redirect_uri !== null) ? {
+			type: selectedAppData.authentication.type,
+			redirect_uri: selectedAppData.authentication.redirect_uri,
+			refresh_uri: selectedAppData.authentication.refresh_uri,
+			token_uri: selectedAppData.authentication.token_uri,
+			scope: selectedAppData.authentication.scope,
+			client_id: selectedAppData.authentication.client_id,
+			client_secret: selectedAppData.authentication.client_secret,
+			grant_type: selectedAppData.authentication.grant_type,
+		  } : {
+			type: "",
+		  }
+		  )
+		}
+	}, [selectedAppData])
+
+	if (selectedAppData === undefined || selectedAppData === null || Object.getOwnPropertyNames(selectedAppData).length === 0) {
+		console.log("No app data for authentication modal");
+		return null
+	}
+
+	if (authenticationModalOpen === false) {
+		return (
+			<Button
+				fullWidth
+				variant="contained"
+				style={{
+					marginBottom: 20, 
+					marginTop: 20, 
+					flex: 1,
+					textTransform: "none",
+					textAlign: "left",
+					justifyContent: "flex-start",
+					backgroundColor: "#ffffff",
+					color: "#2f2f2f",
+					borderRadius: theme.palette?.borderRadius,
+					minWidth:  275, 
+					maxWidth: 275,
+					maxHeight: 50,
+					overflow: "hidden",
+					border: `1px solid ${theme.palette.inputColor}`,
+				}}
+				color="primary"
+				fullWidth
+				onClick={() => {
+					setAppId(selectedAppData?.id)
+					setAuthenticationModalOpen(true)
+				}}
+				color="primary"
+			>
+				<span style={{display: "flex"}}>
+					<img
+						alt={selectedAppData?.name}
+						style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette?.borderRadius, }}
+						src={selectedAppData?.large_image}
+					/>
+					<Typography style={{ margin: 0, marginLeft: 10, marginTop: 8, color: "#2f2f2f",}} variant="body1">
+						Authenticate {selectedAppData?.name?.replaceAll("_", " ", -1)}
+					</Typography>
+				</span>
+			</Button>
+		)
+	}
+
+    function Heading(props) {
+      const element = React.createElement(
+        `h${props.level}`,
+        { style: { marginTop: 40 } },
+        props.children
+      );
+      return (
+        <Typography>
+          {props.level !== 1 ? (
+            <Divider
+              style={{
+                width: "90%",
+                marginTop: 40,
+                backgroundColor: theme.palette.inputColor,
+              }}
+            />
+          ) : null}
+          {element}
+        </Typography>
+      );
+    }
+
+    const UpdateAppAuthentication = (data) => {
+      if (data === undefined || data === null) {
+        return;
+      }
+
+      const filteredData = data.filter((appAuth) => appAuth?.app?.id === appid);
+      if (filteredData.length === 0) {
+        setAppAuthentication([]);
+        setSelectedAuthentication({});
+      } else {
+        setAppAuthentication(filteredData);
+        setSelectedAuthentication(filteredData[0]); 
+      }
+    };
+
+    const HandleAppAuthentication = () => {
+
+      const url = `${globalUrl}/api/v1/apps/authentication`;
+
+      fetch(url, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+      }).then((response) => {
+        if (response.status !== 200) {
+          return;
+        }
+        return response.json();
+      }).then((responseJson) => {
+        if (responseJson.success === true) {
+          UpdateAppAuthentication(responseJson.data);
+        } else {
+          toast.error("Failed to get app authentication data");
+        }
+      }).catch((error) => {
+        console.error("error for app is :", error);
+      });
+    }
+
+	const AuthenticationData = (props) => {
+		const selectedApp = props.app;
+
+		const [authenticationOption, setAuthenticationOptions] = React.useState({
+		  app: JSON.parse(JSON.stringify(selectedApp)),
+		  fields: {},
+		  label: "",
+		  usage: [
+			{
+			  // workflow_id: workflow.id,
+			},
+		  ],
+		  id: uuidv4(),
+		  active: true,
+		});
+
+		if (
+		  selectedApp.authentication === undefined ||
+		  selectedApp.authentication.parameters === null ||
+		  selectedApp.authentication.parameters === undefined ||
+		  selectedApp.authentication.parameters.length === 0
+		) {
+		  return (
+			<DialogContent style={{ textAlign: "center", marginTop: 50 }}>
+			  <Typography variant="h4" id="draggable-dialog-title" style={{ cursor: "move", }}>
+				{selectedApp.name} does not require authentication
+			  </Typography>
+			</DialogContent>
+		  );
+		}
+
+		authenticationOption.app.actions = [];
+
+		for (let paramkey in selectedApp.authentication.parameters) {
+		  if (
+			authenticationOption.fields[
+			selectedApp.authentication.parameters[paramkey].name
+			] === undefined
+		  ) {
+			authenticationOption.fields[
+			  selectedApp.authentication.parameters[paramkey].name
+			] = "";
+		  }
+		}
+    
+		const setNewAppAuth = (appAuthData, refresh) => {
+		  setSelectedAuthentication(appAuthData);
+		  var headers = {
+			"Content-Type": "application/json",
+			"Accept": "application/json",
+		  }
+		
+			headers["Org-Id"] = userdata?.active_org?.id
+		
+			fetch(globalUrl + "/api/v1/apps/authentication", {
+			  method: "PUT",
+			  headers: headers,
+			  body: JSON.stringify(appAuthData),
+			  credentials: "include",
+			})
+			  .then((response) => {
+				if (response.status !== 200) {
+					console.log("Status not 200 for setting app auth :O!");
+		
+			  if (response.status === 400) {
+				toast.error("Failed setting new auth. Please try again", {
+				  "autoClose": true,
+				})
+			  }
+			}
+		
+				return response.json();
+			  })
+			  .then((responseJson) => {
+				if (!responseJson.success) {
+				  toast.error("Error: " + responseJson.reason, {
+			  "autoClose": false,
+			  })
+		
+				} else {
+				  HandleAppAuthentication()
+				  setAuthenticationModalOpen(false)
+				  getAppAuthentication()
+				}
+			  })
+			  .catch((error) => {
+				console.log("New auth error: ", error.toString());
+			  });
+		  };
+
+		const handleSubmitCheck = () => {
+		  if (authenticationOption.label.length === 0) {
+			authenticationOption.label = `Auth for ${selectedApp.name}`;
+		  }
+		  for (let paramkey in selectedApp.authentication.parameters) {
+			if (
+			  authenticationOption.fields[
+				selectedApp.authentication.parameters[paramkey].name
+			  ].length === 0
+			) {
+			  if (
+				selectedApp.authentication.parameters[paramkey].value !== undefined &&
+				selectedApp.authentication.parameters[paramkey].value !== null &&
+				selectedApp.authentication.parameters[paramkey].value.length > 0
+			  ) {
+				authenticationOption.fields[
+				  selectedApp.authentication.parameters[paramkey].name
+				] = selectedApp.authentication.parameters[paramkey].value;
+			  } else {
+				if (
+				  selectedApp.authentication.parameters[paramkey].schema.type === "bool"
+				) {
+				  authenticationOption.fields[
+					selectedApp.authentication.parameters[paramkey].name
+				  ] = "false";
+				} else {
+				  toast(
+					"Field " +
+					selectedApp.authentication.parameters[paramkey].name +
+					" can't be empty"
+				  );
+				  return;
+				}
+			  }
+			}
+		  }
+
+		  var newAuthOption = JSON.parse(JSON.stringify(authenticationOption));
+		  var newFields = [];
+		  for (let authkey in newAuthOption.fields) {
+			const value = newAuthOption.fields[authkey];
+			newFields.push({
+			  "key": authkey,
+			  "value": value,
+			});
+		  }
+
+		  newAuthOption.fields = newFields
+		  setNewAppAuth(newAuthOption)
+    }
+
+	if (authenticationOption.label === null || authenticationOption.label === undefined) {
+    	authenticationOption.label = selectedApp.name + " authentication";
+    }
+
+    return (
+      <div>
+        <DialogTitle id="draggable-dialog-title" style={{ cursor: "move", }}>
+          <div style={{ color: theme.palette.textColor }}>
+            Authentication for {selectedApp.name.replaceAll("_", " ", -1)}
+          </div>
+        </DialogTitle>
+        <DialogContent>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://shuffler.io/docs/apps#authentication"
+            style={{ textDecoration: "none", color: "#f85a3e" }}
+          >
+            What is app authentication?
+          </a>
+          <div />
+          These are required fields for authenticating with {selectedApp.name}
+          <div style={{ marginTop: 15 }} />
+          <b>Label for you to remember</b>
+          <TextField
+            style={{
+              backgroundColor: theme.palette.inputColor,
+              borderRadius: theme.palette?.borderRadius,
+            }}
+            InputProps={{
+              style: {
+              },
+            }}
+            fullWidth
+            color="primary"
+            placeholder={"Auth july 2020"}
+            defaultValue={`Auth for ${selectedApp.name}`}
+            onChange={(event) => {
+              authenticationOption.label = event.target.value;
+            }}
+          />
+          <Divider
+            style={{
+              marginTop: 15,
+              marginBottom: 15,
+              backgroundColor: "rgb(91, 96, 100)",
+            }}
+          />
+          <div />
+          {selectedApp.authentication.parameters.map((data, index) => {
+      if (data.value === "" || data.value === null || data.value === undefined || data.name === "url") {
+      }
+
+
+            return (
+              <div key={index} style={{ marginTop: 10 }}>
+                <LockOpenIcon style={{ marginRight: 10 }} />
+                <b>{data.name}</b>
+
+                {data.schema !== undefined &&
+                  data.schema !== null &&
+                  data.schema.type === "bool" ? (
+                  <Select
+                    MenuProps={{
+                      disableScrollLock: true,
+                    }}
+                    SelectDisplayProps={{
+                      style: {
+                      },
+                    }}
+                    defaultValue={"false"}
+                    fullWidth
+                    onChange={(e) => {
+                      authenticationOption.fields[data.name] = e.target.value;
+                    }}
+                    style={{
+                      backgroundColor: theme.palette.surfaceColor,
+                      color: theme.palette.textColor,
+                      height: 50,
+                    }}
+                  >
+                    <MenuItem
+                      key={"false"}
+                      style={{
+                        backgroundColor: theme.palette.inputColor,
+                        color: theme.palette.textColor,
+                      }}
+                      value={"false"}
+                    >
+                      false
+                    </MenuItem>
+                    <MenuItem
+                      key={"true"}
+                      style={{
+                        backgroundColor: theme.palette.inputColor,
+                        color: theme.palette.textColor,
+                      }}
+                      value={"true"}
+                    >
+                      true
+                    </MenuItem>
+                  </Select>
+                ) : (
+                  <TextField
+                    style={{
+                      backgroundColor: theme.palette.inputColor,
+                      borderRadius: theme.palette?.borderRadius,
+                    }}
+                    InputProps={{
+                      style: {
+                      },
+                    }}
+                    fullWidth
+                    type={
+                      data.example !== undefined && data.example.includes("***")
+                        ? "password"
+                        : "text"
+                    }
+                    color="primary"
+                    defaultValue={
+                      data.value !== undefined && data.value !== null
+                        ? data.value
+                        : ""
+                    }
+                    placeholder={data.example}
+                    onChange={(event) => {
+                      authenticationOption.fields[data.name] =
+                        event.target.value;
+                    }}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </DialogContent>
+        <DialogActions>
+          <Button
+            style={{}}
+            onClick={() => {
+              setAuthenticationModalOpen(false);
+            }}
+            color="secondary"
+          >
+            Cancel
+          </Button>
+          <Button
+            style={{}}
+      variant="outlined"
+            onClick={() => {
+              setAuthenticationOptions(authenticationOption);
+              handleSubmitCheck()
+            }}
+            color="primary"
+          >
+            Submit
+          </Button>
+        </DialogActions>
+      </div>
+    );
+  };
+
+	const authenticationModal = authenticationModalOpen ? (
+		<Dialog
+		  PaperComponent={PaperComponent}
+		  aria-labelledby="draggable-dialog-title"
+		  hideBackdrop={true}
+		  disableEnforceFocus={true}
+		  disableBackdropClick={true}
+		  style={{ pointerEvents: "none" }}
+		  open={authenticationModalOpen}
+		  onClose={() => {setSelectedMeta(undefined)}}
+		  PaperProps={{
+			style: {
+			  pointerEvents: "auto",
+			  color: theme.palette.textColor,
+			  minWidth: 1100,
+			  minHeight: 800,
+			  maxHeight: 800,
+			  padding: 15,
+			  overflow: "hidden",
+			  zIndex: 10012,
+			  border: theme.palette.defaultBorder,
+			},
+		  }}
+		>
+		  <div
+			style={{
+			  zIndex: 5000,
+			  position: "absolute",
+			  top: 20,
+			  right: 75,
+			  height: 50,
+			  width: 50,
+			}}
+		  >
+			{ selectedAppData.reference_info === undefined ||
+			  selectedAppData.reference_info === null ||
+			  selectedAppData.reference_info.github_url === undefined ||
+			  selectedAppData.reference_info.github_url === null ||
+			  selectedAppData.reference_info.github_url.length === 0 ? (
+
+			  <a
+				rel="noopener noreferrer"
+				target="_blank"
+				href={"https://github.com/shuffle/python-apps"}
+				style={{ textDecoration: "none", color: "#f86a3e" }}
+			  >
+				<img
+				  alt={`Documentation image for ${selectedAppData.name}`}
+				  src={selectedAppData.large_image}
+				  style={{
+					width: 30,
+					height: 30,
+					border: "2px solid rgba(255,255,255,0.6)",
+					borderRadius: theme.palette?.borderRadius,
+					maxHeight: 30,
+					maxWidth: 30,
+					overflow: "hidden",
+					fontSize: 8,
+				  }}
+				/>
+			  </a>
+			) : (
+			  <a
+				rel="noopener noreferrer"
+				target="_blank"
+				href={selectedAppData.reference_info.github_url}
+				style={{ textDecoration: "none", color: "#f86a3e" }}
+			  >
+				<img
+				  alt={`Documentation image for ${selectedAppData.name}`}
+				  src={selectedAppData.large_image}
+				  style={{
+					width: 30,
+					height: 30,
+					border: "2px solid rgba(255,255,255,0.6)",
+					borderRadius: theme.palette?.borderRadius,
+					maxWidth: 30,
+					maxHeight: 30,
+					overflow: "hidden",
+					fontSize: 8,
+				  }}
+				/>
+			  </a>
+			)}
+		  </div>
+		<Tooltip
+		color="primary"
+		title={`Move window`}
+		placement="left"
+		>
+		  <IconButton
+		  id="draggable-dialog-title"
+		  style={{
+			zIndex: 5000,
+			position: "absolute",
+			top: 14,
+			right: 50,
+			color: "grey",
+
+			cursor: "move", 
+		  }}
+		  >
+		  <DragIndicatorIcon />
+		  </IconButton>
+		</Tooltip>
+		  <IconButton
+			style={{
+			  zIndex: 5000,
+			  position: "absolute",
+			  top: 14,
+			  right: 18,
+			  color: "grey",
+			}}
+			onClick={() => {
+			  setAuthenticationModalOpen(false);
+			}}
+		  >
+			<CloseIcon />
+		  </IconButton>
+		  <div style={{ display: "flex", flexDirection: "row" }}>
+			<div
+			  style={{
+				flex: 2,
+				padding: 0,
+				minHeight: isMobile ? "90%" : 800,
+				maxHeight: isMobile ? "90%" : 800,
+				overflowY: "auto",
+				overflowX: isMobile ? "auto" : "hidden",
+			  }}
+			>
+			  {authenticationType?.type === "oauth2" || authenticationType?.type === "oauth2-app"  ? 
+				<AuthenticationOauth2
+				  selectedApp={selectedAppData}
+				  selectedAction={{
+					"app_name": selectedAppData.name,
+					"app_id": selectedAppData.id,
+					"app_version": selectedAppData.version,
+					"large_image": selectedAppData.large_image,
+				  }}
+				  authenticationType={authenticationType}
+				  getAppAuthentication={getAppAuthentication}
+				  appAuthentication={appAuthentication}
+				  setAuthenticationModalOpen={setAuthenticationModalOpen}
+				  isCloud={isCloud}
+				  org_id={userdata?.active_org?.id}
+				  setSelectedAction={setSelectedAction}
+				/>
+			   : 
+				<AuthenticationData app={selectedAppData} />
+			  }
+			</div>
+			<div
+			  style={{
+				flex: 3,
+				borderLeft: `1px solid ${theme.palette.inputColor}`,
+				padding: "70px 30px 30px 30px",
+				maxHeight: 630,
+				minHeight: 630,
+				overflowY: "auto",
+				overflowX: "hidden",
+			  }}
+			>
+			  {selectedAppData?.documentation === undefined ||
+				selectedAppData?.documentation === null ||
+				selectedAppData?.documentation.length === 0 ? (
+				<span 
+			style={{ textAlign: "center" }}
+		  >
+			<div style={{textAlign: "left", }}>
+			  <Markdown
+			  components={{
+				img: Img,
+				code: CodeHandler,
+				h1: Heading,
+				h2: Heading,
+				h3: Heading,
+				h4: Heading,
+				h5: Heading,
+				h6: Heading,
+				a: OuterLink,
+			  }}
+			  id="markdown_wrapper"
+			  escapeHtml={false}
+			  style={{
+				maxWidth: "100%", 
+				minWidth: "100%", 
+				textAlign: "left", 
+			  }}
+			  >
+			  {selectedAppData?.description}
+			  </Markdown>
+			</div>
+				  <Divider
+					style={{
+					  marginTop: 25,
+					  marginBottom: 25,
+					  backgroundColor: "rgba(255,255,255,0.6)",
+					}}
+				  />
+
+			<div
+						style={{
+							backgroundColor: theme.palette.inputColor,
+							padding: 15,
+							borderRadius: theme.palette?.borderRadius,
+							marginBottom: 30,
+						}}
+					>
+			  <Typography variant="h6" style={{marginBottom: 25, }}>
+			  There is no Shuffle-specific documentation for this app yet outside of the general description above. Documentation is written for each api, and is a community effort. We hope to see your contribution!
+			  </Typography>
+			  <Button 
+				variant="contained" 
+				color="primary"
+				onClick={() => {
+				  toast.success("Opening remote Github documentation link. Thanks for contributing!")
+
+				  setTimeout(() => {
+					window.open(`https://github.com/Shuffle/openapi-apps/new/master/docs?filename=${selectedAppData.name.toLowerCase()}.md`, "_blank")
+				  }, 2500)
+				}}
+			   >
+				<EditIcon /> &nbsp;&nbsp;Create Docs
+			   </Button>
+					</div>
+
+				  <Typography variant="body1" style={{ marginTop: 25 }}>
+					Want to help the making of, or improve this app?{" "}
+			<br />
+					<a
+					  rel="noopener noreferrer"
+					  target="_blank"
+					  href="https://discord.gg/B2CBzUm"
+					  style={{ textDecoration: "none", color: "#f86a3e" }}
+					>
+					  Join the community on Discord!
+					</a>
+				  </Typography>
+
+				  <Typography variant="h6" style={{ marginTop: 50 }}>
+					Want to help change this app directly?
+				  </Typography>
+				  {selectedAppData.reference_info === undefined ||
+					selectedAppData.reference_info === null ||
+					selectedAppData.reference_info.github_url === undefined ||
+					selectedAppData.reference_info.github_url === null ||
+					selectedAppData.reference_info.github_url.length === 0 ? (
+					<span>
+					  <Typography variant="body1" style={{ marginTop: 25 }}>
+						<a
+						  rel="noopener noreferrer"
+						  target="_blank"
+						  href={"https://github.com/shuffle/python-apps"}
+						  style={{ textDecoration: "none", color: "#f86a3e" }}
+						>
+						  Check it out on Github!
+						</a>
+					  </Typography>
+					</span>
+				  ) : (
+					<span>
+					  <Typography variant="body1" style={{ marginTop: 25 }}>
+						<a
+						  rel="noopener noreferrer"
+						  target="_blank"
+						  href={selectedAppData.reference_info.github_url}
+						  style={{ textDecoration: "none", color: "#f86a3e" }}
+						>
+						  Check it out on Github!
+						</a>
+					  </Typography>
+					</span>
+				  )}
+				</span>
+			  ) : (
+		  <div>
+			{selectedMeta !== undefined && selectedMeta !== null && Object.getOwnPropertyNames(selectedMeta).length > 0 && selectedMeta.name !== undefined && selectedMeta.name !== null ? 
+			<div
+			  style={{
+				backgroundColor: theme.palette.inputColor,
+				padding: 15,
+				borderRadius: theme.palette?.borderRadius,
+				marginBottom: 30,
+				display: "flex",
+			  }}
+			>
+			<div style={{ flex: 3, display: "flex", vAlign: "center", position: "sticky", top: 50, }}>
+			  {isMobile ? null : (
+				<Typography style={{ display: "inline", marginTop: 6 }}>
+				  <a
+					rel="noopener noreferrer"
+					target="_blank"
+					href={selectedMeta.link}
+					style={{ textDecoration: "none", color: "#f85a3e" }}
+				  >
+					<Button style={{ color: theme.palette.textColor, }} variant="outlined" color="secondary">
+					  <EditIcon /> &nbsp;&nbsp;Edit
+					</Button>
+				  </a>
+				</Typography>
+			  )}
+			  {isMobile ? null : (
+				<div
+				  style={{
+					height: "100%",
+					width: 1,
+					backgroundColor: theme.palette.textColor,
+					marginLeft: 50,
+					marginRight: 50,
+				  }}
+				/>
+			  )}
+			  <Typography style={{ display: "inline", marginTop: 11 }}>
+				{selectedMeta.read_time} minute
+				{selectedMeta.read_time === 1 ? "" : "s"} to read
+			  </Typography>
+			</div>
+			<div style={{ flex: 2 }}>
+			  {isMobile ||
+				selectedMeta.contributors === undefined ||
+				selectedMeta.contributors === null ? (
+				""
+			  ) : (
+				<div style={{ margin: 10, height: "100%", display: "inline" }}>
+				  {selectedMeta.contributors.slice(0, 7).map((data, index) => {
+					return (
+					  <a
+						key={index}
+						rel="noopener noreferrer"
+						target="_blank"
+						href={data.url}
+						style={{ textDecoration: "none", color: "#f85a3e" }}
+					  >
+						<Tooltip title={data.url} placement="bottom">
+						  <img
+							alt={data.url}
+							src={data.image}
+							style={{
+							  marginTop: 5,
+							  marginRight: 10,
+							  height: 40,
+							  borderRadius: 40,
+							}}
+						  />
+						</Tooltip>
+					  </a>
+					);
+				  })}
+				</div>
+			  )}
+			</div>
+		  </div>
+			: null}
+
+			<Markdown
+			  components={{
+				img: Img,
+				code: CodeHandler,
+				h1: Heading,
+				h2: Heading,
+				h3: Heading,
+				h4: Heading,
+				h5: Heading,
+				h6: Heading,
+				a: OuterLink,
+			  }}
+			  id="markdown_wrapper"
+			  escapeHtml={false}
+			  style={{
+				maxWidth: "100%", minWidth: "100%", 
+			  }}
+			>
+			{selectedAppData.documentation}
+			</Markdown>
+		  </div>
+			  )}
+			</div>
+		  </div>
+		</Dialog>
+	) : null;
+
+	return authenticationModal
+}
+
+export default AuthenticationModal;

frontend/src/components/DiscordChat.jsx

@@ -16,7 +16,7 @@ import {
     ListItemText,
 } from '@mui/material';
 import { Search as SearchIcon } from '@mui/icons-material';
-import useDebouncedCallback from '../utils/useDebouncedCallback.js';
+import useDebouncedCallback from '../utils/useDebouncedCallback.jsx';
 
 
 const searchClient = algoliasearch("JNSS5CFDZZ", "1e5f29b1550939855de5915eac3bf5f7");

frontend/src/components/LineChartWrapper.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useContext, memo, useMemo } from 'react'
 import {getTheme} from '../theme.jsx';
 import { Context } from '../context/ContextApi.jsx';
+import { toast } from "react-toastify";
 
 import {
 	Typography,
@@ -14,19 +15,104 @@ import {
 
 	GridlineSeries,
 	Gridline,
-	TooltipArea,
 	ChartTooltip,
 	TooltipTemplate,
+	TooltipArea,
 } from 'reaviz';
 
+export const LoadStats = (globalUrl, cachekey) => {
+	if (globalUrl === undefined) {
+		console.log("Error: Global URL is undefined")
+		return
+	}
+
+	if (cachekey === undefined) {
+		console.log("Error: Cachekey is undefined")
+		return
+	}
+
+	var basedata = {
+		"key": cachekey,
+		"total": 0,
+		"available_keys": [],
+		"labels": [],
+		"datasets": [
+			{
+				"label": "",
+				"data": [],
+				"backgroundColor": [],
+				"barThickness": 15, 
+			}
+		]
+	}
+
+	//const url = `${globalUrl}/api/v1/stats/app_executions_test2`
+	//cachekey = cachekey.replace(" ", "_", -1)
+	const url = `${globalUrl}/api/v1/stats/${cachekey}`
+	return fetch(url, {
+		method: "GET",
+		credentials: "include",
+	})
+	.then((resp) => {
+		return resp.json()
+	}).then((respJson) => {
+		const selectedIndex = 0
+
+		//console.log("Stats response: ", respJson)
+
+		if (respJson.success === true) {
+			for (let entryKey in respJson.entries) {
+				const entry = respJson.entries[entryKey]
+				basedata.labels.push(entry.date)
+
+				basedata.datasets[0].data.push(entry.value)
+				basedata.datasets[0].backgroundColor.push(entry.value > 0 ? "rgba(255,255,255,0.4)" : "red")
+			}
+
+			basedata.available_keys = respJson.available_keys
+			basedata.total = respJson.total
+
+			return basedata 
+		} else {
+			console.log("Failed to get stats")
+			return basedata
+		}
+	})
+	.catch((err) => {
+		toast("Failed to get stats")
+		return basedata
+	})
+}
+
 const LineChartWrapper = (props) => {
-	const {keys, inputname, height, width, border} = props
+	const {keys, inputname, height, width, border, color} = props
 
   	const [hovered, setHovered] = useState("");
 	const {themeMode} = useContext(Context)
 	const theme = getTheme(themeMode)
 
-	var inputdata = keys.data === undefined ? keys : keys.data
+	// Correct format:
+	/* keys={[
+	  {
+		key: "2025-07-23T00:00:09.409718Z",
+		data: 24,
+	  },
+	  {
+		key: "2025-07-24T00:00:09.409718Z",
+		data: 50,
+	  },
+	  {
+		key: "2025-07-25T00:00:09.409718Z",
+		data: 75,
+	  },
+	  {
+		key: "2025-07-26T00:00:09.409718Z",
+		data: 42,
+	  },
+	]}
+	*/
+
+	var inputdata = keys?.data === undefined ? keys : keys.data
 
 	var newname = inputname === undefined || inputname === null ? "" : inputname.trim().replaceAll("_", " ")
 	newname = newname.charAt(0).toUpperCase() + newname.slice(1)
@@ -35,7 +121,6 @@ const LineChartWrapper = (props) => {
 
 		var tmpdata = inputdata?.datasets[0]
 		if (tmpdata?.data !== undefined && tmpdata?.data !== null && tmpdata?.data.length > 0 && inputdata?.labels?.length === tmpdata?.data?.length) {
-			console.log("Fix it!")
 			var newarray = []
 			for (var key in tmpdata.data) {
 				var entry = {
@@ -48,26 +133,25 @@ const LineChartWrapper = (props) => {
 
 			inputdata = newarray
 		}
-
 	}
 
 	if (inputdata === undefined || inputdata === null) {
-		return (
+		return null /*(
 			<Typography> 
 				Invalid linegraph data format
 			</Typography> 
-		)
+		)*/
 	}
 
 	var defaultStyle = {
 		color: "white", 
-		padding: 30, 
+		padding: "5px 5px 10px 5px", 
 		marginTop: 15, 
 		overflow: "hidden", 
 
 		border: "1px solid rgba(255,255,255,0.3)", 
 		borderRadius: theme.palette?.borderRadius, 
-		backgroundColor: theme.palette.platformColor, 
+		//backgroundColor: theme.palette.platformColor, 
 	}
 
 	if (border === false) {
@@ -76,11 +160,64 @@ const LineChartWrapper = (props) => {
 		defaultStyle.backgroundColor = "transparent"
 	}
 
+	// Check if it's a list or not 
+	if (!Array.isArray(inputdata) || inputdata.length === 0 || (inputdata.length > 0 && (inputdata[0].key === undefined && inputdata[0].data === undefined))) {
+		console.log("Invalid graph data format: ", inputdata)
+		console.log("Expected format: [{key: 'label1', data: 10}, {key: 'label2', data: 20}]")
+		//inputdata = inputdata?.datasets[0]?.data
+		return null
+	}
+
+	//console.log("FORMAT: ", inputdata)
+
+	const tooltip = <TooltipArea
+					tooltip={
+					<ChartTooltip
+						placement={"top"}
+						followCursor={true}
+						content={(data) => (
+						<div style={{
+							borderRadius: 4,
+							backgroundColor: theme.palette.inputColor,
+							border: theme.palette.defaultBorder,
+							color: theme.palette.text.primary,
+							padding: 6,
+							maxWidth: 240,
+						}}>
+							<Typography variant="body2" style={{fontWeight: 600}}>{data?.x ?? ''}</Typography>
+							<Typography variant="body2">{data?.y ?? ''}</Typography>
+						</div>
+						)}
+					/>
+					}
+				/>;
+	
+	const selectedColor = color === undefined || color === null || color === "" ? "" : color
+	const barseries = color === undefined || color === null || color === "" ?
+		<BarSeries
+		  bar={
+			<Bar 
+			/>
+		  } 
+		  tooltip={tooltip}
+		/>
+		:
+		<BarSeries
+		  colorScheme={[selectedColor]}
+		  bar={
+			<Bar 
+			/>
+		  } 
+		  tooltip={tooltip}
+		/>
+
 	return (
 		<div style={defaultStyle}>
-			<Typography variant="h6" style={{marginBotton: 30, }}>
+			{newname !== "" &&
-				{newname}
+				<Typography variant="h6" style={{paddingBottom: 25, }}>
-			</Typography>
+					{newname}
+				</Typography>
+			}
 
 			<BarChart
 				style={{marginTop: 100, }}
@@ -89,11 +226,8 @@ const LineChartWrapper = (props) => {
 				data={inputdata}
 
 		      	series={
-					<BarSeries
+					barseries
-					  bar={
+					
-						<Bar />
-					  } 
-					/>
 				}
 				gridlines={
 					<GridlineSeries line={<Gridline direction="all" />} />

frontend/src/utils/useDebouncedCallback.jsx

@@ -0,0 +1,25 @@
+import { useRef, useEffect, useCallback } from "react";
+
+export const useDebouncedCallback = (callback, delay = 300) => {
+  const timeoutRef = useRef(null);
+  const savedCallback = useRef(callback);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+  }, []);
+
+  return useCallback((...args) => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      savedCallback.current(...args);
+    }, delay);
+  }, [delay]);
+};
+
+export default useDebouncedCallback;
+
+

frontend/src/views/AngularWorkflow.jsx

@@ -22,7 +22,7 @@ import { CodeHandler, Img, OuterLink, } from "../views/Docs.jsx";
 
 import { InstantSearch, Configure, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
 import algoliasearch from 'algoliasearch/lite';
-import useDebouncedCallback from "../utils/useDebouncedCallback.js";
+import useDebouncedCallback from "../utils/useDebouncedCallback.jsx";
 import {
   Zoom,
   Fade,