import React, { useEffect, useContext } from "react"; import theme from '../theme.jsx'; import { isMobile } from "react-device-detect" import { MuiChipsInput } from "mui-chips-input"; import UsecaseSearch from "../components/UsecaseSearch.jsx" import WorkflowGrid from "../components/WorkflowGrid.jsx" import dayjs from 'dayjs'; import WorkflowTemplatePopup from "./WorkflowTemplatePopup.jsx"; import { Badge, Avatar, Grid, InputLabel, Select, ListSubheader, Paper, Tooltip, Divider, Button, TextField, IconButton, Menu, MenuItem, FormControlLabel, Chip, Switch, Typography, Zoom, CircularProgress, Drawer, Dialog, DialogTitle, DialogActions, DialogContent, OutlinedInput, Checkbox, ListItemText, Radio, RadioGroup, FormControl, FormLabel, } from "@mui/material"; import { DatePicker, LocalizationProvider, } from '@mui/x-date-pickers' import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs' import { useStyles } from '../views/AppCreator.jsx' import { ExpandLess as ExpandLessIcon, ExpandMore as ExpandMoreIcon, Publish as PublishIcon, OpenInNew as OpenInNewIcon, Add as AddIcon, Remove as RemoveIcon, } from "@mui/icons-material"; const EditWorkflow = (props) => { const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, apps, } = props const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove const [submitLoading, setSubmitLoading] = React.useState(false); const [showMoreClicked, setShowMoreClicked] = React.useState(false); const [innerWorkflow, setInnerWorkflow] = React.useState(workflow) const [newWorkflowTags, setNewWorkflowTags] = React.useState(workflow.tags !== undefined && workflow.tags !== null ? JSON.parse(JSON.stringify(workflow.tags)) : []) const [description, setDescription] = React.useState(workflow.description !== undefined ? workflow.description : "") const [selectedUsecases, setSelectedUsecases] = React.useState(workflow.usecase_ids !== undefined && workflow.usecase_ids !== null ? JSON.parse(JSON.stringify(workflow.usecase_ids)) : []); const [foundWorkflowId, setFoundWorkflowId] = React.useState("") const [name, setName] = React.useState(workflow.name !== undefined ? workflow.name : "") const [dueDate, setDueDate] = React.useState(workflow.due_date !== undefined && workflow.due_date !== null && workflow.due_date !== 0 ? dayjs(workflow.due_date*1000) : dayjs().subtract(1, 'day')) console.log("WORKFLOW: ", workflow) const [inputQuestions, setInputQuestions] = React.useState(workflow.input_questions !== undefined && workflow.input_questions !== null ? JSON.parse(JSON.stringify(workflow.input_questions)) : []) const classes = useStyles(); // Gets the generated workflow const getGeneratedWorkflow = (workflow_id) => { fetch(globalUrl + "/api/v1/workflows/" + workflow_id, { method: "GET", headers: { "Content-Type": "application/json", Accept: "application/json", }, credentials: "include", }) .then((response) => { if (response.status !== 200) { console.log("Status not 200 when getting workflow"); } return response.json(); }) .then((responseJson) => { if (responseJson.id === workflow_id) { console.log("GOT WORKFLOW: ", responseJson) if (name === "") { innerWorkflow.name = responseJson.name setName(responseJson.name) } if (description === "") { innerWorkflow.description = responseJson.description setDescription(description) } if (newWorkflowTags === []) { innerWorkflow.tags = responseJson.tags setNewWorkflowTags(responseJson.tags) } if (selectedUsecases === []) { selectedUsecases = responseJson.usecase_ids } innerWorkflow.id = responseJson.id innerWorkflow.blogpost = responseJson.blogpost innerWorkflow.actions = responseJson.actions innerWorkflow.triggers = responseJson.triggers innerWorkflow.branches = responseJson.branches innerWorkflow.comments = responseJson.comments innerWorkflow.workflow_variables = responseJson.workflow_variables innerWorkflow.execution_variables = responseJson.execution_variables setInnerWorkflow(innerWorkflow) setUpdate(Math.random()) } }) .catch((error) => { //toast(error.toString()); console.log("Get workflow error: ", error.toString()); }) } if (foundWorkflowId.length > 0) { getGeneratedWorkflow(foundWorkflowId) setFoundWorkflowId("") } else { } if (modalOpen !== true) { return null } const newWorkflow = isEditing === true ? false : true const priority = userdata === undefined || userdata === null ? null : userdata.priorities.find(prio => prio.type === "usecase" && prio.active === true) var upload = ""; var total_count = 0 return ( { setModalOpen(false); }} PaperProps={{ style: { color: "white", minWidth: isMobile ? "90%" : 650, maxWidth: isMobile ? "90%" : 650, minHeight: 400, paddingTop: 25, paddingLeft: 50, //minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550, //maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550, }, }} >
{newWorkflow ? "New" : "Editing"} workflow {newWorkflow === true ? null : }
Workflows can be built from scratch, or from templates. Usecases can help you discover next steps, and you can search for them directly. Learn more {showUpload === true ?
: null}
{/*newWorkflow === true ?
Use a Template Start your workflow from our templating system. This uses publied workflows from our Creators to generate full Usecases or parts of your Workflow.
: null*/}
{/* */}
{ setName(event.target.value) }} InputProps={{ style: { color: "white", }, }} color="primary" placeholder="Name" required margin="dense" defaultValue={innerWorkflow.name} label="Name" autoFocus fullWidth />
{ setDescription(event.target.value) }} InputProps={{ style: { color: "white", }, }} maxRows={4} color="primary" defaultValue={innerWorkflow.description} placeholder="Description" multiline label="Description" margin="dense" fullWidth />
{usecases !== null && usecases !== undefined && usecases.length > 0 ? Usecases : null} { console.log("Chip: ", chip) //newWorkflowTags.push(chip); setNewWorkflowTags(chip); }} onAdd={(chip) => { newWorkflowTags.push(chip); setNewWorkflowTags(newWorkflowTags); }} onDelete={(chip, index) => { console.log("Deleting: ", chip, index) newWorkflowTags.splice(index, 1); setNewWorkflowTags(newWorkflowTags); setUpdate(Math.random()); }} />
{showMoreClicked === true ?
Status { console.log("Data: ", e.target.value) //innerWorkflow.workflow_type = e.target.value innerWorkflow.status = e.target.value setInnerWorkflow(innerWorkflow) }} > } label="Test" /> } label="Production" /> { setDueDate(newValue) }} />
Type { console.log("Data: ", e.target.value) innerWorkflow.workflow_type = e.target.value setInnerWorkflow(innerWorkflow) }} > } label="Trigger" /> } label="Subflow" /> } label="Standalone" /> { innerWorkflow.blogpost = event.target.value setInnerWorkflow(innerWorkflow) }} InputProps={{ style: { color: "white", }, }} color="primary" defaultValue={innerWorkflow.blogpost} placeholder="A blogpost or other reference for how this work workflow was built, and what it's for." rows="1" label="blogpost" margin="dense" fullWidth /> { innerWorkflow.video = event.target.value setInnerWorkflow(innerWorkflow) }} InputProps={{ style: { color: "white", }, }} color="primary" defaultValue={innerWorkflow.video} placeholder="A youtube or loom link to the video" rows="1" label="Video" margin="dense" fullWidth /> { innerWorkflow.default_return_value = event.target.value setInnerWorkflow(innerWorkflow) }} InputProps={{ style: { color: "white", }, }} color="primary" defaultValue={innerWorkflow.default_return_value} placeholder="Default return value (used for Subflows if the subflow fails)" rows="3" multiline label="Default return value" margin="dense" fullWidth /> Input fields Input fields are fields that will be used during the startup of the workflow. These will be formatted in JSON and is most commonly used from the workflow run page. {inputQuestions.map((data, index) => { console.log("Inputfield: ", data) return (
{ inputQuestions[index].name = e.target.value setInputQuestions(inputQuestions) setUpdate(Math.random()); }} InputProps={{ classes: { notchedOutline: classes.notchedOutline, }, style: { color: "white", minHeight: 50, }, }} /> { inputQuestions[index].value = e.target.value setInputQuestions(inputQuestions) setUpdate(Math.random()); }} InputProps={{ classes: { notchedOutline: classes.notchedOutline, }, style: { color: "white", minHeight: 50, }, }} />
) })} : null} { setShowMoreClicked(!showMoreClicked); }} > {showMoreClicked ? : }
{newWorkflow === true ? Relevant Workflows {priority === null || priority === undefined ? null :
2 ? priority.description.split("&")[0] : ""} img1={priority.description.split("&").length > 2 ? priority.description.split("&")[1] : ""} dstapp={priority.description.split("&").length > 3 ? priority.description.split("&")[2] : ""} img2={priority.description.split("&").length > 3 ? priority.description.split("&")[3] : ""} title={priority.name} description={priority.description.split("&").length > 4 ? priority.description.split("&")[4] : ""} apps={apps} />
} : null} {newWorkflow === true && name.length > 2 ?
: null} ) } export default EditWorkflow;