Frontend rebuild with all new components

2024-10-18 10:31:23 +02:00
parent c02e976dbb
commit 78bd8f29df
6 changed files with 1913 additions and 0 deletions
@@ -0,0 +1,157 @@
+import React from "react"
+
+import { 
+	Avatar, 
+	Box, 
+	Button, 
+	Typography,
+	Tooltip,
+} from "@mui/material"
+import { useNavigate } from "react-router";
+import theme from "../theme.jsx";
+
+import {
+	Lock as LockIcon,
+} from '@mui/icons-material';
+
+// onclickHandler = function override from parent onclick
+const RecentWorkflow = ({ workflow, onclickHandler, leftNavOpen, currentWorkflowId, }) => {
+
+    const navigate = useNavigate();
+
+	const [hovered, setHovered] = React.useState(false)
+
+	if (workflow === undefined || workflow === null) {
+		console.log("No workflow")
+		return null
+	}
+
+	/*
+	 * Note for @Lalit:
+	 *
+	 * When you want to make a list of something that is complex,
+	 * make a component. This way, you can easily manage
+	 * the logic, and we can actually reuse it. This component is used 
+	 * multiple places, so do make sure to not break it randomly.
+	 */
+
+	const expandLeftNav = leftNavOpen === true || leftNavOpen === undefined ? true : false
+
+	// Check if workflow.input_markdown has an image in it
+	// If it does, show it as the main thing
+	//
+	var relevantImageUrl = ""
+	if (workflow.input_markdown !== undefined && workflow.input_markdown !== null && workflow.input_markdown !== "") {
+		// Look for <img> tag or ![alt](src) markdown
+		// html > markdown
+		const imgTag = workflow.input_markdown.match(/<img[^>]+>/g)
+
+		if (imgTag !== null) {
+			const src = imgTag[0].match(/src="([^"]+)"/)
+			if (src !== null) {
+				relevantImageUrl = src[1]
+			}
+		} else {
+			const markdownTag = workflow.input_markdown.match(/!\[.*\]\(.*\)/g)
+
+			if (markdownTag !== null) {
+				const src = markdownTag[0].match(/\(([^)]+)\)/)
+				if (src !== null) {
+					relevantImageUrl = src[1]
+				}
+			}
+		}
+	}
+
+	return (
+		<div
+			onMouseEnter={() => setHovered(true)}
+			onMouseLeave={() => setHovered(false)}
+		>
+			<Button
+			  onClick={() => {
+				if (onclickHandler !== undefined) {
+					onclickHandler()
+				} else {
+					navigate(`/workflows/` + workflow?.id)
+					setTimeout(() => {
+					  window.location.reload()
+					}, 100)
+				}
+			  }}
+			  style={{
+				display: "flex",
+				flexDirection: "column",
+				textTransform: "none",
+				width: "100%",
+				justifyContent: "flex-start",
+				textAlign: "left",
+				opacity: expandLeftNav ? 1 : 0,
+				transition: "opacity 0.1s",
+
+				borderRadius: theme.palette.borderRadius, 
+				backgroundColor: hovered || currentWorkflowId === workflow.id ? "#1f1f1f" : "transparent",
+			  }}
+			  disableRipple
+			>
+			  <Box
+				style={{
+				  display: "flex",
+				  marginRight: "auto",
+				  alignItems: "center",
+				}}
+			  >
+
+				{relevantImageUrl !== undefined && relevantImageUrl !== null && relevantImageUrl !== "" ? 
+					<Avatar
+						alt={workflow?.name}
+						src={relevantImageUrl}
+						style={{ width: 24, height: 24, marginRight: 5, }}
+					/>
+					:
+				workflow?.apps?.slice(0, 2).map((data, index) => (
+				  <Box
+					key={index}
+					style={{
+					  position: "relative",
+					  marginLeft: index === 1 ? -8 : 0,
+					}}
+				  >
+					<Avatar
+					  alt={data.app_name}
+					  src={
+						data.large_image
+						  ? data.large_image
+						  : "/images/no_image.png"
+					  }
+					  style={{ width: 24, height: 24 }}
+					/>
+				  </Box>
+				))}
+				<Typography
+				  style={{
+					color: "#CDCDCD",
+					fontSize: 16,
+					marginLeft: 8,
+					maxWidth: 180,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+				  }}
+				>
+				  {workflow?.name}
+				</Typography>
+
+				{onclickHandler !== undefined && workflow.sharing !== "form" ?
+					<Tooltip title="Private Org Form" placement="right">
+  						<LockIcon style={{height: 15, width: 15, color: "grey", position: "absolute", left: -17, }}/>
+					</Tooltip>
+					: null
+				}
+			  </Box>
+			</Button>
+		</div>
+	)
+}
+
+export default RecentWorkflow