+
+
+
{showOptions === false ? null :
{Object.keys(usecases).map((data, index) => {
@@ -1580,7 +1757,7 @@ const Framework = (props) => {
{
Object.getOwnPropertyNames(discoveryData).length > 0 ?
-
+
{paperTitle.length > 0 ?
@@ -1718,6 +1895,8 @@ const Framework = (props) => {
defaultSearch={defaultSearch}
newSelectedApp={newSelectedApp}
setNewSelectedApp={setNewSelectedApp}
+ userdata={userdata}
+ cy={cy}
/>
: null}
diff --git a/frontend/src/components/Appsearch.jsx b/frontend/src/components/Appsearch.jsx
index b063a204..0573883d 100644
--- a/frontend/src/components/Appsearch.jsx
+++ b/frontend/src/components/Appsearch.jsx
@@ -10,10 +10,11 @@ import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon }
import algoliasearch from 'algoliasearch';
import { InstantSearch, connectSearchBox, connectHits } from 'react-instantsearch-dom';
import { Grid, Paper, TextField, ButtonBase, InputAdornment, Typography, Button, Tooltip} from '@material-ui/core';
+import aa from 'search-insights'
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
-const WorkflowSearch = props => {
- const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, newSelectedApp, setNewSelectedApp, defaultSearch, showSearch, ConfiguredHits } = props
+const Appsearch = props => {
+ const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, newSelectedApp, setNewSelectedApp, defaultSearch, showSearch, ConfiguredHits, userdata, cy, } = props
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
@@ -140,19 +141,19 @@ const WorkflowSearch = props => {
}
counted += 1
- var parsedname = ""
- for (var key = 0; key < data.name.length; key++) {
- var character = data.name.charAt(key)
- if (character === character.toUpperCase()) {
- //console.log(data.name[key], data.name[key+1])
- if (data.name.charAt(key+1) !== undefined && data.name.charAt(key+1) === data.name.charAt(key+1).toUpperCase()) {
- } else {
- parsedname += " "
- }
- }
+ var parsedname = data.name.valueOf()
+ //for (var key = 0; key < data.name.length; key++) {
+ // var character = data.name.charAt(key)
+ // if (character === character.toUpperCase()) {
+ // //console.log(data.name[key], data.name[key+1])
+ // if (data.name.charAt(key+1) !== undefined && data.name.charAt(key+1) === data.name.charAt(key+1).toUpperCase()) {
+ // } else {
+ // parsedname += " "
+ // }
+ // }
- parsedname += character
- }
+ // parsedname += character
+ //}
parsedname = (parsedname.charAt(0).toUpperCase()+parsedname.substring(1)).replaceAll("_", " ")
@@ -180,6 +181,32 @@ const WorkflowSearch = props => {
label: "",
})
}
+
+ const queryID = ""
+
+ if (queryID !== undefined && queryID !== null) {
+ try {
+ aa('init', {
+ appId: searchClient.appId,
+ apiKey: searchClient.transporter.headers["x-algolia-api-key"]
+ })
+
+ const timestamp = new Date().getTime()
+ aa('sendEvents', [
+ {
+ eventType: 'conversion',
+ eventName: 'App Framework Activation',
+ index: 'appsearch',
+ objectIDs: [data.objectID],
+ timestamp: timestamp,
+ queryID: queryID,
+ userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
+ }
+ ])
+ } catch (e) {
+ console.log("Failed algolia search update: ", e)
+ }
+ }
}}>
+ {discoveryData.name !== undefined && discoveryData.name !== null && discoveryData.name.length > 0 ?
+ 
+ }
+
+ {discoveryData.name !== undefined && discoveryData.name !== null && discoveryData.name.length > 0 ?
+ discoveryData.name
+ :
+ newSelectedApp.name !== undefined && newSelectedApp.name !== null && newSelectedApp.name.length > 0 ?
+ newSelectedApp.name
+ :
+ `No ${discoveryData.label} app chosen`
+ }
+
+
+
+
+ 
0 ? newSelectedApp.image_url : discoveryData.large_image} style={{height: 40, width: 40, margin: "auto",}}/>
+
+ :
+
+ {discoveryData !== undefined && discoveryData.name !== undefined && discoveryData.name !== null && discoveryData.name.length > 0 ?
+
+
+ {discoveryData.description}
+
+ {/*isCloud && defaultSearch !== undefined && defaultSearch.length > 0 ?
+ {<
+ newSelectedApp={newSelectedApp}
+ setNewSelectedApp={setNewSelectedApp}
+ defaultSearch={defaultSearch}
+ />}
+ :
+ null
+ */}
+
+ :
+ selectionOpen
+ ?
+
+
+ Click an app below to select it
+
+
+ :
+
+ }
+
+
+ {selectionOpen ?
+
+
+
+
+
+
+ What is app authentication?
+
+
+ These are required fields for authenticating with {selectedApp.name}
+
+ Name - what is this used for?
+ {
+ authenticationOption.label = event.target.value;
+ }}
+ />
+
+
+
+
+
+
+ );
+};
+
+export default AuthenticationData
diff --git a/frontend/src/components/ConfigureWorkflow.jsx b/frontend/src/components/ConfigureWorkflow.jsx
index fbd7eb79..66c48ab2 100644
--- a/frontend/src/components/ConfigureWorkflow.jsx
+++ b/frontend/src/components/ConfigureWorkflow.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import {
InputAdornment,
@@ -13,6 +13,7 @@ import {
List,
ListItem,
ListItemText,
+ Fade,
} from "@material-ui/core";
import { FavoriteBorder as FavoriteBorderIcon } from "@material-ui/icons";
import { FixName } from "../views/Apps.jsx";
@@ -43,14 +44,15 @@ const ConfigureWorkflow = (props) => {
isCloud,
setAuthenticationType,
alert,
+ showTriggers,
} = props;
const [requiredActions, setRequiredActions] = React.useState([]);
const [requiredVariables, setRequiredVariables] = React.useState([]);
const [requiredTriggers, setRequiredTriggers] = React.useState([]);
const [previousAuth, setPreviousAuth] = React.useState(appAuthentication);
- const [firstLoad, setFirstLoad] = React.useState("");
const [itemChanged, setItemChanged] = React.useState(false);
- var finished = false;
+ const [firstLoad, setFirstLoad] = React.useState("");
+ const [showFinalizeAnimation, setShowFinalizeAnimation] = React.useState(false);
if (workflow === undefined || workflow === null) {
return null;
@@ -94,18 +96,13 @@ const ConfigureWorkflow = (props) => {
};
if (firstLoad.length === 0 || firstLoad !== workflow.id) {
- if (finished) {
- setConfigureWorkflowModalOpen(false);
- return null;
- }
-
if (apps === undefined || apps === null || apps.length === 0) {
console.log("No apps loaded: ", apps);
setConfigureWorkflowModalOpen(false);
return null;
}
- setFirstLoad(workflow.id);
+ setFirstLoad(workflow.id)
const newactions = [];
for (var key in workflow.actions) {
const action = workflow.actions[key];
@@ -272,17 +269,19 @@ const ConfigureWorkflow = (props) => {
setRequiredTriggers(requiredTriggers);
setRequiredVariables(requiredVariables);
setRequiredActions(newactions);
- }
+ }
if (appAuthentication.length !== previousAuth.length) {
- var newactions = [];
+ var newactions = []
for (var actionkey in requiredActions) {
var newaction = requiredActions[actionkey];
const app = newaction.app;
for (var key in appAuthentication) {
const auth = appAuthentication[key];
- if (auth.app.name === app.name && auth.active) {
+
+ // Does this account for all the different ones of the same?
+ if (auth.app.name === app.name && auth.active === true) {
newaction.auth_done = true;
break;
}
@@ -502,6 +501,7 @@ const ConfigureWorkflow = (props) => {
return (
+ Authentication for {selectedApp.name}
+
+
+ {
+ authenticationOption.fields[data.name] =
+ event.target.value;
+ }}
+ />
+ )}
+
+ );
+ })}
+
- {workflow.name}
-
- The following configuration makes the workflow ready immediately.
-
- {requiredActions.length > 0 ? (
-
-
- Actions
-
-
);
};
diff --git a/frontend/src/components/EditWorkflow.jsx b/frontend/src/components/EditWorkflow.jsx
index b7fefd3a..57852c5d 100644
--- a/frontend/src/components/EditWorkflow.jsx
+++ b/frontend/src/components/EditWorkflow.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useContext } from "react";
import theme from '../theme';
import { isMobile } from "react-device-detect"
import ChipInput from "material-ui-chip-input";
+import UsecaseSearch from "../components/UsecaseSearch.jsx"
import {
Badge,
@@ -45,19 +46,91 @@ import {
} from "@material-ui/icons";
const EditWorkflow = (props) => {
- const { workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, } = props
+ const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, } = props
const [submitLoading, setSubmitLoading] = React.useState(false);
- const [selectedUsecases, setSelectedUsecases] = React.useState([]);
const [showMoreClicked, setShowMoreClicked] = React.useState(false);
const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
const [newWorkflowTags, setNewWorkflowTags] = React.useState(workflow.tags !== undefined && workflow.tags !== null ? JSON.parse(JSON.stringify(workflow.tags)) : [])
+ 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 [description, setDescription] = React.useState(workflow.description !== undefined ? workflow.description : "")
- if (workflow === undefined || workflow.id === undefined || setWorkflow === undefined || modalOpen !== true) {
+
+ // 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) => {
+ //alert.error(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
+
var upload = "";
var total_count = 0
@@ -71,264 +144,299 @@ const EditWorkflow = (props) => {
style: {
backgroundColor: theme.palette.surfaceColor,
color: "white",
- minWidth: isMobile ? "90%" : "800px",
- maxWidth: isMobile ? "90%" : "800px",
+ minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
+ maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
+ minHeight: 400,
},
}}
>
- -
- {requiredActions.map((data, index) => {
- return
+
+
+ {workflow.name}
+
+ The following configuration makes the workflow ready immediately.
+
+ {requiredActions.length > 0 ? (
+
+
+ Required Actions
+
+
- Variables
-
-
+ Variables
+
+
- Triggers
-
-
+ Triggers
+
+
-
+ {requiredActions.map((data, index) => {
+ return (
+
-
- {requiredVariables.map((data, index) => {
- return
-
+ {requiredVariables.map((data, index) => {
+ return
-
- {requiredTriggers.map((data, index) => {
- return
-
- {/*
-
- */}
-
-
-
+ {requiredTriggers.length > 0 && showTriggers !== false ? (
+
+ -
+ {requiredTriggers.map((data, index) => {
+ return
+ {showFinalizeAnimation ?
+ 
{
+ console.log("Img loaded.")
+ setTimeout(() => {
+ console.log("Img closing.")
+ setConfigureWorkflowModalOpen(false);
+ }, 1250)
+
+ }}/>
+ :
+
+ {/*
+
+ */}
+
+
+ }
+
+ {
+ console.log("Img loaded.")
+ setTimeout(() => {
+ console.log("Img closing.")
+ setConfigureWorkflowModalOpen(false);
+ }, 1250)
+
+ }}/>
+ :
+
- {workflow.id !== undefined ? "Editing" : "New"} workflow
- {showUpload === true ?
-
+
-
-
-
-
+
+
+
+
+ {newWorkflow ? "New" : "Editing"} workflow
+
+
+ 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 ?
+
+ {newWorkflow === true ?
+
+
+
+
+
+ : null}
+
+
+ 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}
-
-
+
- Status
- {
- console.log("Data: ", e.target.value)
-
- innerWorkflow.workflow_type = e.target.value
- setInnerWorkflow(innerWorkflow)
- }}
- >
-
-
-
-
-
- Type
- {
- console.log("Data: ", e.target.value)
-
- innerWorkflow.workflow_type = e.target.value
- setInnerWorkflow(innerWorkflow)
- }}
- >
-
-
-
-
- {
- 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
+ {newWorkflow === true ?
+
- {
- setShowMoreClicked(!showMoreClicked);
- }}
- >
- {showMoreClicked ?
-
-
{isMobile ? null :
+ {
+ setName(event.target.value)
}}
- placeholder="Tags"
- color="primary"
- fullWidth
- value={newWorkflowTags}
- onAdd={(chip) => {
- newWorkflowTags.push(chip);
- setNewWorkflowTags(newWorkflowTags);
+ InputProps={{
+ style: {
+ color: "white",
+ },
+ }}
+ color="primary"
+ placeholder="Name"
+ required
+ margin="dense"
+ defaultValue={innerWorkflow.name}
+ label="Name"
+ autoFocus
+ fullWidth
+ />
+ {
+ setDescription(event.target.value)
}}
- onDelete={(chip, index) => {
- newWorkflowTags.splice(index, 1);
- setNewWorkflowTags(newWorkflowTags);
- }}
- />
- {usecases !== null && usecases !== undefined && usecases.length > 0 ?
-
- Usecases
-
-
- {showMoreClicked === true ?
-
-
-
+ {
- 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
- />
-
+
: null}
-
-
}
{isMobile ? null :
diff --git a/frontend/src/components/Oauth2Auth.jsx b/frontend/src/components/Oauth2Auth.jsx
index 43456cb3..68a9be36 100644
--- a/frontend/src/components/Oauth2Auth.jsx
+++ b/frontend/src/components/Oauth2Auth.jsx
@@ -1,5 +1,6 @@
import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
import { useTheme } from "@material-ui/core/styles";
+import theme from '../theme';
import { v4 as uuidv4 } from "uuid";
import {
@@ -62,6 +63,7 @@ const registeredApps = [
"outlook_office365",
"microsoft_teams",
"microsoft_teams_user_access",
+ "todoist",
]
const AuthenticationOauth2 = (props) => {
@@ -77,8 +79,8 @@ const AuthenticationOauth2 = (props) => {
setNewAppAuth,
setAuthenticationModalOpen,
isCloud,
+ autoAuth,
} = props;
- const theme = useTheme();
//const [update, setUpdate] = React.useState("|")
const [defaultConfigSet, setDefaultConfigSet] = React.useState(
@@ -88,7 +90,7 @@ const AuthenticationOauth2 = (props) => {
authenticationType.client_secret !== undefined &&
authenticationType.client_secret !== null &&
authenticationType.client_secret.length > 0
- );
+ );
const [clientId, setClientId] = React.useState(
defaultConfigSet ? authenticationType.client_id : ""
@@ -123,6 +125,73 @@ const AuthenticationOauth2 = (props) => {
return null;
}
+ const startOauth2Request = () => {
+ console.log("APP: ", selectedApp)
+ if (selectedApp.name.toLowerCase() == "outlook_graph" || selectedApp.name.toLowerCase() == "outlook_office365") {
+ handleOauth2Request(
+ "efe4c3fe-84a1-4821-a84f-23a6cfe8e72d",
+ "",
+ "https://graph.microsoft.com",
+ ["Mail.ReadWrite"],
+ );
+ } else if (selectedApp.name.toLowerCase() == "gmail") {
+ handleOauth2Request(
+ "253565968129-c0a35knic7q1pdk6i6qk9gdkvr07ci49.apps.googleusercontent.com",
+ "",
+ "https://gmail.googleapis.com",
+ ["https://www.googleapis.com/auth/gmail.modify",
+ "https://www.googleapis.com/auth/gmail.send",
+ "https://www.googleapis.com/auth/gmail.insert",
+ "https://www.googleapis.com/auth/gmail.compose"]
+ )
+ } else if (selectedApp.name.toLowerCase() == "zoho_desk") {
+ handleOauth2Request(
+ "1000.ZR5MHUW6B0L6W1VUENFGIATFS0TOJT",
+ "",
+ "https://desk.zoho.com",
+ ["Desk.tickets.READ",
+ "Desk.tickets.UPDATE",
+ "Desk.tickets.DELETE",
+ "Desk.tickets.CREATE"]
+ )
+ } else if (selectedApp.name.toLowerCase() == "slack") {
+ handleOauth2Request(
+ "151779186901.2448678750935",
+ "",
+ "https://slack.com",
+ ["admin", "chat:write", "im:read", "im:write", "search:read", "usergroups:read", "usergroups:write"]
+ )
+ } else if (selectedApp.name.toLowerCase() == "webex") {
+ handleOauth2Request(
+ "Cab184f3d7271f540443c79b5b79845e3387abbbdb3db4233a87ea3a5432fb3d5",
+ "",
+ "https://webexapis.com",
+ ["spark:all"]
+ )
+ } else if (selectedApp.name.toLowerCase().includes("microsoft_teams")) {
+ handleOauth2Request(
+ "31cb4c84-658e-43d5-ae84-22c9142e967a",
+ "",
+ "https://graph.microsoft.com",
+ ["ChannelMessage.Edit", "ChannelMessage.Read.All", "ChannelMessage.Send", "Chat.Create", "Chat.ReadWrite", "Chat.Read"]
+ )
+ } else if (selectedApp.name.toLowerCase().includes("todoist")) {
+ handleOauth2Request(
+ "35fa3a384040470db0c8527e90a3c2eb",
+ "",
+ "https://api.todoist.com",
+ ["task:add"]
+ )
+ }
+ }
+
+ useEffect(() => {
+ console.log("Should automatically click the auto-auth button?")
+ if (autoAuth === true && selectedApp !== undefined) {
+ startOauth2Request()
+ }
+ }, [])
+
const handleOauth2Request = (client_id, client_secret, oauth_url, scopes) => {
setButtonClicked(true);
console.log("SCOPES: ", scopes);
@@ -164,19 +233,15 @@ const AuthenticationOauth2 = (props) => {
state += `%26refresh_uri%3d${authentication_url}`;
}
+ // No prompt forcing
+ const url = `${authenticationType.redirect_uri}?client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&prompt=login&scope=${resources}&state=${state}&access_type=offline`;
// Force new consent
//const url = `${authenticationType.redirect_uri}?client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&scope=${resources}&prompt=consent&state=${state}&access_type=offline`;
// Admin consent
- //const url = `${authenticationType.redirect_uri}?client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&scope=${resources}&prompt=admin_consent&state=${state}&access_type=offline`;
-
- // Skip consent
- const url = `${authenticationType.redirect_uri}?client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&scope=${resources}&state=${state}&access_type=offline`;
-
//const url = `https://accounts.zoho.com/oauth/v2/auth?response_type=code&client_id=${client_id}&scope=AaaServer.profile.Read&redirect_uri=${redirectUri}&prompt=consent`
- //console.log("Full URI: ", url)
- //console.log("Redirect Uri: ", redirectUri)
- // &resource=https%3A%2F%2Fgraph.microsoft.com&
+
+ // &resource=https%3A%2F%2Fgraph.microsoft.com&
// FIXME: Awful, but works for prototyping
// How can we get a callback properly realtime?
@@ -188,12 +253,20 @@ const AuthenticationOauth2 = (props) => {
var open = true;
const timer = setInterval(() => {
if (newwin.closed) {
+ console.log("Closed!")
+
+ if (setAuthenticationModalOpen !== undefined) {
+ setAuthenticationModalOpen(false)
+ }
+
setButtonClicked(false);
clearInterval(timer);
//alert('"Secure Payment" window closed!');
getAppAuthentication(true, true);
- }
+ } else {
+ console.log("Not closed")
+ }
}, 1000);
//do {
// setTimeout(() => {
@@ -361,76 +434,48 @@ const AuthenticationOauth2 = (props) => {
{isCloud && registeredApps.includes(selectedApp.name.toLowerCase()) ?
-
}
{isMobile ? null :
diff --git a/frontend/src/components/SuggestedWorkflows.jsx b/frontend/src/components/SuggestedWorkflows.jsx
new file mode 100644
index 00000000..47fa214f
--- /dev/null
+++ b/frontend/src/components/SuggestedWorkflows.jsx
@@ -0,0 +1,235 @@
+import React, { useState, useEffect } from 'react';
+import ReactGA from 'react-ga';
+import theme from '../theme';
+import PaperComponent from "../components/PaperComponent.jsx"
+import UsecaseSearch, { usecaseTypes } from "../components/UsecaseSearch.jsx"
+
+import {
+ Paper,
+ Typography,
+ Divider,
+ IconButton,
+ Badge,
+ CircularProgress,
+ Tooltip,
+ Dialog,
+} from "@material-ui/core";
+
+import {
+ Close as CloseIcon,
+ Delete as DeleteIcon,
+ AutoFixHigh as AutoFixHighIcon,
+ Done as DoneIcon,
+} from "@mui/icons-material";
+
+const SuggestedWorkflows = (props) => {
+ const { globalUrl, userdata, usecaseSuggestions, frameworkData, setUsecaseSuggestions, inputSearch, apps, } = props
+
+ const [usecaseSearch, setUsecaseSearch] = React.useState("")
+ const [usecaseSearchType, setUsecaseSearchType] = React.useState("")
+ const [finishedUsecases, setFinishedUsecases] = React.useState([])
+ const [previousUsecase, setPreviousUsecase] = React.useState("")
+ const [closeWindow, setCloseWindow] = React.useState(false)
+
+ const isCloud =
+ window.location.host === "localhost:3002" ||
+ window.location.host === "shuffler.io";
+
+
+ useEffect(() => {
+ if (closeWindow === true) {
+ console.log("WINDOW CLOSED")
+ finishedUsecases.push(usecaseSearch)
+ setFinishedUsecases(finishedUsecases)
+
+ setCloseWindow(false)
+ }
+ }, [closeWindow])
+
+ if (usecaseSuggestions === undefined || usecaseSuggestions.length === 0) {
+ console.log("Closing finished usecases 1")
+ return null
+ }
+
+ if (inputSearch !== previousUsecase) {
+ setPreviousUsecase(inputSearch)
+ setFinishedUsecases([])
+ }
+
+ if (finishedUsecases.length === usecaseSuggestions.length) {
+ console.log("Closing finished usecases 2")
+ return null
+ }
+
+
+ //useEffect(() => {
+ // //if (defaultSearch ===
+ // //setFinishedUsecases(finishedUsecases)
+ // console.log("Finished default usecase?", usecaseSearch)
+ //}, [usecaseSearch])
+
+ const foundZindex = usecaseSearch.length > 0 && usecaseSearchType.length > 0 ? -1 : 12500
+
+ const IndividualUsecase = (props) => {
+ const { usecase, index } = props
+ const [hovering, setHovering] = React.useState(false)
+
+ const usecasename = usecase.name
+ const bordercolor = usecase.color !== undefined ? usecase.color : "rgba(255,255,255,0.3)"
+
+
+ const srcimage = usecase.items[0].app
+ var dstimage = usecase.items[1].app
+ if (usecase.items.length > 2) {
+ dstimage = usecase.items[2].app
+ }
+
+ console.log(finishedUsecases)
+
+ const finished = finishedUsecases.includes(usecasename)
+ const selectedIcon = finished ? {
+ setHovering(true)
+ }} onMouseOut={() => {
+ setHovering(false)
+ }} onClick={() => {
+ if (isCloud) {
+ ReactGA.event({
+ category: "welcome",
+ action: "click_suggested_workflow",
+ label: usecasename,
+ })
+ }
+
+ console.log("Try usecase ", usecasename)
+ setUsecaseSearchType(usecase.type)
+ setUsecaseSearch(usecasename)
+
+ }}>
+
+
+
+ {usecasename}
+
+
+
+ 
+ 
+
+
+
+ {selectedIcon}
+
+
+
+ Suggested Workflows ({finishedUsecases.length}/{usecaseSuggestions.length})
+
+ {
+ if (setUsecaseSuggestions !== undefined) {
+ setUsecaseSuggestions([])
+ }
+ }}
+ >
+
+ {usecaseSuggestions.map((usecase, index) => {
+
+ return (
+
+
+
+ Choose a Usecase
+
+
+ )
+ }
+ */
+
+ // Image = the source EMAIL system used
+ var usecases = JSON.parse(JSON.stringify(allusecases))
+
+ const imagestyle = {
+ height: 50,
+ width: 50,
+ borderRadius: 25,
+ border: "1px solid rgba(255,255,255,0.3)",
+ cursor: "pointer",
+ }
+
+ const getType = (inputtype) => {
+ if (inputtype === undefined) {
+ return inputtype
+
+ }
+
+ if (inputtype.toLowerCase() === "email" || inputtype.toLowerCase() === "comms") {
+ inputtype = "communication"
+ }
+
+ return inputtype
+ }
+
+ // FIXME: Add a way for it to automatically discover
+ // relevant workflows from the app at this point
+ // or maybe it should be added directly to the app frameworks'
+ // data
+
+ const getAppAuthentication = (updateAction) => {
+ fetch(globalUrl + "/api/v1/apps/authentication", {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ credentials: "include",
+ })
+ .then((response) => {
+ if (response.status !== 200) {
+ console.log("Status not 200 for app auth :O!");
+ }
+
+ return response.json();
+ })
+ .then((responseJson) => {
+ if (responseJson.success) {
+ setAppAuthentication(responseJson.data);
+ }
+ })
+ .catch((error) => {
+ console.log("App auth loading error: "+error.toString());
+ })
+ }
+
+ //saveWorkflow={undefined} {/*saveWorkflow*/}
+ //setNewAppAuth={undefined} {/*setNewAppAuth*/}
+ const authenticationModal = authenticationModalOpen ? (
+
+ ) : null
+
+ const deleteWorkflow = (workflow_id) => {
+ fetch(globalUrl + "/api/v1/workflows/" + workflow_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 workflows :O!");
+ }
+
+ return response.json();
+ })
+ .then((responseJson) => {
+ console.log("Deleted workflow")
+ })
+ .catch((error) => {
+ //alert.error(error.toString());
+ console.log("Delete workflow error: ", error.toString());
+ })
+ }
+
+ const getWorkflow = (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 for workflows :O!");
+ }
+
+ return response.json();
+ })
+ .then((responseJson) => {
+ setWorkflow(responseJson)
+
+ if (window !== undefined && !window.location.href.includes("/workflows")) {
+ setConfigureWorkflowModalOpen(true)
+ }
+ })
+ .catch((error) => {
+ //alert.error(error.toString());
+ console.log("Get workflows error: ", error.toString());
+ })
+ }
+
+ const mergeWorkflowUsecases = (usecasedata) => {
+ const url = `${globalUrl}/api/v1/workflows/merge`;
+ fetch(url, {
+ mode: "cors",
+ method: "POST",
+ body: JSON.stringify(usecasedata),
+ credentials: "include",
+ crossDomain: true,
+ withCredentials: true,
+ headers: {
+ "Content-Type": "application/json; charset=utf-8",
+ },
+ })
+ .then((response) =>
+ response.json().then((responseJson) => {
+ setIsUploading(false)
+ var changed = false
+ if (responseJson.success === false) {
+ if (responseJson.reason !== null && responseJson.reason !== undefined) {
+ //alert.error(responseJson.reason)
+ }
+
+ if (responseJson.source === "") {
+ const appname =
+ usecasedata.source.error = usecasedata.source.app_name === undefined ? "Select a Trigger workflow first" : `${usecasedata.source.app_name} has no public trigger workflow yet. Click this to try another app`
+ changed = true
+ } else {
+ usecasedata.source.error = ""
+ changed = true
+ }
+
+ if (responseJson.destination === "") {
+ usecasedata.destination.error = usecasedata.destination.app_name === undefined ? "Select a Subflow first" : `${usecasedata.destination.app_name} has no public subflow yet. Click this to try another app`
+ changed = true
+ } else {
+ usecasedata.destination.error = ""
+ changed = true
+ }
+
+ if (responseJson.middle !== undefined) {
+ for (var key in responseJson.middle) {
+ for (var subkey in usecasedata.middle) {
+ if (responseJson.middle[key] === usecasedata.middle[key].text) {
+ console.log("Found: ")
+ if (usecasedata.middle[subkey].app_name === undefined || usecasedata.middle[subkey].app_name === "") {
+ usecasedata.middle[subkey].error = `${usecasedata.middle[subkey].type} app must be selected first. Click this to change`
+ } else {
+ usecasedata.middle[subkey].error = `${usecasedata.middle[subkey].app_name} has no public subflow yet. Click this to change`
+ }
+
+ changed = true
+ break
+ }
+ }
+ }
+ }
+ } else {
+ if (responseJson.workflow_id !== null && responseJson.workflow_id !== undefined) {
+ if (responseJson.added_auth !== undefined && responseJson.added_auth !== null && responseJson.added_auth.length > 0) {
+ console.log("SHOULD HANDLE AUTH: ", responseJson.added_auth)
+ setConfigureWorkflowAuth(responseJson.added_auth)
+
+ if (setFoundWorkflowId !== undefined) {
+ console.log("Set found workflow id: ", responseJson.workflow_id)
+ setFoundWorkflowId(responseJson.workflow_id)
+ }
+
+ getWorkflow(responseJson.workflow_id)
+ getAppAuthentication()
+ } else {
+ if (setFoundWorkflowId !== undefined) {
+ console.log("Set found workflow id: ", responseJson.workflow_id)
+ setFoundWorkflowId(responseJson.workflow_id)
+ }
+
+ setWorkflow({"id": responseJson.workflow_id})
+ }
+ }
+
+ if (responseJson.auth_required === true) {
+ console.log("SET AUTH AS NEXT STEP!")
+ }
+ }
+
+ if (changed === true) {
+ setAllUsecases([usecasedata])
+ }
+ })
+ )
+ .catch((error) => {
+ setIsUploading(false)
+ console.log("Merge err: ", error.toString())
+ //alert.error("Err: " + error.toString());
+ });
+ }
+
+ //console.log("Filled in: ", appFramework, usecases)
+ if (appFramework !== undefined && usecases !== undefined) {
+
+ for (var key in usecases) {
+ // source
+ const usecase = usecases[key]
+ if (usecase.source.type === undefined || usecase.source.image === "" || usecase.source.image === undefined) {
+ usecases[key].source.image = theme.palette.defaultImage
+ }
+
+ if (usecase.destination.type === undefined || usecase.destination.image === "" || usecase.destination.image === undefined) {
+ usecases[key].destination.image = theme.palette.defaultImage
+ }
+
+ const srctype = getType(usecase.source.type)
+ const dsttype = getType(usecase.destination.type)
+
+ const srcinfo = appFramework[srctype]
+ if (srcinfo !== undefined && srcinfo.large_image !== undefined && srcinfo.large_image !== "" && (usecases[key].source.app_name === undefined || usecases[key].source.app_name === "")) {
+ usecases[key].source.image = srcinfo.large_image
+ usecases[key].source.app_id = srcinfo.id
+ usecases[key].source.app_name = srcinfo.name
+ }
+
+ const destinfo = appFramework[dsttype]
+ if (destinfo !== undefined && destinfo.large_image !== undefined && destinfo.large_image !== "" && (usecases[key].destination.app_name === undefined || usecases[key].destination.app_name === "")) {
+ usecases[key].destination.image = destinfo.large_image
+ usecases[key].destination.app_id = destinfo.id
+ usecases[key].destination.app_name = destinfo.name
+ }
+
+ if (usecase.middle !== undefined && usecase.middle !== null && usecase.middle.length > 0) {
+ for (var subkey in usecase.middle) {
+ const midcase = usecase.middle[subkey]
+
+ const midtype = getType(midcase.type)
+ const midinfo = appFramework[midtype]
+ if (midinfo !== undefined && midinfo.large_image !== undefined && midinfo.large_image !== "" && (usecases[key].middle[subkey].app_name === undefined || usecases[key].middle[subkey].app_name === "")) {
+ usecases[key].middle[subkey].image = midinfo.large_image
+ usecases[key].middle[subkey].app_id = midinfo.id
+ usecases[key].middle[subkey].app_name = midinfo.name
+ } else {
+ if (usecases[key].middle[subkey].image === undefined || usecases[key].middle[subkey].image === "") {
+ usecases[key].middle[subkey].image = theme.palette.defaultImage
+ }
+ }
+ }
+ }
+ }
+
+ //if (firstRequest) {
+ // setAllUsecases(usecases)
+ // setFirstRequest(false)
+ //}
+ }
+
+ const configureWorkflowModal =
+ configureWorkflowModalOpen ? (
+
+ ) : null
+
+
+ const createWorkflowFromTemplate = (data) => {
+ if (workflow.id !== undefined && workflow.id !== null && workflow.id.length !== 0) {
+ console.log("Should delete old one: ", workflow.id)
+ deleteWorkflow(workflow.id)
+ }
+
+ // Should be searched?
+ setIsUploading(true)
+
+ var changed = false
+ if (data.source.app_name === "") {
+ data.source.error = `'${data.source.type}' app must be selected first`
+ changed = true
+ }
+
+ if (data.destination.app_name === "") {
+ data.destination.error = `'${data.destination.type}' app must be selected first`
+ changed = true
+ }
+
+ if (data.middle !== undefined && data.middle !== null && data.middle.length > 0) {
+ for (var key in data.middle) {
+ const middleItem = data.middle[key]
+ if (middleItem.app_name === "") {
+ data.middle[key].error = `'${middleItem.type}' app must be selected first`
+ //changed = true
+ }
+ }
+ }
+
+ if (changed) {
+ alert.error("Errors were found. Click them to sort sort them out or go to the next usecase.")
+
+ setUpdate(Math.random())
+ setIsUploading(false)
+ return
+ }
+
+ // Auto finding these during deploy
+ //data.source.workflow_id = "e506060f-0c58-4f95-a0b8-f671103d78e5"
+ //data.destination.workflow_id = "ffe8122d-0787-425a-aa20-c2587ee75a83"
+ //if (data.middle !== undefined && data.middle !== null && data.middle.length > 0) {
+ // data.middle[0].workflow_id = "1077d9ee-b571-4410-a7e6-261f32f346c5"
+ //}
+
+ mergeWorkflowUsecases(data)
+ }
+
+ if (autotry === true && firstRequest === true) {
+ console.log("Should autotry the usecase! Make sure data is in order first. Usecase: ", usecases)
+
+ if (usecases !== undefined && usecases !== null && usecases.length > 0 && usecases[0].name !== "") {
+ setFirstRequest(false)
+ createWorkflowFromTemplate(usecases[0])
+ }
+ //{usecases.map((data, index) => {
+ }
+
+
+ const ShowBox = (props) => {
+ const { data, type, index, miditem, subindex } = props
+
+ const [expanded, setexpanded] = React.useState(false)
+ const [newSelectedApp, setNewSelectedApp] = React.useState({})
+ const [paperTitle, setPaperTitle] = React.useState(data.type)
+ const [selectionOpen, setSelectionOpen] = React.useState(false)
+ const [discoveryData, setDiscoveryData] = React.useState({
+ "id": "",
+ "label": "",
+ "name": "",
+ "large_image": "",
+ })
+
+ //console.log("Data: ", data)
+
+ const setFrameworkItem = (data) => {
+ fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
+ 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 framework!");
+ }
+
+ return response.json();
+ })
+ .then((responseJson) => {
+ if (responseJson.success === false) {
+ if (responseJson.reason !== undefined) {
+ alert.error("Failed updating default app: " + responseJson.reason)
+ } else {
+ alert.error("Failed to update framework for your org.")
+
+ }
+ } else {
+ if (getFramework !== undefined) {
+ getFramework()
+ }
+ }
+
+ //setFrameworkLoaded(true)
+ //setFrameworkData(responseJson)
+ })
+ .catch((error) => {
+ alert.error(error.toString());
+ //setFrameworkLoaded(true)
+ })
+ }
+
+ useEffect(() => {
+ if (newSelectedApp.objectID === undefined) {
+ return
+ }
+
+ var discoveredtype = ""
+ if (type === "middle") {
+ console.log("Updating middle index", subindex)
+
+ allusecases[index][type][subindex]["app_id"] = newSelectedApp.objectID
+ allusecases[index][type][subindex]["app_name"] = newSelectedApp.name
+ allusecases[index][type][subindex]["app_version"] = newSelectedApp.app_version
+ allusecases[index][type][subindex]["image"] = newSelectedApp.image_url
+ allusecases[index][type][subindex]["error"] = ""
+
+ discoveredtype = allusecases[index][type][subindex]["type"]
+ } else {
+ allusecases[index][type]["app_id"] = newSelectedApp.objectID
+ allusecases[index][type]["app_name"] = newSelectedApp.name
+ allusecases[index][type]["app_version"] = newSelectedApp.app_version
+ allusecases[index][type]["image"] = newSelectedApp.image_url
+ allusecases[index][type]["error"] = ""
+
+ discoveredtype = allusecases[index][type]["type"]
+ }
+
+ setSelectionOpen(false)
+ setUpdate(Math.random())
+ setAllUsecases(allusecases)
+
+ const submitValue = {
+ "type": discoveredtype,
+ "name": newSelectedApp.name,
+ "id": newSelectedApp.objectID,
+ "large_image": newSelectedApp.image_url,
+ "description": newSelectedApp.description,
+ }
+
+ setFrameworkItem(submitValue)
+ }, [newSelectedApp])
+
+ if (data.text === undefined || data.text === null || data.text.length === 0) {
+ return null
+ }
+
+ const changeAppType = () => {
+ setSelectionOpen(true)
+ }
+
+ const looplist = type === "source" ? triggerlist : type === "destination" ? subflows : midflows
+ const hasError = data.error !== undefined && data.error !== null && data.error.length > 0
+ const borderColor = hasError ? theme.palette.primary.main : "rgba(255,255,255,0.3)"
+
+ return (
+
+
+ {selectionOpen === true ?
+
+ )
+ }
+
+ //console.log("ALLUSECASES: ", allusecases)
+
+ return (
+
+
+
+ {expanded ?
+ looplist.map((subdata, curindex) => {
+ if (appFramework === undefined) {
+ subdata.image = theme.palette.defaultImage
+ } else {
+ const srctype = getType(subdata.type)
+ const srcinfo = appFramework[srctype]
+
+ if (srcinfo !== undefined && srcinfo.large_image !== undefined && srcinfo.large_image !== "" && (subdata.app_name === undefined || subdata.app_name === "")) {
+ subdata.image = srcinfo.large_image
+ subdata.app_id = srcinfo.id
+ subdata.app_name = srcinfo.name
+ } else {
+ subdata.image = theme.palette.defaultImage
+ }
+ }
+
+ return (
+
+
+ 
{
+
+ if (data.type === undefined || data.type === null || data.type === "") {
+ setexpanded(true)
+ console.log("No type. Skipping window open.")
+ return
+ }
+
+ changeAppType()
+ }}/>
+
+
+
+
+ {data.text}
+
+ {hasError ?
+ {
+ if (data.type === undefined || data.type === null || data.type === "") {
+ setexpanded(true)
+ console.log("No type. Skipping window open.")
+ return
+ }
+
+ changeAppType()
+ }}>
+ {data.error}
+
+ :
+ null}
+
+
+
+
+ {
+ }}
+ >
+
+
+
+
+
+ {type === "middle" ?
+ {
+ allusecases[index][type] = []
+
+ setAllUsecases(allusecases)
+ setUpdate(Math.random())
+ }}
+ >
+
+ : null}
+
+
+ {
+ setexpanded(!expanded)
+ }}
+ >
+ {expanded ?
+
+
+
+ {
+ if (subdata.disabled === true) {
+ //alert.info("Usecase not available yet.")
+ return
+ }
+
+ if (type === "middle") {
+ allusecases[index][type][subindex] = subdata
+ } else {
+ allusecases[index][type] = subdata
+ }
+
+ setAllUsecases(allusecases)
+ setUpdate(Math.random())
+ setexpanded(false)
+ }}>
+ 
{
+ }}/>
+
+ {subdata.text}
+
+
+ )
+ })
+ :
+ null
+ }
+
+ {configureWorkflowModal}
+ {authenticationModal}
+ {showTitle !== false && defaultSearch !== undefined ?
+
+ {defaultSearch}: {allusecases[usecaseIndex].name}
+
+ : null}
+ {usecases.map((data, index) => {
+ return (
+
+ )
+}
+
+export default UsecaseSearch
diff --git a/frontend/src/components/WelcomeForm.jsx b/frontend/src/components/WelcomeForm2.jsx
similarity index 57%
rename from frontend/src/components/WelcomeForm.jsx
rename to frontend/src/components/WelcomeForm2.jsx
index 4b91a5f2..90f09a6a 100644
--- a/frontend/src/components/WelcomeForm.jsx
+++ b/frontend/src/components/WelcomeForm2.jsx
@@ -1,17 +1,23 @@
import React, { useState, useEffect } from "react";
-import Stepper from "@material-ui/core/Stepper";
-import Step from "@material-ui/core/Step";
-import StepLabel from "@material-ui/core/StepLabel";
+import ReactGA from 'react-ga';
import Button from "@material-ui/core/Button";
import Checkbox from '@mui/material/Checkbox';
+import AliceCarousel from 'react-alice-carousel';
+import 'react-alice-carousel/lib/alice-carousel.css';
+
import SearchIcon from '@mui/icons-material/Search';
import EmailIcon from '@mui/icons-material/Email';
import NewReleasesIcon from '@mui/icons-material/NewReleases';
import ExtensionIcon from '@mui/icons-material/Extension';
+import LightbulbIcon from '@mui/icons-material/Lightbulb';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import theme from '../theme';
import {
+ Fade,
+ IconButton,
FormGroup,
FormControl,
InputLabel,
@@ -24,23 +30,91 @@ import {
Typography,
TextField,
Zoom,
+ List,
+ ListItem,
+ ListItemText,
+ Divider,
+ Tooltip,
+ Chip,
} from "@material-ui/core";
+import { useAlert } from "react-alert";
+
import { useNavigate, Link } from "react-router-dom";
import WorkflowSearch from '../components/Workflowsearch.jsx';
+import AuthenticationItem from '../components/AuthenticationItem.jsx';
import WorkflowPaper from "../components/WorkflowPaper.jsx"
+import UsecaseSearch from "../components/UsecaseSearch.jsx"
+
+
+const responsive = {
+ 0: { items: 1 },
+};
const WelcomeForm = (props) => {
- const { userdata, globalUrl, discoveryWrapper, setDiscoveryWrapper } = props
+ const { userdata, globalUrl, discoveryWrapper, setDiscoveryWrapper, appFramework, getFramework, activeStep, setActiveStep, steps, skipped, setSkipped, getApps, apps, handleSetSearch, usecaseButtons, defaultSearch, setDefaultSearch, selectionOpen, setSelectionOpen, } = props
+
+ const usecaseItems = [
+
+ {
+ console.log("Click add middle!")
+
+ allusecases[index].middle.push(midflows[0])
+ setAllUsecases(allusecases)
+ setUpdate(Math.random())
+ }}
+ >
+
+
+
+ : null}
+
+
+ )
+ })}
+
+
+
+ )
+ })
+ : null}
+
+
+ {defaultSearch !== undefined && data.middle.length === 0 ?
+
+
+
+ ,
+
+
+ ,
+
+
+ ,
+
+
+ ]
- const [activeStep, setActiveStep] = React.useState(0);
- const [skipped, setSkipped] = React.useState(new Set());
const [discoveryData, setDiscoveryData] = React.useState({})
const [name, setName] = React.useState("")
const [orgName, setOrgName] = React.useState("")
const [role, setRole] = React.useState("")
const [orgType, setOrgType] = React.useState("")
const [finishedApps, setFinishedApps] = React.useState([])
+ const [authentication, setAuthentication] = React.useState([]);
+ const [newSelectedApp, setNewSelectedApp] = React.useState({})
+ const [thumbIndex, setThumbIndex] = useState(0);
+ const [thumbAnimation, setThumbAnimation] = useState(false);
+ const [clickdiff, setclickdiff] = useState(0);
+
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
+ const alert = useAlert();
let navigate = useNavigate();
const onNodeSelect = (label) => {
@@ -77,8 +151,7 @@ const WelcomeForm = (props) => {
}
}, [discoveryWrapper])
- useEffect(() => {
-
+ useEffect(() => {
if (
window.location.search !== undefined &&
window.location.search !== null
@@ -87,24 +160,20 @@ const WelcomeForm = (props) => {
const params = Object.fromEntries(urlSearchParams.entries());
const foundTab = params["tab"];
if (foundTab !== null && foundTab !== undefined && !isNaN(foundTab)) {
- setActiveStep(foundTab-1)
+ if (foundTab === 3 || foundTab === "3") {
+ console.log("SET SEARCH!!")
+ //setclickdiff(240)
+ }
} else {
- navigate(`/welcome?tab=1`)
+ //navigate(`/welcome?tab=1`)
}
}
-
}, [])
- const steps = getSteps();
-
const isStepOptional = step => {
return step === 1
}
- const isStepSkipped = step => {
- return skipped.has(step)
- }
-
const sendUserUpdate = (name, role, userId) => {
const data = {
"tutorial": "welcome",
@@ -177,7 +246,6 @@ const WelcomeForm = (props) => {
console.log("Update of org failed")
//alert.error("Failed updating org: ", responseJson.reason);
} else {
- console.log("Update success!")
//alert.success("Successfully edited org!");
}
})
@@ -221,12 +289,25 @@ const WelcomeForm = (props) => {
)
}
+ const isStepSkipped = step => {
+ return skipped.has(step)
+ }
+
const handleNext = () => {
setDefaultSearch("")
if (activeStep === 0) {
console.log("Should send basic information about org (fetch)")
+ setclickdiff(0)
navigate(`/welcome?tab=2`)
+
+ if (isCloud) {
+ ReactGA.event({
+ category: "welcome",
+ action: "click_page_one_next",
+ label: "",
+ })
+ }
if (userdata.active_org !== undefined && userdata.active_org.id !== undefined && userdata.active_org.id !== null && userdata.active_org.id.length > 0) {
sendOrgUpdate(orgName, orgType, userdata.active_org.id, "")
@@ -240,11 +321,22 @@ const WelcomeForm = (props) => {
console.log("Should send secondary info about apps and other things")
setDiscoveryWrapper({})
+ setclickdiff(240)
+ //setclickdiff(0)
navigate(`/welcome?tab=3`)
+ //handleSetSearch("Enrichment", "2. Enrich")
+ handleSetSearch(usecaseButtons[0].name, usecaseButtons[0].usecase)
+ getApps()
+
+ // Make sure it's up to date
+ if (getFramework !== undefined) {
+ getFramework()
+ }
} else if (activeStep === 2) {
console.log("Should send third page with workflows activated and the like")
}
+
let newSkipped = skipped;
if (isStepSkipped(activeStep)) {
newSkipped = new Set(newSkipped.values());
@@ -253,11 +345,27 @@ const WelcomeForm = (props) => {
setActiveStep(prevActiveStep => prevActiveStep + 1);
setSkipped(newSkipped);
- };
+ }
+
const handleBack = () => {
setActiveStep(prevActiveStep => prevActiveStep - 1);
+
+ if (activeStep === 2) {
+ setDiscoveryWrapper({})
+
+ if (getFramework !== undefined) {
+ getFramework()
+ }
+ setclickdiff(0)
+ navigate("/welcome?tab=2")
+ } else if (activeStep === 1) {
+ //setclickdiff(0)
+ navigate("/welcome?tab=1")
+ }
};
+
const handleSkip = () => {
+ setclickdiff(240)
if (!isStepOptional(activeStep)) {
throw new Error("You can't skip a step that isn't optional.");
}
@@ -271,27 +379,16 @@ const WelcomeForm = (props) => {
const handleReset = () => {
setActiveStep(0);
};
- const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
- const [selectionOpen, setSelectionOpen] = React.useState(false)
- const [newSelectedApp, setNewSelectedApp] = React.useState({})
- const [defaultSearch, setDefaultSearch] = React.useState("")
useEffect(() => {
console.log("Selected app changed (effect)")
}, [newSelectedApp])
- function getSteps() {
- return [
- "Help us get to know you",
- "Discover integrations",
- "Personalize Usecases",
- ]
- }
-
+
//const buttonWidth = 145
const buttonWidth = 450
const buttonMargin = 10
- const sizing = 435
+ const sizing = 475
const buttonStyle = {
flex: 1,
width: "100%",
@@ -300,6 +397,23 @@ const WelcomeForm = (props) => {
fontSize: 18,
}
+ const slideNext = () => {
+ if (!thumbAnimation && thumbIndex < usecaseItems.length - 1) {
+ //handleSetSearch(usecaseButtons[0].name, usecaseButtons[0].usecase)
+ setThumbIndex(thumbIndex + 1);
+ } else if (!thumbAnimation && thumbIndex === usecaseItems.length - 1) {
+ setThumbIndex(0)
+ }
+ };
+
+ const slidePrev = () => {
+ if (!thumbAnimation && thumbIndex > 0) {
+ setThumbIndex(thumbIndex - 1);
+ } else if (!thumbAnimation && thumbIndex === 0) {
+ setThumbIndex(usecaseItems.length-1)
+ }
+ };
+
const newButtonStyle = {
padding: 22,
flex: 1,
@@ -307,22 +421,20 @@ const WelcomeForm = (props) => {
minWidth: buttonWidth,
maxWidth: buttonWidth,
}
-
+
const getStepContent = (step) => {
switch (step) {
case 0:
return (
-
+
+
- Find your apps, then we'll help you find relevant workflows. Can't find what you're looking for? Contact support: support@shuffler.io
+ Clicks the buttons below to find your apps, then we will help you find relevant workflows. Can't find your app? {
+ if (window.drift !== undefined) {
+ window.drift.api.startInteraction({ interactionId: 340043 })
+ } else {
+ console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
+ }
+ }}>Contact our App Developers!
{/*The app framework helps us access and authenticate the most important APIs for you. */}
@@ -420,11 +540,16 @@ const WelcomeForm = (props) => {
*/}
{/*Find your integrations! */}
+
@@ -478,94 +603,123 @@ const WelcomeForm = (props) => {
*/}
+
)
case 2:
return (
-
+ } onClick={(event) => { onNodeSelect("CASES") }} >
+ Case Management
+
+
} onClick={(event) => { onNodeSelect("SIEM") }} >
SIEM
- } onClick={(event) => { onNodeSelect("EDR & AV") }} >
+ } onClick={(event) => { onNodeSelect("ERADICATION") }} >
Endpoint
@@ -434,7 +559,7 @@ const WelcomeForm = (props) => {
Intel
- } onClick={(event) => { onNodeSelect("EMAIL") }} >
+ } onClick={(event) => { onNodeSelect("EMAIL") }} >
Email
-
-
- What usecases are you interested in? This will help us suggest relevant Workflows.
-
-
-
- } style={newButtonStyle} onClick={() => {
- setDefaultSearch("Enrichment")
-
- setSelectionOpen(false)
-
- setTimeout(function(){
- setSelectionOpen(true)
- }, 150)
-
- sendOrgUpdate("", "", userdata.active_org.id, "2. Enrich")
- }}>
- Enrichment
-
- } style={newButtonStyle} onClick={() => {
- setDefaultSearch("Phishing")
- setSelectionOpen(false)
-
- setTimeout(function(){
- setSelectionOpen(true)
- }, 150)
-
- sendOrgUpdate("", "", userdata.active_org.id, "Email management")
- }}>
- Phishing
-
- } style={newButtonStyle} onClick={() => {
- setDefaultSearch("Detection")
- setSelectionOpen(false)
-
- setTimeout(function(){
- setSelectionOpen(true)
- }, 150);
-
- sendOrgUpdate("", "", userdata.active_org.id, "3. Detect")
- }}>
- Detection
-
- } style={newButtonStyle} onClick={() => {
- setDefaultSearch("Response")
- setSelectionOpen(false)
-
- setTimeout(function(){
- setSelectionOpen(true)
- }, 150);
-
- sendOrgUpdate("", "", userdata.active_org.id, "4. Respond")
- }}>
- Response
-
-
-
+
+
)
default:
return "unknown step"
@@ -573,26 +727,7 @@ const WelcomeForm = (props) => {
}
return (
-
);
diff --git a/frontend/src/views/Dashboard.jsx b/frontend/src/views/Dashboard.jsx
index fad0d5e4..32a85328 100644
--- a/frontend/src/views/Dashboard.jsx
+++ b/frontend/src/views/Dashboard.jsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import { useInterval } from "react-powerhooks";
-import DetectionFramework from "../components/DetectionFramework.jsx";
+import AppFramework from "../components/AppFramework.jsx";
import { makeStyles, useTheme } from "@material-ui/core/styles";
// nodejs library that concatenates classes
import classNames from "classnames";
@@ -834,7 +834,7 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
borderRadius: theme.palette.borderRadius,
border: "1px solid rgba(255,255,255,0.3)",
}}>
-
+
+ These are some of our Workflow templates, used to start new Workflows. Use the right and left buttons to find new Usecases, and click the orange button to build it.
+
+ {/*
-
+
+
+ {usecaseButtons.map((usecase, index) => {
+
+ return (
+ {
+ console.log("Clicked: ", usecase.name)
+ if (defaultSearch === usecase.name) {
+ //setSelectedUsecaseCategory("")
+ } else {
+ handleSetSearch(usecase.name, usecase.usecase)
+ }
+ //addFilter(usecase.name.slice(3,usecase.name.length))
+ }}
+ variant="outlined"
+ color="primary"
+ />
+ )
+ })}
+
*/}
-
- {selectionOpen === true ?
-
+ {/*
+
+
+ {
+ slidePrev()
+ }}
+ >
+
+
+
+ {
+ slideNext()
+ }}
+ >
+
+
+
+
+
-
- {steps.map((label, index) => {
- const stepProps = {}
- const labelProps = {}
- //if (isStepOptional(index)) {
- // labelProps.optional = "optional"
- //}
-
- if (isStepSkipped(index)) {
- stepProps.completed = false;
- }
-
- return (
-
- {label}
-
- )
- })}
-
+
{/*selectionOpen ?
{
) : (
+ )}
{getStepContent(activeStep)}
-
- )}
+
+ {activeStep === 2 || activeStep === 1 ?
+
-
- {/*isStepOptional(activeStep) && (
-
- )*/}
-
-
-
+
+
+
+ :
+
+
+ {/*isStepOptional(activeStep) && (
+
+ )*/}
+
+ {activeStep === 0 ?
+
+ : null}
+
+ }
+ 
+ 
+ 
+