Loads of frontend fixes related to React & MUI
This commit is contained in:
Frikky
@@ -3,6 +3,7 @@ import React, {useEffect, useState} from 'react';
|
||||
import theme from '../theme.jsx';
|
||||
import ReactGA from 'react-ga4';
|
||||
import {Link} from 'react-router-dom';
|
||||
import { removeQuery } from '../components/ScrollToTop.jsx';
|
||||
|
||||
import {
|
||||
Search as SearchIcon,
|
||||
@@ -89,7 +90,8 @@ const AppGrid = props => {
|
||||
}
|
||||
|
||||
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||
useEffect(() => {
|
||||
var defaultSearch = ""
|
||||
//useEffect(() => {
|
||||
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
|
||||
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||
const params = Object.fromEntries(urlSearchParams.entries())
|
||||
@@ -97,13 +99,15 @@ const AppGrid = props => {
|
||||
if (foundQuery !== null && foundQuery !== undefined) {
|
||||
console.log("Got query: ", foundQuery)
|
||||
refine(foundQuery)
|
||||
defaultSearch = foundQuery
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
//}, [])
|
||||
|
||||
return (
|
||||
<form noValidate action="" role="search">
|
||||
<TextField
|
||||
defaultValue={defaultSearch}
|
||||
fullWidth
|
||||
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
|
||||
InputProps={{
|
||||
@@ -121,10 +125,12 @@ const AppGrid = props => {
|
||||
autoComplete='off'
|
||||
type="search"
|
||||
color="primary"
|
||||
defaultValue={currentRefinement}
|
||||
placeholder="Find Apps..."
|
||||
id="shuffle_search_field"
|
||||
onChange={(event) => {
|
||||
// Remove "q" from URL
|
||||
removeQuery("q")
|
||||
|
||||
refine(event.currentTarget.value)
|
||||
}}
|
||||
limit={5}
|
||||
@@ -151,8 +157,6 @@ const AppGrid = props => {
|
||||
// setInnerHits(hits)
|
||||
//}
|
||||
|
||||
console.log("In appgrid")
|
||||
|
||||
return (
|
||||
<Grid container spacing={2}>
|
||||
{hits.map((data, index) => {
|
||||
|
||||
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
|
||||
import ReactGA from 'react-ga4';
|
||||
import {Link} from 'react-router-dom';
|
||||
import theme from '../theme.jsx';
|
||||
import { removeQuery } from '../components/ScrollToTop.jsx';
|
||||
|
||||
import {
|
||||
SkipNext as SkipNextIcon,
|
||||
@@ -97,20 +98,21 @@ const CreatorGrid = props => {
|
||||
|
||||
// value={currentRefinement}
|
||||
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||
useEffect(() => {
|
||||
var defaultSearch = ""
|
||||
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
|
||||
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||
const params = Object.fromEntries(urlSearchParams.entries())
|
||||
const foundQuery = params["q"]
|
||||
if (foundQuery !== null && foundQuery !== undefined) {
|
||||
refine(foundQuery)
|
||||
defaultSearch = foundQuery
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<form noValidate action="" role="search">
|
||||
<TextField
|
||||
defaultValue={defaultSearch}
|
||||
fullWidth
|
||||
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
|
||||
InputProps={{
|
||||
@@ -128,10 +130,10 @@ const CreatorGrid = props => {
|
||||
autoComplete='off'
|
||||
type="search"
|
||||
color="primary"
|
||||
value={currentRefinement}
|
||||
placeholder="Find Creators..."
|
||||
id="shuffle_search_field"
|
||||
onChange={(event) => {
|
||||
removeQuery("q")
|
||||
refine(event.currentTarget.value)
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -3,6 +3,7 @@ import React, {useEffect, useState} from 'react';
|
||||
import theme from '../theme.jsx';
|
||||
import ReactGA from 'react-ga4';
|
||||
import {Link} from 'react-router-dom';
|
||||
import { removeQuery } from '../components/ScrollToTop.jsx';
|
||||
|
||||
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, Close as CloseIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material';
|
||||
import aa from 'search-insights'
|
||||
@@ -84,7 +85,7 @@ const DocsGrid = props => {
|
||||
}
|
||||
|
||||
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||
useEffect(() => {
|
||||
var defaultSearch = ""
|
||||
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
|
||||
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||
const params = Object.fromEntries(urlSearchParams.entries())
|
||||
@@ -92,13 +93,14 @@ const DocsGrid = props => {
|
||||
if (foundQuery !== null && foundQuery !== undefined) {
|
||||
console.log("Got query: ", foundQuery)
|
||||
refine(foundQuery)
|
||||
defaultSearch = foundQuery
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<form noValidate action="" role="search">
|
||||
<TextField
|
||||
defaultValue={defaultSearch}
|
||||
fullWidth
|
||||
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
|
||||
InputProps={{
|
||||
@@ -116,10 +118,10 @@ const DocsGrid = props => {
|
||||
autoComplete='off'
|
||||
type="search"
|
||||
color="primary"
|
||||
defaultValue={currentRefinement}
|
||||
placeholder="Search our Documentation..."
|
||||
id="shuffle_search_field"
|
||||
onChange={(event) => {
|
||||
removeQuery("q")
|
||||
refine(event.currentTarget.value)
|
||||
}}
|
||||
limit={5}
|
||||
|
||||
@@ -521,7 +521,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
|
||||
}
|
||||
|
||||
// Handle top bar or something
|
||||
const defaultTop = 7
|
||||
const defaultTop = 0
|
||||
const loginTextBrowser = !isLoggedIn ?
|
||||
<div style={{display: "flex", minWidth: 1250, maxWidth: 1250, margin: "auto", textAlign: "center",}}>
|
||||
<div style={{display: "flex", flex: 1, }}>
|
||||
|
||||
@@ -218,7 +218,7 @@ const AuthenticationOauth2 = (props) => {
|
||||
"31cb4c84-658e-43d5-ae84-22c9142e967a",
|
||||
"",
|
||||
"https://graph.microsoft.com",
|
||||
["ChannelMessage.Edit", "ChannelMessage.Read.All", "ChannelMessage.Send", "Chat.Create", "Chat.ReadWrite", "Chat.Read", "offline_access"],
|
||||
["ChannelMessage.Edit", "ChannelMessage.Read.All", "ChannelMessage.Send", "Chat.Create", "Chat.ReadWrite", "Chat.Read", "offline_access", "Team.ReadBasic.All"],
|
||||
admin_consent,
|
||||
)
|
||||
} else if (selectedApp.name.toLowerCase().includes("todoist")) {
|
||||
@@ -607,7 +607,7 @@ const AuthenticationOauth2 = (props) => {
|
||||
<div>
|
||||
<DialogTitle>
|
||||
<div style={{ color: "white" }}>
|
||||
Authentication for {selectedApp.name}
|
||||
Authenticate {selectedApp.name.replaceAll("_", " ")}
|
||||
</div>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
@@ -674,11 +674,6 @@ const AuthenticationOauth2 = (props) => {
|
||||
style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
|
||||
InputProps={{
|
||||
style:{
|
||||
color: "white",
|
||||
marginLeft: "5px",
|
||||
maxWidth: "95%",
|
||||
height: 50,
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
@@ -763,11 +758,6 @@ const AuthenticationOauth2 = (props) => {
|
||||
}}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
marginLeft: "5px",
|
||||
maxWidth: "95%",
|
||||
height: 50,
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
@@ -804,11 +794,6 @@ const AuthenticationOauth2 = (props) => {
|
||||
}}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
marginLeft: "5px",
|
||||
maxWidth: "95%",
|
||||
fontSize: "1em",
|
||||
height: "50px",
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
@@ -827,11 +812,6 @@ const AuthenticationOauth2 = (props) => {
|
||||
}}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
marginLeft: "5px",
|
||||
maxWidth: "95%",
|
||||
fontSize: "1em",
|
||||
height: "50px",
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
@@ -848,6 +828,7 @@ const AuthenticationOauth2 = (props) => {
|
||||
Scopes
|
||||
<Select
|
||||
multiple
|
||||
underline={false}
|
||||
value={selectedScopes}
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
|
||||
@@ -376,24 +376,15 @@ const ParsedAction = (props) => {
|
||||
const [menuPosition, setMenuPosition] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
selectedActionParameters !== null &&
|
||||
selectedActionParameters.length === 0
|
||||
) {
|
||||
if (
|
||||
selectedAction.parameters !== null &&
|
||||
selectedAction.parameters.length > 0
|
||||
if (selectedActionParameters !== undefined && selectedActionParameters !== null && selectedActionParameters.length === 0
|
||||
) {
|
||||
if (selectedAction.parameters !== undefined && selectedAction.parameters !== null && selectedAction.parameters.length > 0) {
|
||||
setSelectedActionParameters(selectedAction.parameters);
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
(selectedVariableParameter === null ||
|
||||
selectedVariableParameter === undefined) &&
|
||||
workflow.workflow_variables !== null &&
|
||||
workflow.workflow_variables.length > 0
|
||||
) {
|
||||
if ((selectedVariableParameter === null || selectedVariableParameter === undefined) && workflow.workflow_variables !== null && workflow.workflow_variables.length > 0) {
|
||||
|
||||
// FIXME - this is the bad thing
|
||||
setSelectedVariableParameter(workflow.workflow_variables[0].name);
|
||||
}
|
||||
@@ -1403,7 +1394,7 @@ const ParsedAction = (props) => {
|
||||
>
|
||||
<Tooltip
|
||||
color="secondary"
|
||||
title={"Automatically change body"}
|
||||
title={"Show all body fields"}
|
||||
placement="top"
|
||||
>
|
||||
<FormControlLabel
|
||||
@@ -1485,6 +1476,17 @@ const ParsedAction = (props) => {
|
||||
}
|
||||
|
||||
changed = true;
|
||||
var isRequired = false
|
||||
// Check if original field name is in the selectedAction.required_body_fields
|
||||
if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) {
|
||||
for (let innerkey in selectedAction.required_body_fields) {
|
||||
if (selectedAction.required_body_fields[innerkey] === tmpitem) {
|
||||
isRequired = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
selectedActionParameters.push({
|
||||
action_field: "",
|
||||
configuration: false,
|
||||
@@ -1494,7 +1496,7 @@ const ParsedAction = (props) => {
|
||||
multiline: true,
|
||||
name: tmpitem,
|
||||
options: null,
|
||||
required: false,
|
||||
required: isRequired,
|
||||
schema: { type: "string" },
|
||||
skip_multicheck: false,
|
||||
tags: null,
|
||||
@@ -2669,8 +2671,6 @@ const ParsedAction = (props) => {
|
||||
const { data, newActionname, newActiondescription, useIcon, extraDescription, } = actionprops;
|
||||
const [hover, setHover] = React.useState(false);
|
||||
|
||||
console.log("Extra desc: ", extraDescription)
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
color="secondary"
|
||||
@@ -2893,7 +2893,7 @@ const ParsedAction = (props) => {
|
||||
>
|
||||
<Tooltip
|
||||
color="primary"
|
||||
title={"Find related workflows"}
|
||||
title={"Find related tworkflows"}
|
||||
placement="top"
|
||||
>
|
||||
<a href={`https://shuffler.io/search?tab=workflows&q=${selectedAction.app_name}`} target="_blank">
|
||||
@@ -2901,7 +2901,27 @@ const ParsedAction = (props) => {
|
||||
</a>
|
||||
</Tooltip>
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
style={{
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
height: 30,
|
||||
marginLeft: 15,
|
||||
paddingRight: 0,
|
||||
}}
|
||||
onClick={() => {
|
||||
// aiSubmit(aiMsg, undefined, undefined, newSelectedAction)
|
||||
aiSubmit("Fill based on previous values", undefined, undefined, selectedAction)
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
color="primary"
|
||||
title={"Autocompletes fields. Uses NAME of the action and previous values' results."}
|
||||
placement="top"
|
||||
>
|
||||
<AutoFixHighIcon style={{ color: "rgba(255,255,255,0.7)", height: 24, }} />
|
||||
</Tooltip>
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
@@ -2992,14 +3012,21 @@ const ParsedAction = (props) => {
|
||||
defaultValue={selectedAction.label}
|
||||
onChange={selectedNameChange}
|
||||
onBlur={(e) => {
|
||||
const name = e.target.value;
|
||||
// Copy the name value
|
||||
const name = e.target.value
|
||||
const parsedBaseLabel = "$"+baselabel.toLowerCase().replaceAll(" ", "_")
|
||||
const newname = "$"+name.toLowerCase().replaceAll(" ", "_")
|
||||
|
||||
console.log("NAME: ", name)
|
||||
|
||||
// Check if it's the same as the current name in use
|
||||
//if (name === selectedAction.label) {
|
||||
// console.log("Returning from name thing")
|
||||
// return
|
||||
//}
|
||||
|
||||
// Change in actions, triggers & conditions
|
||||
// Highlight the changes somehow with a glow?
|
||||
//
|
||||
// Should make it a function lol
|
||||
if (workflow.branches !== undefined && workflow.branches !== null) {
|
||||
for (let [key,keyval] in Object.entries(workflow.branches)) {
|
||||
if (workflow.branches[key].conditions !== undefined && workflow.branches[key].conditions !== null) {
|
||||
@@ -3117,7 +3144,13 @@ const ParsedAction = (props) => {
|
||||
continue
|
||||
}
|
||||
|
||||
for (let [subkey, subkeyval] in Object.entries(workflow.actions[key].parameters)) {
|
||||
const params = workflow.actions[key].parameters
|
||||
console.log(params)
|
||||
if (params === null || params === undefined) {
|
||||
continue
|
||||
}
|
||||
|
||||
for (let [subkey, subkeyval] in Object.entries(params)) {
|
||||
const param = workflow.actions[key].parameters[subkey];
|
||||
if (!param.value.includes("$")) {
|
||||
continue
|
||||
@@ -3240,7 +3273,7 @@ const ParsedAction = (props) => {
|
||||
}}
|
||||
>
|
||||
<AddIcon style={{ marginRight: 10 }} /> Authenticate{" "}
|
||||
{selectedApp.name}
|
||||
{selectedApp.name.replaceAll("_", " ")}
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
@@ -3573,8 +3606,6 @@ const ParsedAction = (props) => {
|
||||
data.label = "No name"
|
||||
}
|
||||
|
||||
console.log("Name: ", newActionname)
|
||||
|
||||
newActionname = (newActionname.charAt(0).toUpperCase() + newActionname.substring(1)).replaceAll("_", " ");
|
||||
|
||||
var method = ""
|
||||
|
||||
@@ -43,6 +43,7 @@ const SearchField = props => {
|
||||
const node = useRef()
|
||||
const [searchOpen, setSearchOpen] = useState(false)
|
||||
const [oldPath, setOldPath] = useState("")
|
||||
const [value, setValue] = useState("");
|
||||
|
||||
if (serverside === true) {
|
||||
return null
|
||||
@@ -67,7 +68,13 @@ const SearchField = props => {
|
||||
//}, searchOpen)
|
||||
|
||||
const SearchBox = ({currentRefinement, refine, isSearchStalled, } ) => {
|
||||
|
||||
const keyPressHandler = (e) => {
|
||||
// e.preventDefault();
|
||||
if (e.which === 13) {
|
||||
// alert("You pressed enter!");
|
||||
navigate("/search?q=" + currentRefinement, { state: value, replace: true });
|
||||
}
|
||||
};
|
||||
/*
|
||||
endAdornment: (
|
||||
<InputAdornment position="end" style={{textAlign: "right", zIndex: 5001, cursor: "pointer", width: 100, }} onMouseOver={(event) => {
|
||||
@@ -108,6 +115,7 @@ const SearchField = props => {
|
||||
color="primary"
|
||||
placeholder="Find Public Apps, Workflows, Documentation..."
|
||||
value={currentRefinement}
|
||||
onKeyDown={keyPressHandler}
|
||||
id="shuffle_search_field"
|
||||
onClick={(event) => {
|
||||
if (!searchOpen) {
|
||||
|
||||
@@ -205,6 +205,9 @@ const CodeEditor = (props) => {
|
||||
|
||||
setAvailableVariables(allVariables)
|
||||
setMainVariables(tmpVariables)
|
||||
|
||||
console.log("Checking local codedata: ", localcodedata)
|
||||
expectedOutput(localcodedata)
|
||||
}, [])
|
||||
|
||||
const aiSubmit = (value, inputAction) => {
|
||||
|
||||
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
|
||||
|
||||
import {Link} from 'react-router-dom';
|
||||
import theme from '../theme.jsx';
|
||||
import { removeQuery } from '../components/ScrollToTop.jsx';
|
||||
|
||||
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
|
||||
|
||||
@@ -171,6 +172,7 @@ const AppGrid = props => {
|
||||
|
||||
// value={currentRefinement}
|
||||
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||
var defaultSearch = ""
|
||||
useEffect(() => {
|
||||
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
|
||||
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||
@@ -179,6 +181,7 @@ const AppGrid = props => {
|
||||
if (foundQuery !== null && foundQuery !== undefined) {
|
||||
console.log("Got query: ", foundQuery)
|
||||
refine(foundQuery)
|
||||
defaultSearch = foundQuery
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
@@ -187,6 +190,7 @@ const AppGrid = props => {
|
||||
console.log("In refinement: ", inputsearch)
|
||||
//setLocalMessage(inputsearch)
|
||||
refine(inputsearch)
|
||||
defaultSearch = inputsearch
|
||||
} else if (onlyResults === true) {
|
||||
// Don't return anything unless refinement works
|
||||
return null
|
||||
@@ -196,6 +200,7 @@ const AppGrid = props => {
|
||||
<form noValidate action="" role="search">
|
||||
{onlyResults !== true ?
|
||||
<TextField
|
||||
defaultValue={defaultSearch}
|
||||
fullWidth
|
||||
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
|
||||
InputProps={{
|
||||
@@ -214,6 +219,7 @@ const AppGrid = props => {
|
||||
placeholder="Find Workflows..."
|
||||
id="shuffle_search_field"
|
||||
onChange={(event) => {
|
||||
removeQuery("q")
|
||||
refine(event.currentTarget.value)
|
||||
}}
|
||||
limit={5}
|
||||
|
||||
@@ -125,8 +125,8 @@ const data = [
|
||||
"border-radius": "5px",
|
||||
"border-color": "orange",
|
||||
"background-color": "#213243",
|
||||
"background-width": "100%",
|
||||
"background-height": "100%",
|
||||
"background-width": "100px",
|
||||
"background-height": "100px",
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -163,15 +163,16 @@ const data = [
|
||||
{
|
||||
selector: "node[?isSuggestion]",
|
||||
css: {
|
||||
shape: "ellipse",
|
||||
width: "50px",
|
||||
height: "50px",
|
||||
shape: "roundrectangle",
|
||||
width: "30px",
|
||||
height: "30px",
|
||||
"z-index": "5002",
|
||||
"font-size": "0px",
|
||||
filter: "grayscale(100%)",
|
||||
border: "1px solid rgba(255,255,255,0.9)",
|
||||
"background-image": "data(large_image)",
|
||||
"background-color": "data(iconBackground)",
|
||||
label: "data(label)",
|
||||
"background-fit": "cover",
|
||||
"font-size": "20px",
|
||||
label: "data(label_replaced)",
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -337,9 +338,9 @@ const data = [
|
||||
width: "1px",
|
||||
"line-style": "dashed",
|
||||
"line-fill": "linear-gradient",
|
||||
"target-arrow-color": "#f34079",
|
||||
"target-arrow-color": "#555555",
|
||||
"line-gradient-stop-positions": ["0.0", "100"],
|
||||
"line-gradient-stop-colors": ["#f86a3e", "#f34079"],
|
||||
"line-gradient-stop-colors": ["#555555", "#555555"],
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@@ -70,6 +70,11 @@ const theme = createTheme(adaptV4Theme({
|
||||
},
|
||||
},
|
||||
overrides: {
|
||||
MuiPaper: {
|
||||
root: {
|
||||
backgroundColor: "#1c1c1d",
|
||||
},
|
||||
},
|
||||
MuiMenu: {
|
||||
list: {
|
||||
backgroundColor: "#27292d",
|
||||
|
||||
@@ -3381,11 +3381,10 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
|
||||
<ListItemText
|
||||
style={{ maxWidth: 200, minWidth: 200 }}
|
||||
primary={
|
||||
schedule.environment === "cloud" ? (
|
||||
schedule.environment === "cloud" || schedule.environment === "" || schedule.frequency.length > 0 ?
|
||||
schedule.frequency
|
||||
) : (
|
||||
:
|
||||
<span>{schedule.seconds} seconds</span>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<ListItemText
|
||||
@@ -3406,7 +3405,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
|
||||
}
|
||||
/>
|
||||
<ListItemText
|
||||
primary={schedule.argument}
|
||||
primary={schedule.argument.replaceAll('\\\"', '\"')}
|
||||
style={{
|
||||
minWidth: 300,
|
||||
maxWidth: 300,
|
||||
|
||||
+1077
-167
File diff suppressed because it is too large
Load Diff
@@ -196,8 +196,9 @@ const parseCurl = (s) => {
|
||||
case "data":
|
||||
if (out.method === "GET" || out.method === "HEAD")
|
||||
out.method = "POST";
|
||||
out.header["Content-Type"] =
|
||||
out.header["Content-Type"] || "application/x-www-form-urlencoded";
|
||||
|
||||
out.header["Content-Type"] = out.header["Content-Type"] || "application/x-www-form-urlencoded";
|
||||
|
||||
out.body = out.body ? out.body + "&" + arg : arg;
|
||||
state = "";
|
||||
break;
|
||||
@@ -227,22 +228,22 @@ export const appCategories = [
|
||||
"name": "Communication",
|
||||
"color": "#FFC107",
|
||||
"icon": "communication",
|
||||
"action_labels": ["List Messages", "Send Message", "Get Message", "Search messages"],
|
||||
"action_labels": ["List Messages", "Send Message", "Get Message", "Search messages", "List Attachments", "Get Attachment", "Get Contact"],
|
||||
}, {
|
||||
"name": "SIEM",
|
||||
"color": "#FFC107",
|
||||
"icon": "siem",
|
||||
"action_labels": ["Search", "List Alerts", "Close Alert", "Create detection", "Add to lookup list",],
|
||||
"action_labels": ["Search", "List Alerts", "Close Alert", "Get Alert", "Create detection", "Add to lookup list",],
|
||||
}, {
|
||||
"name": "Eradication",
|
||||
"color": "#FFC107",
|
||||
"icon": "eradication",
|
||||
"action_labels": ["List Alerts", "Close Alert", "Create detection", "Block hash", "Search Hosts", "Isolate host", "Unisolate host"],
|
||||
"action_labels": ["List Alerts", "Close Alert", "Get Alert", "Create detection", "Block hash", "Search Hosts", "Isolate host", "Unisolate host"],
|
||||
}, {
|
||||
"name": "Cases",
|
||||
"color": "#FFC107",
|
||||
"icon": "cases",
|
||||
"action_labels": ["List tickets", "Get ticket", "Create ticket", "Close ticket", "Add comment", "Update ticket",],
|
||||
"action_labels": ["List tickets", "Get ticket", "Create ticket", "Close ticket", "Add comment", "Update ticket", "Search tickets"],
|
||||
}, {
|
||||
"name": "Assets",
|
||||
"color": "#FFC107",
|
||||
@@ -574,7 +575,7 @@ const AppCreator = (defaultprops) => {
|
||||
return
|
||||
}
|
||||
|
||||
console.log("Decoded: ", parsedDecoded)
|
||||
//console.log("Decoded: ", parsedDecoded)
|
||||
const parsedapp =
|
||||
data.openapi === undefined || data.openapi === null
|
||||
? data
|
||||
@@ -788,7 +789,6 @@ const AppCreator = (defaultprops) => {
|
||||
const regex = /_shuffle_replace_\d/i;
|
||||
//console.log("NEW: ",
|
||||
newaction.url = newaction.url.replaceAll(new RegExp(regex, 'g'), "")
|
||||
console.log("Replaced: ", newaction.url)
|
||||
}
|
||||
|
||||
// Finding category
|
||||
@@ -1110,19 +1110,11 @@ const AppCreator = (defaultprops) => {
|
||||
undefined
|
||||
) {
|
||||
if (
|
||||
methodvalue.responses.default.content["text/plain"][
|
||||
"schema"
|
||||
] !== undefined
|
||||
) {
|
||||
if (
|
||||
methodvalue.responses.default.content["text/plain"][
|
||||
"schema"
|
||||
]["example"] !== undefined
|
||||
) {
|
||||
newaction.example_response =
|
||||
methodvalue.responses.default.content["text/plain"][
|
||||
"schema"
|
||||
]["example"]
|
||||
methodvalue.responses.default.content["text/plain"]["schema"] !== undefined) {
|
||||
if (methodvalue.responses.default.content["text/plain"]["schema"]["example"] !== undefined) {
|
||||
newaction.example_response = methodvalue.responses.default.content["text/plain"]["schema"]["example"]
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -1560,12 +1552,12 @@ const AppCreator = (defaultprops) => {
|
||||
|
||||
if (securitySchemes !== undefined) {
|
||||
|
||||
console.log("SECURITY: ", securitySchemes)
|
||||
//console.log("SECURITY: ", securitySchemes)
|
||||
var newauth = [];
|
||||
try {
|
||||
var optionset = false
|
||||
for (const [key, value] of Object.entries(securitySchemes)) {
|
||||
console.log("AUTH: ", key, value);
|
||||
//console.log("AUTH: ", key, value);
|
||||
|
||||
if (key === "jwt") {
|
||||
setAuthenticationOption("JWT");
|
||||
@@ -1776,12 +1768,12 @@ const AppCreator = (defaultprops) => {
|
||||
if (!found) {
|
||||
newActions2.push(action)
|
||||
} else {
|
||||
console.log("NOT skipping duplicate action: ", action.url, ". Should merge contents")
|
||||
//console.log("NOT skipping duplicate action: ", action.url, ". Should merge contents")
|
||||
newActions2.push(action)
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Actions: ", newActions.length, " Actions2: ", newActions2.length)
|
||||
//console.log("Actions: ", newActions.length, " Actions2: ", newActions2.length)
|
||||
newActions = newActions2
|
||||
if (newActions.length > increaseAmount - 1) {
|
||||
setActionAmount(increaseAmount);
|
||||
@@ -3880,7 +3872,7 @@ const AppCreator = (defaultprops) => {
|
||||
|
||||
const datasplit = parsedurlsplit[1].split("&")
|
||||
for (var key in datasplit) {
|
||||
console.log("Data: ", datasplit[key])
|
||||
//console.log("Data: ", datasplit[key])
|
||||
var actualkey = datasplit[key]
|
||||
var example = ""
|
||||
if (datasplit[key].includes("=")) {
|
||||
@@ -4143,7 +4135,7 @@ const AppCreator = (defaultprops) => {
|
||||
overflowX: "hidden",
|
||||
}}
|
||||
onClick={() => {
|
||||
console.log("Data: ", data)
|
||||
//console.log("Data: ", data)
|
||||
if (hasFile) {
|
||||
//setActionField("headers", "")
|
||||
//console.log("It has a file: ", data["file_field"])
|
||||
@@ -4323,7 +4315,7 @@ const AppCreator = (defaultprops) => {
|
||||
const LoopActions = (props) => {
|
||||
const { filteredActions } = props;
|
||||
|
||||
console.log("Actions: ", filteredActions)
|
||||
//console.log("Actions: ", filteredActions)
|
||||
if (filteredActions === null || filteredActions === undefined || filteredActions.length === 0) {
|
||||
return null
|
||||
}
|
||||
@@ -4745,7 +4737,7 @@ const AppCreator = (defaultprops) => {
|
||||
}
|
||||
|
||||
const handleSubmitCheck = () => {
|
||||
console.log("NEW AUTH: ", authenticationOption);
|
||||
//console.log("NEW AUTH: ", authenticationOption);
|
||||
if (authenticationOption.label.length === 0) {
|
||||
authenticationOption.label = `Auth for ${selectedApp.name}`;
|
||||
//toast("Label can't be empty")
|
||||
|
||||
+32
-14
@@ -391,19 +391,28 @@ const Docs = (defaultprops) => {
|
||||
}
|
||||
|
||||
function CodeHandler(props) {
|
||||
console.log("PROPS: ", props)
|
||||
|
||||
const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
|
||||
|
||||
return (
|
||||
<pre
|
||||
<div
|
||||
style={{
|
||||
padding: 15,
|
||||
minWidth: "50%",
|
||||
maxWidth: "100%",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
overflowX: "auto",
|
||||
overflowY: "hidden",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<code>{props.value}</code>
|
||||
</pre>
|
||||
<code
|
||||
style={{
|
||||
// Wrap if larger than X
|
||||
whiteSpace: "pre-wrap",
|
||||
overflow: "auto",
|
||||
}}
|
||||
>{propvalue}</code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -436,7 +445,7 @@ const Docs = (defaultprops) => {
|
||||
href={selectedMeta.link}
|
||||
style={{ textDecoration: "none", color: "#f85a3e" }}
|
||||
>
|
||||
<Button style={{}} variant="outlined" color="secondary">
|
||||
<Button style={{color: "white", }} variant="outlined" color="secondary">
|
||||
<EditIcon /> Edit
|
||||
</Button>
|
||||
</a>
|
||||
@@ -638,7 +647,7 @@ const Docs = (defaultprops) => {
|
||||
|
||||
<Typography variant="h6" style={headerStyle}>Why Shuffle?</Typography>
|
||||
<Typography variant="body1">
|
||||
<b>Security first.</b> We incentivize trying before buying, and give you the full set of tools you need to automate your operations. What's more is we also help you <a href="https://shuffler.io/pricing?tag=docs" target="_blank" style={hrefStyle2}>find usecases</a> that fit your your unique needs. Accessibility is key, and we intend to help every SOC globally use and share their usecases.
|
||||
<b>Security first.</b> We incentivize trying before buying, and give you the full set of tools you need to automate your operations. What's more is we also help you <a href="https://shuffler.io/pricing?tag=docs" target="_blank" style={hrefStyle2}>find usecases</a> that fit your unique needs. Accessibility is key, and we intend to help every SOC globally use and share their usecases.
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h6" style={headerStyle}>Get help</Typography>
|
||||
@@ -878,16 +887,25 @@ const Docs = (defaultprops) => {
|
||||
:
|
||||
<div id="markdown_wrapper_outer" style={markdownStyle}>
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
img: Img,
|
||||
code: CodeHandler,
|
||||
h1: Heading,
|
||||
h2: Heading,
|
||||
h3: Heading,
|
||||
h4: Heading,
|
||||
h5: Heading,
|
||||
h6: Heading,
|
||||
a: OuterLink,
|
||||
}}
|
||||
id="markdown_wrapper"
|
||||
escapeHtml={false}
|
||||
source={data}
|
||||
renderers={{
|
||||
link: OuterLink,
|
||||
image: Img,
|
||||
code: CodeHandler,
|
||||
heading: Heading,
|
||||
style={{
|
||||
maxWidth: "100%", minWidth: "100%",
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{data}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
}
|
||||
<Divider
|
||||
|
||||
@@ -126,12 +126,14 @@ const RunWorkflow = (defaultprops) => {
|
||||
}
|
||||
|
||||
const executionMargin = 20
|
||||
const defaultReturn =
|
||||
const defaultReturn = null
|
||||
/*
|
||||
<div style={{marginTop: executionMargin, }}>
|
||||
<Typography variant="h6" style={{color: theme.palette.primaryColor}}>
|
||||
No results yet
|
||||
</Typography>
|
||||
</div>
|
||||
*/
|
||||
|
||||
if (executionData.results === undefined || executionData.results === null) {
|
||||
return defaultReturn
|
||||
@@ -271,7 +273,7 @@ const RunWorkflow = (defaultprops) => {
|
||||
width: 30,
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate(`?execution_highlight=${parsed_url}`)
|
||||
//navigate(`?execution_highlight=${parsed_url}`)
|
||||
}}
|
||||
>
|
||||
<PreviewIcon style={{ color: "rgba(255,255,255,0.5)" }} />
|
||||
@@ -314,7 +316,13 @@ const RunWorkflow = (defaultprops) => {
|
||||
)
|
||||
}
|
||||
|
||||
const onSubmit = (execution_id, authorization, answer) => {
|
||||
const onSubmit = (event, execution_id, authorization, answer) => {
|
||||
if (event !== null) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
console.log("In submit!")
|
||||
|
||||
stop()
|
||||
setMessage("")
|
||||
setExecutionLoading(true)
|
||||
@@ -327,13 +335,13 @@ const RunWorkflow = (defaultprops) => {
|
||||
|
||||
var url = `${globalUrl}/api/v1/workflows/${props.match.params.key}/execute`
|
||||
var fetchBody = {
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8',
|
||||
},
|
||||
mode: 'cors',
|
||||
credentials: 'include',
|
||||
crossDomain: true,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8',
|
||||
},
|
||||
}
|
||||
|
||||
if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
|
||||
@@ -345,8 +353,10 @@ const RunWorkflow = (defaultprops) => {
|
||||
fetchBody.body = JSON.stringify(data)
|
||||
}
|
||||
|
||||
console.log("Pre request: ", url, fetchBody)
|
||||
fetch(url, fetchBody)
|
||||
.then((response) => {
|
||||
console.log("Got answer 1")
|
||||
if (response.status !== 200 && response.status !== 201) {
|
||||
|
||||
if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
|
||||
@@ -362,9 +372,11 @@ const RunWorkflow = (defaultprops) => {
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Got answer 2")
|
||||
return response.json();
|
||||
})
|
||||
.then(responseJson => {
|
||||
console.log("Got answer 3")
|
||||
setExecutionLoading(false)
|
||||
if (responseJson["success"] === false) {
|
||||
console.log("Failed sending execution request")
|
||||
@@ -379,6 +391,7 @@ const RunWorkflow = (defaultprops) => {
|
||||
start();
|
||||
}
|
||||
}
|
||||
console.log("Got answer 4")
|
||||
})
|
||||
.catch(error => {
|
||||
//setExecutionInfo("Error in workflow startup: " + error)
|
||||
@@ -441,7 +454,7 @@ const RunWorkflow = (defaultprops) => {
|
||||
return
|
||||
}
|
||||
|
||||
console.log("Got response: ", responseJson)
|
||||
//console.log("Got response: ", responseJson)
|
||||
|
||||
ReactDOM.unstable_batchedUpdates(() => {
|
||||
if (JSON.stringify(responseJson) !== JSON.stringify(executionData)) {
|
||||
@@ -449,7 +462,7 @@ const RunWorkflow = (defaultprops) => {
|
||||
// Doesn't work because this is some async garbage
|
||||
if (executionData.execution_id === undefined || (responseJson.execution_id === executionData.execution_id && responseJson.results !== undefined && responseJson.results !== null)) {
|
||||
if (executionData.status !== responseJson.status || executionData.result !== responseJson.result || (executionData.results !== undefined && responseJson.results !== null && executionData.results.length !== responseJson.results.length)) {
|
||||
console.log("Updating data!")
|
||||
//console.log("Updating data!")
|
||||
setExecutionData(responseJson)
|
||||
|
||||
for (var key in responseJson.results) {
|
||||
@@ -530,6 +543,11 @@ const RunWorkflow = (defaultprops) => {
|
||||
};
|
||||
|
||||
const fetchUpdates = (execution_id, authorization, getorg) => {
|
||||
if (execution_id === undefined || execution_id === null || execution_id === "") {
|
||||
stop()
|
||||
return
|
||||
}
|
||||
|
||||
const innerRequest = {
|
||||
"execution_id": execution_id,
|
||||
"authorization": authorization
|
||||
@@ -594,7 +612,7 @@ const RunWorkflow = (defaultprops) => {
|
||||
const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)"
|
||||
const buttonStyle = {borderRadius: 25, height: 50, fontSize: 18, backgroundImage: handleValidateForm(executionArgument) || executionLoading ? buttonBackground : "grey", color: "white"}
|
||||
|
||||
console.log("execdata: ", executionData)
|
||||
//console.log("execdata: ", executionData)
|
||||
const disabledButtons = message.length > 0 || executionData.status === "FINISHED" || executionData.status === "ABORTED"
|
||||
|
||||
const organization = selectedOrganization !== undefined && selectedOrganization !== null ? selectedOrganization.name : "Unknown"
|
||||
@@ -603,7 +621,7 @@ const RunWorkflow = (defaultprops) => {
|
||||
|
||||
const image = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.image !== undefined && selectedOrganization.image !== null && selectedOrganization.image !== "" ? selectedOrganization.image : theme.palette.defaultImage
|
||||
|
||||
console.log("IMG: ", image, "ORG: ", selectedOrganization)
|
||||
//console.log("IMG: ", image, "ORG: ", selectedOrganization)
|
||||
|
||||
if (!disabledButtons && answer !== undefined && answer !== null && organization !== "Unknown" && buttonClicked.length === 0) {
|
||||
console.log("Finding button!")
|
||||
@@ -627,7 +645,7 @@ const RunWorkflow = (defaultprops) => {
|
||||
const basedata =
|
||||
<div style={bodyDivStyle}>
|
||||
<Paper style={boxStyle}>
|
||||
<form onSubmit={() => {onSubmit()}} style={{margin: "15px 15px 15px 15px"}}>
|
||||
<form onSubmit={(e) => {onSubmit(e)}} style={{margin: "15px 15px 15px 15px"}}>
|
||||
|
||||
<img
|
||||
alt={workflow.name}
|
||||
@@ -676,7 +694,7 @@ const RunWorkflow = (defaultprops) => {
|
||||
|
||||
{answer !== undefined && answer !== null ? null :
|
||||
<span>
|
||||
Execution Argument
|
||||
Runtime Argument
|
||||
<div style={{marginBottom: 5}}>
|
||||
<TextField
|
||||
color="primary"
|
||||
@@ -705,9 +723,12 @@ const RunWorkflow = (defaultprops) => {
|
||||
{executionRunning ?
|
||||
<span style={{width: 50, height: 50, margin: "auto", alignItems: "center", justifyContent: "center", textAlign: "center", }}>
|
||||
<CircularProgress style={{marginTop: 20, marginBottom: 20, marginLeft: 185, }}/>
|
||||
|
||||
{executionData.status !== undefined && executionData.status !== null && executionData.status !== "" ?
|
||||
<Typography variant="body2" style={{margin: "auto", marginTop: 20, marginBottom: 20, textAlign: "center", alignItem: "center", }} color="textSecondary">
|
||||
Status: {executionData.status}
|
||||
</Typography>
|
||||
: null}
|
||||
</span>
|
||||
|
||||
:
|
||||
@@ -723,7 +744,7 @@ const RunWorkflow = (defaultprops) => {
|
||||
}
|
||||
<div fullWidth style={{width: "100%", marginTop: 10, marginBottom: 10, display: "flex", }}>
|
||||
<Button fullWidth id="continue_execution" variant="contained" disabled={disabledButtons} color="primary" style={{border: answer === "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1,}} onClick={() => {
|
||||
onSubmit(execution_id, authorization, true)
|
||||
onSubmit(null, execution_id, authorization, true)
|
||||
|
||||
setButtonClicked("FINISHED")
|
||||
setExecutionData({
|
||||
@@ -734,7 +755,7 @@ const RunWorkflow = (defaultprops) => {
|
||||
or
|
||||
</Typography>
|
||||
<Button fullWidth id="abort_execution" variant="contained" color="primary" disabled={disabledButtons} style={{border: answer !== "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1, }} onClick={() => {
|
||||
onSubmit(execution_id, authorization, false)
|
||||
onSubmit(null, execution_id, authorization, false)
|
||||
|
||||
setButtonClicked("ABORTED")
|
||||
setExecutionData({
|
||||
|
||||
@@ -393,6 +393,9 @@ export const validateJson = (showResult) => {
|
||||
if (typeof showResult === 'string') {
|
||||
showResult = showResult.split(" False").join(" false")
|
||||
showResult = showResult.split(" True").join(" true")
|
||||
|
||||
showResult.replaceAll("False,", "false,")
|
||||
showResult.replaceAll("True,", "true,")
|
||||
}
|
||||
|
||||
if (typeof showResult === "object" || typeof showResult === "array") {
|
||||
@@ -1247,9 +1250,9 @@ const Workflows = (props) => {
|
||||
|
||||
//flexDirection: !isMobile ? "column" : "row",
|
||||
const paperAppContainer = {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignContent: "space-between",
|
||||
//display: "flex",
|
||||
//flexWrap: "wrap",
|
||||
//alignContent: "space-between",
|
||||
};
|
||||
|
||||
const paperAppStyle = {
|
||||
@@ -1587,7 +1590,7 @@ const Workflows = (props) => {
|
||||
const NewWorkflowPaper = () => {
|
||||
const [hover, setHover] = React.useState(false);
|
||||
|
||||
const innerColor = "rgba(255,255,255,0.3)";
|
||||
const innerColor = "rgba(255,255,255,0.3)"
|
||||
const setupPaperStyle = {
|
||||
minHeight: paperAppStyle.minHeight,
|
||||
maxWidth: "100%",
|
||||
@@ -2224,7 +2227,7 @@ const Workflows = (props) => {
|
||||
// Update :)
|
||||
setTimeout(() => {
|
||||
getAvailableWorkflows();
|
||||
}, 2500);
|
||||
}, 4000);
|
||||
setSubmitLoading(false)
|
||||
setModalOpen(false);
|
||||
} else {
|
||||
@@ -3239,14 +3242,18 @@ const Workflows = (props) => {
|
||||
fullWidth
|
||||
value={filters}
|
||||
onChange={(chips) => {
|
||||
console.log("CHANGE: ", chips);
|
||||
setFilters(chips);
|
||||
findWorkflow(chips);
|
||||
}}
|
||||
onAdd={(chip) => {
|
||||
addFilter(chip);
|
||||
}}
|
||||
onDelete={(_, index) => {
|
||||
removeFilter(index);
|
||||
}}
|
||||
//onAdd={(chip) => {
|
||||
// console.log("ADd: ", chip);
|
||||
// addFilter(chip);
|
||||
//}}
|
||||
//onDelete={(_, index) => {
|
||||
// console.log("Remove: ", index);
|
||||
// removeFilter(index);
|
||||
//}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3485,9 +3492,9 @@ const Workflows = (props) => {
|
||||
/>
|
||||
: null}
|
||||
|
||||
<div style={{marginTop: 30, marginBottom: 50, marginLeft: 30, }}>
|
||||
<div style={{}}>
|
||||
{view === "grid" ? (
|
||||
<Grid container spacing={filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4} style={paperAppContainer}>
|
||||
<Grid container spacing={0/*filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4*/} style={paperAppContainer}>
|
||||
{/*<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
|
||||
<NewWorkflowPaper />
|
||||
{/*</Zoom>*/}
|
||||
|
||||
Reference in New Issue
Block a user