{/* Health Bar Chart Section */}
-
- filterDataByRange('24hr')} disabled={isHealthLoading}>24h
- filterDataByRange('7day')} disabled={isHealthLoading}>7d
- filterDataByRange('30d')} disabled={isHealthLoading}>30d
- filterDataByRange('90d')} disabled={isHealthLoading}>90d
- filterDataByRange('180d')} disabled={isHealthLoading}>180d
-
+
+
+ filterDataByRange('24hr')} disabled={isHealthLoading}>24h
+ filterDataByRange('7day')} disabled={isHealthLoading}>7d
+ filterDataByRange('30d')} disabled={isHealthLoading}>30d
+ filterDataByRange('90d')} disabled>90d
+ filterDataByRange('180d')} disabled>180d
+
+
+ {isFixingOpensearchPrefix ? 'Fixing Opensearch Prefix...' : 'Fix Opensearch Prefix'}
+
+
{/* Loading Bar for HealthBarChart */}
{isHealthLoading && (
diff --git a/frontend/src/components/LeftSideBar.jsx b/frontend/src/components/LeftSideBar.jsx
index 73a37a37..056867ae 100644
--- a/frontend/src/components/LeftSideBar.jsx
+++ b/frontend/src/components/LeftSideBar.jsx
@@ -2,14 +2,13 @@ import React, { useEffect, useRef, useState, useContext, useCallback, useMemo, m
import {
ExpandLess as ExpandLessIcon,
ExpandMore as ExpandMoreIcon,
- GridView as GridViewIcon,
- ShieldOutlined as ShieldOutlinedIcon,
- Add as AddIcon,
- BorderColor,
- Close as CloseIcon,
- ConstructionOutlined as ConstructionOutlinedIcon,
Toc as TocIcon,
- Settings as SettingsIcon
+ Settings as SettingsIcon,
+ Business as BusinessIcon,
+ HelpOutline as HelpOutlineIcon,
+ MeetingRoom as MeetingRoomIcon,
+ Search as SearchIcon,
+ Add as AddIcon
} from "@mui/icons-material";
import LightModeIcon from '@mui/icons-material/LightMode';
import DarkModeIcon from '@mui/icons-material/DarkMode';
@@ -44,24 +43,18 @@ import { useNavigate } from "react-router";
import { getTheme } from "../theme.jsx";
import { Link } from "react-router-dom";
-import {
- Business as BusinessIcon,
- Notifications as NotificationsIcon,
- HelpOutline as HelpOutlineIcon,
- MeetingRoom as MeetingRoomIcon,
- Lightbulb as LightbulbIcon,
- Search as SearchIcon
-} from "@mui/icons-material";
import { toast } from "react-toastify";
import { Context } from "../context/ContextApi.jsx";
+import Licensed from "./Licensed.jsx";
const ShuffleLogo = "/images/Shuffle_logo.png";
const detectionIcon = "/icons/detection.svg";
const documentationIcon = "/icons/documentation.svg";
const ExpandMoreAndLessIcon = "/icons/expandMoreIcon.svg";
-const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
+
+const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, SHUFFLE_VERSION }) => {
const navigate = useNavigate();
const {setLeftSideBarOpenByClick, leftSideBarOpenByClick, updateOrg, setUpdateOrg, setSearchBarModalOpen, searchBarModalOpen, logoutUrl, themeMode, handleThemeChange, isDocSearchModalOpen, setIsDocSearchModalOpen, supportEmail} = useContext(Context);
@@ -690,7 +683,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
Version:
- 2.1.2
+ {SHUFFLE_VERSION}
@@ -1930,72 +1923,48 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
style={{
display: "flex",
flexDirection: "column",
- padding: 10,
- marginLeft: 5,
+ padding: "0 8px",
+ marginBottom: 8,
}}
>
-
- {userdata?.licensed !== true && !userdata?.org_status?.includes("integration_partner") && expandLeftNav && !isProdStatusOn &&
-
- {
- navigate("/admin?admin_tab=billingstats&ref=left_sidebar_upgrade")
- if (isCloud) {
- window.open("https://shuffler.io/contact?category=book_a_demo&ref=cloud", "_blank")
- } else {
- window.open("https://shuffler.io/contact?category=book_a_demo&ref=onprem", "_blank")
- }
- }}
- >
- Book a Demo
-
-
- }
-
- {!isCloud && activeOrgData?.old_org? (
-
{
- navigate("/admin?admin_tab=billingstats")
- }}
- >
-
+ {userdata?.licensed !== true && !userdata?.org_status?.includes("integration_partner") && !isProdStatusOn && (
+
- {expandLeftNav ? isProdStatusOn ? "Production" : "NOT production" : isProdStatusOn ? "ON" : "OFF"}
-
-
- ) : null}
+ onClick={() => {
+ if (isCloud) {
+ window.open("https://shuffler.io/contact?category=book_a_demo&ref=cloud", "_blank")
+ } else {
+ window.open("https://shuffler.io/contact?category=book_a_demo&ref=onprem", "_blank")
+ }
+ }}
+ >
+ Book a Demo
+
+ )}
+ {!isCloud && (activeOrgData?.old_org || isProdStatusOn) && (
+
+
+ )}
+
)
)
-});
+});
\ No newline at end of file
diff --git a/frontend/src/components/Licensed.jsx b/frontend/src/components/Licensed.jsx
new file mode 100644
index 00000000..afc96cea
--- /dev/null
+++ b/frontend/src/components/Licensed.jsx
@@ -0,0 +1,357 @@
+
+
+import {
+ CheckCircle,
+ Warning as AlertCircle,
+ Shield as ShieldIcon,
+ Warning as WarningIcon,
+ ChevronRight as ChevronRightIcon
+} from '@mui/icons-material';
+import { useContext, useState } from "react";
+import { Context } from "../context/ContextApi.jsx";
+import { useNavigate } from 'react-router-dom';
+
+const Licensed = ({licensed, expanded, showBadge}) => {
+
+ const { themeMode } = useContext(Context);
+ const navigate = useNavigate()
+
+
+ const [isHovered, setIsHovered] = useState(false);
+
+ const theme = {
+ light: {
+ cardBg: '#ffffff',
+ cardBgHover: '#f5f7fa',
+ border: '#e1e4e8',
+ textPrimary: '#1f2937',
+ textSecondary: '#6b7280',
+ textMuted: '#9ca3af',
+ success: '#10b981',
+ successBg: licensed ? 'rgba(5, 150, 105, 0.08)' : '#ddf4ff',
+ successBorder: 'rgba(5, 150, 105, 0.2)',
+ warning: '#d97706',
+ warningBg: licensed ? '#fef3c7' : 'rgba(245, 158, 11, 0.08)',
+ warningBorder: 'rgba(245, 158, 11, 0.2)',
+ shadow: 'rgba(0, 0, 0, 0.05)',
+ },
+ dark: {
+ cardBg: '#1a1a1a',
+ cardBgHover: '#242424',
+ border: '#30363d',
+ textPrimary: '#e6edf3',
+ textSecondary: '#8b949e',
+ textMuted: '#6e7681',
+ success: '#10b981',
+ successBg: 'rgba(16, 185, 129, 0.1)',
+ successBorder: 'rgba(16, 185, 129, 0.3)',
+ warning: '#f59e0b',
+ warningBg: 'rgba(245, 158, 11, 0.1)',
+ warningBorder: 'rgba(245, 158, 11, 0.3)',
+ shadow: 'rgba(0, 0, 0, 0.3)',
+ },
+ };
+
+ const colors = themeMode === "dark" ? theme.dark : theme.light;
+
+ const statusConfig = licensed
+ ? {
+ icon: showBadge ? ShieldIcon : CheckCircle,
+ text: showBadge ? 'Licensed' : 'Enterprise Licensed',
+ shortText: 'Licensed',
+ subtitle: 'Full access',
+ color: colors.success,
+ bgColor: colors.successBg,
+ borderColor: colors.successBorder,
+ description: 'All features unlocked',
+ }
+ : {
+ icon: showBadge ? WarningIcon : AlertCircle,
+ text: showBadge ? 'Unlicensed' : 'Activate License',
+ shortText: 'Inactive',
+ subtitle: 'Limited access',
+ color: colors.warning,
+ bgColor: colors.warningBg,
+ borderColor: colors.warningBorder,
+ description: 'Limited access',
+ };
+
+ const Icon = statusConfig.icon;
+
+ // Display badge when showing license status only
+ // Display full component for CTA to license activation
+ if (showBadge) {
+ return (
+ {navigate('/admin?admin_tab=billingstats');}}
+ onMouseEnter={() => setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ style={{
+ display: 'inline-flex',
+ alignItems: 'center',
+ gap: 8,
+ padding: '8px 14px',
+ borderRadius: 12,
+ cursor: 'pointer',
+ backgroundColor: statusConfig.bgColor,
+ border: `1.5px solid ${statusConfig.borderColor}`,
+ transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+ transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
+ boxShadow: isHovered
+ ? `0 4px 12px ${colors.shadow}, 0 0 0 3px ${statusConfig.bgColor}`
+ : `0 2px 4px ${colors.shadow}`,
+ position: 'relative',
+ overflow: 'hidden',
+ }}
+ >
+ {/* Shine effect on hover */}
+
+
+ {/* Status indicator with pulse */}
+
+
+
+
+
+
+
+ {statusConfig.text}
+
+
+ {statusConfig.subtitle}
+
+
+
+
+
{navigate('/admin?admin_tab=billingstats');}}
+ onMouseEnter={() => setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ gap: expanded ? 12 : 8,
+ padding: expanded ? '10px 14px' : '10px',
+ marginBottom: 20,
+ marginRight: 12,
+ borderRadius: 10,
+ cursor: 'pointer',
+ backgroundColor: isHovered ? colors.cardBgHover : colors.cardBg,
+ border: `1.5px solid ${licensed ? statusConfig.color : colors.border}`,
+ boxShadow: `0 1px 3px ${colors.shadow}`,
+ transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+ transform: isHovered ? 'translateY(-1px)' : 'translateY(0)',
+ position: 'relative',
+ overflow: 'hidden',
+ }}
+ >
+
+
+ {/* Content */}
+
+ {expanded && (
+
+
+ {!licensed && (
+
+ )}
+
+ )}
+
+ {/* Text content */}
+ {expanded && (
+
+
+ {statusConfig.text}
+
+
+ {statusConfig.description}
+
+
+ )}
+
+ {!expanded && (
+
+ {licensed ? 'ON' : 'OFF'}
+
+ )}
+
+
+ {/* Arrow indicator (only when expanded) */}
+ {expanded && (
+
+ )}
+
diff --git a/frontend/src/components/NewHeader.jsx b/frontend/src/components/NewHeader.jsx
index ed8ef8a1..e4c64d57 100644
--- a/frontend/src/components/NewHeader.jsx
+++ b/frontend/src/components/NewHeader.jsx
@@ -1450,7 +1450,6 @@ const Header = (props) => {
color="transparent"
elevation={0}
style={{
- backgroundColor: "transparent",
boxShadow: "none",
minHeight: 68,
maxHeight: 68,
diff --git a/frontend/src/components/OrgHeaderexpandedNew.jsx b/frontend/src/components/OrgHeaderexpandedNew.jsx
index ea0bf449..92efe9c8 100644
--- a/frontend/src/components/OrgHeaderexpandedNew.jsx
+++ b/frontend/src/components/OrgHeaderexpandedNew.jsx
@@ -32,7 +32,6 @@ import {
} from "@mui/material";
import {
- Icon as IconButton,
ExpandLess as ExpandLessIcon,
ExpandMore as ExpandMoreIcon,
Save as SaveIcon,
diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx
index 9a9c47f8..570bd566 100755
--- a/frontend/src/components/ParsedAction.jsx
+++ b/frontend/src/components/ParsedAction.jsx
@@ -67,7 +67,6 @@ import {
Cached as CachedIcon,
DirectionsRun as DirectionsRunIcon,
Add as AddIcon,
- Polymer as PolymerIcon,
FormatListNumbered as FormatListNumberedIcon,
Create as CreateIcon,
PlayArrow as PlayArrowIcon,
diff --git a/frontend/src/components/ParsedActionNew.jsx b/frontend/src/components/ParsedActionNew.jsx
new file mode 100644
index 00000000..a9bb974c
--- /dev/null
+++ b/frontend/src/components/ParsedActionNew.jsx
@@ -0,0 +1,5692 @@
+import React, { useState, useEffect, useContext, useMemo } from "react";
+import { toast } from 'react-toastify';
+import { makeStyles, createStyles } from "@mui/styles";
+import {getTheme} from '../theme.jsx';
+
+import { useNavigate, Link, useParams } from "react-router-dom";
+import { validateJson, GetIconInfo } from "../views/Workflows2.jsx";
+import { GetParsedPaths } from "../views/Apps.jsx";
+import { sortByKey, getActionState, setActionState } from "../views/AngularWorkflow.jsx";
+import { NestedMenuItem } from "mui-nested-menu";
+import { parsedDatatypeImages } from "../components/AppFramework.jsx";
+import { green, yellow, red } from "../views/AngularWorkflow.jsx"
+//import { useAlert
+import { Context } from "../context/ContextApi.jsx";
+import {
+ Chip,
+ ButtonGroup,
+ Popper,
+ TextField,
+ TextareaAutosize,
+ Drawer,
+ Button,
+ Paper,
+ Tabs,
+ InputAdornment,
+ Tab,
+ ButtonBase,
+ Tooltip,
+ Select,
+ MenuItem,
+ Divider,
+ Dialog,
+ Modal,
+ DialogActions,
+ DialogTitle,
+ InputLabel,
+ DialogContent,
+ FormControl,
+ IconButton,
+ Menu,
+ Input,
+ FormGroup,
+ FormControlLabel,
+ Typography,
+ Checkbox,
+ Breadcrumbs,
+ CircularProgress,
+ Switch,
+ Collapse,
+ Autocomplete,
+ Box,
+ ToggleButtonGroup,
+ ToggleButton,
+ Skeleton,
+} from "@mui/material";
+
+import {
+ HelpOutline as HelpOutlineIcon,
+ OpenInFull as OpenInFullIcon,
+ Description as DescriptionIcon,
+ GetApp as GetAppIcon,
+ Search as SearchIcon,
+ ArrowUpward as ArrowUpwardIcon,
+ Visibility as VisibilityIcon,
+ Done as DoneIcon,
+ Close as CloseIcon,
+ Error as ErrorIcon,
+ FindReplace as FindreplaceIcon,
+ ArrowLeft as ArrowLeftIcon,
+ Cached as CachedIcon,
+ DirectionsRun as DirectionsRunIcon,
+ Add as AddIcon,
+ FormatListNumbered as FormatListNumberedIcon,
+ Create as CreateIcon,
+ PlayArrow as PlayArrowIcon,
+ AspectRatio as AspectRatioIcon,
+ MoreVert as MoreVertIcon,
+ Apps as AppsIcon,
+ Schedule as ScheduleIcon,
+ FavoriteBorder as FavoriteBorderIcon,
+ Pause as PauseIcon,
+ Delete as DeleteIcon,
+ AddCircleOutline as AddCircleOutlineIcon,
+ Save as SaveIcon,
+ KeyboardArrowLeft as KeyboardArrowLeftIcon,
+ KeyboardArrowRight as KeyboardArrowRightIcon,
+ ArrowBack as ArrowBackIcon,
+ Settings as SettingsIcon,
+ LockOpen as LockOpenIcon,
+ ExpandMore as ExpandMoreIcon,
+ VpnKey as VpnKeyIcon,
+ AutoFixHigh as AutoFixHighIcon,
+ Circle as CircleIcon,
+ SquareFoot as SquareFootIcon,
+ Storage as StorageIcon,
+ Check as CheckIcon,
+ PriorityHigh as PriorityHighIcon,
+ Restore as RestoreIcon,
+} from '@mui/icons-material';
+
+export const useStyles = makeStyles({
+ root: {
+ "& .MuiAutocomplete-listbox": {
+ border: "2px solid grey",
+ color: "white",
+ fontSize: 18,
+ "& li:nth-child(even)": {
+ backgroundColor: "#CCC",
+ },
+ "& li:nth-child(odd)": {
+ backgroundColor: "#FFF",
+ },
+ },
+ },
+ inputRoot: {
+ color: "white",
+ "&:hover .MuiOutlinedInput-notchedOutline": {
+ borderColor: "#f86a3e",
+ },
+ },
+});
+
+const openApiFieldDesc = "Generated by OpenAPI body example";
+const ParsedAction = (props) => {
+ const {
+ workflow,
+ files,
+ setWorkflow,
+ setAction,
+ setSelectedAction,
+ setUpdate,
+ appActionArguments,
+ selectedApp,
+ workflowExecutions,
+ setSelectedResult,
+ selectedAction,
+ setSelectedApp,
+ setSelectedTrigger,
+ setSelectedEdge,
+ setCurrentView,
+ cy,
+ setAuthenticationModalOpen,
+ setVariablesModalOpen,
+ setCodeModalOpen,
+ selectedNameChange,
+ rightsidebarStyle,
+ showEnvironment,
+ selectedActionEnvironment,
+ environments,
+ setNewSelectedAction,
+ appApiViewStyle,
+ globalUrl,
+ setSelectedActionEnvironment,
+ requiresAuthentication,
+ setRequiresAuthentication,
+ hideExtraTypes,
+ scrollConfig,
+ setScrollConfig,
+ authenticationType,
+ appAuthentication,
+ getAppAuthentication,
+ actionDelayChange,
+ getParents,
+ isCloud,
+ lastSaved,
+ setLastSaved,
+ setShowVideo,
+ toolsAppId,
+ aiSubmit,
+
+ expansionModalOpen,
+ setExpansionModalOpen,
+ fixExample,
+
+ listCache,
+ setActiveDialog,
+ authGroups,
+ apps,
+ setEditorData,
+ setcodedata,
+ setAiQueryModalOpen,
+
+ suborgWorkflows,
+ originalWorkflow,
+ runFromHere,
+ } = props;
+
+ let navigate = useNavigate()
+ const classes = useStyles()
+
+ const [hideBody, setHideBody] = React.useState(false)
+ const [activateHidingBodyButton, setActivateHidingBodyButton] = React.useState(false)
+ const [appActionName, setAppActionName] = React.useState(selectedAction?.label);
+ const [delay, setDelay] = React.useState(selectedAction?.execution_delay || 0);
+ const [prevActionName, setPrevActionName] = React.useState(selectedAction?.label);
+ const [fieldCount, setFieldCount] = React.useState(0);
+ const [hiddenDescription, setHiddenDescription] = React.useState(true);
+ const [hiddenParameters, setHiddenParameters] = React.useState(true);
+ const [autoCompleting, setAutocompleting] = React.useState(false);
+ const [selectedActionParameters, setSelectedActionParameters] = React.useState(selectedAction?.parameters || []);
+ const [selectedVariableParameter, setSelectedVariableParameter] = React.useState("");
+ const [paramUpdate, setParamUpdate] = React.useState("");
+ const [actionlist, setActionlist] = React.useState([]);
+ const [jsonList, setJsonList] = React.useState([]);
+ const [showDropdown, setShowDropdown] = React.useState(false);
+ const [showDropdownNumber, setShowDropdownNumber] = React.useState(0);
+ const [showAutocomplete, setShowAutocomplete] = React.useState(false);
+ const [menuPosition, setMenuPosition] = useState(null);
+ const [uiBox, setUiBox] = useState(null);
+ const [parentAction, setParentAction] = useState(null);
+ const isIntegration = selectedAction.app_id === "integration"
+ const isAgent = selectedAction.app_id === "shuffle_agent"
+ const [distributeAuthToSuborgs, setDistributeAuthToSuborgs] = useState(selectedAction?.selectedAuthentication?.suborg_distributed || false)
+ const [activeMainTab, setActiveMainTab] = useState("setup")
+ const [optionalParamsOpen, setOptionalParamsOpen] = useState(false)
+ const [authSectionOpen, setAuthSectionOpen] = useState(true)
+
+ useEffect(() => {
+ if (setLastSaved !== undefined) {
+ setLastSaved(false)
+ }
+ }, [expansionModalOpen])
+
+ const {themeMode, supportEmail} = useContext(Context)
+ const theme = getTheme(themeMode)
+
+ const isSidebarLoading =
+ !selectedAction ||
+ !selectedApp ||
+ selectedActionParameters === undefined ||
+ selectedActionParameters === null;
+
+ /*
+ useEffect(() => {
+ // This will have the OLD selectedAction, not the new one huh?
+ // How do we map the fields correctly?
+ if (selectedAction === undefined || selectedAction === null) {
+ console.log("Selected action is undefined")
+ return
+ }
+
+ console.log("Selected action: ", selectedAction?.name, selectedAction)
+
+ }, [selectedAction])
+ */
+
+ useEffect(() => {
+ // Changes the order of params to show in order:
+ // auth, required, optional
+ var changed = false
+ if (selectedActionParameters === undefined || selectedActionParameters === null || selectedActionParameters.length === 0) {
+ console.log("Returning because no params")
+ return
+ }
+
+ if (selectedApp !== undefined && selectedApp !== null && selectedApp.generated !== true) {
+
+ if (isAgent || isIntegration) {
+ } else {
+ return
+ }
+ }
+
+ // Fixing required fields with a shitty structure :)
+ if (selectedApp !== undefined && selectedApp !== null && selectedApp.generated === true && selectedAction !== undefined && selectedAction !== null && selectedAction.name !== undefined && selectedAction.name !== null && selectedApp.actions !== undefined && selectedApp.actions !== null && selectedApp.actions.length > 0 && (selectedAction.required_body_fields === undefined || selectedAction.required_body_fields === null || selectedAction.required_body_fields.length === 0)) {
+ // Check for required fields
+ for (var actionkey in selectedApp.actions) {
+ var action = selectedApp.actions[actionkey]
+ if (action.name === selectedAction.name) {
+ selectedAction.required_body_fields = action.required_body_fields
+ break
+ }
+ }
+ }
+
+ // Check if missing parameters?
+ var auth = []
+ var required = []
+ var optional = []
+
+ var bodyfield = []
+ var special_optional = []
+ var generated_optional = []
+
+ var keyorder = []
+
+ for (let paramkey in selectedActionParameters) {
+ var param = selectedActionParameters[paramkey]
+ keyorder.push(param.name)
+
+ if (param?.configuration === true) {
+ auth.push(param)
+ continue
+ }
+
+ if (param?.value === undefined || param?.value === null) {
+ console.log("Invalid value: ", param)
+ continue
+ }
+
+ if (typeof param.value === "array") {
+ param.value = param.value.join(",")
+ }
+
+ if (typeof param.value === "object") {
+ try {
+ // Check if it's an array or object
+ if (param.value.length !== undefined) {
+ param.value = param.value.join(",")
+ } else {
+ param.value = JSON.stringify(param.value)
+ }
+ } catch (e) {
+ console.log("Error parsing JSON for param value: ", param, e)
+ continue
+ }
+ }
+
+ if (param?.value?.toLowerCase()?.includes("secret. replace")) {
+ param.value = ""
+ }
+
+ if (selectedApp?.generated === true && param?.name === "body") {
+ param.required = true
+ bodyfield.push(param)
+ continue
+ }
+
+ if (param?.required === false && param?.name?.startsWith("${") && param?.name?.endsWith("}")) {
+ // Check if it's a required param
+ param.autocompleted = true
+ if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null && selectedAction.required_body_fields.length > 0) {
+
+ if (selectedAction.required_body_fields.includes(param.name)) {
+ param.required = true
+ }
+ }
+ }
+
+ if (param.required) {
+ required.push(param)
+ continue
+ }
+
+ if (param?.name === "headers" || param?.name === "queries") {
+ special_optional.push(param)
+ continue
+ }
+
+ if (hideBody && param?.description?.includes("Generated")) {
+ continue
+ }
+
+ if (param?.field_active === true) {
+ param.autocompleted = true
+ generated_optional.push(param)
+ continue
+ }
+
+ optional.push(param)
+ }
+
+ // Sort order: auth > body(used for simple/advanced) > required > optional
+ // Optional field order:
+ // 1. headers & queries
+ // 2. other fields
+ // 3. generated fields & all else
+
+
+ var newparams = auth
+ .concat(bodyfield)
+ .concat(required)
+ .concat(generated_optional)
+ .concat(special_optional)
+ .concat(optional)
+
+ const dedupedParams = []
+ for (var paramKey in newparams) {
+ const param = newparams[paramKey]
+ if (dedupedParams.find(item => item.name === param.name) === undefined) {
+ dedupedParams.push(param)
+ }
+ }
+
+ newparams = dedupedParams
+
+ var newkeyorder = []
+ for (let paramkey in newparams) {
+ //console.log("Param: ", newparams[paramkey])
+
+ newkeyorder.push(newparams[paramkey].name)
+ }
+
+ if (keyorder.join(",") !== newkeyorder.join(",")) {
+ //console.log("KEYORDER CHANGED! DID ACTION AS WELL?", keyorder, newkeyorder)
+
+ setSelectedActionParameters(newparams)
+ selectedAction.parameters = newparams
+ setSelectedAction(selectedAction)
+ }
+ }, [selectedActionParameters])
+
+ useEffect(() => {
+ const shouldHide = localStorage.getItem("hideBody")
+ if (shouldHide !== null) {
+ const ishiding = shouldHide !== "true"
+ if (ishiding !== hideBody) {
+ setHideBody(ishiding)
+ }
+ }
+
+ if (selectedActionEnvironment === undefined || selectedActionEnvironment === null || Object.keys(selectedActionEnvironment).length === 0) {
+ if (environments !== undefined && environments !== null && environments.length > 0) {
+ if (selectedAction.environment !== undefined && selectedAction.environment !== null) {
+ const foundenv = environments.find(env => env.id === selectedAction.environment || selectedAction.environment === env.Name)
+ if (foundenv !== undefined && foundenv !== null) {
+ setSelectedActionEnvironment(foundenv)
+ } else {
+ // Fallback: ensure we always have some environment selected
+ setSelectedActionEnvironment(environments[0])
+ }
+ } else {
+ // No environment set on the action: default to first available
+ setSelectedActionEnvironment(environments[0])
+ }
+ }
+ }
+
+ // Fix apps with fewer actions
+ if (selectedApp !== undefined && selectedApp !== null && selectedApp.actions !== undefined && selectedApp.actions !== null && selectedApp.actions.length <= 1 && apps !== undefined && apps !== null && apps.length > 0) {
+ // 1. Check local storage (?)
+ // 2. Check the "apps" list
+ const foundApp = apps.find(app => app.id === selectedApp.id)
+ if (foundApp !== undefined && foundApp !== null && foundApp.actions !== undefined && foundApp.actions !== null && foundApp.actions.length > 1) {
+ setSelectedApp(foundApp)
+ }
+
+ }
+ }, [selectedActionEnvironment, selectedAction, environments])
+
+ const keywords = [
+ "len(",
+ "lower(",
+ "upper(",
+ "trim(",
+ "split(",
+ "length(",
+ "number(",
+ "parse(",
+ "join(",
+ ];
+
+ const getHttpMethodFromName = (actionName) => {
+ if (actionName === undefined || actionName === null) {
+ return ""
+ }
+
+ const lowerName = actionName.toLowerCase()
+ if (lowerName.includes("get_")) {
+ return "GET"
+ } else if (lowerName.includes("post_")) {
+ return "POST"
+ } else if (lowerName.includes("put_")) {
+ return "PUT"
+ } else if (lowerName.includes("patch_")) {
+ return "PATCH"
+ } else if (lowerName.includes("delete_")) {
+ return "DELETE"
+ } else if (lowerName.includes("options_")) {
+ return "OPTIONS"
+ } else if (lowerName.includes("connect_")) {
+ return "CONNECT"
+ }
+
+ return ""
+ }
+
+ const getApp = (appId, setApp) => {
+ const url = `${globalUrl}/api/v1/apps/${appId}/config?openapi=false`;
+ fetch(url, {
+ headers: {
+ Accept: "application/json",
+ },
+ credentials: "include",
+ })
+ .then((response) => {
+ if (response.status === 200) {
+ //toast("Successfully GOT app "+appId)
+ } else {
+ toast.error("Failed getting app. Please try again or contact support@shuffler.io");
+ }
+
+ return response.json();
+ })
+ .then((responseJson) => {
+ console.log("RESPONSE: ", responseJson);
+
+ const parsedapp =
+ responseJson.app !== undefined && responseJson.app !== null
+ ? JSON.parse(atob(responseJson.app))
+ : {};
+ console.log("PARSED: ", parsedapp);
+ //data = parsedapp.body === undefined ? parsedapp : parsedapp.body
+
+ if (
+ setApp &&
+ parsedapp.actions !== undefined &&
+ parsedapp.actions !== null
+ ) {
+ console.log("Inside first if");
+ if (
+ selectedApp.versions !== undefined &&
+ selectedApp.versions !== null
+ ) {
+ parsedapp.versions = selectedApp.versions;
+ }
+
+ if (
+ selectedApp.loop_versions !== undefined &&
+ selectedApp.loop_versions !== null
+ ) {
+ parsedapp.loop_versions = selectedApp.loop_versions;
+ }
+
+ // Find authentication, and if it works?
+ // If authentication has less OR more fields, it has to change
+ //console.log(selected
+
+ console.log("Inside first if2");
+ var foundAction = parsedapp.actions.find(
+ (action) =>
+ action.name.toLowerCase() === selectedAction.name.toLowerCase()
+ );
+ if (foundAction !== null && foundAction !== undefined) {
+ var foundparams = [];
+ for (let [paramkey, paramkeyval] in Object.entries(foundAction.parameters)) {
+ const param = foundAction.parameters[paramkey];
+
+ const foundParam = selectedAction.parameters.find(
+ (item) => item.name.toLowerCase() === param.name.toLowerCase()
+ );
+ if (foundParam === undefined) {
+ console.log("COULDNT find Param: ", param);
+ } else {
+ foundAction.parameters[paramkey] = foundParam;
+ }
+ //foundparams.push(param.name)
+ }
+ } else {
+ toast("Couldn't find action " + selectedAction.name);
+ }
+
+ selectedAction.errors = [];
+ selectedAction.is_valid = true;
+
+ // Updating params for the new action
+ selectedAction.parameters = foundAction.parameters;
+ selectedAction.app_id = appId;
+ selectedAction.app_version = parsedapp.app_version;
+
+ setSelectedAction(selectedAction);
+ setSelectedApp(parsedapp);
+ }
+ })
+ .catch((error) => {
+ toast(error.toString());
+ });
+ };
+
+ const changeDistribution = (data) => {
+ editAuthenticationConfig(data.id, "suborg_distribute")
+ }
+
+ const editAuthenticationConfig = (id, parentAction) => {
+ const data = {
+ id: id,
+ action: parentAction !== undefined && parentAction !== null ? parentAction : "assign_everywhere",
+ }
+
+ const url = globalUrl + "/api/v1/apps/authentication/" + id + "/config";
+
+ fetch(url, {
+ mode: "cors",
+ method: "POST",
+ body: JSON.stringify(data),
+ credentials: "include",
+ crossDomain: true,
+ withCredentials: true,
+ headers: {
+ "Content-Type": "application/json; charset=utf-8",
+ },
+ })
+ .then((response) =>
+ response.json().then((responseJson) => {
+ if (responseJson["success"] === false) {
+ toast("Failed overwriting appauth");
+ } else {
+ if (distributeAuthToSuborgs) {
+ toast.success("Successfully updated auth");
+ } else {
+ toast.success("Successfully distributed auth to suborgs");
+ }
+ setTimeout(() => {
+ getAppAuthentication();
+ setDistributeAuthToSuborgs(!distributeAuthToSuborgs)
+ }, 1000);
+ }
+ })
+ )
+ .catch((error) => {
+ toast("Err: " + error.toString());
+ });
+ };
+
+ const defineStartnode = () => {
+ if (cy === undefined) {
+ return;
+ }
+
+ var oldstartnode = cy.getElementById(workflow.start);
+ if (oldstartnode.length > 0) {
+ oldstartnode[0].data("isStartNode", false);
+ var oldnodecnt = workflow.actions.findIndex(
+ (a) => a.id === workflow.start
+ );
+ if (workflow.actions[oldnodecnt] !== undefined) {
+ workflow.actions[oldnodecnt].isStartNode = false;
+ }
+ }
+
+ var newstartnode = cy.getElementById(selectedAction.id);
+ if (newstartnode.length > 0) {
+ newstartnode[0].data("isStartNode", true);
+ var newnodecnt = workflow.actions.findIndex(
+ (a) => a.id === selectedAction.id
+ );
+ console.log("NEW NODE CNT: ", newnodecnt);
+ if (workflow.actions[newnodecnt] !== undefined) {
+ workflow.actions[newnodecnt].isStartNode = true;
+ console.log(workflow.actions[newnodecnt]);
+ }
+ }
+
+ // Find branches with triggers as source nodes
+ // Move these targets to be the new node
+ // Set arrows pointing to new startnode with errors
+ //for (var key in workflow.branches) {
+ // var item = workflow.branches[key]
+ // if (item.destination_id === oldstartnode[0].data()["id"]) {
+ // var curbranch = cy.getElementById(item.id)
+ // if (curbranch.length > 0) {
+ // //console.log(curbranch[0].data())
+ // //curbranch[0].data("target", selectedAction.id)
+ // //curbranch[0].data("hasErrors", true)
+ // //workflow.branches[key].destination_id = selectedAction.id
+ // //console.log(curbranch[0].data())
+ // }
+ // }
+ //}
+
+ setUpdate("start_node" + selectedAction.id);
+ workflow.start = selectedAction.id;
+ setWorkflow(workflow);
+ //setStartNode(selectedAction.id)
+ };
+
+ useEffect(() => {
+ if (selectedAction?.id) {
+ // Dynamically setting the active tab on Right Sidebar (Setup/Config)
+ const state = getActionState(selectedAction.id, workflow?.id)
+
+ let tab = state.tab
+ // Only change tab automatically if no user preference exists (tab is empty/undefined)
+ // or if this is the initial load (tab is "setup" but no actual user selection made)
+ if (tab === undefined || tab === null || tab === "" ||
+ (tab === "setup" && !state.userSelectedTab)) {
+ const hasAuth = (selectedAction.authentication && selectedAction.authentication.length > 0) || (selectedAction.authentication_id && selectedAction.authentication_id !== "")
+ if (!requiresAuthentication || hasAuth) {
+ tab = "configuration"
+ } else {
+ tab = "setup"
+ }
+ }
+ // If user has explicitly selected a tab, respect their choice
+
+ setActiveMainTab(tab)
+ setOptionalParamsOpen(state.showOptionalParams)
+
+ // If no required fields exist, open optional params by default
+ if (selectedAction?.parameters?.length > 0) {
+ const hasRequiredFields = selectedAction.parameters.some(
+ param => param.required === true || param.configuration === true
+ )
+ if (!hasRequiredFields && !state.showOptionalParams) {
+ setOptionalParamsOpen(true)
+ }
+ }
+ }
+
+ // Only set app action name if it has changed
+ if (selectedAction.label !== appActionName) {
+ setAppActionName(selectedAction.label);
+
+ const shouldHide = localStorage.getItem("hideBody")
+ if (shouldHide !== null) {
+ const ishiding = shouldHide !== "true"
+ if (ishiding !== hideBody) {
+ setHideBody(ishiding)
+ }
+ }
+ }
+
+ if (selectedAction.label !== prevActionName) {
+ setPrevActionName(selectedAction.label)
+ }
+
+ // Only set delay if it has changed
+ const newDelay = selectedAction?.execution_delay || 0;
+ if (newDelay !== delay) {
+ setDelay(newDelay);
+ }
+
+ // Only set selected action parameters if they have changed
+ if (selectedAction?.parameters?.length > 0 && selectedAction.label !== appActionName) {
+ //console.log("PARAMS CHANGED DURING APPCHANGE: ", selectedAction.parameters)
+ setSelectedActionParameters(selectedAction.parameters);
+ }
+
+ // Only set selected variable parameter if it is null or undefined
+ if (!selectedVariableParameter && workflow.workflow_variables?.length > 0) {
+ setSelectedVariableParameter(workflow.workflow_variables[0].name);
+ }
+
+ if (selectedAction?.parent_controlled === true && workflow?.parentorg_workflow?.length > 0 && originalWorkflow?.id !== undefined && originalWorkflow?.id !== null && originalWorkflow?.id !== workflow?.id && originalWorkflow?.actions !== undefined && originalWorkflow?.actions !== null && originalWorkflow?.actions.length > 0) {
+ // Due to ID remapping of actions not happening, this is easy
+ for (var key in originalWorkflow.actions) {
+ const curparentAction = originalWorkflow.actions[key]
+
+ if (curparentAction.id === selectedAction.id) {
+ if (curparentAction.parameters === undefined || curparentAction.parameters === null || curparentAction.parameters.length === 0) {
+ console.log("Parent parameters missing!")
+ break
+ }
+
+ if (curparentAction.id !== parentAction?.id) {
+ setParentAction(curparentAction)
+ }
+
+ break
+ }
+ }
+ }
+ }, [selectedAction, selectedApp, setNewSelectedAction, workflow, workflowExecutions, getParents, requiresAuthentication])
+
+ useEffect(() => {
+ const newActionList = [];
+ const parentActionList = [];
+
+ // Process workflowExecutions
+ if (workflowExecutions.length > 0) {
+ var appended = false
+ var foundvalue = ""
+ for (let execution of workflowExecutions) {
+ const execArg = execution.execution_argument;
+ if (execArg && execArg.length > 0) {
+ const valid = validateJson(execArg);
+ if (valid.valid) {
+ appended = true
+ newActionList.push({
+ type: "Runtime Argument",
+ name: "Runtime Argument",
+ value: "$exec",
+ highlight: "exec",
+ autocomplete: "exec",
+ example: valid.result,
+ })
+
+ break
+ } else {
+ foundvalue = execArg
+ }
+ }
+ }
+
+ if (!appended && foundvalue !== undefined && foundvalue !== "") {
+ newActionList.push({
+ type: "Runtime Argument",
+ name: "Runtime Argument",
+ highlight: "exec",
+ autocomplete: "exec",
+
+ value: foundvalue,
+ example: foundvalue,
+ })
+ }
+ }
+
+ // Add default Runtime Argument if none were added
+ if (newActionList.length === 0) {
+ newActionList.push({
+ type: "Runtime Argument",
+ name: "Runtime Argument",
+ value: "$exec",
+ highlight: "exec",
+ autocomplete: "exec",
+ example: "",
+ })
+ }
+
+ // Look for cachekey
+ if (newActionList.find((item) => item.type === "Shuffle DB") === undefined) {
+ let cacheKey = {
+ type: "Shuffle DB",
+ name: "Shuffle Datastore",
+ value: "$shuffle_cache",
+ highlight: "shuffle_cache",
+ autocomplete: "shuffle_cache",
+ example: "",
+ };
+
+ if (listCache?.keys?.length > 0) {
+ cacheKey.example = {};
+ for (let item of listCache.keys) {
+ if (item.key) {
+ let itemValue = item.value ?? "";
+ if (itemValue.length > 10000) {
+ itemValue = "";
+ }
+ cacheKey.example[item.key.split(" ").join("_")] = { value: itemValue };
+ }
+ }
+ }
+
+ newActionList.push(cacheKey);
+ }
+
+ // Process workflow variables
+ if (workflow.workflow_variables?.length > 0) {
+ for (let variable of workflow.workflow_variables) {
+ newActionList.push({
+ type: "workflow_variable",
+ name: variable.name,
+ value: variable.value,
+ id: variable.id,
+ autocomplete: variable.name.split(" ").join("_"),
+ example: variable.value,
+ });
+ }
+ }
+
+ // Process execution variables
+ if (workflow.execution_variables?.length > 0) {
+ for (let variable of workflow.execution_variables) {
+ let exampleOutput = "";
+ for (let exec of workflowExecutions) {
+ const foundExec = exec.execution_variables?.find(exvar => exvar.name === variable.name);
+ if (foundExec?.value) {
+ exampleOutput = foundExec.value;
+ break;
+ }
+ }
+ newActionList.push({
+ type: "execution_variable",
+ name: variable.name,
+ value: variable.value,
+ id: variable.id,
+ autocomplete: variable.name.split(" ").join("_"),
+ example: exampleOutput,
+ });
+ }
+ }
+
+ // Process parent actions if getParents is provided
+ if (getParents) {
+ const parents = getParents(selectedAction);
+ if (parents.length > 1) {
+ const labels = [];
+ for (let parentNode of parents) {
+ if (parentNode.label === "Runtime Argument" || labels.includes(parentNode.label)) {
+ continue
+ }
+
+ labels.push(parentNode.label);
+
+ var secondaryExample = ""
+ let exampleData = parentNode.example ?? "";
+ if (parentNode?.app_name === "http") {
+ exampleData = ""
+ }
+
+ if (workflowExecutions.length > 0) {
+ for (let exec of workflowExecutions) {
+ const foundResult = exec.results?.find(result => result?.action?.id === parentNode?.id);
+ if (foundResult) {
+ const valid = validateJson(foundResult.result);
+ if (valid.valid) {
+
+ // Check if array, and if first item is object + success
+ if (Array.isArray(valid.result) && valid.result.length > 0 && typeof valid.result[0] === "object") {
+ if (valid.result[0].success !== false) {
+ exampleData = valid.result
+ break
+ }
+ } else {
+ if (valid.result.success !== false) {
+ exampleData = valid.result
+ break
+ }
+ }
+ } else {
+ secondaryExample = foundResult.result
+ }
+ }
+ }
+ }
+
+ if (exampleData === "" && apps !== undefined && apps !== null && apps?.length > 0) {
+ // Check apps if it exists, then if it
+ const foundApp = apps?.find(app => app?.id === parentNode?.app_id)
+ if (foundApp !== undefined && foundApp !== null) {
+ if (foundApp?.generated === true || foundApp?.name === "http") {
+ const validationData = validateJson(`{
+ "status": 200,
+ "body": {
+ "example": "json",
+ "values": "json"
+ },
+ "url": "https://example.com",
+ "headers": {
+ "Content-Type": "application/json",
+ "Example-Header": "two"
+ },
+ "cookies": {
+ "example": "session",
+ "__session": "sessionid"
+ },
+ "success": true
+ }`)
+
+ if (validationData.valid) {
+ exampleData = validationData.result
+ }
+ }
+ }
+ }
+
+ if (exampleData === "" && secondaryExample !== "") {
+ exampleData = secondaryExample
+ }
+
+ if (parentNode.label === undefined) {
+ parentNode.label = ""
+ }
+
+ newActionList.push({
+ type: "action",
+ id: parentNode.id,
+ name: parentNode.label,
+ autocomplete: parentNode.label.split(" ").join("_"),
+ example: exampleData,
+ });
+
+ parentActionList.push({
+ type: "action",
+ id: parentNode.id,
+ name: parentNode.label,
+ autocomplete: parentNode.label.split(" ").join("_"),
+ example: exampleData,
+ });
+ }
+ }
+ }
+
+ let newParameters = selectedAction?.parameters?.map((param) => {
+ let paramvalue = param.value === undefined || param.value === null ? "" : param.value;
+ let errorVars = [];
+
+ if (paramvalue.includes("$")) {
+ let actions = workflow.actions?.map((action) => {
+ return "$" + action.label?.toLowerCase().replaceAll(" ", "_");
+ })
+
+ if (newActionList?.length > 0) {
+ let appParentActions = parentActionList?.map(action => "$" + action.name.toLowerCase().replaceAll(" ", "_"));
+ let notPresentAction = actions?.filter((action) => !appParentActions?.includes(action))
+ // Extract all variable references from paramvalue
+ // Examples of what it matches:
+ // - Simple variables: $test, $myVar, $x
+ // - Variables with underscores: $my_variable, $ok_ok, $testing_nice, $nice_try_man
+ // - Workflow data access patterns: $not_customer_copy.body.subject.#, $not_customer.body.subject.text
+ // - Deep nested properties: $email_action.response.items[0].sender.address
+
+ const variablePattern = /\$[a-zA-Z0-9_]+(?=\.|,|;|:|\s|"|'|`|\)|\]|\}|$)/g;
+ const foundVariables = paramvalue.match(variablePattern) || [];
+
+ notPresentAction?.forEach((action) => {
+ action = action.replace(" ", "_");
+
+ // Check if the exact action is in the foundVariables list
+ if (foundVariables.includes(action)) {
+ errorVars.push(action);
+ }
+ });
+
+ // Check for variables that don't exist in the workflow at all
+ foundVariables.forEach(variable => {
+ // Skip checking for $ followed by system vars as exec and shuffle_cache.
+ if (variable.match(/\$(exec|shuffle_cache)/)) {
+ return;
+ }
+ // Create list of all valid action variables from newActionList
+ const newActionNames = newActionList?.map(action => "$" + action.name.toLowerCase()) || [];
+
+ // Extract workflow and execution variables from newActionList
+ const workflowVars = newActionList
+ .filter(item => item.type === "workflow_variable" || item.type === "execution_variable")
+ .map(item => "$" + item.autocomplete.toLowerCase());
+
+ // If the variable doesn't exist in any workflow actions, parent actions, newActionList, or extracted variables, show error
+ if (!actions.includes(variable) &&
+ !appParentActions.includes(variable) &&
+ !newActionNames.includes(variable) &&
+ !workflowVars.includes(variable.toLowerCase())) {
+ errorVars.push(variable);
+ }
+ });
+ }
+ }
+
+ let message = "";
+ if (errorVars.length > 0) {
+ if (errorVars.length === 1) {
+ message = errorVars[0] + " is not accessible in this action.";
+ } else {
+ message = errorVars.join(", ") + " are not accessible in this action.";
+ }
+ }
+
+ if (param?.configuration && param?.name !== "url") {
+ let regex = /(^|[^\\])\$/;
+ if (regex.test(paramvalue)) {
+ if (message.length > 0) {
+ message += "\nUse \"\\$\" instead of \"$\" if you want to escape $ (1)";
+ } else {
+ message = "Use \"\\$\" instead of \"$\" if you want to escape $ (2)";
+ }
+ }
+ }
+ return { ...param, value: paramvalue, error: message }
+ })
+
+ setSelectedActionParameters(newParameters)
+ setActionlist(newActionList)
+ }, [workflow.execution_variables, paramUpdate, workflow.workflow_variables, workflowExecutions, workflow, selectedAction, listCache, getParents, setNewSelectedAction]);
+
+ useEffect(() => {
+ selectedNameChange(appActionName)
+
+ if (actionDelayChange !== undefined) {
+ actionDelayChange(delay)
+ }
+ }, [appActionName, delay])
+
+ const handleParamChange = (event, count, data) => {
+ const newParams = [...selectedActionParameters];
+ newParams.map((param) => {
+ if (param.name === data.name) {
+ param.value = event.target.value;
+ }
+ })
+ setSelectedActionParameters(newParams);
+ setParamUpdate(event.target.value);
+ changeActionParameter(event, count, data)
+ }
+
+ const calculateHelpertext = (input_data) => {
+ var helperText = ""
+ var looperText = ""
+ //const found = input_data.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
+ var found = input_data.match(/[\\]{0,1}[$]{1}([a-zA-Z0-9_@-]+\.?){1}([a-zA-Z0-9#_@-]+\.?){0,}/g)
+
+ if (found !== null && found !== undefined) {
+ var new_occurences = []
+ for (let [key, keyval] in Object.entries(found)) {
+ if (found[key][0] !== "\\") {
+ new_occurences.push(found[key])
+ }
+ }
+
+ found = new_occurences.valueOf()
+ }
+
+ if (found !== null) {
+ try {
+ // When the found array is empty.
+ for (let i = 0; i < found.length; i++) {
+ const variableSplit = found[i].split(".#")
+ if ((variableSplit.length - 1) > 1) {
+ //console.log("Larger than 1: ", variableSplit)
+ if (looperText.length === 0) {
+ looperText += "PS: Double looping (.#.#) may cause problems."
+ }
+ }
+
+ var foundSlice = false
+ for (let j = 0; j < actionlist.length; j++) {
+ //console.log("ACTION: ", found[i], actionlist[j])
+ //console.log("ACTION :", found[i].split(".")[0].slice(1,).toLowerCase(), actionlist[j].autocomplete.toLowerCase())
+ if (found[i].split(".")[0].slice(1,).toLowerCase() == actionlist[j].autocomplete.toLowerCase()) {
+ //console.log("Found: ", found[i])
+ // Validate path?
+
+ foundSlice = true
+ }
+ }
+
+ if (!foundSlice) {
+ if (!helperText.includes("Invalid variables")) {
+ helperText += "Invalid variables: "
+ }
+ helperText += found[i] + ", "
+ }
+ }
+ } catch (e) {
+ console.log("Parsing error: ", e)
+ }
+ }
+
+ if (looperText.length > 0) {
+ if (helperText.length > 0) {
+ helperText += ". "
+ }
+
+ helperText += looperText
+ }
+
+ return helperText
+ }
+
+ const changeActionParameter = (event, count, data, viewForceUpdate) => {
+ //console.log("Action change: ", selectedAction, data)
+ if (data.name.startsWith("${") && data.name.endsWith("}")) {
+ // PARAM FIX - Gonna use the ID field, even though it's a hack
+ const paramcheck = selectedAction.parameters.find((param) => param.name === "body");
+
+ if (paramcheck !== undefined) {
+ // Escapes all double quotes
+ //var toReplace = event.target.value.trim()
+ var toReplace = event.target.value
+
+
+ if (!toReplace?.startsWith("{") && !toReplace?.startsWith("[")) {
+ toReplace = toReplace?.replaceAll('\\"', '"').replaceAll('"', '\\"')
+ }
+
+ if (
+ paramcheck["value_replace"] === undefined ||
+ paramcheck["value_replace"] === null
+ ) {
+ paramcheck["value_replace"] = [
+ {
+ key: data.name,
+ value: toReplace,
+ },
+ ];
+
+ } else {
+ const subparamindex = paramcheck["value_replace"].findIndex(
+ (param) => param.key === data.name
+ );
+ if (subparamindex === -1) {
+ paramcheck["value_replace"].push({
+ key: data.name,
+ value: toReplace,
+ });
+ } else {
+ paramcheck["value_replace"][subparamindex]["value"] = toReplace;
+ }
+ }
+
+ if (selectedActionParameters[count].value_replace === undefined) {
+ selectedActionParameters[count].value_replace = paramcheck
+ }
+
+ if (selectedAction?.parameters[count] !== undefined && selectedAction?.parameters[count].value_replace === undefined) {
+ selectedAction.parameters[count].value_replace = paramcheck
+ }
+
+ if (paramcheck["value_replace"] === undefined) {
+ selectedActionParameters[count]["value_replace"] = paramcheck
+
+ if (selectedAction?.parameters[count] !== undefined) {
+ selectedAction.parameters[count]["value_replace"] = paramcheck
+ }
+ } else {
+ selectedActionParameters[count]["value_replace"] = paramcheck["value_replace"];
+ if (selectedAction?.parameters[count] !== undefined) {
+ selectedAction.parameters[count]["value_replace"] = paramcheck["value_replace"];
+ }
+ }
+ setSelectedAction(selectedAction);
+ //setUpdate(Math.random())
+ return;
+ }
+ }
+
+
+ if (event.target.value[event.target.value.length - 1] === "$") {
+ if (!showDropdown) {
+ setShowAutocomplete(false);
+ setShowDropdown(true);
+ setShowDropdownNumber(count);
+ }
+ } else {
+ if (showDropdown) {
+ setShowDropdown(false);
+ }
+ }
+
+ // bad detection mechanism probably
+ if (event.target.value[event.target.value.length - 1] === "." && actionlist.length > 0) {
+ console.log("GET THE LAST ARGUMENT FOR NODE!");
+ // THIS IS AN EXAMPLE OF SHOWING IT
+ /*
+
+ const inputdata = {"data": "1.2.3.4", "dataType": "4.5.6.6"}
+ setJsonList(GetParsedPaths(inputdata, ""))
+ if (!showDropdown) {
+ setShowAutocomplete(false)
+ setShowDropdown(true)
+ setShowDropdownNumber(count)
+ }
+ console.log(jsonList)
+ */
+
+ // Search for the item backwards
+ // 1. Reverse search backwards from . -> $
+ // 2. Search the actionlist for the item
+ // 3. Find the data for the specific item
+
+ var curstring = "";
+ var record = false;
+ for (let [key, keyval] in Object.entries(selectedActionParameters[count].value)) {
+ const item = selectedActionParameters[count].value[key];
+ if (record) {
+ curstring += item;
+ }
+
+ if (item === "$") {
+ record = true;
+ curstring = "";
+ }
+ }
+
+ //console.log("CURSTRING: ", curstring)
+ if (curstring.length > 0 && actionlist !== null) {
+ // Search back in the action list
+ curstring = curstring.split(" ").join("_").toLowerCase();
+ var actionItem = actionlist.find(
+ (data) =>
+ data.autocomplete.split(" ").join("_").toLowerCase() === curstring
+ );
+ if (actionItem !== undefined) {
+ console.log("Found item: ", actionItem);
+
+ //actionItem.example = actionItem.example.trim()
+ //actionItem.example = actionItem.example.split(" None").join(" \"None\"")
+ //actionItem.example = actionItem.example.split("\'").join("\"")
+
+ var jsonvalid = true;
+ try {
+ const tmp = String(JSON.parse(actionItem.example));
+ if (
+ !actionItem.example.includes("{") &&
+ !actionItem.example.includes("[")
+ ) {
+ jsonvalid = false;
+ }
+ } catch (e) {
+ jsonvalid = false;
+ }
+
+ if (jsonvalid) {
+ setJsonList(GetParsedPaths(JSON.parse(actionItem.example), ""));
+
+ if (!showDropdown) {
+ setShowAutocomplete(false);
+ setShowDropdown(true);
+ setShowDropdownNumber(count);
+ }
+ }
+ }
+ }
+ } else {
+ if (jsonList.length > 0) {
+ setJsonList([]);
+ }
+ }
+
+ selectedActionParameters[count].autocompleted = false
+ selectedAction.parameters[count].autocompleted = false
+ selectedActionParameters[count].value = event.target.value;
+ selectedAction.parameters[count].value = event.target.value;
+
+ var forceUpdate = false
+ if (isCloud && (selectedAction.app_name === "Shuffle Tools" || selectedAction.app_name === "email") && (selectedAction.name === "send_email_shuffle" || selectedAction.name === "send_sms_shuffle") && data.name === "apikey") {
+ console.log("APIKEY - this shouldn't show up!")
+ }
+
+ if (selectedAction.app_name === "Shuffle Tools" && (selectedAction.name === "filter_list" || selectedAction.name === "is_in_datastore") && data.name === "input_list") {
+ //console.log("FILTER LIST!: ", event, count, data)
+ const parsedvalue = event.target.value
+ if (parsedvalue.includes(".#")) {
+ const splitparsed = parsedvalue.split(".#.")
+ //console.log("Cant contain #: ", splitparsed)
+ if (splitparsed.length > 1) {
+ data.value = splitparsed[0]
+
+ selectedActionParameters[count].value = splitparsed[0]
+ selectedAction.parameters[count].value = splitparsed[0]
+
+ selectedActionParameters[1].value = splitparsed[1]
+ selectedAction.parameters[1].value = splitparsed[1]
+
+ if (splitparsed.length >= 2) {
+ toast.warn("Datastore checker/Filter list only supports filtering on the first list. If you want multi-level filtering, please use the 'execute python' action with the 'filter a list' function in the code editor.", {
+ autoClose: 10000,
+ })
+ } else if (selectedAction.parameters[1].value.includes(".#")) {
+ toast.warn("This filter may not work due to using .# indexing. Please use the 'execute python' action and try the 'filter a list' function in the code editor.")
+ }
+ } else {
+ // Remove .# and after
+ const splitparsed = parsedvalue.split(".#")
+ data.value = splitparsed[0]
+ selectedActionParameters[0].value = splitparsed[0]
+ selectedAction.parameters[0].value = splitparsed[0]
+
+ selectedActionParameters[1].value = ""
+ selectedAction.parameters[1].value = ""
+
+ toast.warn("No value found in the list. Please select an item in the list to filter based on.")
+ }
+
+ forceUpdate = true
+ selectedActionParameters[0].autocompleted = true
+ selectedAction.parameters[0].autocompleted = true
+ selectedActionParameters[1].autocompleted = true
+ selectedAction.parameters[1].autocompleted = true
+ }
+ }
+
+ setSelectedAction(selectedAction)
+ if (forceUpdate || viewForceUpdate === true) {
+ setUpdate(Math.random())
+ }
+
+ //console.log("END OF THIS THING")
+ //setUpdate(event.target.value)
+ };
+
+
+ const changeActionParameterCodeMirror = (event, count, data) => {
+ if (data.startsWith("${") && data.endsWith("}")) {
+ // PARAM FIX - Gonna use the ID field, even though it's a hack
+ const paramcheck = selectedAction.parameters.find(param => param.name === "body")
+ if (paramcheck !== undefined) {
+ // Escapes all double quotes
+ const toReplace = event.target.value?.trim()?.replaceAll("\\\"", "\"")?.replaceAll("\"", "\\\"");
+ console.log("REPLACE WITH: ", toReplace)
+ if (paramcheck["value_replace"] === undefined || paramcheck["value_replace"] === null) {
+ paramcheck["value_replace"] = [{
+ "key": data.name,
+ "value": toReplace,
+ }]
+
+ console.log("IN IF: ", paramcheck)
+
+ } else {
+ const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name)
+ if (subparamindex === -1) {
+ paramcheck["value_replace"].push({
+ "key": data.name,
+ "value": toReplace,
+ })
+ } else {
+ paramcheck["value_replace"][subparamindex]["value"] = toReplace
+ }
+ }
+ //console.log("PARAM: ", paramcheck)
+ //if (paramcheck.id === undefined) {
+ // console.log("Normal paramcheck")
+ //} else {
+ // selectedActionParameters[count]["value_replace"] = paramcheck
+ // selectedAction.parameters[count]["value_replace"] = paramcheck
+ //}
+
+ if (paramcheck["value_replace"] === undefined) {
+ selectedActionParameters[count]["value_replace"] = paramcheck
+ selectedAction.parameters[count]["value_replace"] = paramcheck
+ } else {
+ selectedActionParameters[count]["value_replace"] = paramcheck["value_replace"]
+ selectedAction.parameters[count]["value_replace"] = paramcheck["value_replace"]
+ }
+ console.log("RESULT: ", selectedAction)
+ setSelectedAction(selectedAction)
+ //setUpdate(Math.random())
+ return
+ }
+ }
+
+ if (event.target.value[event.target.value.length - 1] === "$") {
+ if (!showDropdown) {
+ setShowAutocomplete(false)
+ setShowDropdown(true)
+ setShowDropdownNumber(count)
+ }
+ } else {
+ if (showDropdown) {
+ setShowDropdown(false)
+ }
+ }
+
+
+ // bad detection mechanism probably
+ if (event.target.value[event.target.value.length - 1] === "." && actionlist.length > 0) {
+ console.log("GET THE LAST ARGUMENT FOR NODE!")
+ // THIS IS AN EXAMPLE OF SHOWING IT
+ /*
+ const inputdata = {"data": "1.2.3.4", "dataType": "4.5.6.6"}
+ setJsonList(GetParsedPaths(inputdata, ""))
+ if (!showDropdown) {
+ setShowAutocomplete(false)
+ setShowDropdown(true)
+ setShowDropdownNumber(count)
+ }
+ console.log(jsonList)
+ */
+
+ // Search for the item backwards
+ // 1. Reverse search backwards from . -> $
+ // 2. Search the actionlist for the item
+ // 3. Find the data for the specific item
+
+ var curstring = ""
+ var record = false
+ for (let [key, keyval] in Object.entries(selectedActionParameters[count].value)) {
+ const item = selectedActionParameters[count].value[key]
+ if (record) {
+ curstring += item
+ }
+
+ if (item === "$") {
+ record = true
+ curstring = ""
+ }
+ }
+
+ //console.log("CURSTRING: ", curstring)
+ if (curstring.length > 0 && actionlist !== null) {
+ // Search back in the action list
+ curstring = curstring.split(" ").join("_").toLowerCase()
+ var actionItem = actionlist.find(data => data.autocomplete.split(" ").join("_").toLowerCase() === curstring)
+ if (actionItem !== undefined) {
+ console.log("Found item: ", actionItem)
+
+ //actionItem.example = actionItem.example.trim()
+ //actionItem.example = actionItem.example.split(" None").join(" \"None\"")
+ //actionItem.example = actionItem.example.split("\'").join("\"")
+
+ var jsonvalid = true
+ try {
+ const tmp = String(JSON.parse(actionItem.example))
+ if (!actionItem.example.includes("{") && !actionItem.example.includes("[")) {
+ jsonvalid = false
+ }
+ } catch (e) {
+ jsonvalid = false
+ }
+
+ if (jsonvalid) {
+ setJsonList(GetParsedPaths(JSON.parse(actionItem.example), ""))
+
+ if (!showDropdown) {
+ setShowAutocomplete(false)
+ setShowDropdown(true)
+ setShowDropdownNumber(count)
+ }
+ }
+ }
+ }
+ } else {
+ if (jsonList.length > 0) {
+ setJsonList([])
+ }
+ }
+
+ setTimeout(() => {
+ selectedActionParameters[count].autocompleted = false
+ selectedAction.parameters[count].autocompleted = false
+ selectedActionParameters[count].value = data
+ selectedAction.parameters[count].value = data
+ }, 100);
+ setSelectedAction(selectedAction)
+ //setUpdate(Math.random())
+ //setUpdate(event.target.value)
+ }
+
+
+ const changeActionParameterVariable = (fieldvalue, count) => {
+ //console.log("CALLED THIS ONE WITH VALUE!", fieldvalue)
+ //if (selectedVariableParameter === fieldvalue) {
+ // return
+ //}
+
+ setSelectedVariableParameter(fieldvalue);
+
+ selectedActionParameters[count].action_field = fieldvalue;
+ selectedAction.parameters = selectedActionParameters;
+
+ setSelectedApp(selectedApp);
+ setSelectedAction(selectedAction);
+ setUpdate(fieldvalue);
+ };
+
+ // Sets ACTION_RESULT things
+ const changeActionParameterActionResult = (fieldvalue, count) => {
+ //cy.nodes().forEach(function( ele ) {
+ // if (ele.data()["label"] === fieldvalue) {
+ // selectedActionParameters[count].action_field = ele.id()
+ // return
+ // }
+ //});
+
+ selectedActionParameters[count].action_field = fieldvalue;
+ selectedAction.parameters = selectedActionParameters;
+
+ // FIXME - check if startnode
+
+ // Set value
+ setSelectedApp(selectedApp);
+
+ setSelectedAction(selectedAction);
+ setUpdate(Math.random());
+ };
+
+ const changeActionParameterVariant = (data, count) => {
+ selectedActionParameters[count].variant = data;
+ selectedActionParameters[count].value = "";
+
+ if (data === "ACTION_RESULT" && getParents !== undefined) {
+ var parents = getParents(selectedAction);
+ if (parents.length > 0) {
+ selectedActionParameters[count].action_field = parents[0].label;
+ } else {
+ selectedActionParameters[count].action_field = "";
+ }
+ } else if (data === "WORKFLOW_VARIABLE") {
+ if (
+ workflow.workflow_variables !== null &&
+ workflow.workflow_variables !== undefined &&
+ workflow.workflow_variables.length > 0
+ ) {
+ selectedActionParameters[count].action_field =
+ workflow.workflow_variables[0].name;
+ }
+ }
+
+ selectedAction.parameters = selectedActionParameters;
+
+ // This is a stupid workaround to make it refresh rofl
+ setSelectedAction({});
+
+ if (setSelectedTrigger !== undefined) {
+ setSelectedTrigger({});
+ setSelectedApp({});
+ setSelectedEdge({});
+ }
+ // FIXME - check if startnode
+
+ // Set value
+ setSelectedApp(selectedApp);
+ setSelectedAction(selectedAction);
+ setUpdate(Math.random());
+ };
+
+
+ const returnHelperText = (name, value) => {
+ if (name === undefined || value === undefined || name === null || value === null || name === "" || value === "") {
+ //console.log("RETURNING EMPTY")
+ return ""
+ }
+
+ var helperText = ""
+ if (name.includes("url")) {
+ if (value.includes("localhost") || value.includes("127.0.0.1")) {
+ helperText = "Can't use localhost in Shuffle. Please change to server's IP."
+ }
+ }
+
+ // Helpertext for openapi fields
+ //if (helperText === "" && name === "body" && selectedApp.generated && selectedApp.activated) {
+ // helperText =
+ //}
+
+ return helperText
+ }
+
+ const errorHelperText = (name, value, error) => {
+ return (
+
+ {error}
+
+ );
+ }
+
+
+ const analyzeFields = () => {
+
+ if (selectedAction === undefined || selectedAction === null) {
+ return null
+ }
+
+ if (selectedActionParameters === undefined || selectedActionParameters === null || selectedActionParameters.length === 0) {
+ return null
+ }
+
+ // Only shuffle tools for now
+ if (selectedAction.app_name !== "Shuffle Tools") {
+ return null
+ }
+
+ // Custom rules
+ if (selectedAction.name === "set_cache_value") {
+ var actionKey = ""
+ var actionValue = ""
+ for (let [key, keyval] in Object.entries(selectedActionParameters)) {
+ const param = selectedActionParameters[key]
+ if (param.name === "key") {
+ actionKey = param.value
+ }
+
+ if (param.name === "value") {
+ actionValue = param.value
+ }
+ }
+
+ if (actionKey === "" || actionValue === "") {
+ return null
+ }
+
+ if (!actionKey.includes(".#") && actionValue.includes(".#")) {
+ return When the key ({actionKey}) is static, but the value is a list ({actionValue}), it will overwrite the list. You may be looking for the { }} style={{ cursor: "pointer", color: "#FF8544", }}>Check Cache Contains action instead.
+ }
+ }
+
+ return null
+
+ }
+
+ const suggestionInfo = () => {
+ const suggestionText = analyzeFields()
+ if (suggestionText === undefined || suggestionText === null) {
+ return null
+ }
+
+ if (selectedAction.errors === undefined || selectedAction.errors === null || selectedAction.errors.length === 0) {
+ selectedAction.errors = ["Suggestion: " + suggestionText]
+ }
+
+ return
+
+ Tip: {suggestionText}
+
+
+ }
+
+ // FIXME: Issue #40 - selectedActionParameters not reset
+ if (selectedAction && Object.getOwnPropertyNames(selectedAction).length > 0 && selectedActionParameters?.length > 0) {
+ var wrapperapp = {
+ "id": "",
+ "name": "noapp",
+ "large_image": "",
+ }
+
+ var actionname = selectedAction.name.toLowerCase()
+ if (actionname === "email" || actionname === "communication") {
+ actionname = "comms"
+ }
+
+ if (isAgent || isIntegration) {
+ // Check if actionname uppercase is in the parsedDatatypeImages() dictionary
+ if (isAgent) {
+ wrapperapp.large_image = theme.palette.singulBlackWhite
+ newimage = wrapperapp.large_image
+ } else if (isIntegration) {
+ wrapperapp.large_image = theme.palette.singulGreen
+ newimage = theme.palette.singulGreen
+ } else {
+ const uppercaseimage = parsedDatatypeImages()[actionname.toUpperCase()]
+ if (uppercaseimage !== undefined) {
+ var newimage = uppercaseimage
+ //newimage =
+ {newActiondescription}
+ 
+
+