Lalit Deore
6644 lines
273 KiB
React
6644 lines
273 KiB
React
// React & Core imports
|
|
import React, { useEffect, useContext, memo, useState, useRef } from "react";
|
|
import { useLocation, useNavigate, Link } from "react-router-dom";
|
|
import ReactDOM from "react-dom"
|
|
import { getTheme } from "../theme.jsx";
|
|
|
|
// Material UI & Components
|
|
import { makeStyles } from "@mui/styles";
|
|
import { Navigate } from "react-router-dom";
|
|
import { isMobile } from "react-device-detect"
|
|
import ReactGA from 'react-ga4';
|
|
|
|
import LineChartWrapper from "../components/LineChartWrapper.jsx";
|
|
import SecurityFramework from '../components/SecurityFramework.jsx';
|
|
import EditWorkflow from "../components/EditWorkflow.jsx"
|
|
import Priority from "../components/Priority.jsx";
|
|
import { Context } from "../context/ContextApi.jsx";
|
|
|
|
// Material UI Components
|
|
import {
|
|
Tab,
|
|
InputAdornment,
|
|
Tabs,
|
|
Box,
|
|
ButtonBase,
|
|
Badge,
|
|
Divider,
|
|
Avatar,
|
|
Drawer,
|
|
Grid,
|
|
InputLabel,
|
|
Select,
|
|
ListSubheader,
|
|
Paper,
|
|
Tooltip,
|
|
Button,
|
|
TextField,
|
|
FormControl,
|
|
FormControlLabel,
|
|
Switch,
|
|
IconButton,
|
|
Menu,
|
|
MenuItem,
|
|
Chip,
|
|
Typography,
|
|
CircularProgress,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogActions,
|
|
DialogContent,
|
|
Checkbox,
|
|
LinearProgress,
|
|
ListItemText,
|
|
AvatarGroup,
|
|
Zoom,
|
|
Collapse,
|
|
Skeleton,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
} from "@mui/material";
|
|
|
|
// Material UI Icons
|
|
import {
|
|
ContentCopy as ContentCopyIcon,
|
|
Close as CloseIcon,
|
|
Compare as CompareIcon,
|
|
Maximize as MaximizeIcon,
|
|
Minimize as MinimizeIcon,
|
|
AddCircle as AddCircleIcon,
|
|
Toc as TocIcon,
|
|
Send as SendIcon,
|
|
Search as SearchIcon,
|
|
FileCopy as FileCopyIcon,
|
|
Delete as DeleteIcon,
|
|
BubbleChart as BubbleChartIcon,
|
|
Restore as RestoreIcon,
|
|
Cached as CachedIcon,
|
|
Apps as AppsIcon,
|
|
Edit as EditIcon,
|
|
MoreVert as MoreVertIcon,
|
|
PlayArrow as PlayArrowIcon,
|
|
Add as AddIcon,
|
|
CloudUpload as CloudUploadIcon,
|
|
CloudDownload as CloudDownloadIcon,
|
|
ExpandLess as ExpandLessIcon,
|
|
ExpandMore as ExpandMoreIcon,
|
|
Done as DoneIcon,
|
|
CheckCircle as CheckCircleIcon,
|
|
RadioButtonUnchecked as RadioButtonUncheckedIcon,
|
|
ArrowLeft as ArrowLeftIcon,
|
|
ArrowRight as ArrowRightIcon,
|
|
Visibility as VisibilityIcon,
|
|
EditNote as EditNoteIcon,
|
|
ErrorOutline as ErrorOutlineIcon,
|
|
Coronavirus as CoronavirusIcon,
|
|
Fingerprint as FingerprintIcon,
|
|
Psychology as PsychologyIcon,
|
|
Wifi as WifiIcon,
|
|
Devices as DevicesIcon,
|
|
AutoAwesome as AutoAwesomeIcon,
|
|
BarChart as BarChartIcon,
|
|
Lock as LockIcon,
|
|
Clear as ClearIcon,
|
|
QueryStats as QueryStatsIcon,
|
|
GridOn as GridOnIcon,
|
|
List as ListIcon,
|
|
Publish as PublishIcon,
|
|
GetApp as GetAppIcon,
|
|
Image as ImageIcon,
|
|
Shield as ShieldIcon,
|
|
Warning as WarningIcon,
|
|
ChevronRight as ChevronRightIcon,
|
|
} from "@mui/icons-material";
|
|
|
|
// Additional Components
|
|
import { DataGrid, GridToolbar } from "@mui/x-data-grid";
|
|
import Dropzone from "../components/Dropzone.jsx";
|
|
|
|
// Third Party Libraries
|
|
import { ToastContainer, toast } from "react-toastify"
|
|
import { MuiChipsInput } from "mui-chips-input";
|
|
import { v4 as uuidv4 } from "uuid";
|
|
// import theme from "./theme.jsx";
|
|
import algoliasearch from 'algoliasearch/lite';
|
|
import { InstantSearch, Configure, connectHits, connectSearchBox, connectRefinementList } from 'react-instantsearch-dom';
|
|
import { debounce } from "lodash";
|
|
import { removeQuery } from "../components/ScrollToTop.jsx";
|
|
|
|
import {green, yellow, red, grey, triggers as wfTriggers, } from "../views/AngularWorkflow.jsx"
|
|
import Licensed from "../components/Licensed.jsx";
|
|
|
|
|
|
const searchClient = algoliasearch("JNSS5CFDZZ", "33e4e3564f4f060e96e0531957bed552");
|
|
|
|
const svgSize = 24;
|
|
const imagesize = 23;
|
|
|
|
// Session-based modal visibility helper
|
|
const AI_ANNOUNCEMENT_SESSION_KEY = "ai_announcement_session";
|
|
|
|
const getCookie = (name) => {
|
|
if (typeof document === "undefined") return "";
|
|
const pattern = `; ${document.cookie}`;
|
|
const parts = pattern.split(`; ${name}=`);
|
|
if (parts.length === 2) {
|
|
return decodeURIComponent(parts.pop().split(";").shift() || "");
|
|
}
|
|
return "";
|
|
};
|
|
|
|
export const HandleJsonCopy = (base, copy, base_node_name) => {
|
|
if (typeof copy.name === "string") {
|
|
copy.name = copy.name.replaceAll(" ", "_");
|
|
}
|
|
|
|
//lol
|
|
if (typeof base === 'object' || typeof base === 'dict') {
|
|
base = JSON.stringify(base)
|
|
}
|
|
|
|
if (base_node_name === "execution_argument" || base_node_name === "Runtime Argument") {
|
|
base_node_name = "exec"
|
|
}
|
|
|
|
//console.log("COPY: ", base_node_name, copy);
|
|
|
|
//var newitem = JSON.parse(base);
|
|
var newitem = validateJson(base).result
|
|
|
|
var to_be_copied = "$" + base_node_name?.toLowerCase()?.replaceAll(" ", "_");
|
|
for (let copykey in copy.namespace) {
|
|
if (copy.namespace[copykey].includes("Results for")) {
|
|
continue;
|
|
}
|
|
|
|
if (newitem !== undefined && newitem !== null) {
|
|
newitem = newitem[copy.namespace[copykey]];
|
|
if (!isNaN(copy.namespace[copykey])) {
|
|
to_be_copied += ".#";
|
|
} else {
|
|
to_be_copied += "." + copy.namespace[copykey];
|
|
}
|
|
}
|
|
}
|
|
|
|
if (newitem !== undefined && newitem !== null) {
|
|
newitem = newitem[copy.name];
|
|
if (!isNaN(copy.name)) {
|
|
to_be_copied += ".#";
|
|
} else {
|
|
to_be_copied += "." + copy.name;
|
|
}
|
|
}
|
|
|
|
to_be_copied = to_be_copied.replaceAll(" ", "_");
|
|
console.log("COPY: ", to_be_copied);
|
|
const elementName = "copy_element_shuffle";
|
|
var copyText = document.getElementById(elementName);
|
|
if (copyText !== null && copyText !== undefined) {
|
|
//console.log("NAVIGATOR: ", navigator);
|
|
const clipboard = navigator.clipboard;
|
|
if (clipboard === undefined) {
|
|
toast("Can only copy over HTTPS (port 3443)");
|
|
return;
|
|
}
|
|
|
|
navigator.clipboard.writeText(to_be_copied).catch(() => {
|
|
const temp = document.createElement("textarea");
|
|
temp.value = to_be_copied;
|
|
document.body.appendChild(temp);
|
|
temp.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(temp);
|
|
});
|
|
//console.log("COPYING!");
|
|
toast("Copied JSON path to clipboard.")
|
|
} else {
|
|
console.log("Couldn't find element ", elementName);
|
|
}
|
|
}
|
|
|
|
export const handleReactJsonClipboard = (copy) => {
|
|
const elementName = "copy_element_shuffle";
|
|
var copyText = document.getElementById(elementName);
|
|
if (copyText !== null && copyText !== undefined) {
|
|
if (
|
|
copy.namespace !== undefined &&
|
|
copy.name !== undefined &&
|
|
copy.src !== undefined
|
|
) {
|
|
copy = copy.src;
|
|
}
|
|
|
|
const clipboard = navigator.clipboard;
|
|
if (clipboard === undefined) {
|
|
toast("Can only copy over HTTPS (port 3443)");
|
|
return;
|
|
}
|
|
|
|
var stringified = JSON.stringify(copy);
|
|
if (stringified.startsWith('"') && stringified.endsWith('"')) {
|
|
stringified = stringified.substring(1, stringified.length - 1);
|
|
}
|
|
|
|
navigator.clipboard.writeText(stringified).catch(() => {
|
|
const temp = document.createElement("textarea");
|
|
temp.value = stringified;
|
|
document.body.appendChild(temp);
|
|
temp.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(temp);
|
|
});
|
|
|
|
console.log("COPYING!");
|
|
toast.success("Copied Value, NOT json path.")
|
|
} else {
|
|
console.log("Failed to copy from " + elementName + ": ", copyText);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Takes an action in Shuffle and
|
|
// Returns information about the icon, the color etc to be used
|
|
// This can be used for actions of all types
|
|
// PARSED ICON PROPERTIES:
|
|
// icon - SVG <path> d attribute string
|
|
// iconColor - path fill/stroke color (used in cytoscape node SVGs; "white" on colored bg)
|
|
// iconBackgroundColor - solid bg color for the node
|
|
// fillGradient - [color1, color2] for gradient bg; if set, fillstyle = "linear-gradient"
|
|
// originalIcon - React <svg> element (22x22, currentColor) used in ParsedActionNew dropdown
|
|
// svgViewBox - viewBox for the SVG; "0 0 48 48" for 48-coord paths, defaults to "0 0 24 24"
|
|
// dropdownViewBox - tighter crop viewBox for dropdown rendering (auto: "10 10 28 28" for 48x48)
|
|
// useStroke - true → render path with stroke (no fill); for outline-style icons
|
|
// useFill - true + useStroke → render with BOTH fill and stroke
|
|
// fillRule - "evenodd" for complex filled shapes (e.g. filter); default "nonzero"
|
|
//
|
|
export const GetIconInfo = (action) => {
|
|
// Finds the icon based on the action. Should be verbs.
|
|
const iconList = [
|
|
{ key: "cases", values: ["cases", "ticket", "tickets", "alert"] },
|
|
{ key: "cache_add", values: ["set_cache"] },
|
|
{ key: "cache_get", values: ["get_cache"] },
|
|
{ key: "filter", values: ["filter"] },
|
|
{ key: "merge", values: ["join", "merge", "route", "router"] },
|
|
{key: "get_file_value", values: ["get_file_value"]},
|
|
{
|
|
key: "search",
|
|
values: ["search", "find", "locate", "index", "analyze", "anal", "match", "check cache", "check", "verify", "validate", "siem", ],
|
|
},
|
|
{ key: "list", values: ["list", "head", "options"] },
|
|
{
|
|
key: "download",
|
|
values: [
|
|
"ingest",
|
|
"capture",
|
|
"get",
|
|
"download",
|
|
"return",
|
|
"hello_world",
|
|
"curl",
|
|
"request",
|
|
"export",
|
|
"preview",
|
|
],
|
|
},
|
|
{ key: "add", values: ["add", "accept",] },
|
|
{ key: "delete", values: ["delete", "remove", "clear", "clean", "dismiss",] },
|
|
{
|
|
key: "repeat",
|
|
values: ["repeat", "retry", "pause", "skip", "copy", "replicat", "demo",],
|
|
},
|
|
{ key: "execute", values: ["execute", "run", "play", "raise", "control", "ctrl"] },
|
|
{ key: "extract", values: ["extract", "unpack", "decompress", "open"] },
|
|
{ key: "inflate", values: ["inflate", "pack", "compress"] },
|
|
{
|
|
key: "edit",
|
|
values: [
|
|
"modify",
|
|
"update",
|
|
"create",
|
|
"edit",
|
|
"put",
|
|
"patch",
|
|
"change",
|
|
"replace",
|
|
"conver",
|
|
"map",
|
|
"format",
|
|
"escape",
|
|
"describe",
|
|
],
|
|
},
|
|
{
|
|
key: "compare",
|
|
values: ["compare", "convert", "to", "filter", "translate", "parse"],
|
|
},
|
|
{ key: "assets", values: ["cmdb", "assets", "asset", "cmdb", "inventory", "host", "hosts", "device", "devices", "app",] },
|
|
{ key: "close", values: ["close", "stop", "cancel", "block"] },
|
|
{ key: "communication", values: ["communication", "comms", "email", "mail",] },
|
|
{ key: "eradication", values: ["eradication", "edr", "xdr", "sigma", "yara",] },
|
|
{ key: "iam", values: ["iam", "identity", "access", "auth", "authentication", "authorization", "oauth", "sso", "openid"] },
|
|
{ key: "network", values: ["network", "net", "networking", "firewall", "proxy", "vpn", "sdwan", "sd-wan"] },
|
|
{
|
|
key: "send",
|
|
values: [
|
|
"send",
|
|
"dispatch",
|
|
"mail",
|
|
"forward",
|
|
"post",
|
|
"submit",
|
|
"mark",
|
|
"set",
|
|
"release",
|
|
],
|
|
},
|
|
{
|
|
key: "secret",
|
|
values: [
|
|
"api",
|
|
"password",
|
|
"passwd",
|
|
"protect",
|
|
],
|
|
},
|
|
{ key: "intel", values: ["intel", "feed", "threat intel", "threat intelligence", "ti", "t.i.", "t.i", "ti.", "rule", "technique", "tactic", "techniques", "tactics", "ioc", "indicator", "hash", "ip", "url", "domain", "sha", "md5",] },
|
|
];
|
|
|
|
var selectedKey = ""
|
|
if (action.app_name == "Integration Framework") {
|
|
selectedKey = "magic"
|
|
} else if (action.name === undefined || action.name === null) {
|
|
} else {
|
|
const actionname = action.name.toLowerCase()
|
|
for (var key in iconList) {
|
|
//console.log(iconList[key], actionname)
|
|
const found = iconList[key].values.find((value) =>
|
|
actionname.includes(value)
|
|
)
|
|
if (found !== null && found !== undefined) {
|
|
selectedKey = iconList[key].key
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
// Some of these are manually parsed or created instead of material ui
|
|
//M8 0C3.58 0 0 1.79 0 4C0 6.21 3.58 8 8 8C12.42 8 16 6.21 16 4C16 1.79 12.42 0 8 0ZM0 6V9C0 11.21 3.58 13 8 13C12.42 13 16 11.21 16 9V6C16 8.21 12.42 10 8 10C3.58 10 0 8.21 0 6ZM0 11V14C0 16.21 3.58 18 8 18C9.41 18 10.79 17.81 12 17.46V14.46C10.79 14.81 9.41 15 8 15C3.58 15 0 13.21 0 11ZM17 11V14H14V16H17V19H19V16H22V14H19V11
|
|
//https://www.figma.com/file/uCfnMs5w6wnLx6ehPHEV74/Figma-Material-Design-System-v3_0?node-id=834%3A21
|
|
//COLORS: https://www.pinterest.co.uk/pin/326299935499972946/
|
|
const defaultColor = "#f76b1c";
|
|
const defaultGradient = ["#fad961", "#f76b1c"];
|
|
const parsedIcons = {
|
|
magic: {
|
|
icon: "M7.5 5.6 10 7 8.6 4.5 10 2 7.5 3.4 5 2l1.4 2.5L5 7zm12 9.8L17 14l1.4 2.5L17 19l2.5-1.4L22 19l-1.4-2.5L22 14zM22 2l-2.5 1.4L17 2l1.4 2.5L17 7l2.5-1.4L22 7l-1.4-2.5zm-7.63 5.29a.9959.9959 0 0 0-1.41 0L1.29 18.96c-.39.39-.39 1.02 0 1.41l2.34 2.34c.39.39 1.02.39 1.41 0L16.7 11.05c.39-.39.39-1.02 0-1.41zm-1.03 5.49-2.12-2.12 2.44-2.44 2.12 2.12z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "red",
|
|
originalIcon: "",
|
|
fillGradient: ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#8A2BE2"],
|
|
},
|
|
communication: {
|
|
icon: "M9.89516 7.71433H8.60945V5.1429H9.89516V7.71433ZM9.89516 10.2858H8.60945V9.00004H9.89516V10.2858ZM14.3952 2.57147H4.10944C3.76845 2.57147 3.44143 2.70693 3.20031 2.94805C2.95919 3.18917 2.82373 3.51619 2.82373 3.85719V15.4286L5.39516 12.8572H14.3952C14.7362 12.8572 15.0632 12.7217 15.3043 12.4806C15.5454 12.2395 15.6809 11.9125 15.6809 11.5715V3.85719C15.6809 3.14361 15.1023 2.57147 14.3952 2.57147Z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "#8acc3f",
|
|
originalIcon: "",
|
|
fillGradient: ["#8acc3f", "#459622"],
|
|
},
|
|
cases: {
|
|
icon: "M15.6408 8.39233H18.0922V10.0287H15.6408V8.39233ZM0.115234 8.39233H2.56663V10.0287H0.115234V8.39233ZM9.92083 0.21051V2.66506H8.28656V0.21051H9.92083ZM3.31839 2.25596L5.05889 4.00687L3.89856 5.16051L2.15807 3.42596L3.31839 2.25596ZM13.1485 3.99869L14.8808 2.25596L16.0493 3.42596L14.3088 5.16051L13.1485 3.99869ZM9.10369 4.30142C10.404 4.30142 11.651 4.81863 12.5705 5.73926C13.4899 6.65989 14.0065 7.90854 14.0065 9.21051C14.0065 11.0269 13.0178 12.6141 11.5551 13.4651V14.9378C11.5551 15.1548 11.469 15.3629 11.3158 15.5163C11.1625 15.6698 10.9547 15.756 10.738 15.756H7.46943C7.25271 15.756 7.04487 15.6698 6.89163 15.5163C6.73839 15.3629 6.6523 15.1548 6.6523 14.9378V13.4651C5.18963 12.6141 4.2009 11.0269 4.2009 9.21051C4.2009 7.90854 4.71744 6.65989 5.63689 5.73926C6.55635 4.81863 7.80339 4.30142 9.10369 4.30142ZM10.738 16.5741V17.3923C10.738 17.6093 10.6519 17.8174 10.4986 17.9709C10.3454 18.1243 10.1375 18.2105 9.92083 18.2105H8.28656C8.06984 18.2105 7.862 18.1243 7.70876 17.9709C7.55552 17.8174 7.46943 17.6093 7.46943 17.3923V16.5741H10.738ZM8.28656 14.1196H9.92083V12.3769C11.3345 12.0169 12.3722 10.7323 12.3722 9.21051C12.3722 8.34253 12.0279 7.5101 11.4149 6.89634C10.8019 6.28259 9.97056 5.93778 9.10369 5.93778C8.23683 5.93778 7.40546 6.28259 6.79249 6.89634C6.17953 7.5101 5.83516 8.34253 5.83516 9.21051C5.83516 10.7323 6.87292 12.0169 8.28656 12.3769V14.1196Z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "#8acc3f",
|
|
originalIcon: "",
|
|
fillGradient: ["#8acc3f", "#459622"],
|
|
},
|
|
// cache_add: {
|
|
// icon: "M11 3C6.58 3 3 4.79 3 7C3 9.21 6.58 11 11 11C15.42 11 19 9.21 19 7C19 4.79 15.42 3 11 3ZM3 9V12C3 14.21 6.58 16 11 16C15.42 16 19 14.21 19 12V9C19 11.21 15.42 13 11 13C6.58 13 3 11.21 3 9ZM3 14V17C3 19.21 6.58 21 11 21C12.41 21 13.79 20.81 15 20.46V17.46C13.79 17.81 12.41 18 11 18C6.58 18 3 16.21 3 14ZM20 14V17H17V19H20V22H22V19H25V17H22V14",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: "#8acc3f",
|
|
// originalIcon: "",
|
|
// fillGradient: ["#8acc3f", "#459622"],
|
|
// },
|
|
get_file_value: {
|
|
icon: "M25.8332 14.8335H18.4998C18.0136 14.8335 17.5473 15.0267 17.2035 15.3705C16.8597 15.7143 16.6665 16.1806 16.6665 16.6668V31.3335C16.6665 31.8197 16.8597 32.286 17.2035 32.6299C17.5473 32.9737 18.0136 33.1668 18.4998 33.1668H29.4998C29.9861 33.1668 30.4524 32.9737 30.7962 32.6299C31.14 32.286 31.3332 31.8197 31.3332 31.3335V20.3335L25.8332 14.8335Z M25.8335 14.8335V20.3335H31.3335 M24 29.5V24 M21.25 26.75H26.75",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(43, 189, 160, 1)",
|
|
originalIcon: "",
|
|
useStroke: true,
|
|
svgViewBox: "0 0 48 48",
|
|
fillGradient: ["rgba(43, 189, 160, 1)", "rgba(43, 189, 160, 1)"],
|
|
},
|
|
cache_add: {
|
|
icon: "M24 20.6667C28.1421 20.6667 31.5 19.5475 31.5 18.1667C31.5 16.786 28.1421 15.6667 24 15.6667C19.8579 15.6667 16.5 16.786 16.5 18.1667C16.5 19.5475 19.8579 20.6667 24 20.6667Z M31.5 24C31.5 25.3833 28.1667 26.5 24 26.5C19.8333 26.5 16.5 25.3833 16.5 24 M16.5 18.1667V29.8334C16.5 31.2167 19.8333 32.3334 24 32.3334C28.1667 32.3334 31.5 31.2167 31.5 29.8334V18.1667 M32 35C34.2091 35 36 33.2091 36 31C36 28.7909 34.2091 27 32 27C29.7909 27 28 28.7909 28 31C28 33.2091 29.7909 35 32 35Z M32 29V33 M30 31H34",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(43, 189, 160, 1)",
|
|
fillGradient: ["rgba(43, 189, 160, 1)", "rgba(43, 189, 160, 1)"],
|
|
originalIcon: "",
|
|
useStroke: true,
|
|
svgViewBox: "0 0 48 48",
|
|
},
|
|
// cache_get: {
|
|
// icon: "M12 2C7.58 2 4 3.79 4 6C4 8.06 7.13 9.74 11.15 9.96C12.45 8.7 14.19 8 16 8C16.8 8 17.59 8.14 18.34 8.41C19.37 7.74 20 6.91 20 6C20 3.79 16.42 2 12 2ZM4 8V11C4 12.68 6.08 14.11 9 14.71C9.06 13.7 9.32 12.72 9.77 11.82C6.44 11.34 4 9.82 4 8ZM15.93 9.94C14.75 9.95 13.53 10.4 12.46 11.46C8.21 15.71 13.71 22.5 18.75 19.17L23.29 23.71L24.71 22.29L20.17 17.75C22.66 13.97 19.47 9.93 15.93 9.94ZM15.9 12C17.47 11.95 19 13.16 19 15C19 15.7956 18.6839 16.5587 18.1213 17.1213C17.5587 17.6839 16.7956 18 16 18C13.33 18 12 14.77 13.88 12.88C14.47 12.29 15.19 12 15.9 12ZM4 13V16C4 18.05 7.09 19.72 11.06 19.95C10.17 19.07 9.54 17.95 9.22 16.74C6.18 16.17 4 14.72 4 13Z",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: "#8acc3f",
|
|
// originalIcon: "",
|
|
// fillGradient: ["#8acc3f", "#459622"],
|
|
// },
|
|
cache_get: {
|
|
icon: "M22.25 14C24.379 14 26.3377 14.2865 27.79 14.7705C28.5123 15.0113 29.1516 15.3144 29.625 15.6875C30.09 16.054 30.5 16.5766 30.5 17.25V25.0889C30.4172 25.0848 30.3338 25.083 30.25 25.083C29.8184 25.083 29.3995 25.1374 29 25.2402V25.0537C28.6427 25.2475 28.2369 25.4175 27.7998 25.5635C26.3499 26.0475 24.3907 26.333 22.25 26.333C20.1093 26.333 18.1501 26.0475 16.7002 25.5635C16.2631 25.4175 15.8573 25.2475 15.5 25.0537V28.917C15.5002 28.9389 15.5137 29.0744 15.8018 29.3027C16.085 29.5272 16.542 29.7623 17.1748 29.9736C18.4332 30.3937 20.2243 30.667 22.25 30.667C23.3382 30.667 24.3581 30.5844 25.2646 30.4463C25.3016 30.9605 25.4159 31.4527 25.5967 31.9121C24.5747 32.0741 23.4408 32.167 22.25 32.167C20.1092 32.167 18.1502 31.8805 16.7002 31.3965C15.9791 31.1558 15.342 30.8524 14.8701 30.4785C14.4059 30.1106 14.0002 29.5883 14 28.917V17.25C14 16.5766 14.41 16.054 14.875 15.6875C15.3484 15.3144 15.9877 15.0113 16.71 14.7705C18.1623 14.2865 20.121 14 22.25 14ZM29 19.2168C28.64 19.4118 28.2306 19.5826 27.79 19.7295C26.3377 20.2135 24.379 20.5 22.25 20.5C20.121 20.5 18.1623 20.2135 16.71 19.7295C16.2694 19.5826 15.86 19.4118 15.5 19.2168V23.083C15.5001 23.1039 15.5122 23.2403 15.8018 23.4697C16.0851 23.6941 16.5421 23.9294 17.1748 24.1406C18.4332 24.5607 20.2243 24.833 22.25 24.833C24.2757 24.833 26.0668 24.5607 27.3252 24.1406C27.9579 23.9294 28.4149 23.6941 28.6982 23.4697C28.9878 23.2403 28.9999 23.1039 29 23.083V19.2168ZM22.25 15.5C20.2371 15.5 18.4456 15.7727 17.1836 16.1934C16.5488 16.405 16.0893 16.6412 15.8037 16.8662C15.5099 17.0978 15.5 17.2331 15.5 17.25C15.5001 17.2679 15.5111 17.4032 15.8037 17.6338C16.0893 17.8588 16.5488 18.095 17.1836 18.3066C18.4456 18.7273 20.2371 19 22.25 19C24.2628 19 26.0544 18.7273 27.3164 18.3066C27.9512 18.095 28.4107 17.8588 28.6963 17.6338C28.9889 17.4032 28.9999 17.2679 29 17.25C29 17.2331 28.9901 17.0978 28.6963 16.8662C28.4107 16.6412 27.9512 16.405 27.3164 16.1934C26.0544 15.7727 24.2629 15.5 22.25 15.5Z M29.9166 32.4164C31.3893 32.4164 32.5831 31.2225 32.5831 29.7497C32.5831 28.2769 31.3893 27.083 29.9166 27.083C28.4439 27.083 27.25 28.2769 27.25 29.7497C27.25 31.2225 28.4439 32.4164 29.9166 32.4164Z M33.2505 33.0828L31.8005 31.6328",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(43, 189, 160, 1)",
|
|
fillGradient: ["rgba(43, 189, 160, 1)", "rgba(43, 189, 160, 1)"],
|
|
originalIcon: "",
|
|
useStroke: true,
|
|
svgViewBox: "0 0 48 48",
|
|
},
|
|
repeat: {
|
|
icon: "M7.417 8.667V11.167H9.917 M16.583 15.333V12.833H14.083 M15.538 10.75C15.326 10.153 14.967 9.619 14.494 9.198C14.020 8.777 13.448 8.483 12.830 8.343C12.212 8.204 11.569 8.223 10.960 8.399C10.352 8.575 9.798 8.902 9.350 9.35L7.417 11.167M16.583 12.833L14.650 14.65C14.202 15.098 13.648 15.425 13.040 15.601C12.431 15.777 11.788 15.796 11.170 15.657C10.552 15.517 9.980 15.223 9.507 14.802C9.033 14.381 8.674 13.847 8.463 13.25",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(242, 101, 59, 1)",
|
|
fillGradient: ["rgba(242, 101, 59, 1)", "rgba(242, 101, 59, 1)"],
|
|
originalIcon: <CachedIcon />,
|
|
useStroke: true,
|
|
dropdownViewBox: "5 7 14 10",
|
|
},
|
|
// repeat: {
|
|
// icon: "M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: defaultColor,
|
|
// originalIcon: <CachedIcon />,
|
|
// },
|
|
|
|
add: {
|
|
icon: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: defaultColor,
|
|
originalIcon: <AddIcon />,
|
|
},
|
|
// edit: {
|
|
// icon: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: defaultColor,
|
|
// originalIcon: <EditIcon />,
|
|
// },
|
|
edit: {
|
|
icon: "M27.75 17.25C27.947 17.053 28.1808 16.8967 28.4382 16.7901C28.6956 16.6835 28.9714 16.6287 29.25 16.6287C29.5286 16.6287 29.8044 16.6835 30.0618 16.7901C30.3192 16.8967 30.553 17.053 30.75 17.25C30.947 17.447 31.1032 17.6808 31.2098 17.9382C31.3165 18.1956 31.3713 18.4714 31.3713 18.75C31.3713 19.0286 31.3165 19.3044 31.2098 19.5618C31.1032 19.8191 30.947 20.053 30.75 20.25L20.625 30.375L16.5 31.5L17.625 27.375L27.75 17.25Z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(242, 101, 59, 1)",
|
|
fillGradient: ["rgba(242, 101, 59, 1)", "rgba(242, 101, 59, 1)"],
|
|
originalIcon: <EditIcon />,
|
|
useStroke: true,
|
|
svgViewBox: "0 0 48 48",
|
|
},
|
|
// filter: {
|
|
// icon: "M4.25 5.61C6.27 8.2 10 13 10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-6s3.72-4.8 5.74-7.39c.51-.66.04-1.61-.79-1.61H5.04c-.83 0-1.3.95-.79 1.61z",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: "#f5515f",
|
|
// originalIcon: "",
|
|
// fillGradient: ["#f5515f", "#a1051d"],
|
|
// },
|
|
filter: {
|
|
icon: "M31.25 17C31.25 16.8619 31.1381 16.75 31 16.75H17C16.8619 16.75 16.75 16.8619 16.75 17V18.5859C16.75 18.6522 16.7764 18.7158 16.8232 18.7627L21.2373 23.1768C21.5655 23.5049 21.75 23.95 21.75 24.4141V30.958L26.25 29.459V24.4141C26.25 23.95 26.4345 23.5049 26.7627 23.1768L31.1768 18.7627C31.2236 18.7158 31.25 18.6522 31.25 18.5859V17ZM32.75 18.5859C32.75 19.05 32.5655 19.4951 32.2373 19.8232L27.8232 24.2373C27.7764 24.2842 27.75 24.3478 27.75 24.4141V29.6396C27.75 30.1769 27.4066 30.6558 26.8955 30.8262L21.8955 32.4922C21.0874 32.7615 20.2509 32.1611 20.25 31.3076V24.4141C20.25 24.3478 20.2236 24.2842 20.1768 24.2373L15.7627 19.8232C15.4345 19.4951 15.25 19.05 15.25 18.5859V17C15.25 16.0335 16.0335 15.25 17 15.25H31C31.9665 15.25 32.75 16.0335 32.75 17V18.5859Z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(217, 56, 136, 1)",
|
|
originalIcon: "",
|
|
fillGradient: ["rgba(217, 56, 136, 1)", "rgba(217, 56, 136, 1)"],
|
|
fillRule: "evenodd",
|
|
svgViewBox: "0 0 48 48",
|
|
},
|
|
// merge: {
|
|
// icon: "M17 20.41 18.41 19 15 15.59 13.59 17 17 20.41zM7.5 8H11v5.59L5.59 19 7 20.41l6-6V8h3.5L12 3.5 7.5 8z",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: "#f5515f",
|
|
// originalIcon: "",
|
|
// fillGradient: ["#f5515f", "#a1051d"],
|
|
// },
|
|
merge: {
|
|
icon: "M23.4692 16.2696C23.7621 15.9768 24.2369 15.9769 24.5298 16.2696L29.3032 21.0421C29.5961 21.335 29.5961 21.8107 29.3032 22.1036C29.0103 22.3963 28.5345 22.3964 28.2417 22.1036L24.7495 18.6104V23.0802C24.7497 23.0867 24.7505 23.0932 24.7505 23.0997V24.0001C24.7507 28.0592 28.0409 31.3497 32.1001 31.3497C32.5141 31.3498 32.85 31.6857 32.8501 32.0997C32.8501 32.5138 32.5142 32.8496 32.1001 32.8497C28.4809 32.8497 25.3708 30.6766 23.9995 27.5645C22.6281 30.6765 19.519 32.8497 15.8999 32.8497C15.4857 32.8497 15.1499 32.5139 15.1499 32.0997C15.15 31.6856 15.4858 31.3497 15.8999 31.3497C19.9591 31.3497 23.2493 28.0592 23.2495 24.0001V18.6104L19.7573 22.1036C19.4644 22.3963 18.9886 22.3964 18.6958 22.1036C18.4032 21.8108 18.4032 21.3349 18.6958 21.0421L23.4692 16.2696Z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(217, 56, 136, 1)",
|
|
originalIcon: "",
|
|
fillGradient: ["rgba(217, 56, 136, 1)", "rgba(217, 56, 136, 1)"],
|
|
useStroke: false,
|
|
useFill: true,
|
|
svgViewBox: "0 0 48 48",
|
|
},
|
|
// compare: {
|
|
// icon: "M10 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h5v2h2V1h-2v2zm0 15H5l5-6v6zm9-15h-5v2h5v13l-5-6v9h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: defaultColor,
|
|
// originalIcon: <CompareIcon />,
|
|
// },
|
|
compare: {
|
|
icon: "M19 15.75H23.7832V32.25H19C17.7574 32.25 16.75 31.2426 16.75 30V18C16.75 16.8352 17.6352 15.8771 18.7695 15.7617L19 15.75Z M26.667 16.125H29.0003C30.6572 16.125 32.0003 17.4681 32.0003 19.125V28.875C32.0003 30.5319 30.6572 31.875 29.0003 31.875H26.667",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(242, 101, 59, 1)",
|
|
originalIcon: "",
|
|
fillGradient: ["rgba(242, 101, 59, 1)", "rgba(242, 101, 59, 1)"],
|
|
useStroke: true,
|
|
useFill: true,
|
|
svgViewBox: "0 0 48 48",
|
|
},
|
|
extract: {
|
|
icon: "M3 3h18v2H3z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: defaultColor,
|
|
originalIcon: <MaximizeIcon />,
|
|
},
|
|
inflate: {
|
|
icon: "M6 19h12v2H6z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: defaultColor,
|
|
originalIcon: <MinimizeIcon />,
|
|
},
|
|
list: {
|
|
icon: "M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: defaultColor,
|
|
originalIcon: <TocIcon />,
|
|
},
|
|
// execute: {
|
|
// icon: "M8 5v14l11-7z",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: defaultColor,
|
|
// originalIcon: <PlayArrowIcon />,
|
|
// },
|
|
execute: {
|
|
icon: "M17.3335 28.1667L22.3335 23.1667L17.3335 18.1667 M24 29.8333H30.6667",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(242, 101, 59, 1)",
|
|
fillGradient: ["rgba(242, 101, 59, 1)", "rgba(242, 101, 59, 1)"],
|
|
originalIcon: <PlayArrowIcon />,
|
|
useStroke: true,
|
|
svgViewBox: "0 0 48 48",
|
|
},
|
|
// delete: {
|
|
// icon: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: "#03030e",
|
|
// originalIcon: <DeleteIcon />,
|
|
// fillGradient: ["#03030e", "#205d66"],
|
|
// },
|
|
delete: {
|
|
icon: "M15 18.5H33C31.5955 18.5 30.8933 18.5 30.3889 18.8371C30.1705 18.983 29.983 19.1705 29.8371 19.3889C29.5 19.8933 29.5 20.5955 29.5 22V27.5C29.5 29.3856 29.5 30.3284 28.9142 30.9142C28.3284 31.5 27.3856 31.5 25.5 31.5H22.5C20.6144 31.5 19.6716 31.5 19.0858 30.9142C18.5 30.3284 18.5 29.3856 18.5 27.5V22C18.5 20.5955 18.5 19.8933 18.1629 19.3889C18.017 19.1705 17.8295 18.983 17.6111 18.8371C17.1067 18.5 16.4045 18.5 15 18.5Z M21.5 15.5002C21.5 15.5002 22 14.5 24 14.5C26 14.5 26.5 15.5 26.5 15.5",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(98, 98, 98, 1)",
|
|
originalIcon: "",
|
|
fillGradient: ["rgba(98, 98, 98, 1)", "rgba(98, 98, 98, 1)"],
|
|
useStroke: true,
|
|
svgViewBox: "0 0 48 48",
|
|
},
|
|
close: {
|
|
icon: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "#03030e",
|
|
originalIcon: <CloseIcon />,
|
|
fillGradient: ["#03030e", "#205d66"],
|
|
},
|
|
// send: {
|
|
// icon: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: "#0373da",
|
|
// originalIcon: <SendIcon />,
|
|
// fillGradient: ["#0bc8bf", "#0373da"],
|
|
// },
|
|
send: {
|
|
icon: "M31.3332 16.6667L22.1665 25.8334 M31.3332 16.6667L25.4998 33.3334L22.1665 25.8334L14.6665 22.5001L31.3332 16.6667Z",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(128, 107, 255, 1)",
|
|
originalIcon: "",
|
|
fillGradient: ["rgba(128, 107, 255, 1)", "rgba(128, 107, 255 , 1)"],
|
|
useStroke: true,
|
|
svgViewBox: "0 0 48 48",
|
|
},
|
|
// download: {
|
|
// icon: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z",
|
|
// iconColor: "white",
|
|
// iconBackgroundColor: "#0373da",
|
|
// originalIcon: <GetAppIcon />,
|
|
// fillGradient: ["#0bc8bf", "#0373da"],
|
|
// },
|
|
download: {
|
|
icon: "M18 22L24 28M24 28L30 22M24 28L24 16 M17 33H31",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "rgba(128, 107, 255, 1)",
|
|
originalIcon: "",
|
|
fillGradient: ["rgba(128, 107, 255, 1)", "rgba(128, 107, 255, 1)"],
|
|
useStroke: true,
|
|
svgViewBox: "0 0 48 48",
|
|
},
|
|
search: {
|
|
icon: "M21 29C25.4183 29 29 25.4183 29 21C29 16.5817 25.4183 13 21 13C16.5817 13 13 16.5817 13 21C13 25.4183 16.5817 29 21 29Z M33 33L26.657 26.657",
|
|
iconColor: "white",
|
|
originalIcon: <SearchIcon />,
|
|
useStroke: true,
|
|
svgViewBox: "0 0 48 48",
|
|
iconBackgroundColor: "rgba(242, 101, 59, 1)",
|
|
fillGradient: ["rgba(242, 101, 59, 1)", "rgba(242, 101, 59, 1)"],
|
|
},
|
|
eradication: {
|
|
icon: "",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "green",
|
|
originalIcon: <CoronavirusIcon />,
|
|
},
|
|
iam: {
|
|
icon: "",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "green",
|
|
originalIcon: <FingerprintIcon />,
|
|
},
|
|
intel: {
|
|
icon: "",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "green",
|
|
originalIcon: <PsychologyIcon />,
|
|
},
|
|
network: {
|
|
icon: "",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "green",
|
|
originalIcon: <WifiIcon />,
|
|
},
|
|
assets: {
|
|
icon: "",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "green",
|
|
originalIcon: <DevicesIcon />,
|
|
},
|
|
secret: {
|
|
icon: "",
|
|
iconColor: "white",
|
|
iconBackgroundColor: "green",
|
|
originalIcon: <LockIcon />,
|
|
},
|
|
}
|
|
|
|
/*
|
|
{ key: "eradication", values: ["eradication", "edr", "xdr"] },
|
|
{ key: "iam", values: ["iam", "identity", "access", "auth", "authentication", "authorization", "oauth", "sso", "openid"] },
|
|
{ key: "intel", values: ["intel", "threat intel", "threat intelligence", "ti", "t.i.", "t.i", "ti."] },
|
|
{ key: "network", values: ["network", "net", "networking", "firewall", "proxy", "vpn", "sdwan", "sd-wan"] },
|
|
{ key: "siem", values: ["siem", "security information and event management", "security information and event management", "security information and event management"] },
|
|
*/
|
|
|
|
var selectedItem = parsedIcons[selectedKey];
|
|
if (selectedItem === undefined || selectedItem === null) {
|
|
return {
|
|
icon: "",
|
|
iconColor: "",
|
|
iconBackground: "black",
|
|
originalIcon: "",
|
|
};
|
|
}
|
|
|
|
if (selectedItem.fillGradient === undefined) {
|
|
selectedItem.fillGradient = defaultGradient;
|
|
selectedItem.iconBackgroundColor = defaultColor;
|
|
}
|
|
|
|
if ((selectedItem.icon === "" || selectedItem.icon === undefined) && (selectedItem.originalIcon === undefined || selectedItem.originalIcon === "")) {
|
|
console.log(`MISSING PATH FOR ${selectedKey} (find in scope): `, selectedItem.originalIcon.type.type)
|
|
}
|
|
|
|
if (
|
|
selectedItem.icon !== "" &&
|
|
selectedItem.icon !== undefined
|
|
) {
|
|
const iconViewBox = selectedItem.svgViewBox || `0 0 ${svgSize} ${svgSize}`;
|
|
// Use a tighter viewBox for dropdown icons so 48x48 centered content appears larger
|
|
const dropdownViewBox = selectedItem.dropdownViewBox || (iconViewBox === "0 0 48 48" ? "10 10 28 28" : iconViewBox);
|
|
const strokeW = iconViewBox === "0 0 48 48" ? "1.5" : "1";
|
|
// Build dropdown React SVG using the same stroke/fill logic as buildIconSvgPath
|
|
var svg_pin;
|
|
if (selectedItem.useStroke && selectedItem.useFill) {
|
|
svg_pin = (
|
|
<svg width={22} height={22} viewBox={dropdownViewBox} version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<path d={selectedItem.icon} fill="currentColor" stroke="currentColor" strokeWidth={strokeW} strokeLinecap="round" strokeLinejoin="round"></path>
|
|
</svg>
|
|
);
|
|
} else if (selectedItem.useStroke) {
|
|
svg_pin = (
|
|
<svg width={22} height={22} viewBox={dropdownViewBox} version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<path d={selectedItem.icon} fill="none" stroke="currentColor" strokeWidth={strokeW} strokeLinecap="round" strokeLinejoin="round"></path>
|
|
</svg>
|
|
);
|
|
} else {
|
|
svg_pin = (
|
|
<svg width={22} height={22} viewBox={dropdownViewBox} version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<path d={selectedItem.icon} fill="currentColor" fillRule={selectedItem.fillRule || "nonzero"}></path>
|
|
</svg>
|
|
);
|
|
}
|
|
selectedItem.originalIcon = svg_pin;
|
|
}
|
|
|
|
return selectedItem;
|
|
};
|
|
|
|
// Builds the SVG <path .../> string for an icon with the proper fill/stroke attributes.
|
|
// color: the fill/stroke color (e.g. "white" for cytoscape nodes, "currentColor" for React)
|
|
// Returns an SVG path element string ready to embed inside an <svg> tag.
|
|
export const buildIconSvgPath = (iconInfo, color) => {
|
|
const iconViewBox = iconInfo.svgViewBox || "0 0 24 24";
|
|
// For stroke icons: use proportional stroke width (0.75 for 24x24, 1.5 for 48x48)
|
|
// This ensures consistent visual appearance across different viewBox sizes
|
|
const strokeW = iconInfo.useStroke
|
|
? (iconViewBox === "0 0 48 48" ? "1.5" : "0.75")
|
|
: (iconInfo.useFill ? "0" : "1.5");
|
|
if (iconInfo.useStroke && iconInfo.useFill) {
|
|
return `<path d="${iconInfo.icon}" fill="${color}" stroke="${color}" stroke-width="${strokeW}" stroke-linecap="round" stroke-linejoin="round"/>`;
|
|
} else if (iconInfo.useStroke) {
|
|
return `<path d="${iconInfo.icon}" fill="none" stroke="${color}" stroke-width="${strokeW}" stroke-linecap="round" stroke-linejoin="round"/>`;
|
|
} else {
|
|
return `<path d="${iconInfo.icon}" fill="${color}"${iconInfo.fillRule ? ` fill-rule="${iconInfo.fillRule}"` : ""}/>`;
|
|
}
|
|
};
|
|
|
|
export const collapseField = (field, inputdata) => {
|
|
if (field === undefined || field === null) {
|
|
return true
|
|
}
|
|
|
|
if (field.namespace !== undefined && field.namespace !== null && field.namespace.length === 1) {
|
|
return false
|
|
}
|
|
|
|
if (field.name === "headers" || field.name === "cookies") {
|
|
return true
|
|
}
|
|
|
|
if (field.name === "result") {
|
|
return false
|
|
}
|
|
|
|
if (field.type === "array") {
|
|
return true
|
|
}
|
|
|
|
// If more than 10 keys in object, collapse
|
|
if (field.type === "object") {
|
|
if (Object.keys(field.src).length > 7) {
|
|
return true
|
|
}
|
|
}
|
|
|
|
return false
|
|
}
|
|
|
|
export const validateJson = (showResult) => {
|
|
if (showResult === undefined || showResult === null) {
|
|
return {
|
|
valid: false,
|
|
result: showResult,
|
|
}
|
|
}
|
|
|
|
if (typeof showResult === 'string') {
|
|
showResult = showResult.split(" False").join(" false")
|
|
showResult = showResult.split(" True").join(" true")
|
|
|
|
showResult.replaceAll("False,", "false,")
|
|
showResult.replaceAll("True,", "true,")
|
|
}
|
|
|
|
if (typeof showResult === "object" || typeof showResult === "array") {
|
|
//console.log("Valid!: ", showResult)
|
|
// FIXME: Not returning as we want to recurse.
|
|
|
|
return {
|
|
valid: true,
|
|
result: showResult,
|
|
}
|
|
}
|
|
|
|
if (showResult[0] === "\"") {
|
|
return {
|
|
valid: false,
|
|
result: showResult,
|
|
}
|
|
}
|
|
|
|
var jsonvalid = true
|
|
try {
|
|
if (!showResult.includes("{") && !showResult.includes("[")) {
|
|
jsonvalid = false
|
|
|
|
return {
|
|
valid: jsonvalid,
|
|
result: showResult,
|
|
};
|
|
}
|
|
} catch (e) {
|
|
|
|
try {
|
|
showResult = showResult.split("'").join('"');
|
|
if (!showResult.includes("{") && !showResult.includes("[")) {
|
|
jsonvalid = false;
|
|
}
|
|
} catch (e) {
|
|
|
|
jsonvalid = false;
|
|
}
|
|
}
|
|
|
|
var result = showResult;
|
|
try {
|
|
result = jsonvalid ? JSON.parse(showResult, { "storeAsString": true }) : showResult;
|
|
} catch (e) {
|
|
////console.log("Failed parsing JSON even though its valid: ", e)
|
|
jsonvalid = false;
|
|
}
|
|
|
|
if (jsonvalid === false) {
|
|
|
|
if (typeof showResult === 'string') {
|
|
showResult = showResult.trim()
|
|
}
|
|
|
|
try {
|
|
var newstr = showResult.replaceAll("'", '"')
|
|
|
|
// Basic workarounds for issues with Python Dicts -> JSON
|
|
if (newstr.includes(": None")) {
|
|
newstr = newstr.replaceAll(": None", ': null')
|
|
}
|
|
|
|
if (newstr.includes("[\"{") && newstr.includes("}\"]")) {
|
|
newstr = newstr.replaceAll("[\"{", '[{')
|
|
newstr = newstr.replaceAll("}\"]", '}]')
|
|
}
|
|
|
|
if (newstr.includes("{\"[") && newstr.includes("]\"}")) {
|
|
newstr = newstr.replaceAll("{\"[", '[{')
|
|
newstr = newstr.replaceAll("]\"}", '}]')
|
|
}
|
|
|
|
result = JSON.parse(newstr)
|
|
jsonvalid = true
|
|
} catch (e) {
|
|
|
|
//console.log("Failed parsing JSON even though its valid (2): ", e)
|
|
jsonvalid = false
|
|
}
|
|
}
|
|
|
|
if (jsonvalid && typeof result === "number") {
|
|
jsonvalid = false
|
|
}
|
|
|
|
// This is where we start recursing
|
|
// Problem: Loops aren't recursed properly.
|
|
if (jsonvalid) {
|
|
// Check fields if they can be parsed too
|
|
try {
|
|
for (const [key, value] of Object.entries(result)) {
|
|
if (value === null || value === undefined) {
|
|
continue
|
|
}
|
|
|
|
try {
|
|
if (typeof value === "string" && (value.startsWith("{") || value.startsWith("["))) {
|
|
//console.log("CHECKING STRING: ", value)
|
|
|
|
const inside_result = validateJson(value)
|
|
if (inside_result.valid) {
|
|
if (typeof inside_result.result === "string") {
|
|
const newres = JSON.parse(inside_result.result)
|
|
|
|
result[key] = newres
|
|
} else {
|
|
result[key] = inside_result.result
|
|
}
|
|
}
|
|
} else {
|
|
// Usually only reaches here if raw array > dict > value
|
|
if (typeof showResult !== "array") {
|
|
for (const [subkey, subvalue] of Object.entries(value)) {
|
|
if (typeof subvalue === "string" && (subvalue.startsWith("{") || subvalue.startsWith("["))) {
|
|
const inside_result = validateJson(subvalue)
|
|
if (inside_result.valid) {
|
|
if (typeof inside_result.result === "string") {
|
|
const newres = JSON.parse(inside_result.result)
|
|
result[key][subkey] = newres
|
|
} else {
|
|
result[key][subkey] = inside_result.result
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
} else {
|
|
console.log("Skip array: ", value)
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.log(`Failed to parse '${key}': '${value}': `, e, JSON.stringify(result))
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.log("Failed parsing inside json subvalues: ", e, result)
|
|
}
|
|
}
|
|
|
|
//console.log("Result: ", result)
|
|
|
|
try {
|
|
const stringified = JSON.stringify(result)
|
|
if ((stringified.startsWith("{") && stringified.endsWith("}")) || (stringified.startsWith("[") && stringified.endsWith("]"))) {
|
|
result = JSON.parse(stringified)
|
|
jsonvalid = true
|
|
}
|
|
} catch(e) {
|
|
jsonvalid = false
|
|
}
|
|
|
|
const toReturn = {
|
|
result: result,
|
|
valid: jsonvalid,
|
|
}
|
|
|
|
return toReturn
|
|
};
|
|
|
|
//Custom hook for handling styling of the dropzone
|
|
const useDropzoneStyles = () => {
|
|
const { leftSideBarOpenByClick, themeMode, brandColor } = useContext(Context);
|
|
const theme = getTheme(themeMode, brandColor);
|
|
|
|
return React.useMemo(() => ({
|
|
paddingTop: 70,
|
|
// minHeight: 1000,
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
fontFamily: theme.typography?.fontFamily,
|
|
// maxWidth: window.innerWidth > 1366 ? 1366 : isMobile ? "100%" : 1200,
|
|
paddingLeft: leftSideBarOpenByClick ? 200 : 0,
|
|
transition: "padding-left 0.3s ease",
|
|
}), [leftSideBarOpenByClick, theme]);
|
|
};
|
|
|
|
//Wrapper for the dropzone component
|
|
const DropzoneWrapper = memo(({ onDrop, WorkflowView }) => {
|
|
const dropzoneStyles = useDropzoneStyles();
|
|
return (
|
|
<Dropzone style={dropzoneStyles} onDrop={onDrop}>
|
|
<WorkflowView />
|
|
</Dropzone>
|
|
);
|
|
});
|
|
|
|
const Workflows2 = (props) => {
|
|
const { globalUrl, isLoggedIn, isLoaded, userdata, checkLogin } = props;
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const [currTab, setCurrTab] = useState(0);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [selectedCategory, setSelectedCategory] = useState([]);
|
|
const [selectedLabel, setSelectedLabel] = useState([]);
|
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1);
|
|
const [isLoadingWorkflow, setIsLoadingWorkflow] = useState(false);
|
|
const [isLoadingPublicWorkflow, setIsLoadingPublicWorkflow] = useState(false);
|
|
const [view, setView] = useState(localStorage?.getItem("workflowView") || "grid");
|
|
const [currentOrg, setCurrentOrg] = useState(null);
|
|
|
|
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
|
|
const [showExecutionStats, setShowExecutionStats] = React.useState(localStorage?.getItem("showExecutionStats") === "true")
|
|
const [showWorkflowImages, setShowWorkflowImages] = React.useState(localStorage?.getItem("showWorkflowImages") === "true")
|
|
|
|
const imgSize = 60;
|
|
|
|
const { themeMode, brandColor, brandName } = useContext(Context);
|
|
const theme = getTheme(themeMode, brandColor);
|
|
const chipStyle = {
|
|
backgroundColor: theme.palette.chipStyle.backgroundColor,
|
|
marginRight: 5,
|
|
paddingLeft: 5,
|
|
paddingRight: 5,
|
|
height: 35,
|
|
cursor: "pointer",
|
|
borderColor: theme.palette.chipStyle.borderColor,
|
|
color: theme.palette.chipStyle.color,
|
|
fontSize: "14px",
|
|
fontFamily: theme.typography?.fontFamily,
|
|
borderRadius: "17.5px"
|
|
};
|
|
|
|
const newStyles = makeStyles(() => {
|
|
|
|
return {
|
|
datagrid: {
|
|
border: 0,
|
|
"& .MuiDataGrid-columnsContainer": {
|
|
backgroundColor:
|
|
theme.palette?.type === "light" ? "#fafafa" : theme.palette?.inputColor,
|
|
},
|
|
"& .MuiDataGrid-iconSeparator": {
|
|
display: "none",
|
|
},
|
|
"& .MuiDataGrid-colCell, .MuiDataGrid-cell": {
|
|
borderRight: `1px solid ${theme.palette?.type === "light" ? "white" : "#303030"
|
|
}`,
|
|
},
|
|
"& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell": {
|
|
borderBottom: `1px solid ${theme.palette?.type === "light" ? "#f0f0f0" : "#303030"
|
|
}`,
|
|
},
|
|
"& .MuiDataGrid-cell": {
|
|
color:
|
|
theme.palette?.type === "light" ? "white" : "rgba(255,255,255,0.65)",
|
|
},
|
|
"& .MuiPaginationItem-root, .MuiTablePagination-actions, .MuiTablePagination-caption":
|
|
{
|
|
borderRadius: 0,
|
|
color: "white",
|
|
},
|
|
},
|
|
}
|
|
})
|
|
|
|
const classes = newStyles(theme);
|
|
|
|
const referenceUrl = globalUrl + "/api/v1/hooks/";
|
|
|
|
var upload = "";
|
|
|
|
const [workflows, setWorkflows] = React.useState([]);
|
|
const [workflowTimelines, setWorkflowTimelines] = React.useState([]);
|
|
const [backgroundWorkflows, setBackgroundWorkflows] = React.useState([]);
|
|
const [backupWorkflows, setBackupWorkflows] = React.useState([]);
|
|
const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
|
|
const [selectedUsecases, setSelectedUsecases] = React.useState([]);
|
|
const [filteredWorkflows, setFilteredWorkflows] = React.useState([]);
|
|
const [orgWorkflows, setOrgWorkflows] = React.useState([]);
|
|
const [myWorkflows, setMyWorkflows] = React.useState([]);
|
|
const [selectedWorkflow, setSelectedWorkflow] = React.useState({});
|
|
const [workflowDone, setWorkflowDone] = React.useState(false);
|
|
const [selectedWorkflowId, setSelectedWorkflowId] = React.useState("");
|
|
|
|
const [field1, setField1] = React.useState("");
|
|
const [field2, setField2] = React.useState("");
|
|
const [downloadUrl, setDownloadUrl] = React.useState("https://github.com/shuffle/workflows")
|
|
const [downloadBranch, setDownloadBranch] = React.useState("main");
|
|
const [loadWorkflowsModalOpen, setLoadWorkflowsModalOpen] =
|
|
React.useState(false);
|
|
const [syncMode, setSyncMode] = React.useState(false);
|
|
const [remoteWorkflows, setRemoteWorkflows] = React.useState([]);
|
|
const [remoteWorkflowsLoading, setRemoteWorkflowsLoading] = React.useState(false);
|
|
const [syncListModalOpen, setSyncListModalOpen] = React.useState(false);
|
|
const [exportModalOpen, setExportModalOpen] = React.useState(false);
|
|
const [exportData, setExportData] = React.useState("");
|
|
const [dialogModalOpen, setDialogModalOpen] = React.useState(false);
|
|
const [modalOpen, setModalOpen] = React.useState(false);
|
|
const [isEditing, setIsEditing] = React.useState(true);
|
|
const [newWorkflowName, setNewWorkflowName] = React.useState("");
|
|
const [newWorkflowDescription, setNewWorkflowDescription] =
|
|
React.useState("");
|
|
const [newWorkflowTags, setNewWorkflowTags] = React.useState([]);
|
|
|
|
const [defaultReturnValue, setDefaultReturnValue] = React.useState("");
|
|
const [blogpost, setBlogpost] = React.useState("");
|
|
const [status, setStatus] = React.useState("test");
|
|
|
|
const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
|
|
const [publishModalOpen, setPublishModalOpen] = React.useState(false);
|
|
const [editingWorkflow, setEditingWorkflow] = React.useState({});
|
|
const [isDropzone, setIsDropzone] = React.useState(false);
|
|
const [filters, setFilters] = React.useState([]);
|
|
const [submitLoading, setSubmitLoading] = React.useState(false);
|
|
const [actionImageList, setActionImageList] = React.useState([{ "large_image": "" }])
|
|
|
|
const [firstLoad, setFirstLoad] = React.useState(true);
|
|
const [aiAnnouncementModalOpen, setAiAnnouncementModalOpen] = React.useState(false);
|
|
const sessionRef = useRef("");
|
|
const [showMoreClicked, setShowMoreClicked] = React.useState(false);
|
|
const [usecases, setUsecases] = React.useState([]);
|
|
const [allUsecases, setAllUsecases] = React.useState({
|
|
"success": false,
|
|
});
|
|
const [appFramework, setAppFramework] = React.useState({});
|
|
const [drawerOpen, setDrawerOpen] = React.useState(false)
|
|
const [videoViewOpen, setVideoViewOpen] = React.useState(false)
|
|
const [gettingStartedItems, setGettingStartedItems] = React.useState([])
|
|
const [selectedWorkflowIndexes, setSelectedWorkflowIndexes] = React.useState([])
|
|
const [page, setPage] = React.useState(0);
|
|
const [pageSize, setPageSize] = React.useState(100);
|
|
const [highlightIds, setHighlightIds] = React.useState([])
|
|
|
|
const [apps, setApps] = React.useState([]);
|
|
const [isProdStatusOn, setIsProdStatusOn] = React.useState(false);
|
|
|
|
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
|
|
document.title = brandName?.length > 0 ? `${brandName} - Workflows` : "Shuffle - Workflows";
|
|
|
|
useEffect(() => {
|
|
const queryParams = new URLSearchParams(location.search);
|
|
const tabParam = queryParams.get('tab');
|
|
if (tabParam !== null && tabParam !== undefined) {
|
|
if (tabParam === 'org_workflows' && currTab !== 0) {
|
|
setCurrTab(0);
|
|
} else if (tabParam === 'my_workflows' && currTab !== 1) {
|
|
setCurrTab(1);
|
|
} else if (tabParam === 'all_workflows' && currTab !== 2) {
|
|
setCurrTab(2);
|
|
} else if (tabParam === 'background_processes' && currTab !== 4) {
|
|
setCurrTab(4);
|
|
}
|
|
}
|
|
}, [location.search]);
|
|
|
|
useEffect(() => {
|
|
const orgId = userdata?.active_org?.id;
|
|
if (!orgId) {
|
|
return;
|
|
}
|
|
|
|
let fetched = false;
|
|
fetch(`${globalUrl}/api/v1/orgs/${orgId}`, {
|
|
method: "GET",
|
|
credentials: "include",
|
|
headers: { "Content-Type": "application/json" },
|
|
})
|
|
.then((response) => (response.ok ? response.json() : null))
|
|
.then((org) => {
|
|
if (!fetched && org) {
|
|
if (!isCloud) {
|
|
setCurrentOrg(org);
|
|
if (org?.cloud_sync && org?.subscriptions[0]?.name?.toLowerCase().includes("enterprise") && org?.subscriptions[0]?.active) {
|
|
setIsProdStatusOn(true);
|
|
} else if (org?.subscriptions[0]?.name?.toLowerCase().includes("enterprise") && org?.subscriptions[0]?.active) {
|
|
setIsProdStatusOn(true);
|
|
} else {
|
|
setIsProdStatusOn(false);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
|
|
return () => {
|
|
fetched = true;
|
|
};
|
|
}, [userdata?.active_org?.id, globalUrl]);
|
|
|
|
const handleTabChange = (event, newValue) => {
|
|
setCurrTab(newValue);
|
|
|
|
//if (view === "list" && currTab > 0) {
|
|
// setView("grid")
|
|
// setUpdate(Math.random())
|
|
//}
|
|
|
|
// Update URL query params based on tab index
|
|
const tabMapping = {
|
|
0: 'org_workflows',
|
|
1: 'my_workflows',
|
|
2: 'all_workflows',
|
|
3: 'backup_apps',
|
|
4: 'background_processes',
|
|
};
|
|
const queryParams = new URLSearchParams(location.search);
|
|
queryParams.set('tab', tabMapping[newValue]);
|
|
|
|
if (newValue === 4) {
|
|
setShowExecutionStats(true)
|
|
setView("grid")
|
|
}
|
|
|
|
navigate(`${location.pathname}?${queryParams.toString()}`);
|
|
};
|
|
|
|
const handleCreateWorkflow = () => {
|
|
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "Workflow",
|
|
action: "Create_Workflow",
|
|
label: "Create New Workflow Button"
|
|
});
|
|
}
|
|
|
|
|
|
setModalOpen(true)
|
|
setIsEditing(false)
|
|
setNewWorkflowName("")
|
|
setNewWorkflowDescription("")
|
|
setDefaultReturnValue("")
|
|
setEditingWorkflow({})
|
|
setNewWorkflowTags([])
|
|
setSelectedUsecases([])
|
|
|
|
};
|
|
|
|
|
|
const drawerWidth = drawerOpen ? 325 : 0
|
|
|
|
const sidebarKey = "getting_started_sidebar"
|
|
if (isLoggedIn === true && gettingStartedItems.length === 0 && (userdata.tutorials !== undefined && userdata.tutorials !== null && userdata.tutorials.length > 0) && workflowDone === true) {
|
|
|
|
const activeFiltered = userdata.tutorials.filter((item) => item.active === true)
|
|
if (activeFiltered.length > 0) {
|
|
var newfiltered = []
|
|
for (var key in activeFiltered) {
|
|
if (activeFiltered[key].name === "Discover Usecases") {
|
|
if (workflows.length > 1) {
|
|
activeFiltered[key].done = true
|
|
activeFiltered[key].description = `${workflows.length} workflows created`
|
|
}
|
|
}
|
|
|
|
newfiltered.push(activeFiltered[key])
|
|
}
|
|
setGettingStartedItems(activeFiltered)
|
|
|
|
/*
|
|
const sidebar = localStorage.getItem(sidebarKey)
|
|
if (sidebar === null || sidebar === undefined) {
|
|
console.log("No sidebar defined")
|
|
|
|
localStorage.setItem(sidebarKey, "open");
|
|
setDrawerOpen(true)
|
|
} else {
|
|
if (sidebar === "open") {
|
|
setDrawerOpen(true)
|
|
} else {
|
|
setDrawerOpen(false)
|
|
}
|
|
}
|
|
*/
|
|
}
|
|
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
if (!isLoggedIn) return;
|
|
|
|
const bannerID = "banner_ai_announcement";
|
|
const cookieSession = getCookie("__session") || "";
|
|
sessionRef.current = cookieSession;
|
|
|
|
try {
|
|
const storedSession = localStorage.getItem(AI_ANNOUNCEMENT_SESSION_KEY) || "";
|
|
|
|
// If backend says it's dismissed, sync storage and exit
|
|
if (userdata && Array.isArray(userdata.tutorials)) {
|
|
const alreadyDismissed = userdata.tutorials.some((t) => t?.name === bannerID);
|
|
if (alreadyDismissed) {
|
|
if (cookieSession && storedSession !== cookieSession) {
|
|
localStorage.setItem(AI_ANNOUNCEMENT_SESSION_KEY, cookieSession);
|
|
}
|
|
return;
|
|
}
|
|
} else if (!userdata) {
|
|
// Wait for userdata to load
|
|
return;
|
|
}
|
|
|
|
// Open only if not dismissed in this session
|
|
if (cookieSession && storedSession !== cookieSession) {
|
|
setAiAnnouncementModalOpen(true);
|
|
}
|
|
} catch {
|
|
// If storage is unavailable, fallback to a single open per mount
|
|
setAiAnnouncementModalOpen((open) => open || true);
|
|
}
|
|
}, [isLoggedIn, userdata]);
|
|
|
|
const handleCloseAiAnnouncement = React.useCallback(() => {
|
|
try {
|
|
const cookieSession = sessionRef.current || getCookie("__session") || "";
|
|
if (cookieSession) {
|
|
localStorage.setItem(AI_ANNOUNCEMENT_SESSION_KEY, cookieSession);
|
|
}
|
|
} catch {
|
|
// ignore storage access issues
|
|
}
|
|
setAiAnnouncementModalOpen(false);
|
|
}, []);
|
|
|
|
|
|
const dismissAiAnnouncement = () => {
|
|
const bannerID = "banner_ai_announcement";
|
|
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "AIGeneratedNewWorkflow",
|
|
action: "dismiss_announcement",
|
|
label: userdata?.active_org?.id || userdata?.id || "",
|
|
});
|
|
}
|
|
|
|
handleCloseAiAnnouncement();
|
|
|
|
// Open Create Workflow modal (EditWorkflow) and temporarily highlight inputs/buttons
|
|
try {
|
|
setModalOpen(true)
|
|
setIsEditing(false)
|
|
setNewWorkflowName("")
|
|
setNewWorkflowDescription("")
|
|
setDefaultReturnValue("")
|
|
setEditingWorkflow({})
|
|
setNewWorkflowTags([])
|
|
setSelectedUsecases([])
|
|
|
|
// Wait a moment for the drawer to mount, then highlight
|
|
setTimeout(() => {
|
|
const BORDER = '#4CAF50';
|
|
const DURATION = 1500;
|
|
|
|
const highlightTextField = (inputEl) => {
|
|
if (!inputEl) return;
|
|
const formControl = inputEl.closest('.MuiFormControl-root') || inputEl.closest('.MuiInputBase-root') || inputEl.parentElement;
|
|
const inputRoot = formControl?.querySelector('.MuiOutlinedInput-root') || formControl?.querySelector('.MuiInputBase-root') || formControl;
|
|
const notch = formControl?.querySelector('fieldset');
|
|
|
|
const prevBoxShadow = inputRoot?.style?.boxShadow;
|
|
const prevBorderColor = notch?.style?.borderColor;
|
|
const prevBorderWidth = notch?.style?.borderWidth;
|
|
|
|
if (inputRoot) inputRoot.style.boxShadow = '0 0 0 3px rgba(76,175,80,0.45)';
|
|
if (notch) {
|
|
notch.style.borderColor = BORDER;
|
|
notch.style.borderWidth = '2px';
|
|
}
|
|
|
|
setTimeout(() => {
|
|
try {
|
|
if (inputRoot) inputRoot.style.boxShadow = prevBoxShadow || '';
|
|
if (notch) {
|
|
notch.style.borderColor = prevBorderColor || '';
|
|
notch.style.borderWidth = prevBorderWidth || '';
|
|
}
|
|
} catch (_) {}
|
|
}, DURATION);
|
|
};
|
|
|
|
const highlightButton = (btnEl) => {
|
|
if (!btnEl) return;
|
|
const prevBoxShadow = btnEl.style.boxShadow;
|
|
const prevBorder = btnEl.style.border;
|
|
const prevRadius = btnEl.style.borderRadius;
|
|
btnEl.style.boxShadow = '0 0 0 3px rgba(76,175,80,0.45)';
|
|
btnEl.style.border = '2px solid ' + BORDER;
|
|
btnEl.style.borderRadius = '6px';
|
|
setTimeout(() => {
|
|
try {
|
|
btnEl.style.boxShadow = prevBoxShadow || '';
|
|
btnEl.style.border = prevBorder || '';
|
|
btnEl.style.borderRadius = prevRadius || '';
|
|
} catch (_) {}
|
|
}, DURATION);
|
|
};
|
|
|
|
const nameEl = document.getElementById('Enter-Workflow-Name');
|
|
highlightTextField(nameEl);
|
|
|
|
const descEl = document.getElementById('Workflow-Description');
|
|
highlightTextField(descEl);
|
|
|
|
const aiBtn = document.getElementById('ai-generate-button');
|
|
highlightButton(aiBtn);
|
|
}, 250);
|
|
} catch (e) {
|
|
console.debug('Failed to open and highlight Create Workflow modal:', e);
|
|
}
|
|
|
|
fetch(globalUrl + '/api/v1/users/updateuser', {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
tutorial: bannerID,
|
|
user_id: userdata.id
|
|
}),
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Failed to dismiss AI announcement banner");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson.success) {
|
|
console.log("AI announcement banner dismissed successfully");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log("Error dismissing AI announcement:", error);
|
|
});
|
|
};
|
|
|
|
|
|
const findWorkflow = (filters) => {
|
|
console.log("Using filters: ", filters)
|
|
if (filters.length === 0) {
|
|
setFilteredWorkflows(workflows);
|
|
handleKeysetting(allUsecases, workflows)
|
|
return;
|
|
}
|
|
|
|
var newWorkflows = [];
|
|
for (var workflowKey in workflows) {
|
|
const curWorkflow = workflows[workflowKey];
|
|
|
|
var found = [false];
|
|
if (curWorkflow.tags === undefined || curWorkflow.tags === null) {
|
|
found = filters.map((filter) =>
|
|
curWorkflow.name.toLowerCase().includes(filter)
|
|
);
|
|
}
|
|
|
|
if (curWorkflow.tags !== undefined && curWorkflow.tags !== null && curWorkflow.tags.length > 0) {
|
|
// Make them all lowercase
|
|
curWorkflow.tags = curWorkflow.tags.map((tag) => tag.toLowerCase())
|
|
}
|
|
|
|
|
|
if (found.every((v) => v !== true)) {
|
|
found = filters.map((filter) => {
|
|
if (filter === undefined || filter === null) {
|
|
return false;
|
|
}
|
|
|
|
const newfilter = filter.toLowerCase();
|
|
|
|
if (curWorkflow.name.toLowerCase().includes(filter.toLowerCase())) {
|
|
return true;
|
|
} else if (curWorkflow.tags !== undefined && curWorkflow.tags !== null && curWorkflow.tags.includes(filter.toLowerCase())) {
|
|
return true;
|
|
} else if (curWorkflow.owner === filter) {
|
|
return true;
|
|
} else if (curWorkflow.org_id === filter) {
|
|
return true;
|
|
} else if (curWorkflow.usecase_ids !== undefined && curWorkflow.usecase_ids !== null && curWorkflow.usecase_ids.length > 0) {
|
|
// Check if the usecase is the right category
|
|
for (var key in usecases) {
|
|
if (usecases[key].name.toLowerCase() !== newfilter) {
|
|
continue
|
|
}
|
|
|
|
for (var subkey in usecases[key].list) {
|
|
if (curWorkflow.usecase_ids.includes(usecases[key].list[subkey].name)) {
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
} else if (
|
|
curWorkflow.actions !== null &&
|
|
curWorkflow.actions !== undefined
|
|
) {
|
|
for (var key in curWorkflow.actions) {
|
|
const action = curWorkflow.actions[key];
|
|
|
|
if (
|
|
action.app_name.toLowerCase() === newfilter ||
|
|
action.app_name.toLowerCase().includes(newfilter)
|
|
) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
|
|
return false;
|
|
});
|
|
}
|
|
|
|
if (found.every((v) => v === true)) {
|
|
newWorkflows.push(curWorkflow);
|
|
continue;
|
|
}
|
|
}
|
|
|
|
console.log("Changing workflow filter, and finding new usecase mappings!")
|
|
if (newWorkflows.length !== workflows.length) {
|
|
handleKeysetting(allUsecases, newWorkflows)
|
|
|
|
setFilteredWorkflows(newWorkflows);
|
|
}
|
|
};
|
|
|
|
const getApps = () => {
|
|
try {
|
|
const appstorage = localStorage.getItem("apps")
|
|
const privateapps = JSON.parse(appstorage)
|
|
setApps(privateapps)
|
|
} catch (e) {
|
|
//console.log("Failed to get apps from localstorage: ", e)
|
|
}
|
|
|
|
fetch(`${globalUrl}/api/v1/apps`, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for apps :O!");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
setApps(responseJson);
|
|
})
|
|
.catch((error) => {
|
|
console.log("App loading error: " + error.toString());
|
|
});
|
|
}
|
|
|
|
const addFilter = (data) => {
|
|
if (data === null || data === undefined) {
|
|
console.log("No filter data")
|
|
return;
|
|
}
|
|
|
|
if (data.includes("<") && data.includes(">")) {
|
|
console.log("Filter includes < or >")
|
|
return;
|
|
}
|
|
|
|
if (filters.includes(data) || filters.includes(data.toLowerCase())) {
|
|
console.log("Filter already has the data")
|
|
return;
|
|
}
|
|
|
|
filters.push(data.toLowerCase());
|
|
setFilters(filters);
|
|
|
|
findWorkflow(filters);
|
|
};
|
|
|
|
const removeFilter = (index) => {
|
|
var newfilters = filters;
|
|
|
|
if (index < 0) {
|
|
console.log("Can't handle index (remove): ", index);
|
|
return;
|
|
}
|
|
|
|
newfilters.splice(index, 1);
|
|
|
|
if (newfilters.length === 0) {
|
|
newfilters = [];
|
|
setFilters(newfilters);
|
|
} else {
|
|
setFilters(newfilters);
|
|
}
|
|
|
|
findWorkflow(newfilters);
|
|
};
|
|
|
|
const exportVerifyModal = exportModalOpen ? (
|
|
<Dialog
|
|
open={exportModalOpen}
|
|
onClose={() => {
|
|
setExportModalOpen(false);
|
|
setSelectedWorkflow({});
|
|
}}
|
|
PaperProps={{
|
|
style: {
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
color: "white",
|
|
minWidth: 500,
|
|
padding: 30,
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle style={{ marginBottom: 0 }}>
|
|
<div style={{ textAlign: "center", color: "rgba(255,255,255,0.9)" }}>
|
|
Want to auto-sanitize this workflow before exporting?
|
|
</div>
|
|
</DialogTitle>
|
|
<DialogContent
|
|
style={{ color: "rgba(255,255,255,0.65)", textAlign: "center" }}
|
|
>
|
|
<Typography variant="body1" style={{}}>
|
|
This will make potentially sensitive fields such as username,
|
|
password, url etc. empty
|
|
</Typography>
|
|
<Button
|
|
variant="contained"
|
|
style={{ marginTop: 20 }}
|
|
onClick={() => {
|
|
setExportModalOpen(false);
|
|
exportWorkflow(exportData, true);
|
|
setExportData("");
|
|
}}
|
|
color="primary"
|
|
>
|
|
Yes
|
|
</Button>
|
|
<Button
|
|
style={{ marginTop: 20 }}
|
|
onClick={() => {
|
|
setExportModalOpen(false);
|
|
exportWorkflow(exportData, false);
|
|
setExportData("");
|
|
}}
|
|
color="primary"
|
|
>
|
|
No
|
|
</Button>
|
|
</DialogContent>
|
|
</Dialog>
|
|
) : null;
|
|
|
|
const publishModal = publishModalOpen ? (
|
|
<Dialog
|
|
open={publishModalOpen}
|
|
onClose={() => {
|
|
setPublishModalOpen(false);
|
|
setSelectedWorkflow({});
|
|
}}
|
|
PaperProps={{
|
|
style: {
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
color: "white",
|
|
minWidth: 500,
|
|
padding: 50,
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle style={{ marginBottom: 0 }}>
|
|
<div style={{ textAlign: "center", color: "rgba(255,255,255,0.9)" }}>
|
|
Are you sure you want to PUBLISH this workflow?
|
|
</div>
|
|
</DialogTitle>
|
|
<DialogContent
|
|
style={{ color: "rgba(255,255,255,0.65)", textAlign: "center" }}
|
|
>
|
|
<div>
|
|
<Typography variant="body1" style={{ marginBottom: 20 }}>
|
|
Before publishing, we will sanitize all inputs, remove references to
|
|
you, randomize ID's and remove your authentication.
|
|
</Typography>
|
|
<Typography variant="body1" style={{ marginBottom: 20 }}>
|
|
The published workflow is yours, and you can always change your public workflows after they are released.
|
|
</Typography>
|
|
</div>
|
|
<Button
|
|
variant="contained"
|
|
style={{}}
|
|
onClick={() => {
|
|
publishWorkflow(selectedWorkflow);
|
|
setPublishModalOpen(false);
|
|
}}
|
|
color="primary"
|
|
>
|
|
Yes
|
|
</Button>
|
|
<Button
|
|
style={{}}
|
|
onClick={() => {
|
|
setPublishModalOpen(false);
|
|
}}
|
|
color="primary"
|
|
>
|
|
No
|
|
</Button>
|
|
</DialogContent>
|
|
</Dialog>
|
|
) : null;
|
|
|
|
const aiAnnouncementModal = aiAnnouncementModalOpen ? (
|
|
<Dialog
|
|
open={aiAnnouncementModalOpen}
|
|
onClose={handleCloseAiAnnouncement}
|
|
TransitionComponent={Zoom}
|
|
TransitionProps={{ timeout: 300 }}
|
|
PaperProps={{
|
|
style: {
|
|
background: theme.palette.DialogStyle.backgroundColor,
|
|
minWidth: isMobile ? "90vw" : 780,
|
|
maxWidth: isMobile ? "90vw" : 860,
|
|
borderRadius: 8,
|
|
overflow: "hidden",
|
|
transformOrigin: "center",
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle style={{ position: "relative", padding: 0, margin: 0 }}>
|
|
<IconButton
|
|
style={{
|
|
position: "absolute",
|
|
top: 10,
|
|
right: 10,
|
|
}}
|
|
onClick={
|
|
() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "AIGeneratedNewWorkflow",
|
|
action: "close_announcement",
|
|
label: userdata?.active_org?.id || userdata?.id || "",
|
|
});
|
|
}
|
|
handleCloseAiAnnouncement();
|
|
}
|
|
}
|
|
aria-label="Close"
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</DialogTitle>
|
|
<DialogContent
|
|
sx={{
|
|
height: "380px",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{/* Main two-column layout */}
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: { xs: "column", sm: "row" },
|
|
gap: { xs: 3, sm: 4 },
|
|
alignItems: "stretch",
|
|
p: { xs: 2.5, sm: 3 },
|
|
mt: 1,
|
|
}}
|
|
>
|
|
{/* Left: steps image (38%) */}
|
|
<Box
|
|
sx={{
|
|
flex: { xs: "0 0 auto", sm: "0 0 38%" },
|
|
maxWidth: { xs: "100%", sm: "38%" },
|
|
}}
|
|
>
|
|
<Box
|
|
component="img"
|
|
src="/aiGenerateWorkflowSteps.svg"
|
|
alt="AI workflow generation steps"
|
|
sx={{
|
|
width: "100%",
|
|
height: {xs: "auto", md: "80%"},
|
|
marginLeft: -2,
|
|
objectFit: "contain",
|
|
borderRadius: "6px",
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Right: content (62%) */}
|
|
<Box
|
|
sx={{
|
|
flex: { xs: "1 1 auto", sm: "0 0 62%" },
|
|
maxWidth: { xs: "100%", sm: "62%" },
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: { xs: 1.5, sm: 2 },
|
|
py: 1.2,
|
|
}}
|
|
>
|
|
{/* NEW badge */}
|
|
<Box
|
|
sx={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: 1,
|
|
py: 0.5,
|
|
px: 1.25,
|
|
border: "1px solid #2bc07e",
|
|
color: "#f85a3e",
|
|
background: "transparent",
|
|
borderRadius: 999,
|
|
width: "fit-content",
|
|
fontSize: 10,
|
|
fontWeight: 600,
|
|
mb: { xs: 0.5, sm: 1 },
|
|
}}
|
|
>
|
|
<AutoAwesomeIcon sx={{ fontSize: 16, color: "#2bc07e" }} />
|
|
<Box
|
|
component="span"
|
|
sx={{
|
|
color: "#2bc07e",
|
|
}}
|
|
>
|
|
NEW
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Title */}
|
|
<Typography
|
|
sx={{
|
|
fontWeight: 700,
|
|
lineHeight: 1.25,
|
|
fontFamily: theme.typography.fontFamily,
|
|
fontSize: { xs: "1.25rem", sm: "1.5rem" },
|
|
}}
|
|
>
|
|
Introducing AI Workflow Generation
|
|
</Typography>
|
|
|
|
{/* Body text */}
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
lineHeight: 1.7,
|
|
fontFamily: theme.typography.fontFamily,
|
|
}}
|
|
>
|
|
Simply describe what you want your workflow to do, and our AI
|
|
will automatically generate the workflow for you.
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontFamily: theme.typography.fontFamily }}
|
|
>
|
|
<strong>Quick start:</strong> Create Workflow → Describe → AI
|
|
Generate → Done.
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontFamily: theme.typography.fontFamily }}
|
|
>
|
|
For self-hosted setups, see the{" "}
|
|
<Box
|
|
component="a"
|
|
href="/docs/AI#self-hosting-models"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
sx={{ color: "#ff8544", textDecoration: "underline" }}
|
|
>
|
|
setup docs
|
|
</Box>
|
|
</Typography>
|
|
|
|
{/* CTA button */}
|
|
<Box sx={{ display: "flex", mt: { xs: 2, sm: 2.5 } }}>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={dismissAiAnnouncement}
|
|
disableElevation
|
|
sx={{
|
|
py: 1.1,
|
|
px: 2.7,
|
|
textTransform: "none",
|
|
mt: 3,
|
|
borderRadius: "8px",
|
|
fontSize: 14,
|
|
width: { xs: "100%", sm: "auto" },
|
|
}}
|
|
>
|
|
Let's try it out
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</DialogContent>
|
|
</Dialog>
|
|
) : null;
|
|
|
|
const deleteModal = deleteModalOpen ? (
|
|
<Dialog
|
|
open={deleteModalOpen}
|
|
onClose={() => {
|
|
setDeleteModalOpen(false);
|
|
setSelectedWorkflowId("");
|
|
}}
|
|
PaperProps={{
|
|
sx: {
|
|
borderRadius: theme?.palette?.DialogStyle?.borderRadius,
|
|
border: theme?.palette?.DialogStyle?.border,
|
|
minWidth: 440,
|
|
fontFamily: theme?.typography?.fontFamily,
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
zIndex: 1000,
|
|
'& .MuiDialogContent-root': {
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
},
|
|
'& .MuiDialogTitle-root': {
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
},
|
|
}
|
|
}}
|
|
>
|
|
<DialogTitle style={{padding: 50, }}>
|
|
<div style={{ textAlign: "center", color: theme.palette.DialogStyle?.color }}>
|
|
Are you sure you want to delete {selectedWorkflowId.length > 0 ? filteredWorkflows.find((w) => w.id === selectedWorkflowId)?.name : `${selectedWorkflowIndexes.length} workflow${selectedWorkflowIndexes.length === 1 ? '' : 's'}`}? <div />
|
|
|
|
Other workflows relying on {selectedWorkflowIndexes.length > 0 ? "them" : "it"} one will stop working.
|
|
</div>
|
|
</DialogTitle>
|
|
<DialogContent
|
|
style={{ color: theme.palette.DialogStyle.color, textAlign: "center" }}
|
|
>
|
|
<Button
|
|
style={{}}
|
|
onClick={() => {
|
|
if (selectedWorkflowId) {
|
|
deleteWorkflow(selectedWorkflowId)
|
|
|
|
} else if (selectedWorkflowIndexes.length > 0) {
|
|
// Do backwards so it doesn't change
|
|
toast("Starting deletion of workflows. This might take a while.")
|
|
for (var i = selectedWorkflowIndexes.length - 1; i >= 0; i--) {
|
|
const workflow = filteredWorkflows[selectedWorkflowIndexes[i] - 1]
|
|
if (workflow !== undefined && workflow !== null && workflow.id !== undefined && workflow.id !== null) {
|
|
deleteWorkflow(workflow.id, true)
|
|
}
|
|
}
|
|
|
|
setTimeout(() => {
|
|
getAvailableWorkflows()
|
|
}, 5000)
|
|
setSelectedWorkflowIndexes([]);
|
|
}
|
|
|
|
setDeleteModalOpen(false)
|
|
}}
|
|
color="primary"
|
|
>
|
|
Yes
|
|
</Button>
|
|
<Button
|
|
variant="outlined"
|
|
style={{}}
|
|
onClick={() => {
|
|
setDeleteModalOpen(false);
|
|
}}
|
|
color="primary"
|
|
>
|
|
No
|
|
</Button>
|
|
</DialogContent>
|
|
</Dialog>
|
|
) : null;
|
|
|
|
const uploadFile = (e) => {
|
|
const isDropzone =
|
|
e.dataTransfer === undefined ? false : e.dataTransfer.files.length > 0;
|
|
const files = isDropzone ? e.dataTransfer.files : e.target.files;
|
|
|
|
const reader = new FileReader();
|
|
toast("Starting upload. Please wait while we validate the workflows");
|
|
|
|
try {
|
|
reader.addEventListener("load", (e) => {
|
|
var data = e.target.result;
|
|
setIsDropzone(false);
|
|
try {
|
|
data = JSON.parse(reader.result);
|
|
} catch (e) {
|
|
toast("Invalid JSON: " + e);
|
|
return;
|
|
}
|
|
|
|
// Initialize the workflow itself
|
|
setNewWorkflow(
|
|
data.name,
|
|
data.description,
|
|
data.tags,
|
|
data.default_return_value,
|
|
{},
|
|
false,
|
|
[],
|
|
"",
|
|
data.status,
|
|
)
|
|
.then((response) => {
|
|
if (response !== undefined) {
|
|
// SET THE FULL THING
|
|
data.id = response.id;
|
|
|
|
// Actually create it
|
|
setNewWorkflow(
|
|
data.name,
|
|
data.description,
|
|
data.tags,
|
|
data.default_return_value,
|
|
data,
|
|
false,
|
|
[],
|
|
"",
|
|
data.status
|
|
).then((response) => {
|
|
if (response !== undefined) {
|
|
toast.success(`Successfully imported ${data.name}`);
|
|
}
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
toast("Import error: " + error.toString());
|
|
});
|
|
});
|
|
} catch (e) {
|
|
console.log("Error in dropzone: ", e);
|
|
}
|
|
|
|
reader.readAsText(files[0]);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isDropzone) {
|
|
setIsDropzone(false);
|
|
}
|
|
|
|
}, [isDropzone]);
|
|
|
|
|
|
|
|
const getFramework = () => {
|
|
fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for framework!");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson.success === false) {
|
|
setAppFramework({})
|
|
if (responseJson.reason !== undefined) {
|
|
//toast("Failed loading: " + responseJson.reason)
|
|
} else {
|
|
//toast("Failed to load framework for your org.")
|
|
}
|
|
} else {
|
|
setAppFramework(responseJson)
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log("err in framework: ", error.toString());
|
|
})
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
const queryParams = new URLSearchParams(window.location.search);
|
|
const paramType = queryParams.get("type");
|
|
|
|
if (paramType === "sso_login") {
|
|
localStorage.removeItem("workflows");
|
|
queryParams.delete("type");
|
|
const newUrl = window.location.pathname + (queryParams.toString() ? `?${queryParams.toString()}` : '');
|
|
|
|
window.history.replaceState({}, '', newUrl);
|
|
window.location.reload();
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (workflows?.length === 0) {
|
|
return
|
|
}
|
|
|
|
if (workflowTimelines?.length > 0) {
|
|
return
|
|
}
|
|
|
|
//if (isLoggedIn !== true) {
|
|
// return
|
|
//}
|
|
|
|
const results = Promise.all(
|
|
workflows.slice(0,16).map((workflow, index) => {
|
|
|
|
return fetch(`${globalUrl}/api/v2/workflows/${workflow.id}/executions`, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
}).then((response) => response.json())
|
|
})
|
|
)
|
|
|
|
results.then((res) => {
|
|
var newarray = []
|
|
for (var resKey in res) {
|
|
const result = res[resKey]
|
|
if (result?.timeline === undefined || result?.timeline === null) {
|
|
continue
|
|
}
|
|
|
|
newarray.push({
|
|
"id": result.id,
|
|
"timeline": result.timeline,
|
|
})
|
|
}
|
|
|
|
setWorkflowTimelines(newarray)
|
|
})
|
|
|
|
|
|
}, [workflows])
|
|
|
|
const getAvailableWorkflows = (amount) => {
|
|
var storageWorkflows = []
|
|
setIsLoadingWorkflow(true)
|
|
try {
|
|
const storagewf = localStorage.getItem("workflows")
|
|
storageWorkflows = JSON.parse(storagewf)
|
|
if (storageWorkflows === null || storageWorkflows === undefined || storageWorkflows.length === 0) {
|
|
storageWorkflows = []
|
|
} else {
|
|
setWorkflows(storageWorkflows)
|
|
setFilteredWorkflows(storageWorkflows)
|
|
fetchUsecases(storageWorkflows)
|
|
setWorkflowDone(true)
|
|
}
|
|
} catch (e) {
|
|
//console.log("Failed to get workflows from localstorage: ", e)
|
|
}
|
|
|
|
var url = `${globalUrl}/api/v1/workflows`
|
|
if (amount !== undefined && amount !== null) {
|
|
url += `?top=${amount}`
|
|
}
|
|
|
|
fetch(url, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
setIsLoadingWorkflow(false)
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for workflows :O!: ", response.status);
|
|
|
|
//if (isCloud) {
|
|
// navigate("/search?tab=workflows")
|
|
//}
|
|
|
|
toast("Failed getting workflows. Are you logged in?");
|
|
return
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson !== undefined && responseJson !== null) {
|
|
if (responseJson.success === false) {
|
|
} else if (responseJson.length === 0) {
|
|
// When there are no workflows, we can set the loading to false
|
|
setIsLoadingWorkflow(false)
|
|
if (currTab !== 2) {
|
|
toast.info("No workflows found in this org. Feel free to look into our public workflows!" , {
|
|
timeout: 7500,
|
|
})
|
|
|
|
setCurrTab(2)
|
|
}
|
|
|
|
localStorage.setItem("workflows", "[]")
|
|
setWorkflows([])
|
|
setFilteredWorkflows([])
|
|
}
|
|
|
|
var newarray = []
|
|
var backupWf = []
|
|
var backgroundWf = []
|
|
for (var wfkey in responseJson) {
|
|
const wf = responseJson[wfkey]
|
|
if (wf?.public === true || wf?.hidden === true) {
|
|
continue
|
|
}
|
|
|
|
if (wf?.background_processing === true) {
|
|
backgroundWf.push(wf)
|
|
continue
|
|
}
|
|
|
|
if (wf?.backup_config?.onprem_backup === true) {
|
|
backupWf.push(wf)
|
|
continue
|
|
}
|
|
|
|
newarray.push(wf)
|
|
}
|
|
|
|
if (backgroundWf.length > 0) {
|
|
setBackgroundWorkflows(backgroundWf)
|
|
}
|
|
|
|
if (backupWf.length > 0) {
|
|
setBackupWorkflows(backupWf)
|
|
}
|
|
|
|
var setProdFilter = false
|
|
|
|
var actionnamelist = [];
|
|
var parsedactionlist = [];
|
|
for (var key in newarray) {
|
|
const workflow = newarray[key]
|
|
//if (workflow.status === "production") {
|
|
// setProdFilter = true
|
|
//}
|
|
|
|
for (var actionkey in newarray[key].actions) {
|
|
const action = newarray[key].actions[actionkey];
|
|
//console.log("Action: ", action)
|
|
if (actionnamelist.includes(action.app_name)) {
|
|
continue;
|
|
}
|
|
|
|
actionnamelist.push(action.app_name);
|
|
parsedactionlist.push(action);
|
|
}
|
|
}
|
|
|
|
try {
|
|
localStorage.setItem("workflows", JSON.stringify(newarray))
|
|
} catch (e) {
|
|
console.log("Failed to set workflows in localstorage: ", e)
|
|
}
|
|
|
|
// Ensures the zooming happens only once per load
|
|
setTimeout(() => {
|
|
fetchUsecases(newarray)
|
|
|
|
setActionImageList(parsedactionlist);
|
|
if (setProdFilter === true) {
|
|
const newWorkflows = newarray.filter(workflow => workflow.status === "production")
|
|
if (newWorkflows !== undefined && newWorkflows !== null) {
|
|
setFilteredWorkflows(newWorkflows);
|
|
} else {
|
|
setFilteredWorkflows(newarray);
|
|
}
|
|
|
|
setFilters(["status:production"]);
|
|
} else {
|
|
setFilteredWorkflows(newarray)
|
|
}
|
|
|
|
setFirstLoad(false)
|
|
}, 250)
|
|
|
|
/*
|
|
setTimeout(() => {
|
|
var timeout = 0
|
|
for (var key in newarray) {
|
|
const wf = newarray[key]
|
|
if (wf.actions === undefined || wf.actions === null || wf.actions.length === 0) {
|
|
setTimeout(() => {
|
|
sideloadWorkflow(wf.id, false)
|
|
}, timeout)
|
|
|
|
timeout += 1000
|
|
}
|
|
|
|
}
|
|
}, 1000)
|
|
*/
|
|
|
|
} else {
|
|
if (isLoggedIn) {
|
|
toast("An error occurred while loading workflows");
|
|
}
|
|
|
|
return;
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setIsLoadingWorkflow(false)
|
|
toast(error.toString());
|
|
});
|
|
}
|
|
|
|
const findMatches = (category, workflows) => {
|
|
category.matches = []
|
|
for (var subcategorykey in category.list) {
|
|
var subcategory = category.list[subcategorykey]
|
|
subcategory.matches = []
|
|
|
|
for (var workflowkey in workflows) {
|
|
const workflow = workflows[workflowkey]
|
|
|
|
if (workflow.usecase_ids !== undefined && workflow.usecase_ids !== null) {
|
|
for (var usecasekey in workflow.usecase_ids) {
|
|
|
|
if (workflow.usecase_ids[usecasekey].toLowerCase() === subcategory.name.toLowerCase()) {
|
|
//console.log("Got match: ", workflow.usecase_ids[usecasekey])
|
|
|
|
category.matches.push({
|
|
"workflow": workflow.id,
|
|
"category": subcategory.name,
|
|
})
|
|
subcategory.matches.push(workflow.id)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
if (subcategory.matches.length > 0) {
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
return category
|
|
}
|
|
|
|
const handleKeysetting = (categorydata, workflows) => {
|
|
if (workflows !== undefined && workflows !== null) {
|
|
var newcategories = []
|
|
for (var key in categorydata) {
|
|
var category = categorydata[key]
|
|
// Check if category is bool
|
|
if (typeof category === "boolean") {
|
|
continue
|
|
}
|
|
|
|
category = findMatches(category, workflows)
|
|
newcategories.push(category)
|
|
}
|
|
|
|
setUsecases(newcategories)
|
|
} else {
|
|
setUsecases(categorydata)
|
|
}
|
|
}
|
|
|
|
const fetchUsecases = (workflows) => {
|
|
fetch(globalUrl + "/api/v1/workflows/usecases", {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for usecases");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
setWorkflows(workflows);
|
|
setWorkflowDone(true);
|
|
|
|
if (responseJson.success !== false) {
|
|
setAllUsecases(responseJson);
|
|
handleKeysetting(responseJson, workflows)
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
//toast("ERROR: " + error.toString());
|
|
console.log("ERROR: " + error.toString());
|
|
setWorkflows(workflows);
|
|
setWorkflowDone(true);
|
|
});
|
|
};
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
useEffect(() => {
|
|
if (workflows.length <= 0) {
|
|
const tmpView = localStorage.getItem("view");
|
|
if (tmpView !== undefined && tmpView !== null) {
|
|
setView(tmpView);
|
|
}
|
|
|
|
const urlSearchParams = new URLSearchParams(window.location.search);
|
|
const params = Object.fromEntries(urlSearchParams.entries());
|
|
const foundTab = params["top"];
|
|
if (foundTab !== null && foundTab !== undefined) {
|
|
// Check if it's a number
|
|
if (isNaN(foundTab)) {
|
|
getAvailableWorkflows()
|
|
} else {
|
|
getAvailableWorkflows(foundTab)
|
|
}
|
|
} else {
|
|
getAvailableWorkflows()
|
|
}
|
|
|
|
getApps()
|
|
getFramework()
|
|
}
|
|
}, [])
|
|
|
|
const viewStyle = {
|
|
color: "#ffffff",
|
|
width: "100%",
|
|
display: "flex",
|
|
minWidth: isMobile ? "100%" : 1024,
|
|
maxWidth: isMobile ? "100%" : 1024,
|
|
margin: drawerWidth === 0 ? "auto" : `auto ${drawerWidth + 100} auto auto`,
|
|
paddingBottom: 200,
|
|
};
|
|
|
|
const emptyWorkflowStyle = {
|
|
paddingTop: "200px",
|
|
width: 1024,
|
|
margin: "auto",
|
|
};
|
|
|
|
const boxStyle = {
|
|
padding: "20px 20px 20px 20px",
|
|
width: "100%",
|
|
height: "250px",
|
|
color: "white",
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
};
|
|
|
|
//flexDirection: !isMobile ? "column" : "row",
|
|
const paperAppContainer = {
|
|
//display: "flex",
|
|
//flexWrap: "wrap",
|
|
//alignContent: "space-between",
|
|
};
|
|
|
|
const paperAppStyle = {
|
|
minHeight: 146,
|
|
overflow: "hidden",
|
|
width: "100%",
|
|
color: "white",
|
|
fontFamily: theme.typography?.fontFamily,
|
|
boxSizing: "border-box",
|
|
position: "relative",
|
|
borderRadius: "8px",
|
|
// backgroundColor: "#212121",
|
|
padding: "15px 15px 0px 30px",
|
|
};
|
|
|
|
const gridContainer = {
|
|
height: "auto",
|
|
color: "white",
|
|
margin: "10px",
|
|
backgroundColor: "#212121",
|
|
position: "relative",
|
|
};
|
|
|
|
const workflowActionStyle = {
|
|
display: "flex",
|
|
width: 160,
|
|
height: 44,
|
|
marginTop: 5,
|
|
justifyContent: "space-between",
|
|
fontFamily: theme.typography?.fontFamily,
|
|
textAlign: "center",
|
|
};
|
|
|
|
const exportAllWorkflows = (allWorkflows) => {
|
|
for (var i = 0; i < allWorkflows.length; i++) {
|
|
const wf = allWorkflows[i]
|
|
|
|
if (wf === undefined || wf.id === undefined) {
|
|
continue
|
|
}
|
|
|
|
console.log("Exporting workflow: ", wf)
|
|
setTimeout(() => {
|
|
exportWorkflow(JSON.parse(JSON.stringify(wf)), false)
|
|
}, i * 100);
|
|
}
|
|
|
|
toast(`Exporting and keeping original for all ${allWorkflows.length} workflows`);
|
|
}
|
|
|
|
const deduplicateIds = (data, skip_sanitize) => {
|
|
if (data.triggers !== null && data.triggers !== undefined) {
|
|
for (var key in data.triggers) {
|
|
const trigger = data.triggers[key];
|
|
if (skip_sanitize !== true) {
|
|
if (trigger.app_name === "Shuffle Workflow") {
|
|
if (trigger.parameters !== null && trigger.parameters !== undefined) {
|
|
if (trigger.parameters.length > 2) {
|
|
trigger.parameters[2].value = "";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (trigger.status === "running") {
|
|
trigger.status = "stopped";
|
|
}
|
|
|
|
const newId = uuidv4();
|
|
if (trigger.trigger_type === "WEBHOOK") {
|
|
if (
|
|
trigger.parameters !== undefined &&
|
|
trigger.parameters !== null &&
|
|
trigger.parameters.length === 2
|
|
) {
|
|
trigger.parameters[0].value =
|
|
referenceUrl + "webhook_" + trigger.id;
|
|
trigger.parameters[1].value = "webhook_" + trigger.id;
|
|
} else if (
|
|
trigger.parameters !== undefined &&
|
|
trigger.parameters !== null &&
|
|
trigger.parameters.length === 3
|
|
) {
|
|
trigger.parameters[0].value =
|
|
referenceUrl + "webhook_" + trigger.id;
|
|
trigger.parameters[1].value = "webhook_" + trigger.id;
|
|
// FIXME: Add auth here?
|
|
} else {
|
|
toast("Something is wrong with the webhook in the copy");
|
|
}
|
|
}
|
|
|
|
for (var branchkey in data.branches) {
|
|
const branch = data.branches[branchkey];
|
|
if (branch.source_id === trigger.id) {
|
|
branch.source_id = newId;
|
|
}
|
|
|
|
if (branch.destination_id === trigger.id) {
|
|
branch.destination_id = newId;
|
|
}
|
|
}
|
|
|
|
trigger.environment = isCloud ? "cloud" : "Shuffle";
|
|
trigger.id = newId;
|
|
}
|
|
}
|
|
|
|
if (data.actions !== null && data.actions !== undefined && skip_sanitize !== true) {
|
|
for (key in data.actions) {
|
|
data.actions[key].authentication_id = "";
|
|
|
|
for (var subkey in data.actions[key].parameters) {
|
|
const param = data.actions[key].parameters[subkey];
|
|
|
|
// Removed October 10th, 2022 as key usually isn't
|
|
// containing anything secret, but rather necessary configurations.
|
|
// param.name.includes("key") ||
|
|
//
|
|
if (
|
|
param.name.includes("user") ||
|
|
param.name.includes("pass") ||
|
|
param.name.includes("api") ||
|
|
param.name.includes("auth") ||
|
|
param.name.includes("secret") ||
|
|
param.name.includes("domain") ||
|
|
param.name.includes("url") ||
|
|
param.name.includes("mail")
|
|
) {
|
|
// FIXME: This may be a vuln if api-keys are generated that start with $
|
|
if (param.value.startsWith("$")) {
|
|
console.log("Skipping field, as it's referencing a variable");
|
|
} else {
|
|
param.value = "";
|
|
param.is_valid = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
const newId = uuidv4();
|
|
for (branchkey in data.branches) {
|
|
const branch = data.branches[branchkey];
|
|
if (branch.source_id === data.actions[key].id) {
|
|
branch.source_id = newId;
|
|
}
|
|
|
|
if (branch.destination_id === data.actions[key].id) {
|
|
branch.destination_id = newId;
|
|
}
|
|
}
|
|
|
|
if (data.actions[key].id === data.start) {
|
|
data.start = newId;
|
|
}
|
|
|
|
data.actions[key].environment = "";
|
|
data.actions[key].id = newId;
|
|
}
|
|
}
|
|
|
|
if (data.workflow_variables !== null && data.workflow_variables !== undefined && skip_sanitize !== true) {
|
|
for (key in data.workflow_variables) {
|
|
const param = data.workflow_variables[key];
|
|
//param.name.includes("key") ||
|
|
|
|
if (
|
|
param.name.includes("user") ||
|
|
param.name.includes("pass") ||
|
|
param.name.includes("api") ||
|
|
param.name.includes("auth") ||
|
|
param.name.includes("secret") ||
|
|
param.name.includes("email")
|
|
) {
|
|
param.value = "";
|
|
param.is_valid = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
return data;
|
|
};
|
|
|
|
const sanitizeWorkflow = (data) => {
|
|
data = JSON.parse(JSON.stringify(data));
|
|
console.log("Sanitize start: ", data);
|
|
data = deduplicateIds(data);
|
|
|
|
console.log("Sanitize end: ", data);
|
|
|
|
return data;
|
|
};
|
|
|
|
const exportWorkflow = (data, sanitize) => {
|
|
try {
|
|
data = JSON.parse(JSON.stringify(data));
|
|
} catch (e) {
|
|
console.log("Failed to parse JSON: ", e);
|
|
}
|
|
|
|
let exportFileDefaultName = data.name + ".json";
|
|
|
|
data["owner"] = "";
|
|
data["updated_by"] = "";
|
|
data["org"] = [];
|
|
data["org_id"] = "";
|
|
data["execution_org"] = {};
|
|
data["created"] = 0
|
|
data["due_date"] = 0
|
|
data["edited"] = 0
|
|
|
|
data["validation"] = {};
|
|
data["suborg_distribution"] = []
|
|
data["parentorg_workflow"] = ""
|
|
|
|
// These are backwards.. True = saved before. Very confuse.
|
|
data["previously_saved"] = false;
|
|
data["first_save"] = false;
|
|
|
|
if (sanitize === true) {
|
|
data = sanitizeWorkflow(data);
|
|
|
|
if (data.subflows !== null && data.subflows !== undefined) {
|
|
toast(
|
|
"Not exporting with subflows when sanitizing. Please manually export them."
|
|
)
|
|
|
|
data.subflows = []
|
|
}
|
|
|
|
// for (var key in data.subflows) {
|
|
// if (data.sublof
|
|
// }
|
|
//}
|
|
}
|
|
|
|
// Add correct ID's for triggers
|
|
// Add mag
|
|
|
|
data.status = "test"
|
|
let dataStr = JSON.stringify(data);
|
|
let dataUri =
|
|
"data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
|
|
let linkElement = document.createElement("a");
|
|
linkElement.setAttribute("href", dataUri);
|
|
linkElement.setAttribute("download", exportFileDefaultName);
|
|
linkElement.click();
|
|
};
|
|
|
|
const publishWorkflow = (data) => {
|
|
data = JSON.parse(JSON.stringify(data));
|
|
data = sanitizeWorkflow(data);
|
|
toast("Sanitizing and publishing " + data.name);
|
|
|
|
// This ALWAYS talks to Shuffle cloud
|
|
fetch(globalUrl + "/api/v1/workflows/" + data.id + "/publish" , {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(data),
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for workflow publish :O!");
|
|
} else {
|
|
if (isCloud) {
|
|
toast("Successfully published workflow");
|
|
} else {
|
|
toast(
|
|
"Successfully published workflow to https://shuffler.io"
|
|
);
|
|
}
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson.reason !== undefined) {
|
|
toast("Failed publishing: ", responseJson.reason);
|
|
}
|
|
|
|
getAvailableWorkflows();
|
|
})
|
|
.catch((error) => {
|
|
toast("Failed publishing: is the workflow valid? Remember to save the workflow first.")
|
|
console.log(error.toString());
|
|
});
|
|
};
|
|
|
|
const duplicateWorkflow = (data) => {
|
|
//data = JSON.parse(JSON.stringify(data));
|
|
toast("Copying workflow '" + data.name + "'. The new workflow will load in and be highlighted.");
|
|
//data.id = "";
|
|
//data.name = data.name + "_copy";
|
|
//data = deduplicateIds(data, true);
|
|
|
|
const duplicateData = {
|
|
name: data.name + "_copy",
|
|
}
|
|
|
|
fetch(`${globalUrl}/api/v1/workflows/${data.id}/duplicate`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(duplicateData),
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for workflows :O!");
|
|
return;
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson.success === false) {
|
|
if (responseJson.reason !== undefined) {
|
|
toast("Failed copying workflow: " + responseJson.reason)
|
|
} else {
|
|
toast("Failed copying workflow")
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
if (responseJson.id !== undefined) {
|
|
setHighlightIds([responseJson.id])
|
|
}
|
|
setTimeout(() => {
|
|
getAvailableWorkflows();
|
|
}, 1000);
|
|
})
|
|
.catch((error) => {
|
|
toast(error.toString());
|
|
})
|
|
}
|
|
|
|
const setEditing = (data) => {
|
|
ReactDOM.unstable_batchedUpdates(() => {
|
|
setIsEditing(true)
|
|
setModalOpen(true);
|
|
setNewWorkflowName(data.name);
|
|
setNewWorkflowDescription(data.description);
|
|
setDefaultReturnValue(data.default_return_value);
|
|
if (data.tags !== undefined && data.tags !== null) {
|
|
setNewWorkflowTags(JSON.parse(JSON.stringify(data.tags)));
|
|
}
|
|
|
|
if (data.usecase_ids !== undefined && data.usecase_ids !== null && data.usecase_ids.length > 0) {
|
|
setSelectedUsecases(data.usecase_ids)
|
|
}
|
|
|
|
setEditingWorkflow(JSON.parse(JSON.stringify(data)))
|
|
})
|
|
}
|
|
|
|
const exportSingleWorkflow = (data, setOpen) => {
|
|
setExportModalOpen(true)
|
|
|
|
if (data.triggers !== null && data.triggers !== undefined) {
|
|
var newSubflows = [];
|
|
for (var key in data.triggers) {
|
|
const trigger = data.triggers[key];
|
|
|
|
if (
|
|
trigger.parameters !== null &&
|
|
trigger.parameters !== undefined
|
|
) {
|
|
for (var subkey in trigger.parameters) {
|
|
const param = trigger.parameters[subkey];
|
|
if (
|
|
param.name === "workflow" &&
|
|
param.value !== data.id &&
|
|
!newSubflows.includes(param.value)
|
|
) {
|
|
newSubflows.push(param.value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var parsedworkflows = [];
|
|
for (var key in newSubflows) {
|
|
if (key === data.id) {
|
|
continue
|
|
}
|
|
|
|
const foundWorkflow = workflows.find(
|
|
(workflow) => workflow.id === newSubflows[key]
|
|
);
|
|
if (foundWorkflow !== undefined && foundWorkflow !== null) {
|
|
parsedworkflows.push(foundWorkflow);
|
|
}
|
|
}
|
|
|
|
if (parsedworkflows.length > 0) {
|
|
console.log(
|
|
"Appending subflows during export: ",
|
|
parsedworkflows.length
|
|
);
|
|
data.subflows = parsedworkflows;
|
|
}
|
|
}
|
|
|
|
setExportData(data)
|
|
setOpen(false)
|
|
}
|
|
|
|
const sideloadWorkflow = (id, action, setOpen) => {
|
|
|
|
const storagewf = localStorage.getItem("workflows")
|
|
const storageWorkflows = JSON.parse(storagewf)
|
|
if (storageWorkflows === null || storageWorkflows === undefined || storageWorkflows.length === 0) {
|
|
} else {
|
|
for (var i = 0; i < storageWorkflows.length; i++) {
|
|
if (storageWorkflows[i].id === id) {
|
|
if (storageWorkflows[i].image !== "" && storageWorkflows[i].image !== undefined && storageWorkflows[i].image !== null) {
|
|
|
|
if (action === undefined || action === null || action === "") {
|
|
console.log("RETURNING")
|
|
return
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
fetch(globalUrl + "/api/v1/workflows/" + id, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
}
|
|
|
|
return response.json()
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson.success !== false && responseJson.id !== undefined) {
|
|
if (action === "edit") {
|
|
setEditing(responseJson)
|
|
} else if (action === "publish") {
|
|
setPublishModalOpen(true)
|
|
setSelectedWorkflow(responseJson)
|
|
} else if (action === "export") {
|
|
exportSingleWorkflow(responseJson, setOpen)
|
|
}
|
|
|
|
}
|
|
|
|
for (var i = 0; i < storageWorkflows.length; i++) {
|
|
if (storageWorkflows[i].id === id) {
|
|
storageWorkflows[i] = responseJson
|
|
localStorage.setItem("workflows", JSON.stringify(storageWorkflows))
|
|
break
|
|
}
|
|
}
|
|
|
|
//setWorkflows(storageWorkflows)
|
|
setFilteredWorkflows(storageWorkflows)
|
|
//setUpdate(Math.random())
|
|
})
|
|
.catch((error) => {
|
|
console.log(error.toString())
|
|
})
|
|
}
|
|
|
|
const deleteWorkflow = (id, bulk) => {
|
|
// remove workflow from local state immediately
|
|
setWorkflows(prev => {
|
|
const updated = (prev || []).filter(wf => wf.id !== id);
|
|
try {
|
|
localStorage.setItem("workflows", JSON.stringify(updated));
|
|
} catch (e) {}
|
|
return updated;
|
|
});
|
|
setFilteredWorkflows(prev => (prev || []).filter(wf => wf.id !== id));
|
|
|
|
fetch(globalUrl + "/api/v1/workflows/" + id, {
|
|
method: "DELETE",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for setting workflows :O!");
|
|
|
|
if (bulk !== true) {
|
|
toast("Failed deleting workflow. Do you have access?");
|
|
}
|
|
} else {
|
|
if (bulk !== true) {
|
|
toast.success(`Deleted workflow ${id}. Child Workflows in Suborgs were also removed.`)
|
|
}
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then(() => {
|
|
if (bulk !== true) {
|
|
setTimeout(() => {
|
|
getAvailableWorkflows();
|
|
}, 1000);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
toast.error(error.toString());
|
|
})
|
|
}
|
|
|
|
const handleChipClick = (e) => {
|
|
addFilter(e.target.innerHTML);
|
|
};
|
|
|
|
const hasWorkflows = workflows === undefined || workflows === null || workflows.length === 0
|
|
const getWorkflowAppgroup = (data) => {
|
|
if (currTab !== 2) {
|
|
if (data.actions === undefined || data.actions === null) {
|
|
return []
|
|
}
|
|
|
|
var appsFound = []
|
|
for (var key in data.actions) {
|
|
const parsedAction = data.actions[key]
|
|
if (parsedAction.large_image === undefined || parsedAction.large_image === null || parsedAction.large_image === "") {
|
|
continue
|
|
}
|
|
|
|
if (parsedAction.app_name === "Shuffle Tools" || parsedAction.app_id === "bc78f35c6c6351b07a09b7aed5d29652") {
|
|
continue
|
|
}
|
|
|
|
if (appsFound.findIndex(data => data.app_name === parsedAction.app_name) < 0) {
|
|
appsFound.push(parsedAction)
|
|
}
|
|
}
|
|
} else {
|
|
if (data.action_references === undefined || data.action_references === null) {
|
|
return []
|
|
}
|
|
|
|
var appsFound = []
|
|
for (var key in data.action_references) {
|
|
const parsedAction = data.action_references[key]
|
|
if (parsedAction.image_url === undefined || parsedAction.image_url === null || parsedAction.image_url === "") {
|
|
continue
|
|
}
|
|
|
|
// if (parsedAction.name === "Shuffle Tools" || parsedAction.id === "bc78f35c6c6351b07a09b7aed5d29652") {
|
|
// continue
|
|
// }
|
|
|
|
if (appsFound.findIndex(data => data.name === parsedAction.name) < 0) {
|
|
appsFound.push(parsedAction)
|
|
}
|
|
}
|
|
}
|
|
|
|
return appsFound
|
|
}
|
|
|
|
const WorkflowSkeleton = () => {
|
|
return (
|
|
<Paper elevation={0} style={{
|
|
backgroundColor: theme.palette.platformColor,
|
|
width: "100%",
|
|
height: 120,
|
|
borderRadius: 8,
|
|
}}>
|
|
<div style={{
|
|
display: "flex",
|
|
padding: 10,
|
|
width: "100%",
|
|
height: "100%"
|
|
}}>
|
|
<Skeleton
|
|
variant="rectangular"
|
|
width={100}
|
|
height={90}
|
|
style={{
|
|
borderRadius: 6,
|
|
backgroundColor: theme.palette.loaderColor,
|
|
}}
|
|
/>
|
|
<div style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
marginLeft: 10,
|
|
flex: 1,
|
|
gap: 6
|
|
}}>
|
|
<Skeleton
|
|
variant="text"
|
|
width="40%"
|
|
height={24}
|
|
style={{ backgroundColor: theme.palette.loaderColor }}
|
|
/>
|
|
<Skeleton
|
|
variant="text"
|
|
width="60%"
|
|
height={20}
|
|
style={{ backgroundColor: theme.palette.loaderColor }}
|
|
/>
|
|
<Skeleton
|
|
variant="text"
|
|
width="30%"
|
|
height={20}
|
|
style={{ backgroundColor: theme.palette.loaderColor }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
const LoadingWorkflowGrid = () => {
|
|
return (
|
|
<div style={{
|
|
marginTop: 16,
|
|
width: "100%",
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(365px, 1fr))",
|
|
gap: "20px",
|
|
justifyContent: "space-between",
|
|
alignItems: "start",
|
|
padding: "0 10px"
|
|
}}>
|
|
{[...Array(7)].map((_, index) => (
|
|
<WorkflowSkeleton key={index} />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const WorkflowPaper = (props) => {
|
|
const { data, type = "org" } = props;
|
|
const [open, setOpen] = React.useState(false);
|
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
|
|
var boxColor = "#FFC633";
|
|
if (data.is_valid) {
|
|
boxColor = "#86c142";
|
|
}
|
|
|
|
if (!data.previously_saved) {
|
|
boxColor = "#f86a3e";
|
|
}
|
|
|
|
const menuClick = (event) => {
|
|
setOpen(!open);
|
|
setAnchorEl(event.currentTarget);
|
|
}
|
|
|
|
|
|
var parsedName = data.name;
|
|
if (
|
|
parsedName !== undefined &&
|
|
parsedName !== null &&
|
|
parsedName.length > 35
|
|
) {
|
|
parsedName = parsedName.slice(0, 34) + "..";
|
|
}
|
|
|
|
const actions = data.actions !== null ? data.actions.length : 0;
|
|
const appGroup = getWorkflowAppgroup(data)
|
|
const [triggers, subflows] = getWorkflowMeta(data)
|
|
|
|
const hasSuborgs = data.suborg_distribution !== undefined && data.suborg_distribution !== null && data.suborg_distribution.length > 0
|
|
const isDistributed = (data.parentorg_workflow !== undefined && data.parentorg_workflow !== null && data.parentorg_workflow.length > 0) //|| (data.org_id !== userdata.active_org.id && data.org_id !== undefined && data.org_id !== null && data.org_id.length > 0)
|
|
|
|
const workflowMenuButtons = (
|
|
<Menu
|
|
id="long-menu"
|
|
anchorEl={anchorEl}
|
|
keepMounted
|
|
open={open}
|
|
onClose={() => {
|
|
setOpen(false);
|
|
setAnchorEl(null);
|
|
}}
|
|
MenuListProps={{
|
|
sx: {
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
}
|
|
}}
|
|
>
|
|
{isDistributed ?
|
|
<MenuItem
|
|
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
|
|
onClick={() => {
|
|
navigate(`/workflows/${data.id}`)
|
|
}}
|
|
>
|
|
<VisibilityIcon style={{ marginLeft: 0, marginRight: 8 }} />
|
|
Explore Workflow
|
|
</MenuItem>
|
|
: null}
|
|
<MenuItem
|
|
sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor} }}
|
|
disabled={isDistributed}
|
|
onClick={(event) => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "Workflow",
|
|
action: "Edit_Workflow_Details",
|
|
label: "Editing a workflow from the workflow list",
|
|
});
|
|
}
|
|
|
|
event.stopPropagation()
|
|
if (data.actions !== undefined && data.actions !== null && data.actions.length > 0 && data.image !== "") {
|
|
setEditing(data)
|
|
|
|
} else {
|
|
//toast("Need to side-load workflow to be edited properly")
|
|
sideloadWorkflow(data.id, "edit")
|
|
|
|
toast.info("Loading full workflow for editing. Please wait...")
|
|
}
|
|
}}
|
|
key={"change"}
|
|
>
|
|
<EditIcon style={{ marginLeft: 0, marginRight: 8 }} />
|
|
{"Edit details"}
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
|
sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor} }}
|
|
onClick={(event) => {
|
|
window.open(`/forms/${data.id}`, "_blank")
|
|
}}
|
|
key={"explore forms"}
|
|
>
|
|
<EditNoteIcon style={{ marginLeft: 0, marginRight: 8 }} />
|
|
{"Edit Form"}
|
|
</MenuItem>
|
|
|
|
<Divider />
|
|
|
|
<MenuItem
|
|
sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor} }}
|
|
disabled={isDistributed}
|
|
onClick={() => {
|
|
sideloadWorkflow(data.id, "publish")
|
|
|
|
toast.info("Loading full workflow for publishing. Please wait...")
|
|
}}
|
|
key={"publish"}
|
|
>
|
|
<CloudUploadIcon style={{ marginLeft: 0, marginRight: 8 }} />
|
|
{"Publish Workflow"}
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
|
sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor} }}
|
|
//disabled={isDistributed}
|
|
onClick={() => {
|
|
sideloadWorkflow(data.id, "export", setOpen)
|
|
|
|
toast.info("Loading full workflow to be exported. Please wait...")
|
|
}}
|
|
key={"export"}
|
|
>
|
|
<GetAppIcon style={{ marginLeft: 0, marginRight: 8 }} />
|
|
{"Export Workflow"}
|
|
</MenuItem>
|
|
|
|
<Divider />
|
|
|
|
<MenuItem
|
|
sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor} }}
|
|
disabled={isDistributed}
|
|
onClick={() => {
|
|
duplicateWorkflow(data)
|
|
setOpen(false)
|
|
}}
|
|
key={"duplicate"}
|
|
>
|
|
<FileCopyIcon style={{ marginLeft: 0, marginRight: 8 }} />
|
|
{"Duplicate Workflow"}
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
|
sx={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.hoverColor} }}
|
|
onClick={() => {
|
|
setDeleteModalOpen(true);
|
|
setSelectedWorkflowId(data.id);
|
|
setOpen(false);
|
|
}}
|
|
key={"delete"}
|
|
>
|
|
<DeleteIcon style={{ marginLeft: 0, marginRight: 8 }} />
|
|
{"Delete Workflow"}
|
|
</MenuItem>
|
|
</Menu>
|
|
);
|
|
|
|
var image = "";
|
|
|
|
var orgName = "";
|
|
var orgId = "";
|
|
|
|
var imageStyle = {
|
|
width: imagesize,
|
|
height: imagesize,
|
|
pointerEvents: "none",
|
|
marginLeft:
|
|
data.creator_org !== undefined && data.creator_org.length > 0
|
|
? 20
|
|
: 0,
|
|
borderRadius: 10,
|
|
cursor: "pointer",
|
|
marginRight: 10,
|
|
}
|
|
|
|
if (userdata.orgs !== undefined) {
|
|
const foundOrg = userdata.orgs.find((org) => org.id === data["org_id"]);
|
|
if (foundOrg !== undefined && foundOrg !== null) {
|
|
//position: "absolute", bottom: 5, right: -5,
|
|
imageStyle.border = foundOrg.id === userdata.active_org.id ? `2px solid ${boxColor}` : null
|
|
|
|
|
|
image =
|
|
foundOrg.image === "" || foundOrg.image === null || foundOrg.image === undefined ? (
|
|
<img
|
|
alt={foundOrg.name}
|
|
src={theme.palette.defaultImage}
|
|
style={imageStyle}
|
|
/>
|
|
) : (
|
|
<img
|
|
alt={foundOrg.name}
|
|
src={foundOrg.image}
|
|
style={imageStyle}
|
|
onClick={() => { }}
|
|
/>
|
|
);
|
|
|
|
orgName = foundOrg.name;
|
|
orgId = foundOrg.id;
|
|
}
|
|
}
|
|
|
|
var triggerfound = false
|
|
var triggerstarted = false
|
|
var relevantTrigger = {}
|
|
for (var triggerkey in data?.triggers) {
|
|
|
|
const trigger = data?.triggers[triggerkey]
|
|
if (trigger?.trigger_type === "WEBHOOK") {
|
|
triggerfound = true
|
|
image = wfTriggers[0].large_image
|
|
|
|
trigger.status = trigger?.status?.toLowerCase()
|
|
|
|
relevantTrigger = trigger
|
|
if (trigger?.status === "running") {
|
|
imageStyle.border = `2px solid ${green}`
|
|
break
|
|
} else {
|
|
imageStyle.border = `2px solid ${red}`
|
|
}
|
|
|
|
|
|
} else if (trigger?.trigger_type === "SCHEDULE") {
|
|
triggerfound = true
|
|
image = wfTriggers[1].large_image
|
|
|
|
trigger.status = trigger?.status?.toLowerCase()
|
|
|
|
relevantTrigger = trigger
|
|
if (trigger?.status === "running") {
|
|
imageStyle.border = `2px solid ${green}`
|
|
break
|
|
} else {
|
|
imageStyle.border = `2px solid ${red}`
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
if (!triggerfound) {
|
|
image = ""
|
|
}
|
|
|
|
var selectedCategory = ""
|
|
if (data.usecase_ids !== undefined && data.usecase_ids !== null && data.usecase_ids.length > 0 && usecases !== null && usecases !== undefined && usecases.length > 0) {
|
|
const oldcolor = boxColor.valueOf()
|
|
|
|
// Find the first usecase and use that ones' ID
|
|
for (var key in usecases) {
|
|
var category = usecases[key]
|
|
category.matches = []
|
|
|
|
for (var subcategorykey in category.list) {
|
|
var subcategory = category.list[subcategorykey]
|
|
subcategory.matches = []
|
|
|
|
for (var usecasekey in data.usecase_ids) {
|
|
if (data.usecase_ids[usecasekey].toLowerCase() === subcategory.name.toLowerCase()) {
|
|
boxColor = category.color
|
|
break
|
|
}
|
|
}
|
|
|
|
if (boxColor !== oldcolor) {
|
|
break
|
|
}
|
|
}
|
|
|
|
if (boxColor !== oldcolor) {
|
|
selectedCategory = category.name
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
if (type === "public" && currTab === 2) {
|
|
|
|
const imageStyle = {
|
|
width: 24,
|
|
height: 24,
|
|
marginRight: 10,
|
|
border: "1px solid rgba(255,255,255,0.3)",
|
|
}
|
|
|
|
image = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.image !== undefined && data.creator_info.image !== null && data.creator_info.image.length > 0 ? <Avatar alt={data.creator} src={data.creator_info.image} style={imageStyle} /> : <Avatar alt={"shuffle_image"} src={theme.palette.defaultImage} style={imageStyle} />
|
|
|
|
const creatorname = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.username !== undefined && data.creator_info.username !== null && data.creator_info.username.length > 0 ? data.creator_info.username : "Shuffle"
|
|
if ((data.objectID === undefined || data.objectID === null) && data.id !== undefined && data.id !== null) {
|
|
data.objectID = data.id
|
|
}
|
|
|
|
//console.log("IMG: ", data)
|
|
var parsedUrl = `/workflows/${data.objectID}`
|
|
if (data.__queryID !== undefined && data.__queryID !== null) {
|
|
parsedUrl += `?queryID=${data.__queryID}`
|
|
}
|
|
}
|
|
|
|
//const isPublicWorkflow = data?.objectID === undefined || data?.objectID === null
|
|
const foundImage = currTab !== 2 && showWorkflowImages === false ? "" : data?.image_url === undefined || data?.image_url === null || data?.image_url === "" ? data?.image : data?.image_url
|
|
const foundTimeline = workflowTimelines.find((timeline) => timeline.id === data.id)
|
|
return (
|
|
<div
|
|
id={`workflowbox-${data.id}`}
|
|
style={{ width: "100%", minWidth: 320, position: "relative", border: highlightIds.includes(data.id) ? "2px solid #f85a3e" : "inherit", borderBottom: isDistributed || hasSuborgs ? `1px solid ${theme.palette.distributionColor}` : "inherit", borderRadius: theme.palette?.borderRadius, backgroundColor: "#212121", fontFamily: theme.typography?.fontFamily, overflow: "hidden", }}
|
|
>
|
|
|
|
{foundImage?.length > 0 ?
|
|
<img src={foundImage} alt="image" style={{
|
|
maxHeight: 250,
|
|
minHeight: 250,
|
|
minWidth: 100,
|
|
marginLeft: 12,
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
if (data?.objectID === undefined || data?.objectID === null) {
|
|
navigate(`/workflows/${data.id}`)
|
|
} else {
|
|
if (isCloud) {
|
|
navigate(`/workflows/${data.objectID}`)
|
|
} else {
|
|
window.open(`https://shuffler.io/workflows/${data.objectID}`, "_blank")
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
: null}
|
|
|
|
<Paper square style={paperAppStyle}>
|
|
{selectedCategory !== "" ?
|
|
<Tooltip title={`Usecase Category: ${selectedCategory}`} placement="bottom">
|
|
<div
|
|
style={{
|
|
cursor: "pointer",
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: 3,
|
|
backgroundColor: boxColor,
|
|
borderRadius: "0 100px 0 0",
|
|
fontFamily: theme.typography?.fontFamily,
|
|
|
|
height: "100%",
|
|
}}
|
|
onClick={() => {
|
|
addFilter(selectedCategory)
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
: null}
|
|
|
|
<Grid
|
|
item
|
|
style={{ display: "flex", flexDirection: "column", width: "100%", fontFamily: theme.typography?.fontFamily }}
|
|
>
|
|
<Grid item style={{ display: "flex", maxHeight: 34 }}>
|
|
|
|
|
|
<Tooltip arrow
|
|
onClick={() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "Workflow",
|
|
action: "View_Page",
|
|
label: "Workflow Editor",
|
|
});
|
|
}
|
|
}}
|
|
onMouseEnter={() => {
|
|
/*
|
|
if (data.image === undefined || data.image === null || data.image === "" && !loadingWorkflows.includes(data.id)) {
|
|
sideloadWorkflow(data.id, false)
|
|
loadingWorkflows.push(data.id)
|
|
}
|
|
*/
|
|
}}
|
|
title={
|
|
<div style={{
|
|
width: "100%",
|
|
minWidth: 250,
|
|
maxWidth: 310,
|
|
padding: "12px 0",
|
|
}}>
|
|
{(data?.image !== undefined || (data?.image_url !== undefined && data?.image_url.length > 0)) ? (
|
|
<div style={{
|
|
marginBottom: 15,
|
|
borderRadius: theme.palette?.borderRadius,
|
|
overflow: "hidden",
|
|
border: `1px solid ${theme.palette.inputColor}`,
|
|
}}>
|
|
<img
|
|
src={data?.image || data?.image_url}
|
|
alt={data?.name}
|
|
style={{
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
width: "100%",
|
|
height: "auto",
|
|
display: "block",
|
|
}}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
<Typography style={{
|
|
color: "rgba(255,255,255,0.9)",
|
|
fontSize: "16px",
|
|
fontFamily: theme.typography?.fontFamily,
|
|
}}>
|
|
Edit: {data.name}
|
|
</Typography>
|
|
|
|
{(isDistributed || hasSuborgs) && (
|
|
<div style={{
|
|
backgroundColor: "rgba(64,224,208,0.1)", // Matching the teal color used in border
|
|
border: `1px solid ${theme.palette.distributionColor}`,
|
|
borderRadius: 4,
|
|
padding: "8px 12px",
|
|
marginTop: 8,
|
|
}}>
|
|
<Typography variant="body2" style={{
|
|
color: theme.palette.distributionColor,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
}}>
|
|
This is a parentorg-controlled workflow
|
|
</Typography>
|
|
</div>
|
|
)}
|
|
</div>
|
|
} placement="right">
|
|
|
|
<Typography
|
|
style={{
|
|
textAlign: "left",
|
|
marginBottom: 0,
|
|
paddingBottom: 0,
|
|
fontSize: 22,
|
|
maxHeight: 30,
|
|
flex: 10,
|
|
|
|
fontFamily: theme.typography?.fontFamily,
|
|
fontWeight: 500,
|
|
minWidth: 375,
|
|
maxWidth: 375,
|
|
overflow: "hidden",
|
|
|
|
color: "rgba(255,255,255,0.85)",
|
|
}}
|
|
>
|
|
<Link
|
|
to={
|
|
currTab === 2 ? `https://shuffler.io${parsedUrl}` : type === "public" ? parsedUrl : data.workflow_as_code ? `/workflows/${data.id}/code` : `/workflows/${data.id}`
|
|
}
|
|
style={{
|
|
textDecoration: "none",
|
|
color: theme.palette.text.primary,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
maxWidth: "90%",
|
|
display: "block"
|
|
}}
|
|
target={currTab === 2 ? "_blank" : "_self"}
|
|
>
|
|
{parsedName}
|
|
</Link>
|
|
</Typography>
|
|
</Tooltip>
|
|
</Grid>
|
|
|
|
<Grid item style={workflowActionStyle}>
|
|
{appGroup.length > 0 ?
|
|
<div style={{ display: "flex", marginTop: 8, }}>
|
|
<AvatarGroup max={4} style={{ marginLeft: 5, maxHeight: 24, }}>
|
|
{currTab !== 2 && appGroup.map((data, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
height: 24,
|
|
width: 24,
|
|
filter: themeMode === "dark" ? "brightness(0.6)" : "brightness(1)",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
addFilter(data.app_name);
|
|
}}
|
|
>
|
|
<Tooltip color="primary" title={data.app_name} placement="bottom">
|
|
<Avatar alt={data.app_name} src={data.large_image} style={{ width: 24, height: 24 }} />
|
|
</Tooltip>
|
|
</div>
|
|
)
|
|
})}
|
|
{
|
|
currTab === 2 && appGroup.map((data, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
height: 24,
|
|
width: 24,
|
|
filter: themeMode === "dark" ? "brightness(0.6)" : "brightness(1)",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
addFilter(data.app_name);
|
|
}}
|
|
>
|
|
<Tooltip color="primary" title={data.name} placement="bottom">
|
|
<Avatar alt={data.name} src={data.image_url} style={{ width: 24, height: 24 }} />
|
|
</Tooltip>
|
|
</div>
|
|
)
|
|
})}
|
|
</AvatarGroup>
|
|
</div>
|
|
:
|
|
<Tooltip color="primary" title="Action amount" placement="bottom">
|
|
<span style={{ color: "#979797", display: "flex" }}>
|
|
<BubbleChartIcon
|
|
style={{ marginTop: "auto", marginBottom: "auto" }}
|
|
/>
|
|
<Typography
|
|
style={{
|
|
marginLeft: 5,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
{actions}
|
|
</Typography>
|
|
</span>
|
|
</Tooltip>
|
|
}
|
|
<Tooltip
|
|
color="primary"
|
|
title="Amount of triggers"
|
|
placement="bottom"
|
|
>
|
|
<span
|
|
style={{ marginLeft: 15, color: "#979797", display: "flex" }}
|
|
>
|
|
<RestoreIcon
|
|
style={{
|
|
color: "#979797",
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
/>
|
|
<Typography
|
|
style={{
|
|
marginLeft: 5,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
{triggers}
|
|
</Typography>
|
|
</span>
|
|
</Tooltip>
|
|
<Tooltip color="primary" title="Subflows used" placement="bottom">
|
|
<span
|
|
style={{
|
|
marginLeft: 15,
|
|
display: "flex",
|
|
color: "#979797",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
if (subflows === 0) {
|
|
toast("No subflows for " + data.name);
|
|
return;
|
|
}
|
|
|
|
var newWorkflows = [data];
|
|
for (var key in data.triggers) {
|
|
const trigger = data.triggers[key];
|
|
if (trigger.app_name !== "Shuffle Workflow") {
|
|
continue;
|
|
}
|
|
|
|
if (
|
|
trigger.parameters !== undefined &&
|
|
trigger.parameters !== null &&
|
|
trigger.parameters.length > 0 &&
|
|
trigger.parameters[0].name === "workflow"
|
|
) {
|
|
const newWorkflow = workflows.find(
|
|
(item) => item.id === trigger.parameters[0].value
|
|
);
|
|
if (newWorkflow !== null && newWorkflow !== undefined) {
|
|
newWorkflows.push(newWorkflow);
|
|
continue;
|
|
}
|
|
}
|
|
}
|
|
|
|
setFilters(["Subflows of " + data.name]);
|
|
setFilteredWorkflows(newWorkflows);
|
|
}}
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
style={{
|
|
color: "#979797",
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
<path
|
|
d="M0 0H15V15H0V0ZM16 16H18V18H16V16ZM16 13H18V15H16V13ZM16 10H18V12H16V10ZM16 7H18V9H16V7ZM16 4H18V6H16V4ZM13 16H15V18H13V16ZM10 16H12V18H10V16ZM7 16H9V18H7V16ZM4 16H6V18H4V16Z"
|
|
fill="#979797"
|
|
/>
|
|
</svg>
|
|
<Typography
|
|
style={{
|
|
marginLeft: 5,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
{subflows}
|
|
</Typography>
|
|
</span>
|
|
</Tooltip>
|
|
</Grid>
|
|
|
|
<Grid
|
|
item
|
|
style={{
|
|
justifyContent: "left",
|
|
overflow: "hidden",
|
|
marginTop: 8,
|
|
maxHeight: 35,
|
|
fontFamily: theme.typography?.fontFamily,
|
|
|
|
textAlign: "left",
|
|
minWidth: 200,
|
|
maxWidth: 200,
|
|
}}
|
|
>
|
|
{data.tags !== undefined && data.tags !== null
|
|
? data.tags.map((tag, index) => {
|
|
if (index >= 3) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Chip
|
|
key={index}
|
|
style={chipStyle}
|
|
label={tag}
|
|
onClick={handleChipClick}
|
|
variant="outlined"
|
|
color="primary"
|
|
/>
|
|
);
|
|
})
|
|
: null}
|
|
</Grid>
|
|
|
|
{type !== "public" ? (
|
|
<div style={{ position: "absolute", top: 10, right: 10, }}>
|
|
<IconButton
|
|
aria-label="more"
|
|
aria-controls="long-menu"
|
|
aria-haspopup="true"
|
|
onClick={menuClick}
|
|
style={{ padding: "0px", color: "#979797" }}
|
|
>
|
|
<MoreVertIcon />
|
|
</IconButton>
|
|
{workflowMenuButtons}
|
|
</div>
|
|
) : null}
|
|
|
|
{(data.sharing !== undefined && data.sharing !== null && data.sharing === "form") || (data?.form_control?.input_markdown !== undefined && data?.form_control?.input_markdown !== null && data?.form_control?.input_markdown !== "") && type !== "public" ?
|
|
<Tooltip title="Edit Form" placement="top">
|
|
<div style={{ position: "absolute", top: 100, right: 8, }}>
|
|
<IconButton
|
|
aria-label="more"
|
|
aria-controls="long-menu"
|
|
aria-haspopup="true"
|
|
onClick={() => {
|
|
navigate(`/forms/${data.id}`)
|
|
}}
|
|
style={{ padding: "0px", color: "#979797" }}
|
|
>
|
|
<EditNoteIcon />
|
|
</IconButton>
|
|
</div>
|
|
</Tooltip>
|
|
: null}
|
|
|
|
{(data?.validation?.validation_ran === true && data?.validation?.valid === false && data?.validation?.errors?.length > 0 ) ?
|
|
<Tooltip title={`Explore more than ${data?.validation?.errors?.length} notifications for this workflow. When the last execution finishes without errors AND notifications stop occuring, this icon disappears.`} placement="top">
|
|
<div style={{ position: "absolute", top: 40, right: 8, }}>
|
|
<IconButton
|
|
aria-label="more"
|
|
aria-controls="long-menu"
|
|
aria-haspopup="true"
|
|
onClick={() => {
|
|
window.open(`/admin?admin_tab=notifications&workflow=${data.id}`, "_blank")
|
|
}}
|
|
style={{
|
|
padding: "0px",
|
|
transparency: 0.5,
|
|
}}
|
|
color="primary"
|
|
>
|
|
<ErrorOutlineIcon
|
|
style={{
|
|
color: "#f86a3e",
|
|
marginRight: 2,
|
|
}}
|
|
/>
|
|
</IconButton>
|
|
</div>
|
|
</Tooltip>
|
|
: null}
|
|
|
|
{currTab === 2 ? null :
|
|
<Tooltip title={`${relevantTrigger?.name}: ${relevantTrigger?.status}`} placement="bottom">
|
|
<div
|
|
style={{ position: "absolute", top: 70, right: -2, cursor: "" }}
|
|
onClick={() => {
|
|
//navigate("/admin")
|
|
}}
|
|
>
|
|
{image?.includes("data:image") ?
|
|
<img
|
|
alt={orgName}
|
|
src={image}
|
|
style={imageStyle}
|
|
/>
|
|
:
|
|
image
|
|
}
|
|
</div>
|
|
</Tooltip>
|
|
}
|
|
|
|
</Grid>
|
|
|
|
{showExecutionStats === true && foundTimeline !== undefined && foundTimeline?.timeline?.length > 0 &&
|
|
<div style={{ margin: "40px 10px 0px 10px", paddingTop: 0, borderTop: `1px solid ${theme.palette.text.secondary}`, zoom: 1.4 }}>
|
|
<LineChartWrapper
|
|
inputname={""}
|
|
keys={foundTimeline?.timeline}
|
|
height={100}
|
|
width={100}
|
|
border={false}
|
|
|
|
color={"#808080"}
|
|
/>
|
|
</div>
|
|
}
|
|
</Paper>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Can create and set workflows
|
|
const setNewWorkflow = (
|
|
name,
|
|
description,
|
|
tags,
|
|
defaultReturnValue,
|
|
editingWorkflow,
|
|
redirect,
|
|
currentUsecases,
|
|
inputblogpost,
|
|
inputstatus,
|
|
) => {
|
|
|
|
var method = "POST";
|
|
var extraData = "";
|
|
var workflowdata = {};
|
|
|
|
if (editingWorkflow.id !== undefined) {
|
|
console.log("Building original workflow");
|
|
method = "PUT";
|
|
//extraData = "/" + editingWorkflow.id + "?skip_save=true";
|
|
extraData = "/" + editingWorkflow.id + "?skip_save=true";
|
|
workflowdata = editingWorkflow;
|
|
|
|
console.log("REMOVING OWNER");
|
|
workflowdata["owner"] = "";
|
|
workflowdata["org"] = [];
|
|
workflowdata["org_id"] = "";
|
|
workflowdata["execution_org"] = {};
|
|
workflowdata["previously_saved"] = false;
|
|
// FIXME: Loop triggers and turn them off?
|
|
}
|
|
|
|
workflowdata["name"] = name;
|
|
workflowdata["description"] = description;
|
|
if (tags !== undefined) {
|
|
workflowdata["tags"] = tags;
|
|
}
|
|
|
|
workflowdata["blogpost"] = inputblogpost
|
|
workflowdata["status"] = inputstatus
|
|
|
|
if (defaultReturnValue !== undefined) {
|
|
workflowdata["default_return_value"] = defaultReturnValue;
|
|
}
|
|
|
|
if (currentUsecases !== undefined && currentUsecases !== null) {
|
|
workflowdata["usecase_ids"] = currentUsecases
|
|
//workflows[0].category = ["detect"]
|
|
//workflows[0].usecase_ids = ["Correlate tickets"]
|
|
}
|
|
|
|
const new_url = `${globalUrl}/api/v1/workflows${extraData}`
|
|
return fetch(new_url, {
|
|
method: method,
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(workflowdata),
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for workflows :O!");
|
|
return;
|
|
}
|
|
setSubmitLoading(false);
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson.success === false) {
|
|
if (responseJson.reason !== undefined) {
|
|
toast("Error setting workflow: ", responseJson.reason)
|
|
} else {
|
|
toast("Error setting workflow.")
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
if (redirect) {
|
|
//window.location.pathname = "/workflows/" + responseJson["id"];
|
|
navigate("/workflows/" + responseJson["id"])
|
|
//setModalOpen(false);
|
|
} else if (!redirect) {
|
|
// Update :)
|
|
setTimeout(() => {
|
|
getAvailableWorkflows();
|
|
}, 4000);
|
|
setSubmitLoading(false)
|
|
setModalOpen(false);
|
|
} else {
|
|
//toast("Successfully changed basic info for workflow");
|
|
setModalOpen(false);
|
|
}
|
|
|
|
return responseJson;
|
|
})
|
|
.catch((error) => {
|
|
toast(error.toString());
|
|
setSubmitLoading(false)
|
|
setModalOpen(false);
|
|
setSubmitLoading(false);
|
|
});
|
|
};
|
|
|
|
const importFiles = (event) => {
|
|
console.log("Importing!");
|
|
setSubmitLoading(true)
|
|
|
|
if (event.target.files.length > 0) {
|
|
console.log("Files: !", event.target.files.length);
|
|
for (var key in event.target.files) {
|
|
const file = event.target.files[key];
|
|
if (file.type !== "application/json") {
|
|
if (file.type !== undefined) {
|
|
toast("File has to contain valid json");
|
|
setSubmitLoading(false)
|
|
}
|
|
|
|
continue;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
var workflowids = []
|
|
|
|
// Waits for the read
|
|
reader.addEventListener("load", (event) => {
|
|
var data = reader.result;
|
|
try {
|
|
data = JSON.parse(reader.result);
|
|
} catch (e) {
|
|
toast("Invalid JSON: " + e);
|
|
setSubmitLoading(false)
|
|
return;
|
|
}
|
|
|
|
console.log("File being loaded: ", data.name);
|
|
|
|
// Initialize the workflow itself
|
|
setNewWorkflow(
|
|
data.name,
|
|
data.description,
|
|
data.tags,
|
|
data.default_return_value,
|
|
{},
|
|
false,
|
|
[],
|
|
"",
|
|
data.status,
|
|
)
|
|
.then((response) => {
|
|
if (response !== undefined) {
|
|
// SET THE FULL THING
|
|
data.id = response.id;
|
|
data.first_save = false;
|
|
data.previously_saved = false;
|
|
data.is_valid = false;
|
|
data.org_id = userdata.active_org.id
|
|
data.org = []
|
|
data.execution_org = {}
|
|
|
|
workflowids.push(data.id)
|
|
|
|
// Actually create it
|
|
setNewWorkflow(
|
|
data.name,
|
|
data.description,
|
|
data.tags,
|
|
data.default_return_value,
|
|
data,
|
|
false,
|
|
[],
|
|
"",
|
|
data.status,
|
|
).then((response) => {
|
|
if (response !== undefined) {
|
|
toast.success("Imported " + data.name);
|
|
}
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
toast("Import error: " + error.toString());
|
|
});
|
|
});
|
|
|
|
// Actually reads
|
|
reader.readAsText(file);
|
|
}
|
|
}
|
|
|
|
setLoadWorkflowsModalOpen(false);
|
|
|
|
if (workflowids?.length > 0) {
|
|
setHighlightIds(workflowids)
|
|
}
|
|
};
|
|
|
|
const getWorkflowMeta = (data) => {
|
|
let triggers = 0;
|
|
let subflows = 0;
|
|
if (
|
|
data.triggers !== undefined &&
|
|
data.triggers !== null &&
|
|
data.triggers.length > 0
|
|
) {
|
|
triggers = data.triggers.length;
|
|
for (let key in data.triggers) {
|
|
if (data.triggers[key].app_name === "Shuffle Workflow") {
|
|
subflows += 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
return [triggers, subflows];
|
|
};
|
|
|
|
const WorkflowListView = () => {
|
|
let workflowData = "";
|
|
if (workflows.length > 0) {
|
|
const columns = [
|
|
{
|
|
field: "image",
|
|
headerName: "Logo",
|
|
width: 50,
|
|
sortable: false,
|
|
renderCell: (params) => {
|
|
const data = params.row.record;
|
|
|
|
var boxColor = "#FFC633";
|
|
if (data.is_valid) {
|
|
boxColor = "#86c142";
|
|
}
|
|
|
|
if (!data.previously_saved) {
|
|
boxColor = "#f85a3e";
|
|
}
|
|
|
|
var image = "";
|
|
if (userdata.orgs !== undefined) {
|
|
const foundOrg = userdata.orgs.find(
|
|
(org) => org.id === data["org_id"]
|
|
);
|
|
if (foundOrg !== undefined && foundOrg !== null) {
|
|
//position: "absolute", bottom: 5, right: -5,
|
|
const imageStyle = {
|
|
width: imagesize + 7,
|
|
height: imagesize + 7,
|
|
pointerEvents: "none",
|
|
marginLeft:
|
|
data.creator_org !== undefined &&
|
|
data.creator_org.length > 0
|
|
? 20
|
|
: 0,
|
|
borderRadius: 10,
|
|
border:
|
|
foundOrg.id === userdata.active_org.id
|
|
? `3px solid ${boxColor}`
|
|
: null,
|
|
cursor: "pointer",
|
|
marginTop: 5,
|
|
};
|
|
|
|
//<Tooltip title={`Org: ${foundOrg.name}`} placement="bottom">
|
|
image =
|
|
foundOrg.image === "" ? (
|
|
<img
|
|
alt={foundOrg.name}
|
|
src={theme.palette.defaultImage}
|
|
style={imageStyle}
|
|
/>
|
|
) : (
|
|
<img
|
|
alt={foundOrg.name}
|
|
src={foundOrg.image}
|
|
style={imageStyle}
|
|
onClick={() => {
|
|
//setFilteredWorkflows(newWorkflows)
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
return <div styl={{ cursor: "pointer" }}>{image}</div>;
|
|
},
|
|
},
|
|
{
|
|
field: "title",
|
|
headerName: "Title",
|
|
width: 330,
|
|
renderCell: (params) => {
|
|
const data = params.row.record;
|
|
|
|
|
|
return (
|
|
<Grid item>
|
|
<Link
|
|
to={"/workflows/" + data.id}
|
|
style={{ textDecoration: "none", color: "inherit" }}
|
|
>
|
|
<Typography>{data.name}</Typography>
|
|
</Link>
|
|
</Grid>
|
|
);
|
|
},
|
|
},
|
|
|
|
{
|
|
field: "options",
|
|
headerName: "Options",
|
|
width: 200,
|
|
sortable: false,
|
|
disableClickEventBubbling: true,
|
|
renderCell: (params) => {
|
|
const data = params.row.record;
|
|
const actions = data.actions !== null ? data.actions.length : 0;
|
|
let [triggers, subflows] = getWorkflowMeta(data);
|
|
const appGroup = getWorkflowAppgroup(data)
|
|
|
|
return (
|
|
<Grid item>
|
|
<div style={{ display: "flex" }}>
|
|
{appGroup.length > 0 ?
|
|
<div style={{ display: "flex", marginTop: 3, }}>
|
|
<AvatarGroup max={4} style={{ marginLeft: 5, maxHeight: 24, }}>
|
|
{appGroup.map((data, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
height: 24,
|
|
width: 24,
|
|
filter: "brightness(0.6)",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
addFilter(data.app_name);
|
|
}}
|
|
>
|
|
<Tooltip color="primary" title={data.app_name} placement="bottom">
|
|
<Avatar alt={data.app_name} src={data.large_image} style={{ width: 24, height: 24 }} />
|
|
</Tooltip>
|
|
</div>
|
|
)
|
|
})}
|
|
</AvatarGroup>
|
|
</div>
|
|
:
|
|
<Tooltip color="primary" title="Action amount" placement="bottom">
|
|
<span style={{ color: "#979797", display: "flex" }}>
|
|
<BubbleChartIcon
|
|
style={{ marginTop: "auto", marginBottom: "auto" }}
|
|
/>
|
|
<Typography
|
|
style={{
|
|
marginLeft: 5,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
{actions}
|
|
</Typography>
|
|
</span>
|
|
</Tooltip>
|
|
}
|
|
|
|
<Tooltip
|
|
color="primary"
|
|
title="Amount of triggers"
|
|
placement="bottom"
|
|
>
|
|
<span
|
|
style={{
|
|
marginLeft: 15,
|
|
color: "#979797",
|
|
display: "flex",
|
|
}}
|
|
>
|
|
<RestoreIcon
|
|
style={{
|
|
color: "#979797",
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
/>
|
|
<Typography
|
|
style={{
|
|
marginLeft: 5,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
{triggers}
|
|
</Typography>
|
|
</span>
|
|
</Tooltip>
|
|
<Tooltip color="primary" title="Subflows used" placement="bottom">
|
|
<span
|
|
style={{
|
|
marginLeft: 15,
|
|
display: "flex",
|
|
color: "#979797",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
if (subflows === 0) {
|
|
toast("No subflows for " + data.name);
|
|
return;
|
|
}
|
|
|
|
var newWorkflows = [data];
|
|
for (var key in data.triggers) {
|
|
const trigger = data.triggers[key];
|
|
if (trigger.app_name !== "Shuffle Workflow") {
|
|
continue;
|
|
}
|
|
|
|
if (
|
|
trigger.parameters !== undefined &&
|
|
trigger.parameters !== null &&
|
|
trigger.parameters.length > 0 &&
|
|
trigger.parameters[0].name === "workflow"
|
|
) {
|
|
const newWorkflow = workflows.find(
|
|
(item) => item.id === trigger.parameters[0].value
|
|
);
|
|
if (
|
|
newWorkflow !== null &&
|
|
newWorkflow !== undefined
|
|
) {
|
|
newWorkflows.push(newWorkflow);
|
|
continue;
|
|
}
|
|
}
|
|
}
|
|
|
|
setFilters(["Subflows of " + data.name]);
|
|
setFilteredWorkflows(newWorkflows);
|
|
}}
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
style={{
|
|
color: "#979797",
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
<path
|
|
d="M0 0H15V15H0V0ZM16 16H18V18H16V16ZM16 13H18V15H16V13ZM16 10H18V12H16V10ZM16 7H18V9H16V7ZM16 4H18V6H16V4ZM13 16H15V18H13V16ZM10 16H12V18H10V16ZM7 16H9V18H7V16ZM4 16H6V18H4V16Z"
|
|
fill="#979797"
|
|
/>
|
|
</svg>
|
|
<Typography
|
|
style={{
|
|
marginLeft: 5,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
{subflows}
|
|
</Typography>
|
|
</span>
|
|
</Tooltip>
|
|
</div>
|
|
</Grid>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
field: "tags",
|
|
headerName: "Tags",
|
|
maxHeight: 15,
|
|
width: 300,
|
|
sortable: false,
|
|
disableClickEventBubbling: true,
|
|
renderCell: (params) => {
|
|
const data = params.row.record;
|
|
return (
|
|
<Grid item>
|
|
{data.tags !== undefined
|
|
? data.tags.map((tag, index) => {
|
|
if (index >= 3) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Chip
|
|
key={index}
|
|
style={chipStyle}
|
|
label={tag}
|
|
variant="outlined"
|
|
color="primary"
|
|
/>
|
|
);
|
|
})
|
|
: null}
|
|
</Grid>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
field: "",
|
|
headerName: "",
|
|
maxHeight: 15,
|
|
width: 100,
|
|
sortable: false,
|
|
disableClickEventBubbling: true,
|
|
renderCell: (params) => { },
|
|
},
|
|
];
|
|
|
|
let rows = [];
|
|
rows = filteredWorkflows.map((data, index) => {
|
|
let obj = {
|
|
id: index + 1,
|
|
title: data.name,
|
|
record: data,
|
|
};
|
|
|
|
return obj;
|
|
})
|
|
|
|
console.log("ROWS: ", rows)
|
|
|
|
workflowData = (
|
|
<DataGrid
|
|
color="primary"
|
|
className={classes.datagrid}
|
|
rows={rows}
|
|
columns={columns}
|
|
page={page}
|
|
onPageChange={(newPage) => {
|
|
setPage(newPage)
|
|
}}
|
|
pageSize={pageSize}
|
|
onPageSizeChange={(newPageSize) => {
|
|
setPageSize(newPageSize);
|
|
}}
|
|
rowsPerPageOptions={[25, 50, 100, 150]}
|
|
checkboxSelection
|
|
autoHeight
|
|
density="standard"
|
|
onSelectionModelChange={(newSelection) => {
|
|
setSelectedWorkflowIndexes(newSelection)
|
|
}}
|
|
selectionModel={selectedWorkflowIndexes}
|
|
components={{
|
|
Toolbar: GridToolbar,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<div style={{ ...gridContainer, backgroundColor: theme.palette.platformColor }}>
|
|
<Tooltip title={`New Workflow`} placement="bottom">
|
|
<IconButton
|
|
style={{ position: "absolute", top: 10, right: 50, zIndex: 1000 }}
|
|
onClick={() => {
|
|
setModalOpen(true)
|
|
setIsEditing(false)
|
|
}}
|
|
>
|
|
<AddCircleIcon style={{}} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
{filteredWorkflows.length === 0 ? null :
|
|
<IconButton
|
|
style={{ position: "absolute", top: 10, right: 10, zIndex: 1000 }}
|
|
disabled={selectedWorkflowIndexes.length === 0}
|
|
onClick={() => {
|
|
setDeleteModalOpen(true)
|
|
}}
|
|
>
|
|
<Tooltip
|
|
title={`Delete ${selectedWorkflowIndexes.length} workflows`}
|
|
placement="top"
|
|
>
|
|
<DeleteIcon />
|
|
</Tooltip>
|
|
</IconButton>
|
|
}
|
|
{workflowData}
|
|
</div>
|
|
)
|
|
};
|
|
|
|
var total_count = 0
|
|
const modalView = dialogModalOpen ? (
|
|
<Dialog
|
|
open={dialogModalOpen}
|
|
onClose={() => {
|
|
setDialogModalOpen(false);
|
|
}}
|
|
PaperProps={{
|
|
style: {
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
color: "white",
|
|
minWidth: isMobile ? "90%" : "800px",
|
|
maxWidth: isMobile ? "90%" : "800px",
|
|
borderRadius: 8,
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle style={{ padding: "20px 24px" }}>
|
|
<div style={{
|
|
color: "rgba(255,255,255,0.9)",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center"
|
|
}}>
|
|
<Typography variant="h5">
|
|
{editingWorkflow.id !== undefined ? "Edit Workflow" : "Create New Workflow"}
|
|
</Typography>
|
|
<div style={{ display: "flex", gap: 15 }}>
|
|
<Tooltip title={"Import manually"} placement="top">
|
|
<IconButton
|
|
color="primary"
|
|
size="medium"
|
|
onClick={() => upload.click()}
|
|
style={{ backgroundColor: "rgba(255,255,255,0.08)" }}
|
|
>
|
|
<PublishIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<IconButton
|
|
size="medium"
|
|
onClick={() => setDialogModalOpen(false)}
|
|
style={{ backgroundColor: "rgba(255,255,255,0.08)" }}
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
</DialogTitle>
|
|
<FormControl>
|
|
<DialogContent style={{ padding: "0 24px 20px" }}>
|
|
<TextField
|
|
onBlur={(event) => setNewWorkflowName(event.target.value)}
|
|
InputProps={{
|
|
style: {
|
|
color: "white",
|
|
backgroundColor: theme.palette.inputColor,
|
|
borderRadius: 8,
|
|
},
|
|
}}
|
|
color="primary"
|
|
label="Workflow Name"
|
|
required
|
|
margin="dense"
|
|
defaultValue={newWorkflowName}
|
|
autoFocus
|
|
fullWidth
|
|
variant="outlined"
|
|
/>
|
|
<TextField
|
|
onBlur={(event) => setNewWorkflowDescription(event.target.value)}
|
|
InputProps={{
|
|
style: {
|
|
color: "white",
|
|
backgroundColor: theme.palette.inputColor,
|
|
borderRadius: 8,
|
|
},
|
|
}}
|
|
color="primary"
|
|
label="Description"
|
|
defaultValue={newWorkflowDescription}
|
|
multiline
|
|
rows={3}
|
|
margin="dense"
|
|
fullWidth
|
|
variant="outlined"
|
|
style={{ marginTop: 16 }}
|
|
/>
|
|
<div style={{ display: "flex", gap: 16, marginTop: 16 }}>
|
|
<MuiChipsInput
|
|
style={{ flex: 1 }}
|
|
InputProps={{
|
|
style: {
|
|
color: "white",
|
|
backgroundColor: theme.palette.inputColor,
|
|
borderRadius: 8,
|
|
},
|
|
}}
|
|
label="Tags"
|
|
color="primary"
|
|
fullWidth
|
|
value={newWorkflowTags}
|
|
onChange={(chips) => {
|
|
// Directly set the new array instead of mutating
|
|
setNewWorkflowTags(chips);
|
|
}}
|
|
onBlur={(event) => {
|
|
if (event.target.value.length === 0) {
|
|
return
|
|
}
|
|
|
|
if (newWorkflowTags.includes(event.target.value)) {
|
|
return
|
|
}
|
|
|
|
// Create new array instead of pushing
|
|
setNewWorkflowTags([...newWorkflowTags, event.target.value]);
|
|
}}
|
|
onAdd={(chip) => {
|
|
// Create new array instead of pushing
|
|
setNewWorkflowTags([...newWorkflowTags, chip]);
|
|
}}
|
|
onDelete={(chip, index) => {
|
|
// Filter instead of splice
|
|
setNewWorkflowTags(newWorkflowTags.filter((_, i) => i !== index));
|
|
}}
|
|
variant="outlined"
|
|
/>
|
|
{usecases !== null && usecases !== undefined && usecases.length > 0 ?
|
|
<FormControl style={{ flex: 1 }} variant="outlined">
|
|
<InputLabel>Usecases</InputLabel>
|
|
<Select
|
|
defaultValue=""
|
|
label="Usecases"
|
|
multiple
|
|
value={selectedUsecases}
|
|
renderValue={(selected) => selected.join(', ')}
|
|
onChange={(event) => {
|
|
console.log("Changed: ", event)
|
|
}}
|
|
style={{
|
|
backgroundColor: theme.palette.inputColor,
|
|
borderRadius: 8,
|
|
}}
|
|
>
|
|
<MenuItem value="">
|
|
<em>None</em>
|
|
</MenuItem>
|
|
{usecases.map((usecase, index) => (
|
|
<span key={index}>
|
|
<ListSubheader style={{ color: usecase.color }}>
|
|
{usecase.name}
|
|
</ListSubheader>
|
|
{usecase.list.map((subcase, subindex) => {
|
|
total_count += 1
|
|
return (
|
|
<MenuItem
|
|
key={subindex}
|
|
value={total_count}
|
|
onClick={(event) => {
|
|
if (selectedUsecases.includes(subcase.name)) {
|
|
const itemIndex = selectedUsecases.indexOf(subcase.name)
|
|
if (itemIndex > -1) {
|
|
selectedUsecases.splice(itemIndex, 1)
|
|
}
|
|
} else {
|
|
selectedUsecases.push(subcase.name)
|
|
}
|
|
setUpdate(Math.random());
|
|
setSelectedUsecases(selectedUsecases)
|
|
}}
|
|
>
|
|
<Checkbox
|
|
style={{
|
|
color: selectedUsecases.includes(subcase.name)
|
|
? usecase.color
|
|
: theme.palette.inputColor
|
|
}}
|
|
checked={selectedUsecases.includes(subcase.name)}
|
|
/>
|
|
<ListItemText primary={subcase.name} />
|
|
</MenuItem>
|
|
)
|
|
})}
|
|
</span>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
: null}
|
|
</div>
|
|
|
|
<Collapse in={showMoreClicked}>
|
|
<div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 16 }}>
|
|
<TextField
|
|
onBlur={(event) => {
|
|
if (event.target.value.toLowerCase() === "test") {
|
|
setStatus("test")
|
|
} else if (event.target.value.toLowerCase() === "production") {
|
|
setStatus("production")
|
|
}
|
|
}}
|
|
InputProps={{
|
|
style: {
|
|
color: "white",
|
|
backgroundColor: theme.palette.inputColor,
|
|
borderRadius: 8,
|
|
},
|
|
}}
|
|
color="primary"
|
|
label="Status"
|
|
defaultValue={status}
|
|
helperText="Can be test or production"
|
|
fullWidth
|
|
variant="outlined"
|
|
/>
|
|
<TextField
|
|
onBlur={(event) => setBlogpost(event.target.value)}
|
|
InputProps={{
|
|
style: {
|
|
color: "white",
|
|
backgroundColor: theme.palette.inputColor,
|
|
borderRadius: 8,
|
|
},
|
|
}}
|
|
color="primary"
|
|
label="Reference"
|
|
defaultValue={blogpost}
|
|
helperText="Blogpost or documentation reference"
|
|
fullWidth
|
|
variant="outlined"
|
|
/>
|
|
<TextField
|
|
onBlur={(event) => setDefaultReturnValue(event.target.value)}
|
|
InputProps={{
|
|
style: {
|
|
color: "white",
|
|
backgroundColor: theme.palette.inputColor,
|
|
borderRadius: 8,
|
|
},
|
|
}}
|
|
color="primary"
|
|
label="Default Return Value"
|
|
defaultValue={defaultReturnValue}
|
|
helperText="Used for Subflows if the subflow fails"
|
|
multiline
|
|
rows={3}
|
|
fullWidth
|
|
variant="outlined"
|
|
/>
|
|
</div>
|
|
</Collapse>
|
|
|
|
<Button
|
|
style={{
|
|
marginTop: 16,
|
|
color: "white",
|
|
textTransform: "none"
|
|
}}
|
|
onClick={() => setShowMoreClicked(!showMoreClicked)}
|
|
startIcon={showMoreClicked ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
|
>
|
|
{showMoreClicked ? "Show Less" : "Show More Options"}
|
|
</Button>
|
|
</DialogContent>
|
|
<DialogActions style={{ padding: "16px 24px" }}>
|
|
<Button
|
|
variant="outlined"
|
|
onClick={() => {
|
|
setNewWorkflowName("");
|
|
setNewWorkflowDescription("");
|
|
setDefaultReturnValue("");
|
|
setEditingWorkflow({});
|
|
setNewWorkflowTags([]);
|
|
setDialogModalOpen(false);
|
|
setSelectedUsecases([])
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
disabled={newWorkflowName.length === 0}
|
|
onClick={() => {
|
|
if (editingWorkflow.id !== undefined) {
|
|
setNewWorkflow(
|
|
newWorkflowName,
|
|
newWorkflowDescription,
|
|
newWorkflowTags,
|
|
defaultReturnValue,
|
|
editingWorkflow,
|
|
false,
|
|
selectedUsecases,
|
|
blogpost,
|
|
status,
|
|
);
|
|
setNewWorkflowName("");
|
|
setDefaultReturnValue("");
|
|
setNewWorkflowDescription("");
|
|
setEditingWorkflow({});
|
|
setNewWorkflowTags([]);
|
|
} else {
|
|
setNewWorkflow(
|
|
newWorkflowName,
|
|
newWorkflowDescription,
|
|
newWorkflowTags,
|
|
defaultReturnValue,
|
|
{},
|
|
true,
|
|
selectedUsecases,
|
|
blogpost,
|
|
status,
|
|
);
|
|
}
|
|
setSubmitLoading(true);
|
|
setSelectedUsecases([])
|
|
}}
|
|
>
|
|
{submitLoading ? <CircularProgress size={24} /> : "Submit"}
|
|
</Button>
|
|
</DialogActions>
|
|
</FormControl>
|
|
</Dialog>
|
|
) : null;
|
|
|
|
const viewSize = {
|
|
workflowView: 4,
|
|
executionsView: 3,
|
|
executionResults: 4,
|
|
};
|
|
|
|
const workflowViewStyle = {
|
|
flex: viewSize.workflowView,
|
|
marginLeft: 10,
|
|
marginRight: 10,
|
|
};
|
|
|
|
if (viewSize.workflowView === 0) {
|
|
workflowViewStyle.display = "none";
|
|
}
|
|
|
|
const workflowButtons = (
|
|
<span>
|
|
<Tooltip color="primary" title={"Explore Workflow Runs"} placement="top">
|
|
<Button
|
|
disabled={workflows.length === 0}
|
|
color="secondary"
|
|
variant="text"
|
|
onClick={() => {
|
|
navigate("/workflows/debug")
|
|
}}
|
|
>
|
|
<QueryStatsIcon />
|
|
</Button>
|
|
</Tooltip>
|
|
{view === "list" && (
|
|
<Tooltip color="primary" title={"Grid View"} placement="top">
|
|
<Button
|
|
color="secondary"
|
|
variant="text"
|
|
onClick={() => {
|
|
localStorage.setItem("view", "grid");
|
|
setView("grid");
|
|
}}
|
|
>
|
|
<GridOnIcon />
|
|
</Button>
|
|
</Tooltip>
|
|
)}
|
|
{view === "grid" && (
|
|
<Tooltip color="primary" title={"List View"} placement="top">
|
|
<Button
|
|
color="secondary"
|
|
variant="text"
|
|
onClick={() => {
|
|
localStorage.setItem("view", "list");
|
|
setView("list");
|
|
|
|
setCurrTab(0)
|
|
}}
|
|
>
|
|
<ListIcon />
|
|
</Button>
|
|
</Tooltip>
|
|
)}
|
|
<Tooltip color="primary" title={"Import workflows"} placement="top">
|
|
<Button
|
|
color="secondary"
|
|
style={{}}
|
|
variant="text"
|
|
onClick={() => upload.click()}
|
|
>
|
|
|
|
{submitLoading ? <CircularProgress color="secondary" /> : <PublishIcon />}
|
|
</Button>
|
|
</Tooltip>
|
|
<input
|
|
hidden
|
|
type="file"
|
|
multiple="multiple"
|
|
ref={(ref) => (upload = ref)}
|
|
onChange={importFiles}
|
|
/>
|
|
{workflows.length > 0 ? (
|
|
<Tooltip
|
|
color="primary"
|
|
title={`Download ALL workflows (${workflows.length})`}
|
|
placement="top"
|
|
>
|
|
<Button
|
|
color="secondary"
|
|
style={{}}
|
|
disabled={isCloud}
|
|
variant="text"
|
|
onClick={() => {
|
|
exportAllWorkflows(workflows);
|
|
}}
|
|
>
|
|
<GetAppIcon />
|
|
</Button>
|
|
</Tooltip>
|
|
) : null}
|
|
{isCloud ? null : (
|
|
<Tooltip color="primary" title={"Import workflows to Shuffle"} placement="top">
|
|
<Button
|
|
color="secondary"
|
|
style={{}}
|
|
variant="text"
|
|
onClick={() => setLoadWorkflowsModalOpen(true)}
|
|
>
|
|
<CloudDownloadIcon />
|
|
</Button>
|
|
</Tooltip>
|
|
)}
|
|
</span>
|
|
);
|
|
|
|
// const tourOptions = {
|
|
// defaultStepOptions: {
|
|
// classes: "shadow-md bg-purple-dark",
|
|
// scrollTo: true
|
|
// },
|
|
// useModalOverlay: true,
|
|
// tourName: workflows,
|
|
// exitOnEsc: true,
|
|
// }
|
|
|
|
// //classes: "custom-class-name-1 custom-class-name-2",
|
|
// const newSteps = [
|
|
// {
|
|
// id: "intro",
|
|
// scrollTo: true,
|
|
// beforeShowPromise: function() {
|
|
// return new Promise(function(resolve) {
|
|
// setTimeout(function() {
|
|
// window.scrollTo(0, 0);
|
|
// resolve();
|
|
// }, 500);
|
|
// });
|
|
// },
|
|
// buttons: [
|
|
// {
|
|
// classes: "shepherd-button-primary",
|
|
// style: {
|
|
// backgroundColor: "red",
|
|
// color: "white",
|
|
// },
|
|
// text: "Next",
|
|
// type: "next"
|
|
// }
|
|
// ],
|
|
// highlightClass: "highlight",
|
|
// showCancelLink: true,
|
|
// text: [
|
|
// "React-Shepherd is a JavaScript library for guiding users through your React app."
|
|
// ],
|
|
// when: {
|
|
// show: () => {
|
|
// console.log("show step 1");
|
|
// },
|
|
// hide: () => {
|
|
// console.log("hide step 1");
|
|
// }
|
|
// }
|
|
// },
|
|
// {
|
|
// id: "second",
|
|
// attachTo: {
|
|
// element: "second-step",
|
|
// on: "top"
|
|
// },
|
|
// text: [
|
|
// "Yuk eksplorasi hasil Tes Minat Bakat-mu dan rekomendasi <b>Jurusan</b> dan Karier."
|
|
// ],
|
|
// buttons: [
|
|
// {
|
|
// classes: "btn btn-info",
|
|
// text: "Kembali",
|
|
// type: "back"
|
|
// },
|
|
// {
|
|
// classes: "btn btn-success",
|
|
// text: "Saya Mengerti",
|
|
// type: "cancel"
|
|
// }
|
|
// ],
|
|
// when: {
|
|
// show: () => {
|
|
// console.log("show stepp");
|
|
// },
|
|
// hide: () => {
|
|
// console.log("complete step");
|
|
// }
|
|
// },
|
|
// showCancelLink: false,
|
|
// scrollTo: true,
|
|
// modalOverlayOpeningPadding: 4,
|
|
// useModalOverlay: false,
|
|
// canClickTarget: false
|
|
// }
|
|
// ]
|
|
|
|
// function TourButton() {
|
|
// const tour = useContext(ShepherdTourContext);
|
|
|
|
// return (
|
|
// <Button variant="contained" color="primary" onClick={tour.start}>
|
|
// Start Tour
|
|
// </Button>
|
|
// );
|
|
// }
|
|
|
|
useEffect(() => {
|
|
if (filteredWorkflows.length > 0) {
|
|
|
|
var categoryWorkflows = []
|
|
if (currTab === 0) {
|
|
categoryWorkflows = filteredWorkflows.filter(workflow => workflow?.org_id === userdata?.active_org?.id)
|
|
|
|
if (categoryWorkflows.length === 0) {
|
|
setOrgWorkflows(filteredWorkflows)
|
|
} else {
|
|
setOrgWorkflows(categoryWorkflows)
|
|
}
|
|
}
|
|
else if (currTab === 1) {
|
|
categoryWorkflows = filteredWorkflows.filter(workflow => workflow?.org_id === userdata?.active_org?.id && workflow?.owner === userdata?.id)
|
|
setMyWorkflows(categoryWorkflows)
|
|
}
|
|
|
|
setIsLoadingWorkflow(false);
|
|
|
|
} else {
|
|
if (currTab === 0 && workflows?.length > 0) {
|
|
setOrgWorkflows(workflows)
|
|
}
|
|
}
|
|
}, [currTab, workflows, userdata, filteredWorkflows, filters])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleCategoryChange = (e) => {
|
|
setSelectedCategory(e.target.value)
|
|
}
|
|
|
|
|
|
const iconButtonStyle = {
|
|
color: theme.palette.text.primary,
|
|
backgroundColor: theme.palette.platformColor,
|
|
borderRadius: '4px',
|
|
padding: "12px 16px",
|
|
cursor: 'pointer',
|
|
minWidth: '40px',
|
|
height: 'auto',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
|
|
}
|
|
|
|
const iconButtonDisabledStyle = {
|
|
...iconButtonStyle,
|
|
cursor: 'not-allowed',
|
|
opacity: 0.9, // Reduce opacity
|
|
}
|
|
|
|
const Hits = ({ hits, isSearchStalled, searchQuery }) => {
|
|
|
|
return (
|
|
isLoadingPublicWorkflow ? (
|
|
<LoadingWorkflowGrid />
|
|
) : (
|
|
<div style={{
|
|
marginTop: 16,
|
|
width: "100%",
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(365px, 1fr))",
|
|
gap: "20px",
|
|
justifyContent: "space-between",
|
|
alignItems: "start",
|
|
padding: "0 10px",
|
|
paddingBottom: 40
|
|
}}>
|
|
{hits.map((data, index) => {
|
|
return <WorkflowPaper key={index} data={data} type="public" />
|
|
})}
|
|
</div>
|
|
)
|
|
)
|
|
};
|
|
|
|
const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
|
|
|
|
const inputRef = useRef(null);
|
|
const [localQuery, setLocalQuery] = useState(searchQuery);
|
|
const location = useLocation();
|
|
|
|
|
|
useEffect(() => {
|
|
if (searchQuery) {
|
|
setLocalQuery(searchQuery);
|
|
refine(searchQuery);
|
|
}
|
|
}, [searchQuery, refine]);
|
|
|
|
// Debounced function to refine search
|
|
const debouncedRefine = useRef(
|
|
debounce((value) => {
|
|
setSearchQuery(value);
|
|
removeQuery("q");
|
|
refine(value);
|
|
}, 300)
|
|
).current;
|
|
|
|
useEffect(() => {
|
|
const urlSearchParams = new URLSearchParams(window.location.search);
|
|
const params = Object.fromEntries(urlSearchParams.entries());
|
|
const foundQuery = params["q"];
|
|
if (foundQuery) {
|
|
setLocalQuery(foundQuery);
|
|
debouncedRefine(foundQuery);
|
|
}
|
|
}, [debouncedRefine]);
|
|
|
|
useEffect(() => {
|
|
if (searchQuery === "") {
|
|
return;
|
|
}
|
|
if (inputRef.current) {
|
|
inputRef.current.focus();
|
|
}
|
|
}, [searchQuery]);
|
|
|
|
const handleChange = (event) => {
|
|
const value = event.target.value;
|
|
setLocalQuery(value);
|
|
debouncedRefine(value);
|
|
};
|
|
|
|
return (
|
|
<TextField
|
|
id="shuffle_search_field"
|
|
inputRef={inputRef}
|
|
style={{
|
|
width: "25%",
|
|
maxWidth: "25%",
|
|
minWidth: "25%",
|
|
height: 47,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
}}
|
|
InputProps={{
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
height: "100%",
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
},
|
|
placeholder: "Search Workflows",
|
|
}}
|
|
sx={{
|
|
'& .MuiOutlinedInput-root': {
|
|
borderRadius: '4px',
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
},
|
|
}}
|
|
value={localQuery}
|
|
onChange={handleChange}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
}
|
|
}}
|
|
limit={5}
|
|
variant="outlined"
|
|
placeholder="Search Workflows"
|
|
/>
|
|
)
|
|
}
|
|
|
|
const CustomSearchBox = connectSearchBox(SearchBox)
|
|
const CustomHits = connectHits(Hits)
|
|
|
|
const CategoryDropdown = ({ refine, currentRefinement, items }) => {
|
|
|
|
const handleChange = (event) => {
|
|
// Get the selected values array from the event
|
|
const selectedValues = event.target.value;
|
|
refine(selectedValues);
|
|
};
|
|
|
|
return (
|
|
<Select
|
|
fullWidth
|
|
variant="outlined"
|
|
displayEmpty
|
|
multiple
|
|
value={currentRefinement || []}
|
|
onChange={handleChange}
|
|
style={{
|
|
width: "25%",
|
|
minWidth: "25%",
|
|
maxWidth: "25%",
|
|
height: 47,
|
|
borderRadius: 4,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
fontFamily: theme.typography?.fontFamily,
|
|
color: theme.palette.textFieldStyle.color,
|
|
}}
|
|
MenuProps={{
|
|
anchorOrigin: {
|
|
vertical: 'bottom',
|
|
horizontal: 'left',
|
|
},
|
|
transformOrigin: {
|
|
vertical: 'top',
|
|
horizontal: 'left',
|
|
},
|
|
PaperProps: {
|
|
style: {
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
color: theme.palette.textFieldStyle.color,
|
|
fontFamily: theme.typography?.fontFamily,
|
|
}
|
|
}
|
|
}}
|
|
sx={{
|
|
'& .MuiOutlinedInput-root': {
|
|
'& fieldset': {
|
|
borderColor: 'rgba(255, 255, 255, 0.23)',
|
|
},
|
|
},
|
|
}}
|
|
renderValue={(selected) => {
|
|
if (!selected || selected.length === 0) return 'All Usecases';
|
|
return selected.join(', ');
|
|
}}
|
|
endAdornment={
|
|
(currentRefinement.length > 0 &&
|
|
<InputAdornment position="end">
|
|
|
|
<ClearIcon
|
|
style={{
|
|
position: 'absolute',
|
|
right: 35,
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
cursor: 'pointer',
|
|
color: 'white',
|
|
fontSize: 20,
|
|
zIndex: 1000
|
|
}}
|
|
onClick={() => refine([])}
|
|
/>
|
|
</InputAdornment>
|
|
)
|
|
}
|
|
>
|
|
<MenuItem disabled value="" style={{ fontFamily: theme.typography?.fontFamily, fontSize: 16 }}>
|
|
All Usecases
|
|
</MenuItem>
|
|
{items.map((usecase, index) => (
|
|
<MenuItem
|
|
key={index} // Add key for each MenuItem
|
|
value={usecase.label}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
'&:hover': {
|
|
backgroundColor: '#3A3A3A', // Darker background on hover
|
|
},
|
|
fontFamily: theme.typography?.fontFamily,
|
|
fontSize: 16
|
|
}}
|
|
>
|
|
<Checkbox
|
|
checked={currentRefinement.includes(usecase.label)}
|
|
style={{ marginRight: 8, fontSize: 16 }}
|
|
/>
|
|
{usecase.label} ({usecase.count})
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
);
|
|
};
|
|
const CustomCategoryDropdown = connectRefinementList(CategoryDropdown)
|
|
|
|
const tabStyle = {
|
|
textTransform: 'none',
|
|
marginRight: 20,
|
|
fontFamily: theme.typography?.fontFamily,
|
|
fontSize: 16,
|
|
borderBottom: "5px solid transparent",
|
|
minHeight: "48px",
|
|
padding: "12px 16px",
|
|
}
|
|
|
|
const tabActive = {
|
|
borderBottom: `5px solid ${theme.palette.primary.main}`,
|
|
borderRadius: "2px",
|
|
color: theme.palette.primary.main
|
|
}
|
|
|
|
|
|
const WorkflowView = memo(() => {
|
|
if (workflows.length === 0) {
|
|
}
|
|
|
|
var workflowDelay = -150
|
|
var appDelay = -75
|
|
|
|
const foundPriority = userdata === undefined || userdata === null || userdata.priorities === undefined || userdata.priorities === null ? null : userdata.priorities.find(prio => prio.type === "usecase" && prio.active === true)
|
|
return (
|
|
<>
|
|
<InstantSearch searchClient={searchClient} indexName="workflows">
|
|
<div style={{
|
|
color: "white",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
maxWidth: isSafari ? "100%" : "70%",
|
|
margin: "auto",
|
|
}}>
|
|
<Typography variant="h4" color="textPrimary" style={{ marginBottom: 20, paddingLeft: 15, textTransform: 'none', fontFamily: theme.typography?.fontFamily }}>
|
|
{currTab === 0 ? "Org" : currTab === 1 ? "Your" : currTab === 2 ? "Discover" : "Security Bundle" } Workflows
|
|
</Typography>
|
|
|
|
<div style={{ borderBottom: themeMode === "dark" ? "1px solid #808080" : theme.palette.defaultBorder, marginBottom: 30 }}>
|
|
<Tabs
|
|
value={currTab}
|
|
onChange={(event, newTab) => handleTabChange(event, newTab)}
|
|
style={{
|
|
fontFamily: theme.typography?.fontFamily,
|
|
fontSize: 16,
|
|
marginBottom: "-2px"
|
|
}}
|
|
TabIndicatorProps={{ style: { display: 'none' } }}
|
|
>
|
|
<Tab
|
|
label="Org Workflows"
|
|
style={{
|
|
...tabStyle,
|
|
...(currTab === 0 ? tabActive : {})
|
|
}}
|
|
/>
|
|
<Tab
|
|
label="My Workflows"
|
|
style={{
|
|
...tabStyle,
|
|
...(currTab === 1 ? tabActive : {})
|
|
}}
|
|
/>
|
|
<Tab
|
|
label="Community Workflows"
|
|
style={{
|
|
...tabStyle,
|
|
marginRight: 0,
|
|
...(currTab === 2 ? tabActive : {})
|
|
}}
|
|
/>
|
|
|
|
{backupWorkflows.length > 0 &&
|
|
<Tab
|
|
label={`Onprem Backup (${backupWorkflows.length})`}
|
|
value={3}
|
|
style={{
|
|
...tabStyle,
|
|
borderLeft: "1px solid rgba(255,255,255,0.3)",
|
|
marginLeft: 25,
|
|
...(currTab === 3 ? tabActive : {})
|
|
}}
|
|
/>
|
|
}
|
|
|
|
{backgroundWorkflows.length > 0 &&
|
|
<Tab
|
|
label={`Security Bundle`}
|
|
value={4}
|
|
style={{
|
|
...tabStyle,
|
|
borderLeft: "1px solid rgba(255,255,255,0.3)",
|
|
borderRight: "1px solid rgba(255,255,255,0.3)",
|
|
marginLeft: 25,
|
|
...(currTab === 4 ? tabActive : {})
|
|
}}
|
|
/>
|
|
}
|
|
|
|
<Tab
|
|
label="Org Forms"
|
|
value={5}
|
|
onClick={() => {
|
|
navigate("/forms")
|
|
}}
|
|
style={{
|
|
...tabStyle,
|
|
marginRight: 0,
|
|
marginLeft: 25,
|
|
...(currTab === 5 ? tabActive : {})
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
</div>
|
|
|
|
|
|
{currTab === 4 ? null :
|
|
<div style={{ display: "flex", justifyContent: "space-between", gap: 10, marginBottom: 20, paddingRight: 25, minHeight: 47 }}>
|
|
|
|
{currTab === 2 ? (
|
|
<CustomSearchBox
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
/>
|
|
) :
|
|
(
|
|
<MuiChipsInput
|
|
style={{
|
|
width: "25%",
|
|
maxWidth: "25%",
|
|
minWidth: "25%",
|
|
height: 43,
|
|
maxHeight: "fit-content",
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
zIndex: 1000,
|
|
color: theme.palette.textFieldStyle.color
|
|
}}
|
|
disabled={currTab === 2}
|
|
InputProps={{
|
|
style: {
|
|
height: "fit-content",
|
|
maxHeight: "fit-content",
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
color: theme.palette.textFieldStyle.color
|
|
},
|
|
placeholder: "Filter Workflows",
|
|
// endAdornment: (
|
|
// <InputAdornment position="end">
|
|
// <SearchIcon style={{ color: 'white', paddingRight: 5 }} />
|
|
// </InputAdornment>
|
|
// ),
|
|
onKeyDown: (e) => {
|
|
// Prevent default behavior for Enter and Backspace
|
|
if (e.key === 'Enter' || e.key === 'Backspace') {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.target.focus();
|
|
}
|
|
},
|
|
}}
|
|
clearInputOnBlur={false}
|
|
sx={{
|
|
// Container styling
|
|
'& .MuiOutlinedInput-root': {
|
|
height: "fit-content",
|
|
borderRadius: '4px',
|
|
color: theme.palette.textFieldStyle.color,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
'& fieldset': {
|
|
borderColor: 'rgba(255, 255, 255, 0.23)',
|
|
},
|
|
'&:hover fieldset': {
|
|
borderColor: 'rgba(255, 255, 255, 0.4)',
|
|
},
|
|
},
|
|
|
|
// Adjust chip container to center vertically
|
|
'& .MuiInputBase-root': {
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: '4px',
|
|
fontSize: 18,
|
|
padding: '4px 8px',
|
|
alignItems: 'center',
|
|
height: "fit-content", // Match height
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
color: theme.palette.textFieldStyle.color
|
|
},
|
|
|
|
// Rest of the styling remains the same...
|
|
}}
|
|
value={filters}
|
|
onChange={(chips) => {
|
|
setFilters(chips);
|
|
const remainingCategories = chips.map(chip => {
|
|
const match = chip.match(/\d+\.\s+(\w+)/i);
|
|
return match ? match[1] : chip;
|
|
}).filter(category => {
|
|
return usecases.some(usecase =>
|
|
usecase.name.toLowerCase().includes(category.toLowerCase())
|
|
);
|
|
});
|
|
|
|
setSelectedCategory(remainingCategories);
|
|
findWorkflow(chips);
|
|
|
|
}}
|
|
//onAdd={(chip) => {
|
|
// console.log("ADd: ", chip);
|
|
// addFilter(chip);
|
|
//}}
|
|
//onDelete={(_, index) => {
|
|
// console.log("Remove: ", index);
|
|
// removeFilter(index);
|
|
//}}
|
|
/>
|
|
)}
|
|
|
|
{
|
|
currTab !== 2 && (
|
|
<Select
|
|
fullWidth
|
|
variant="outlined"
|
|
value={selectedCategory}
|
|
onChange={handleCategoryChange}
|
|
displayEmpty
|
|
disabled={currTab === 2}
|
|
multiple
|
|
style={{
|
|
width: "25%",
|
|
minWidth: "25%",
|
|
maxWidth: "25%",
|
|
height: 47,
|
|
borderRadius: 4,
|
|
fontSize: 18,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
fontFamily: theme.typography?.fontFamily,
|
|
}}
|
|
sx={{
|
|
'& .MuiOutlinedInput-root': {
|
|
'& fieldset': {
|
|
borderColor: 'rgba(255, 255, 255, 0.23)',
|
|
},
|
|
},
|
|
}}
|
|
renderValue={(selected) => selected.length ? selected.join(', ') : 'All Categories'}
|
|
>
|
|
<MenuItem disabled value="">
|
|
All Categories
|
|
</MenuItem>
|
|
{usecases.map((usecase, index) => {
|
|
if (usecase?.name === "5. Verify") {
|
|
return null;
|
|
}
|
|
|
|
const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length / usecase.list.length * 100) : 0
|
|
if (percentDone === 0) {
|
|
usecase = findMatches(usecase, workflows)
|
|
}
|
|
|
|
const category = usecase?.name.split(" ")[1]
|
|
return (
|
|
<MenuItem
|
|
value={category}
|
|
onClick={() => {
|
|
if (!filters.includes(usecase?.name.toLowerCase())) {
|
|
addFilter(usecase.name)
|
|
} else {
|
|
removeFilter(filters.indexOf(usecase?.name.toLowerCase()))
|
|
}
|
|
}}
|
|
sx={{
|
|
padding: "12px 16px",
|
|
borderBottom: index === usecases.length - 2 ? "none" : "1px solid rgba(255,255,255,0.05)",
|
|
"&:hover": {
|
|
backgroundColor: "rgba(255,255,255,0.1)"
|
|
},
|
|
}}
|
|
>
|
|
<div style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
gap: "12px"
|
|
}}>
|
|
<Checkbox
|
|
checked={selectedCategory.includes(category)}
|
|
style={{
|
|
padding: 0,
|
|
marginRight: 8,
|
|
color: theme.palette.textFieldStyle.color,
|
|
}}
|
|
/>
|
|
<div style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
width: "100%"
|
|
}}>
|
|
<Typography
|
|
variant="body1"
|
|
style={{
|
|
color: theme.palette.textFieldStyle.color,
|
|
fontWeight: selectedCategory.includes(category) ? 500 : 400
|
|
}}
|
|
>
|
|
{category}
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
style={{
|
|
color: theme.palette.textFieldStyle.color,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
padding: "2px 8px",
|
|
borderRadius: "12px",
|
|
fontSize: "0.75rem"
|
|
}}
|
|
>
|
|
{usecase?.matches.length}/{usecase?.list.length}
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
</MenuItem>
|
|
)
|
|
})}
|
|
</Select>
|
|
)
|
|
}
|
|
{
|
|
currTab === 2 && (
|
|
<CustomCategoryDropdown attribute="usecase_ids" limit={20} />
|
|
)
|
|
}
|
|
|
|
<div style={{ width: "50%", minWidth: "50%", maxWidth: "50%", height: 47, display: "flex", gap: 5 }}>
|
|
<div style={{
|
|
display: "flex",
|
|
height: "100%",
|
|
justifyContent: "space-around",
|
|
flex: 0.7,
|
|
paddingLeft: 1,
|
|
paddingRight: 1,
|
|
gap: 4
|
|
}}>
|
|
|
|
<Tooltip title="Show/Hide Workflow Runs for top workflows" placement="top">
|
|
<IconButton
|
|
style={currTab === 2 ? iconButtonDisabledStyle : {...iconButtonStyle, color: showExecutionStats ? "#1a1a1a" : theme.palette.text.primary, background: showExecutionStats ? theme.palette.primary.main : theme.palette.platformColor}}
|
|
onClick={() => {
|
|
|
|
const newView = !showExecutionStats
|
|
localStorage.setItem("showExecutionStats", newView)
|
|
setShowExecutionStats(!showExecutionStats)
|
|
}}
|
|
disabled={currTab === 2}
|
|
>
|
|
<BarChartIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<Tooltip title="Show/Hide Workflow image" placement="top">
|
|
<IconButton
|
|
style={currTab === 2 ? iconButtonDisabledStyle : {...iconButtonStyle, color: showWorkflowImages ? "#1a1a1a" : theme.palette.text.primary, background: showWorkflowImages ? theme.palette.primary.main : theme.palette.platformColor}}
|
|
onClick={() => {
|
|
|
|
const newView = !showWorkflowImages
|
|
localStorage.setItem("showWorkflowImages", newView)
|
|
setShowWorkflowImages(!showWorkflowImages)
|
|
}}
|
|
disabled={currTab === 2}
|
|
>
|
|
<ImageIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<Tooltip title="Explore Workflow Runs (debugger)" placement="top">
|
|
<IconButton
|
|
style={currTab === 2 ? iconButtonDisabledStyle : iconButtonStyle}
|
|
onClick={() => navigate("/workflows/debug")}
|
|
disabled={currTab === 2}
|
|
>
|
|
<QueryStatsIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1 }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<Tooltip title={view === "grid" ? "List view (Org Workflows only)" : "Grid view"} placement="top">
|
|
<IconButton
|
|
style={currTab === 2 ? iconButtonDisabledStyle : iconButtonStyle}
|
|
onClick={() => {
|
|
const newView = view === "grid" ? "list" : "grid";
|
|
localStorage.setItem("workflowView", newView);
|
|
setView(newView);
|
|
|
|
if (view === "grid") {
|
|
setCurrTab(0)
|
|
}
|
|
}}
|
|
disabled={currTab === 2}
|
|
>
|
|
{view === "grid" ?
|
|
<ListIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1 }} /> :
|
|
<GridOnIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1 }} />
|
|
}
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<Tooltip title="Import workflows" placement="top">
|
|
<IconButton
|
|
style={currTab === 2 ? iconButtonDisabledStyle : iconButtonStyle}
|
|
onClick={() => upload.click()}
|
|
disabled={currTab === 2}
|
|
>
|
|
{submitLoading ?
|
|
<CircularProgress color="secondary" /> :
|
|
<PublishIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1}} />
|
|
}
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<input
|
|
hidden
|
|
type="file"
|
|
multiple="multiple"
|
|
ref={(ref) => (upload = ref)}
|
|
onChange={importFiles}
|
|
/>
|
|
|
|
<Tooltip title={`Download ALL workflows (${workflows.length})`} placement="top">
|
|
<IconButton
|
|
style={(currTab === 2) ? iconButtonDisabledStyle : { ...iconButtonStyle, cursor: "pointer" }}
|
|
disabled={currTab === 2}
|
|
onClick={() => exportAllWorkflows(workflows)}
|
|
>
|
|
<GetAppIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1}} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Import workflows from URL" placement="top">
|
|
<IconButton
|
|
style={currTab === 2 ? iconButtonDisabledStyle : iconButtonStyle}
|
|
onClick={() => setLoadWorkflowsModalOpen(true)}
|
|
disabled={currTab === 2}
|
|
>
|
|
<CloudDownloadIcon style={{ color: theme.palette.text.primary, opacity: currTab === 2 ? 0.5 : 1}} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={handleCreateWorkflow}
|
|
id="create_workflow_button"
|
|
style={{
|
|
borderRadius: 4,
|
|
flex: 0.8,
|
|
textTransform: 'none',
|
|
fontFamily: theme.typography?.fontFamily,
|
|
fontSize: 16,
|
|
fontWeight: 500
|
|
}}
|
|
startIcon={<AddIcon />}
|
|
>
|
|
Create Workflow
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
{!isCloud && (currentOrg?.old_org || isProdStatusOn) ? (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 20,
|
|
right: 20,
|
|
}}
|
|
>
|
|
<Licensed
|
|
licensed={isProdStatusOn}
|
|
showBadge={true}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
<div style={{
|
|
width: "100%",
|
|
position: "relative",
|
|
zIndex: 1
|
|
}}>
|
|
|
|
|
|
{
|
|
(isLoadingWorkflow && currTab !== 2) ? (
|
|
<LoadingWorkflowGrid />
|
|
) : (
|
|
view === "grid" && currTab !== 2 ? (
|
|
<>
|
|
{currTab === 4 && backgroundWorkflows.map((data, index) => {
|
|
if (data?.triggers === null || data?.triggers === undefined || data?.triggers?.length === 0) {
|
|
return null
|
|
}
|
|
|
|
var foundWebhook = ""
|
|
var foundtrigger = {}
|
|
for (var triggerKey in data.triggers) {
|
|
if (data.triggers[triggerKey].trigger_type === "WEBHOOK") {
|
|
foundWebhook = `${globalUrl}/api/v1/hooks/webhook_${data.triggers[triggerKey].id}`
|
|
foundtrigger = data.triggers[triggerKey]
|
|
break
|
|
}
|
|
}
|
|
|
|
if (foundWebhook === "") {
|
|
return null
|
|
}
|
|
|
|
var webhookName = ``
|
|
if (data?.name?.toLowerCase().includes("ingest tickets")) {
|
|
webhookName = "Send your Tickets, Alerts, Cases and Detections here. This will ingest them into Shuffle."
|
|
}
|
|
|
|
return (
|
|
<div style={{padding: 50, }}
|
|
onMouseEnter={() => {
|
|
// Find the relevant workflow paper and highlight it
|
|
const foundElement = document.getElementById(`workflowbox-${data.id}`)
|
|
if (foundElement) {
|
|
foundElement.style.border = `3px solid ${theme.palette.primary.main}`
|
|
}
|
|
}}
|
|
onMouseLeave={() => {
|
|
const foundElement = document.getElementById(`workflowbox-${data.id}`)
|
|
if (foundElement) {
|
|
foundElement.style.border = null
|
|
}
|
|
}}
|
|
>
|
|
<Typography variant="body1" style={{ marginBottom: 10, fontFamily: theme.typography?.fontFamily, display: "flex", alignItems: "center", gap: 10 }}>
|
|
{webhookName}
|
|
</Typography>
|
|
|
|
<TextField
|
|
value={foundWebhook}
|
|
readOnly
|
|
fullWidth
|
|
disabled
|
|
|
|
// Add start adornment with webhook icon
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<img
|
|
alt="webhook"
|
|
src={wfTriggers[0].large_image}
|
|
style={{
|
|
width: 40,
|
|
height: 40,
|
|
marginRight: 20,
|
|
border: foundtrigger.status === "Running" || foundtrigger.status === "running" ? `2px solid ${green}` : `2px solid ${red}`,
|
|
borderRadius: theme.palette.borderRadius,
|
|
}}
|
|
/>
|
|
|
|
<Tooltip title={"Copy to clipboard"} placement="top">
|
|
<IconButton
|
|
onClick={() => {
|
|
if (navigator.clipboard === undefined) {
|
|
toast("Your browser doesn't support clipboard copying, please copy manually.", { type: "error" });
|
|
} else {
|
|
navigator.clipboard.writeText(foundWebhook);
|
|
}
|
|
}}
|
|
style={{
|
|
color: theme.palette.textFieldStyle.color,
|
|
backgroundColor: theme.palette.platformColor,
|
|
marginRight: 10,
|
|
borderRadius: 4,
|
|
}}
|
|
id="copy_webhook_url_button"
|
|
>
|
|
<ContentCopyIcon style={{ color: theme.palette.textFieldStyle.color }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</InputAdornment>
|
|
),
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
<div style={{
|
|
marginTop: 32,
|
|
width: "100%",
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(365px, 1fr))",
|
|
gap: "20px",
|
|
justifyContent: "space-between",
|
|
alignItems: "start",
|
|
padding: "0 10px",
|
|
paddingBottom: 40
|
|
}}>
|
|
|
|
{currTab !== 0 ? null :
|
|
orgWorkflows.length === 0 ?
|
|
<Typography variant="h6" style={{margin: "auto", minWidth: 500, }} >
|
|
No workflows found in this org with the Org ID filter. If this is an error, please click the "List View" button at the top to see ALL available workflows ({workflows.length}).
|
|
</Typography> :
|
|
orgWorkflows.map((data, index) => {
|
|
// Shouldn't be a part of this list
|
|
if (data.public === true) {
|
|
return null
|
|
}
|
|
|
|
// if (firstLoad) {
|
|
// workflowDelay += 75
|
|
// } else {
|
|
// return <WorkflowPaper key={index} data={data} />
|
|
// }
|
|
|
|
return (
|
|
<span key={index}>
|
|
{/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
|
|
<WorkflowPaper data={data} />
|
|
{/*</Zoom>*/}
|
|
</span>
|
|
)
|
|
})}
|
|
|
|
{currTab === 3 && backupWorkflows.map((data, index) => {
|
|
// Shouldn't be a part of this list
|
|
if (data.public === true) {
|
|
return null
|
|
}
|
|
|
|
// if (firstLoad) {
|
|
// workflowDelay += 75
|
|
// } else {
|
|
// return <WorkflowPaper key={index} data={data} />
|
|
// }
|
|
|
|
return (
|
|
<span key={index}>
|
|
{/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
|
|
<WorkflowPaper data={data} />
|
|
{/*</Zoom>*/}
|
|
</span>
|
|
)
|
|
})}
|
|
|
|
{currTab === 4 && backgroundWorkflows.map((data, index) => {
|
|
// Shouldn't be a part of this list
|
|
if (data.public === true) {
|
|
return null
|
|
}
|
|
|
|
// if (firstLoad) {
|
|
// workflowDelay += 75
|
|
// } else {
|
|
// return <WorkflowPaper key={index} data={data} />
|
|
// }
|
|
|
|
return (
|
|
<span key={index}>
|
|
{/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
|
|
<WorkflowPaper data={data} />
|
|
{/*</Zoom>*/}
|
|
</span>
|
|
)
|
|
})}
|
|
|
|
|
|
{
|
|
currTab !== 1 ? null :
|
|
myWorkflows.length === 0 ?
|
|
<Typography variant="h6" style={{margin: "auto", width: 500, }} >
|
|
No workflows found in this org for your user.
|
|
</Typography> :
|
|
myWorkflows.map((data, index) => {
|
|
if (data.public === true) {
|
|
return null
|
|
}
|
|
|
|
// if (firstLoad) {
|
|
// workflowDelay += 75
|
|
// } else {
|
|
// return <WorkflowPaper key={index} data={data} />
|
|
// }
|
|
|
|
return (
|
|
<span key={index}>
|
|
{/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
|
|
<WorkflowPaper data={data} />
|
|
{/*</Zoom>*/}
|
|
</span>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</>
|
|
) : (
|
|
currTab !== 2 && <WorkflowListView />
|
|
)
|
|
)
|
|
}
|
|
|
|
{
|
|
currTab === 2 &&
|
|
(
|
|
<CustomHits hitsPerPage={5} searchQuery={searchQuery} type="public" />
|
|
)
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
<Configure clickAnalytics />
|
|
</InstantSearch>
|
|
</>
|
|
|
|
);
|
|
});
|
|
|
|
const listRemoteWorkflows = () => {
|
|
const parsedData = {
|
|
url: downloadUrl,
|
|
branch: downloadBranch || "master",
|
|
list_only: true,
|
|
};
|
|
if (field1.length > 0) parsedData["username"] = field1;
|
|
if (field2.length > 0) parsedData["password"] = field2;
|
|
|
|
setRemoteWorkflowsLoading(true);
|
|
fetch(globalUrl + "/api/v1/workflows/download_remote", {
|
|
method: "POST",
|
|
mode: "cors",
|
|
headers: { Accept: "application/json" },
|
|
body: JSON.stringify(parsedData),
|
|
credentials: "include",
|
|
})
|
|
.then((r) => r.json())
|
|
.then((responseJson) => {
|
|
setRemoteWorkflowsLoading(false);
|
|
if (responseJson.success && Array.isArray(responseJson.workflows)) {
|
|
setRemoteWorkflows(responseJson.workflows);
|
|
setLoadWorkflowsModalOpen(false);
|
|
setSyncListModalOpen(true);
|
|
} else {
|
|
toast("Failed to list remote workflows: " + (responseJson.reason || "Unknown error"));
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
setRemoteWorkflowsLoading(false);
|
|
toast(err.toString());
|
|
});
|
|
};
|
|
|
|
const handleRemoteWorkflowAction = (remoteWf, action) => {
|
|
const parsedData = {
|
|
url: downloadUrl,
|
|
branch: downloadBranch || "master",
|
|
original_workflow_id: remoteWf.id,
|
|
};
|
|
if (action === "sync") {
|
|
parsedData["sync_to_id"] = remoteWf.org_workflow_id || remoteWf.id;
|
|
}
|
|
if (field1.length > 0) parsedData["username"] = field1;
|
|
if (field2.length > 0) parsedData["password"] = field2;
|
|
|
|
toast(action === "sync" ? `Syncing "${remoteWf.name}"...` : `Importing "${remoteWf.name}"...`);
|
|
fetch(globalUrl + "/api/v1/workflows/download_remote", {
|
|
method: "POST",
|
|
mode: "cors",
|
|
headers: { Accept: "application/json" },
|
|
body: JSON.stringify(parsedData),
|
|
credentials: "include",
|
|
})
|
|
.then((r) => r.json())
|
|
.then((responseJson) => {
|
|
if (responseJson.success) {
|
|
toast.success(action === "sync" ? `"${remoteWf.name}" synced successfully` : `"${remoteWf.name}" imported successfully`);
|
|
// Refresh org workflow list and update local exists_in_org state
|
|
getAvailableWorkflows();
|
|
setRemoteWorkflows((prev) =>
|
|
prev.map((w) =>
|
|
w.id === remoteWf.id ? { ...w, exists_in_org: true, org_workflow_id: w.id } : w
|
|
)
|
|
);
|
|
} else {
|
|
toast("Failed: " + (responseJson.reason || "Unknown error"));
|
|
}
|
|
})
|
|
.catch((err) => toast(err.toString()));
|
|
};
|
|
|
|
const importWorkflowsFromUrl = (url) => {
|
|
console.log("IMPORT WORKFLOWS FROM ", downloadUrl);
|
|
|
|
const parsedData = {
|
|
url: url,
|
|
branch: downloadBranch || "master",
|
|
};
|
|
|
|
if (field1.length > 0) {
|
|
parsedData["username"] = field1;
|
|
}
|
|
|
|
if (field2.length > 0) {
|
|
parsedData["password"] = field2;
|
|
}
|
|
|
|
toast("Getting specific workflows from your URL.");
|
|
fetch(globalUrl + "/api/v1/workflows/download_remote", {
|
|
method: "POST",
|
|
mode: "cors",
|
|
headers: {
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(parsedData),
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status === 200) {
|
|
toast("Successfully loaded workflows from " + downloadUrl);
|
|
setTimeout(() => {
|
|
getAvailableWorkflows();
|
|
}, 1000);
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (!responseJson.success) {
|
|
if (responseJson.reason !== undefined) {
|
|
toast("Failed loading: " + responseJson.reason);
|
|
} else {
|
|
toast("Failed loading");
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
toast(error.toString());
|
|
});
|
|
};
|
|
|
|
const handleGithubValidation = () => {
|
|
if (syncMode) {
|
|
listRemoteWorkflows();
|
|
} else {
|
|
importWorkflowsFromUrl(downloadUrl);
|
|
setLoadWorkflowsModalOpen(false);
|
|
}
|
|
}
|
|
|
|
const workflowDownloadModalOpen = loadWorkflowsModalOpen ? (
|
|
<Dialog
|
|
open={loadWorkflowsModalOpen}
|
|
onClose={() => { }}
|
|
PaperProps={{
|
|
sx: {
|
|
borderRadius: theme?.palette?.DialogStyle?.borderRadius,
|
|
border: theme?.palette?.DialogStyle?.border,
|
|
minWidth: '440px',
|
|
fontFamily: theme?.typography?.fontFamily,
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
zIndex: 1000,
|
|
'& .MuiDialogContent-root': {
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
},
|
|
'& .MuiDialogTitle-root': {
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
},
|
|
'& .MuiDialogActions-root': {
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
},
|
|
}
|
|
}}
|
|
>
|
|
<DialogTitle>
|
|
<div style={{ color: theme.palette.text.primary }}>
|
|
Load workflows from a remote repository
|
|
<div style={{ float: "right" }}>
|
|
<Tooltip color="primary" title={"Import manually"} placement="top">
|
|
<Button
|
|
color="primary"
|
|
style={{}}
|
|
variant="text"
|
|
onClick={() => upload.click()}
|
|
>
|
|
<PublishIcon />
|
|
</Button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</DialogTitle>
|
|
<DialogContent style={{ color: theme.palette.text.primary }}>
|
|
Repository (supported: github, gitlab, bitbucket, azure devops):
|
|
<TextField
|
|
style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.textFieldStyle.color, borderRadius: theme.palette.textFieldStyle.borderRadius, height: theme.palette.textFieldStyle.height, border: theme.palette.textFieldStyle.border, }}
|
|
variant="outlined"
|
|
margin="normal"
|
|
defaultValue={downloadUrl}
|
|
InputProps={{
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
height: theme.palette.textFieldStyle.height,
|
|
fontSize: "1em",
|
|
},
|
|
}}
|
|
onChange={(e) => setDownloadUrl(e.target.value)}
|
|
placeholder="https://github.com/shuffle/workflows"
|
|
fullWidth
|
|
/>
|
|
<span style={{ marginTop: 10 }}>
|
|
Branch (default value is "main"):
|
|
</span>
|
|
<div style={{ display: "flex" }}>
|
|
<TextField
|
|
style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.textFieldStyle.color, borderRadius: theme.palette.textFieldStyle.borderRadius, height: theme.palette.textFieldStyle.height, border: theme.palette.textFieldStyle.border, }}
|
|
variant="outlined"
|
|
margin="normal"
|
|
defaultValue={downloadBranch}
|
|
InputProps={{
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
height: theme.palette.textFieldStyle.height,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
fontSize: "1em",
|
|
},
|
|
}}
|
|
onChange={(e) => setDownloadBranch(e.target.value)}
|
|
placeholder="main"
|
|
fullWidth
|
|
/>
|
|
</div>
|
|
<span style={{ marginTop: 10 }}>
|
|
Authentication for private repositories (optional):
|
|
</span>
|
|
<div style={{ display: "flex" }}>
|
|
<TextField
|
|
style={{ flex: 1, backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.textFieldStyle.color, borderRadius: theme.palette.textFieldStyle.borderRadius, height: theme.palette.textFieldStyle.height, border: theme.palette.textFieldStyle.border, }}
|
|
variant="outlined"
|
|
margin="normal"
|
|
InputProps={{
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
height: theme.palette.textFieldStyle.height,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
fontSize: "1em",
|
|
},
|
|
}}
|
|
onChange={(e) => setField1(e.target.value)}
|
|
type="username"
|
|
placeholder="Username / APIkey (optional)"
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
style={{ flex: 1, backgroundColor: theme.palette.textFieldStyle.backgroundColor, color: theme.palette.textFieldStyle.color, borderRadius: theme.palette.textFieldStyle.borderRadius, height: theme.palette.textFieldStyle.height, border: theme.palette.textFieldStyle.border, }}
|
|
variant="outlined"
|
|
margin="normal"
|
|
InputProps={{
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color ,
|
|
height: theme.palette.textFieldStyle.height,
|
|
fontSize: "1em",
|
|
},
|
|
}}
|
|
onChange={(e) => setField2(e.target.value)}
|
|
type="password"
|
|
placeholder="Password (optional)"
|
|
fullWidth
|
|
/>
|
|
</div>
|
|
<div style={{ display: "flex", alignItems: "center", marginTop: 16 }}>
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
checked={syncMode}
|
|
onChange={(e) => setSyncMode(e.target.checked)}
|
|
color="primary"
|
|
/>
|
|
}
|
|
label={
|
|
<Typography variant="body2" style={{ color: theme.palette.text.primary }}>
|
|
Sync — list workflows before importing
|
|
</Typography>
|
|
}
|
|
/>
|
|
</div>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button
|
|
style={{ borderRadius: "0px" }}
|
|
onClick={() => setLoadWorkflowsModalOpen(false)}
|
|
color="primary"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
disabled={downloadUrl.length === 0 || !downloadUrl.includes("http") || remoteWorkflowsLoading}
|
|
onClick={() => {
|
|
handleGithubValidation();
|
|
}}
|
|
>
|
|
{remoteWorkflowsLoading ? <CircularProgress size={20} color="inherit" /> : (syncMode ? "List & Sync" : "Submit")}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
) : null;
|
|
|
|
const syncListModal = syncListModalOpen ? (
|
|
<Dialog
|
|
open={syncListModalOpen}
|
|
onClose={() => setSyncListModalOpen(false)}
|
|
PaperProps={{
|
|
sx: {
|
|
borderRadius: theme?.palette?.DialogStyle?.borderRadius,
|
|
border: theme?.palette?.DialogStyle?.border,
|
|
minWidth: "700px",
|
|
maxWidth: "900px",
|
|
fontFamily: theme?.typography?.fontFamily,
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
zIndex: 1000,
|
|
'& .MuiDialogContent-root': {
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
},
|
|
'& .MuiDialogTitle-root': {
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
},
|
|
'& .MuiDialogActions-root': {
|
|
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
|
|
},
|
|
}
|
|
}}
|
|
>
|
|
<DialogTitle>
|
|
<div style={{ color: theme.palette.text.primary, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
|
<span>Workflows from remote repository</span>
|
|
<IconButton size="small" onClick={() => setSyncListModalOpen(false)}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</div>
|
|
</DialogTitle>
|
|
<DialogContent style={{ color: theme.palette.text.primary, paddingTop: 0 }}>
|
|
{remoteWorkflows.length === 0 ? (
|
|
<Typography variant="body2" style={{ marginTop: 8 }}>No workflow JSON files found in the repository.</Typography>
|
|
) : (
|
|
<TableContainer>
|
|
<Table size="small">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell style={{ color: theme.palette.text.primary, fontWeight: 600 }}>Name</TableCell>
|
|
{/* <TableCell style={{ color: theme.palette.text.primary, fontWeight: 600 }}>Folder</TableCell> */}
|
|
<TableCell style={{ color: theme.palette.text.primary, fontWeight: 600 }}>Last Updated</TableCell>
|
|
<TableCell style={{ color: theme.palette.text.primary, fontWeight: 600 }} align="right">Action</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{remoteWorkflows.map((wf) => (
|
|
<TableRow key={wf.id}>
|
|
<TableCell style={{ color: theme.palette.text.primary }}>{wf.name}</TableCell>
|
|
{/* <TableCell style={{ color: theme.palette.text.secondary }}>{wf.folder_name || "—"}</TableCell> */}
|
|
<TableCell style={{ color: theme.palette.text.secondary }}>
|
|
{wf.updated_at && wf.updated_at > 0
|
|
? new Date(wf.updated_at * 1000).toLocaleDateString()
|
|
: "—"}
|
|
</TableCell>
|
|
<TableCell align="right">
|
|
{wf.exists_in_org ? (
|
|
<Button
|
|
variant="outlined"
|
|
color="primary"
|
|
size="small"
|
|
startIcon={<CachedIcon />}
|
|
onClick={() => handleRemoteWorkflowAction(wf, "sync")}
|
|
>
|
|
Sync
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
size="small"
|
|
startIcon={<CloudDownloadIcon />}
|
|
onClick={() => handleRemoteWorkflowAction(wf, "import")}
|
|
>
|
|
Import
|
|
</Button>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => setSyncListModalOpen(false)} color="primary">
|
|
Close
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
) : null;
|
|
|
|
//const
|
|
//const [percentDone, setPercentDone] = React.useState(0)
|
|
const percentDone = gettingStartedItems.filter((item) => item.done).length / gettingStartedItems.length * 100
|
|
|
|
const GettingStartedItem = ({ item, index }) => {
|
|
const [clicked, setClicked] = React.useState(false)
|
|
const doneIcon = item.done ? <CheckCircleIcon style={{ color: "#4caf50", marginRight: 10, }} /> : <RadioButtonUncheckedIcon disabled style={{ color: "#bdbdbd", marginRight: 10, }} />
|
|
|
|
return (
|
|
<div
|
|
style={{ cursor: "pointer", padding: 20, borderBottom: "1px solid rgba(255,255,255,0.3", backgroundColor: !clicked ? "#1f2023" : theme.palette.inputColor, }}
|
|
onClick={() => setClicked(true)}
|
|
>
|
|
<Typography variant="body2" style={{ display: "flex", textDecoration: item.done ? "line-through" : "none", }}>
|
|
{doneIcon} {index + 1}. {item.name}
|
|
</Typography>
|
|
{clicked ?
|
|
<span>
|
|
<Typography variant="body2" style={{ marginLeft: 30, }}>
|
|
{item.description}
|
|
</Typography>
|
|
<Link to={item.link} style={{ color: "inherit", textDecoration: "none", }}>
|
|
<Button variant={item.done ? "outlined" : "contained"} color="primary" style={{ marginLeft: 30, marginTop: 5, }}>
|
|
Configure
|
|
</Button>
|
|
</Link>
|
|
</span>
|
|
:
|
|
null
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const gettingStartedDrawer = true == true ? null :
|
|
<Drawer
|
|
anchor={"right"}
|
|
open={drawerOpen}
|
|
variant="persistent"
|
|
keepMounted={true}
|
|
PaperProps={{
|
|
style: {
|
|
resize: "both",
|
|
overflow: "auto",
|
|
minWidth: drawerWidth,
|
|
maxWidth: drawerWidth,
|
|
backgroundColor: "#1F2023",
|
|
color: "white",
|
|
fontSize: 18,
|
|
borderLeft: theme.palette.defaultBorder,
|
|
marginTop: 100,
|
|
borderRadius: "5px 0px 0px 0px",
|
|
},
|
|
}}
|
|
>
|
|
<div style={{ backgroundColor: "#f86a3e", display: "flex", }}>
|
|
<Typography variant="h6" style={{ flex: 5, marginTop: 20, marginLeft: 20, marginBottom: 20, }}>
|
|
Getting Started
|
|
</Typography>
|
|
<Tooltip
|
|
title="Close drawer"
|
|
placement="top"
|
|
>
|
|
<IconButton
|
|
style={{ flex: 1, }}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setDrawerOpen(false)
|
|
|
|
localStorage.setItem(sidebarKey, "closed");
|
|
}}
|
|
>
|
|
<ArrowRightIcon style={{ color: "white" }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div>
|
|
<div style={{ padding: 20, }}>
|
|
<Typography variant="body2">
|
|
Setup progress: <b>{isNaN(percentDone) ? 0 : percentDone}%</b>
|
|
</Typography>
|
|
|
|
<LinearProgress color="primary" variant="determinate" value={percentDone} style={{ marginTop: 5, height: 7, borderRadius: theme.palette?.borderRadius, }} />
|
|
|
|
<Typography variant="body2" style={{ marginTop: 20, }}>
|
|
Follow these steps to get you up and running!
|
|
</Typography>
|
|
<Divider style={{ marginTop: 20, }} />
|
|
<Typography variant="body2" style={{ color: "#f86a3e", marginTop: 20, cursor: "pointer", }} onClick={() => {
|
|
setVideoViewOpen(true)
|
|
}}>
|
|
<b>Watch 2-min introduction video</b>
|
|
</Typography>
|
|
</div>
|
|
<div style={{ borderTop: "1px solid rgba(255,255,255,0.3)", }}>
|
|
{gettingStartedItems.map((item, index) => {
|
|
return (
|
|
<GettingStartedItem key={index} item={item} index={index} />
|
|
)
|
|
})}
|
|
</div>
|
|
</Drawer>
|
|
|
|
const videoView =
|
|
<Dialog
|
|
open={videoViewOpen}
|
|
onClose={() => {
|
|
setVideoViewOpen(false)
|
|
}}
|
|
PaperProps={{
|
|
style: {
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
color: "white",
|
|
minWidth: 560,
|
|
minHeight: 415,
|
|
textAlign: "center",
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle>
|
|
Welcome to Shuffle!
|
|
</DialogTitle>
|
|
|
|
<Tooltip
|
|
title="Close window"
|
|
placement="top"
|
|
style={{ zIndex: 10011 }}
|
|
>
|
|
<IconButton
|
|
style={{ zIndex: 5000, position: "absolute", top: 10, right: 34 }}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setVideoViewOpen(false)
|
|
}}
|
|
>
|
|
<CloseIcon style={{ color: "white" }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<iframe
|
|
width="560"
|
|
height="315"
|
|
style={{ margin: "0px auto 0px auto", width: 560, height: 315, }}
|
|
src="https://www.youtube-nocookie.com/embed/rO7k9q3OgC0"
|
|
title="Introduction video"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen
|
|
>
|
|
</iframe>
|
|
</Dialog>
|
|
|
|
//isLoaded && isLoggedIn && workflowDone ? (
|
|
const loadedCheck =
|
|
workflowDone && isLoaded ? (
|
|
<div>
|
|
{/*
|
|
<ShepherdTour steps={newSteps} tourOptions={tourOptions}>
|
|
<TourButton />
|
|
</ShepherdTour>
|
|
*/}
|
|
<DropzoneWrapper onDrop={uploadFile} WorkflowView={WorkflowView} />
|
|
{deleteModal}
|
|
{exportVerifyModal}
|
|
{publishModal}
|
|
{aiAnnouncementModal}
|
|
{workflowDownloadModalOpen}
|
|
{syncListModal}
|
|
|
|
{/*!drawerOpen ?
|
|
<div style={{ position: "fixed", top: 64, right: -5, backgroundColor: theme.palette.inputColor, borderRadius: theme.palette?.borderRadius, }}>
|
|
<Tooltip title={`Getting Started`} placement="bottom">
|
|
<IconButton onClick={() => {
|
|
setDrawerOpen(true)
|
|
localStorage.setItem(sidebarKey, "open");
|
|
}}>
|
|
<ArrowLeftIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div> : null*/}
|
|
{isMobile ? null : gettingStartedDrawer}
|
|
{videoView}
|
|
|
|
{modalOpen === true ?
|
|
<EditWorkflow
|
|
globalUrl={globalUrl}
|
|
userdata={userdata}
|
|
workflow={editingWorkflow}
|
|
setWorkflow={setEditingWorkflow}
|
|
modalOpen={modalOpen}
|
|
setModalOpen={setModalOpen}
|
|
usecases={usecases}
|
|
setNewWorkflow={setNewWorkflow}
|
|
appFramework={appFramework}
|
|
isEditing={isEditing}
|
|
|
|
workflows={workflows}
|
|
apps={apps}
|
|
setWorkflows={setWorkflows}
|
|
/>
|
|
: null}
|
|
{/*<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={{
|
|
paddingTop: 250,
|
|
width: 250,
|
|
margin: "auto",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<CircularProgress />
|
|
<Typography style={{marginTop: 5, }}>
|
|
Loading Workflows and Apps
|
|
</Typography>
|
|
</div>
|
|
);
|
|
|
|
const safariStyle = {
|
|
transform: 'scale(0.7)',
|
|
transformOrigin: 'top',
|
|
width: '100%',
|
|
height: '100%',
|
|
}
|
|
|
|
// Maybe use gridview or something, idk
|
|
return <div style={isSafari ? safariStyle : {zoom: 0.7, minHeight: "80vh",}}>{loadedCheck}</div>;
|
|
// return <div style={isSafari ? safariStyle : {minHeight: "80vh",}}>{loadedCheck}</div>;
|
|
};
|
|
|
|
|
|
|
|
export default Workflows2;
|